feat(tags): add mounted (#42)

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

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);
+  });
 });

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 });
+  });
 });

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<A extends Attrs>(
   el: TentNode<A> | HTMLElement,
   key: string,
-  value: string | boolean | number,
+  value: TagAttrsValues,
 ) {
+  if (key === 'mounted') {
+    return;
+  }
+
   if (typeof value === 'boolean') {
     if (value) {
       el.setAttribute(key, '');

src/tags.ts

@@ -26,6 +26,8 @@ function createTag(context: Context) {
     el.append(typeof children === 'number' ? children.toString() : children);
   }
 
+  attributes?.mounted?.({ el });
+
   return el;
 }
 

src/types.ts

@@ -23,9 +23,13 @@ export type TentNode<A extends Attrs = undefined> = 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<string, TagAttrsValues> & {
+  mounted?: ({ el }: { el: TentNode }) => void;
+};
 export type Tags = Record<
   string,
-  (children: Children, attrs?: object) => TentNode
+  (children: Children, attrs?: TagAttrs) => TentNode
 >;

src/walker.ts

@@ -19,6 +19,12 @@ function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
     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) {