From 641f4051e6c15b4f6d0a0df3432202328de0eb07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20L=2E=20K=2E=20S=C3=B8rensen?=
 <sks1993@gmail.com>
Date: Mon, 27 May 2024 20:27:56 +0200
Subject: [PATCH] feat(tags): add `mounted` (#42)

---
 CHANGELOG.md                     | 6 ++++++
 src/__tests__/attributes.test.ts | 8 ++++++++
 src/__tests__/tags.test.ts       | 8 ++++++++
 src/attributes.ts                | 8 ++++++--
 src/tags.ts                      | 2 ++
 src/types.ts                     | 8 ++++++--
 src/walker.ts                    | 6 ++++++
 7 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e08d719..273a4552 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 1fb664dc..3d66c0ba 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 ce810ab9..89ef0095 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 1529e2ea..bafe1db5 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<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, '');
diff --git a/src/tags.ts b/src/tags.ts
index 0edfee30..c8ca138c 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 fc6e1466..c16b87de 100644
--- a/src/types.ts
+++ b/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
 >;
diff --git a/src/walker.ts b/src/walker.ts
index a68a739a..fc3dd298 100644
--- a/src/walker.ts
+++ b/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) {