feat: Add jsxDomAttributeHook and jsxDomChildrenHook for reactive attribute and child updates

- Introduced `jsxDomAttributeHook` to intercept attribute assignment and enable reactive updates.
- Added `jsxDomChildrenHook` to allow dynamic replacement of child elements using custom logic.
- These hooks are designed to integrate seamlessly with reactive libraries like Preact Signals.
- Ensured backward compatibility by making the hooks opt-in.
- Added tests to validate the functionality of the hooks in various scenarios.

This feature enhances the flexibility of `jsx-dom` by enabling developers to implement reactive DOM updates with minimal effort.

Author: volkanceylan

src/jsx-dom.ts

@@ -2,7 +2,9 @@ import { isRef } from "./ref"
 import {
   forEach,
   isArrayLike,
+  isAttributeHook,
   isBoolean,
+  isChildrenHook,
   isComponentClass,
   isElement,
   isFunction,
@@ -219,6 +221,8 @@ function appendChild(
     const shadowRoot = (node as HTMLElement).attachShadow(child.attr)
     appendChild(child.children, shadowRoot)
     attachRef(child.ref, shadowRoot)
+  } else if (isChildrenHook(child)) {
+    appendChild(child.jsxDomChildrenHook.call(child, node), node)
   }
 }
 
@@ -406,7 +410,11 @@ function attrNS(node: Element, namespace: string, key: string, value: string | n
 
 function attributes(attr: object, node: HTMLElement | SVGElement) {
   for (const key of keys(attr)) {
-    attribute(key, attr[key], node)
+    let value: any = attr[key]
+    if (isAttributeHook(value)) {
+      value = value.jsxDomAttributeHook(node, key)
+    }
+    attribute(key, value, node)
   }
   return node
 }

src/util.ts

@@ -40,6 +40,14 @@ export function isArrayLike(obj: any): obj is ArrayLike<any> {
   return isObject(obj) && typeof obj.length === "number" && typeof obj.nodeType !== "number"
 }
 
+export function isAttributeHook(val: any): val is { jsxDomAttributeHook: (node: HTMLElement | SVGElement, attr: string) => any } {
+  return isObject(val) && isFunction(val.jsxDomAttributeHook)
+}
+
+export function isChildrenHook(val: any): val is { jsxDomChildrenHook: (parent: HTMLElement | SVGElement) => any } {
+  return isObject(val) && isFunction(val.jsxDomChildrenHook)
+}
+
 export function forEach<V = any>(value: { [key: string]: V }, fn: (value: V, key: string) => void) {
   if (!value) return
   for (const key of keys(value)) {

test/hooks.test.tsx

@@ -85,4 +85,52 @@ describe("hooks", () => {
     cls.toggle("container", false)
     expect(cls.contains("container")).toBe(false)
   })
-})
+
+  it("supports jsxDomAttributeHook", () => {
+    let callValue: any, callNode: HTMLElement | SVGElement, callTimes: number = 0
+    function hook(node: HTMLElement | SVGElement, attr: string) {
+      callNode = node;
+      callValue = this;
+      callTimes++
+      return `hooked:${attr}`
+    }
+    const hookedValue = { jsxDomAttributeHook: hook }
+    const div = <div title={hookedValue} />
+    expect(callTimes).toBe(1)
+    expect(callValue).toBe(hookedValue)
+    expect(callNode).toBe(div)
+    expect(div.getAttribute("title")).toBe("hooked:title")
+  })
+
+  it("supports jsxDomChildrenHook as sole content", () => {
+    let callValue: any, callParentNode: HTMLElement | SVGElement, callTimes: number = 0
+    function hook(parentNode: HTMLElement | SVGElement) {
+      callParentNode = parentNode
+      callValue = this
+      callTimes++
+      return "test"
+    }
+    const hookedValue = { jsxDomChildrenHook: hook }
+    const div = <div>{hookedValue}</div>
+    expect(callTimes).toBe(1)
+    expect(callValue).toBe(hookedValue)
+    expect(callParentNode).toBe(div)
+    expect(div.textContent).toBe("test")
+  })
+
+  it("supports jsxDomChildrenHook inside a fragment", () => {
+    let callValue: any, callParentNode: HTMLElement | SVGElement, callTimes: number = 0
+    function hook(parentNode: HTMLElement | SVGElement) {
+      callParentNode = parentNode
+      callValue = this
+      callTimes++
+      return "test"
+    }
+    const hookedValue = { jsxDomChildrenHook: hook }
+    const div = <div><>{hookedValue}</></div>
+    expect(callTimes).toBe(1)
+    expect(callValue).toBe(hookedValue)
+    expect(callParentNode instanceof DocumentFragment).toBe(true)
+    expect(div.textContent).toBe("test")
+  })
+})