diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e08d71..273a455 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [Unreleased] + +### Added + +- Add `mounted` to `tags` to run code after the tag has been mounted + ## [0.0.32] - 2024-05-20 ### Fixed diff --git a/src/__tests__/attributes.test.ts b/src/__tests__/attributes.test.ts index 1fb664d..3d66c0b 100644 --- a/src/__tests__/attributes.test.ts +++ b/src/__tests__/attributes.test.ts @@ -34,4 +34,12 @@ describe('attributes.ts', () => { expect(el.value).toBe('test'); }); + + test("doesn't add `mounted` as an attribute", () => { + const el = document.createElement('div'); + + addAttribute(el, 'mounted', 'test'); + + expect(el.hasAttribute('mounted')).toBe(false); + }); }); diff --git a/src/__tests__/tags.test.ts b/src/__tests__/tags.test.ts index ce810ab..89ef009 100644 --- a/src/__tests__/tags.test.ts +++ b/src/__tests__/tags.test.ts @@ -68,4 +68,12 @@ describe('tags.ts', () => { expect(el.$tent.attributes['data-bar']).toBe('baz'); expect(el.$tent.attributes['onclick']).toBe(fn); }); + + test('mounted', () => { + const fn = jest.fn(); + const el = createTag(['div', 'test', { mounted: fn }]); + + expect(fn).toHaveBeenCalledTimes(1); + expect(fn).toHaveBeenCalledWith({ el }); + }); }); diff --git a/src/attributes.ts b/src/attributes.ts index 1529e2e..bafe1db 100644 --- a/src/attributes.ts +++ b/src/attributes.ts @@ -1,10 +1,14 @@ -import { type TentNode, type Attrs } from './types'; +import { type TentNode, type Attrs, type TagAttrsValues } from './types'; function addAttribute( el: TentNode | HTMLElement, key: string, - value: string | boolean | number, + value: TagAttrsValues, ) { + if (key === 'mounted') { + return; + } + if (typeof value === 'boolean') { if (value) { el.setAttribute(key, ''); diff --git a/src/tags.ts b/src/tags.ts index 0edfee3..c8ca138 100644 --- a/src/tags.ts +++ b/src/tags.ts @@ -26,6 +26,8 @@ function createTag(context: Context) { el.append(typeof children === 'number' ? children.toString() : children); } + attributes?.mounted?.({ el }); + return el; } diff --git a/src/types.ts b/src/types.ts index fc6e146..c16b87d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -23,9 +23,13 @@ export type TentNode = Node & }; export type Children = string | number | TentNode | (Node | string | Context)[]; -export type Context = [string, Children, object | undefined]; +export type Context = [string, Children, TagAttrs | undefined]; +export type TagAttrsValues = string | boolean | number | Function; +type TagAttrs = Record & { + mounted?: ({ el }: { el: TentNode }) => void; +}; export type Tags = Record< string, - (children: Children, attrs?: object) => TentNode + (children: Children, attrs?: TagAttrs) => TentNode >; diff --git a/src/walker.ts b/src/walker.ts index a68a739..fc3dd29 100644 --- a/src/walker.ts +++ b/src/walker.ts @@ -19,6 +19,12 @@ function walker(oldNode: TentNode, newNode: TentNode) { return; } + if (oldNode.$tent == null || newNode.$tent == null) { + oldNode.replaceWith(newNode); + + return; + } + // Remove attributes that are not present in the new node for (const key in oldNode.$tent.attributes) { if (newNode.$tent.attributes[key] == null) {