0.2.0-alpha.13

Author: DeepDoge

apps/vite/src/examples/counter-example.ts

@@ -3,35 +3,35 @@ import { computed, Lifecycle, ref, Signal, tags } from "@purifyjs/core";
 const { div, section, button, ul, li, input } = tags;
 
 function App() {
-    return div().id("app").children(Counter());
+    return div().id("app").replaceChildren$(Counter());
 }
 
 function Counter() {
     const count = ref(0);
     const double = count.derive((count) => count * 2);
     const half = computed(() => count.val * 0.5);
 
-    return div().children(
+    return div().replaceChildren$(
         section({ class: "input" })
             .ariaLabel("Input")
-            .children(
+            .replaceChildren$(
                 button()
                     .title("Decrement by 1")
                     .onclick(() => count.val--)
                     .textContent("-"),
-                input().type("number").effect(useBindNumber(count)).step("1"),
+                input().type("number").$effect(useBindNumber(count)).step("1"),
                 button()
                     .title("Increment by 1")
                     .onclick(() => count.val++)
                     .textContent("+"),
             ),
         section({ class: "output" })
             .ariaLabel("Output")
-            .children(
-                ul().children(
-                    li().children("Count: ", count),
-                    li().children("Double: ", double),
-                    li().children("Half: ", half),
+            .replaceChildren$(
+                ul().replaceChildren$(
+                    li().replaceChildren$("Count: ", count),
+                    li().replaceChildren$("Double: ", double),
+                    li().replaceChildren$("Half: ", half),
                 ),
             ),
     );
@@ -54,4 +54,4 @@ function useBindNumber(
     };
 }
 
-document.body.append(App().node);
+document.body.append(App().$node);

apps/vite/src/examples/shadowroot-example.ts

@@ -3,22 +3,22 @@ import { Builder, ref, tags } from "@purifyjs/core";
 const { div, button } = tags;
 
 function App() {
-    return div().id("app").children(Counter());
+    return div().id("app").replaceChildren$(Counter());
 }
 
 function Counter() {
     const host = div();
-    const shadow = new Builder(host.node.attachShadow({ mode: "open" }));
+    const shadow = new Builder(host.$node.attachShadow({ mode: "open" }));
 
     const count = ref(0);
 
-    shadow.children(
+    shadow.replaceChildren$(
         button()
             .title("Click me!")
             .onclick(() => count.val++)
-            .children("Count:", count),
+            .replaceChildren$("Count:", count),
     );
     return host;
 }
 
-document.body.append(App().node);
+document.body.append(App().$node);

apps/vite/src/examples/web-component-example.ts

@@ -3,7 +3,7 @@ import { Builder, ref, tags, WithLifecycle } from "@purifyjs/core";
 const { div, button } = tags;
 
 function App() {
-    return div().id("app").children(new CounterElement());
+    return div().id("app").replaceChildren$(new CounterElement());
 }
 
 declare global {
@@ -21,13 +21,13 @@ class CounterElement extends WithLifecycle(HTMLElement) {
         super();
         const self = new Builder<CounterElement>(this);
 
-        self.children(
+        self.replaceChildren$(
             button()
                 .title("Click me!")
                 .onclick(() => this.#count.val++)
-                .children("Count:", this.#count),
+                .replaceChildren$("Count:", this.#count),
         );
     }
 }
 
-document.body.append(App().node);
+document.body.append(App().$node);

deno.json

@@ -1,6 +1,6 @@
 {
     "name": "@purifyjs/core",
-    "version": "0.2.0-alpha.12",
+    "version": "0.2.0-alpha.13",
     "workspace": ["./apps/vite", "./apps/size"],
     "exports": {
         ".": "./lib/mod.ts",

lib/tags.ts

@@ -79,6 +79,11 @@ type IsProxyableProperty<T, K extends keyof T> = If<
     Not<Extends<K, keyof EventTarget>> & ((Not<IsReadonly<T, K>> & Not<IsFunction<T[K]>>) | (IsFunction<T[K]> & IsNullable<T[K]>))
 >;
 
+type IsReflectFunction<T, K extends keyof T> = If<
+    & IsFunction<T[K]>
+    & Extends<K, keyof Lifecycle>
+>;
+
 type IsProxyableFunction<T, K extends keyof T> = If<
     & Not<Extends<K, keyof EventTarget>>
     & (
@@ -119,7 +124,7 @@ type ProxyFunctionArgs<T extends Node, K extends keyof T, Args extends unknown[]
         : T extends WithLifecycle ? RecursiveSignalArgs<Args>
         : Args;
 
-type MaybeNodeLikeArg<T> = T extends Node ? T | Builder<T> | null : T;
+type MaybeNodeLikeArg<T> = T extends Node ? T | Builder<T> | null : T extends string ? string | { toString(): string } : T;
 type MaybeNodeLikeArgs<Args extends unknown[], R extends unknown[] = []> = Args extends [infer Head, ...infer Tail]
     ? MaybeNodeLikeArgs<Tail, [...R, MaybeNodeLikeArg<Head>]>
     : Args extends (infer U)[] ? MaybeNodeLikeArg<U>[]
@@ -134,6 +139,9 @@ type ProxyNodeFunctionArgs<
     : RecursiveArrayArgs<Args>;
 
 export type Builder<T extends Node = Node> =
+    & {
+        [K in keyof T as If<IsReflectFunction<T, K>, K>]: T[K] extends (...args: infer Args) => any ? (...args: Args) => Builder<T> : never;
+    }
     & {
         [K in keyof T as If<IsProxyableProperty<T, K>, K>]: (value: ProxyPropertyArg<T, K>) => Builder<T>;
     }
@@ -199,7 +207,7 @@ export let Builder: BuilderConstructor = function <T extends Node & Partial<With
 
             type Arg = null | Builder | Node | string | Arg[] | Signal<Arg>;
 
-            return (target[targetName] ??= instancesOf(node[nodeName], Function) && !node.hasOwnProperty(nodeName)
+            return (target[targetName] ??= instancesOf(node[nodeName], Function) && !Object.hasOwn(node, nodeName)
                 ? nodeName == targetName
                     ? (...args: unknown[]) => {
                         (node[nodeName] as Fn)(...args);