- new signals

- rename $effect to $bind
- type fixes
- back to signal render wrappers

Author: DeepDoge

README.md

@@ -23,7 +23,7 @@
 - 🌐 Builder doesn't only work with `HTMLElement`(s) but works with any `Node` instance including `ShadowRoot`, `DocumentFragment`,
   `Document`... any `Node` type, including future ones.
 - 🎩 Builder converts existing methods on the `Node` instance to builder pattern with `Proxy`.
-- ⚡ **Uses signals for reactivity.**
+- ⚡ **Signal implementation that makes sense and useable.**
 - 🧙 **Signals are extendable,** allowing chaining with utilities like .pipe() and .derive() to build custom workflows..
 - ✂️ Allows direct DOM manipulation.
 - 📁 No special file extensions.
@@ -60,7 +60,7 @@ To install **purify.js**, follow the [jsr.io/@purifyjs/core](https://jsr.io/@pur
 ### Counter
 
 ```ts
-import { computed, Lifecycle, ref, Signal, tags } from "@purifyjs/core";
+import { computed, Lifecycle, Signal, state, tags } from "@purifyjs/core";
 
 const { div, section, button, ul, li, input } = tags;
 
@@ -69,7 +69,7 @@ function App() {
 }
 
 function Counter() {
-    const count = ref(0);
+    const count = state(0);
     const double = count.derive((count) => count * 2);
     const half = computed(() => count.val * 0.5);
 
@@ -81,7 +81,7 @@ function Counter() {
                     .title("Decrement by 1")
                     .onclick(() => count.val--)
                     .textContent("-"),
-                input().type("number").$effect(useBindNumber(count)).step("1"),
+                input().type("number").$bind(useBindNumber(count)).step("1"),
                 button()
                     .title("Increment by 1")
                     .onclick(() => count.val++)
@@ -122,7 +122,7 @@ document.body.append(App().$node);
 ### ShadowRoot
 
 ```ts
-import { Builder, ref, tags } from "@purifyjs/core";
+import { Builder, state, tags } from "@purifyjs/core";
 
 const { div, button } = tags;
 
@@ -134,7 +134,7 @@ function Counter() {
     const host = div();
     const shadow = new Builder(host.$node.attachShadow({ mode: "open" }));
 
-    const count = ref(0);
+    const count = state(0);
 
     shadow.replaceChildren$(
         button()
@@ -151,7 +151,7 @@ document.body.append(App().$node);
 ### Web Components
 
 ```ts
-import { Builder, ref, tags, WithLifecycle } from "@purifyjs/core";
+import { Builder, state, tags, WithLifecycle } from "@purifyjs/core";
 
 const { div, button } = tags;
 
@@ -170,7 +170,7 @@ class CounterElement extends WithLifecycle(HTMLElement) {
         customElements.define("x-counter", CounterElement);
     }
 
-    #count = ref(0);
+    #count = state(0);
 
     constructor() {
         super();
@@ -267,7 +267,7 @@ JSX is not part of this library natively, but a wrapper can be made quite easily
   WithLifecycle(HTMLElement); // or
   WithLifecycle(HTMLDivElement);
   ```
-  It adds a lifecycle function called `$effect()` to any `HTMLElement` type. Which can later be extended by a custom element like
+  It adds a lifecycle function called `$bind()` to any `HTMLElement` type. Which can later be extended by a custom element like
   ```ts
   class MyElement extends WithLifecycle(HTMLElement)
   ```

apps/size/src/app.ts

@@ -1,2 +1,2 @@
-import { computed, tags } from "@purifyjs/core";
-[computed, tags];
+import { Builder, computed, signal, state, tags, WithLifecycle } from "@purifyjs/core";
+[computed, state, signal, Builder, tags, WithLifecycle];

apps/vite/src/app.ts

@@ -1,6 +1,6 @@
-import { Builder, ref, tags } from "@purifyjs/core";
+import { Builder, state, tags } from "@purifyjs/core";
 
-const time = ref(new Date().toLocaleString(), (set) => {
+const time = state(new Date().toLocaleString(), (set) => {
     const interval = setInterval(() => set(new Date().toLocaleString()), 1000);
     return () => {
         clearInterval(interval);

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

@@ -1,4 +1,4 @@
-import { computed, Lifecycle, ref, Signal, tags } from "@purifyjs/core";
+import { computed, Lifecycle, Signal, state, tags } from "@purifyjs/core";
 
 const { div, section, button, ul, li, input } = tags;
 
@@ -7,7 +7,7 @@ function App() {
 }
 
 function Counter() {
-    const count = ref(0);
+    const count = state(0);
     const double = count.derive((count) => count * 2);
     const half = computed(() => count.val * 0.5);
 
@@ -19,7 +19,9 @@ function Counter() {
                     .title("Decrement by 1")
                     .onclick(() => count.val--)
                     .textContent("-"),
-                input().type("number").$effect(useBindNumber(count)).step("1"),
+                input().type("number").$bind(useBindNumber(count)).step(
+                    "1",
+                ),
                 button()
                     .title("Increment by 1")
                     .onclick(() => count.val++)

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

@@ -1,4 +1,4 @@
-import { Builder, ref, tags } from "@purifyjs/core";
+import { Builder, state, tags } from "@purifyjs/core";
 
 const { div, button } = tags;
 
@@ -10,7 +10,7 @@ function Counter() {
     const host = div();
     const shadow = new Builder(host.$node.attachShadow({ mode: "open" }));
 
-    const count = ref(0);
+    const count = state(0);
 
     shadow.replaceChildren$(
         button()

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

@@ -1,4 +1,4 @@
-import { Builder, ref, tags, WithLifecycle } from "@purifyjs/core";
+import { Builder, state, tags, WithLifecycle } from "@purifyjs/core";
 
 const { div, button } = tags;
 
@@ -17,7 +17,7 @@ class CounterElement extends WithLifecycle(HTMLElement) {
         customElements.define("x-counter", CounterElement);
     }
 
-    #count = ref(0);
+    #count = state(0);
 
     constructor() {
         super();

deno.lock

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { ref } from "./signals.ts";
+import { state } from "./signals.ts";
 import { Builder, type tags as tags_type, type WithLifecycle } from "./dom.ts";
 declare const tags: typeof tags_type;
 
@@ -31,29 +31,29 @@ _(() => {
 
     svgBuilder.replaceChildren("123");
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    svgBuilder.replaceChildren(ref("123"));
+    svgBuilder.replaceChildren(state("123"));
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    svgBuilder.ariaLabel(ref("foo"));
+    svgBuilder.ariaLabel(state("foo"));
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    svgBuilder.$effect(() => {});
+    svgBuilder.$bind(() => {});
 
     divBuilder.replaceChildren("123");
     divBuilder.replaceChildren$(divWithLifecycleBuilder);
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    divBuilder.replaceChildren(ref("123"));
+    divBuilder.replaceChildren(state("123"));
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    divBuilder.ariaLabel(ref("foo"));
+    divBuilder.ariaLabel(state("foo"));
     /// @ts-expect-error Don't allow signals on elements without lifecycle
-    divBuilder.$effect(() => {});
+    divBuilder.$bind(() => {});
 
     divWithLifecycleBuilder.replaceChildren("123");
-    divWithLifecycleBuilder.replaceChildren(ref("123"));
+    divWithLifecycleBuilder.replaceChildren(state("123"));
     divWithLifecycleBuilder.replaceChildren$(divWithLifecycleBuilder);
-    divWithLifecycleBuilder.ariaLabel(ref("foo"));
-    divWithLifecycleBuilder.$effect(() => {});
+    divWithLifecycleBuilder.ariaLabel(state("foo"));
+    divWithLifecycleBuilder.$bind(() => {});
 
     // Form element sometimes might cause issues since it has [key: string] and [index: number] in it, so be careful, keep this in mind
     formWithLifecycleBuilder.replaceChildren$("");
-    formWithLifecycleBuilder.$effect(() => {});
+    formWithLifecycleBuilder.$bind(() => {});
     formWithLifecycleBuilder.ariaAtomic("true");
 });

lib/dom.test.ts

@@ -1,7 +1,7 @@
 // Embrace some optimal ugly code, if it makes the minified code smaller.
 
 import type { StrictARIA } from "./aria.ts";
-import { computed, Signal } from "./signals.ts";
+import { Signal } from "./signals.ts";
 import type { _Event, Equal, Extends, Fn, If, IsReadonly, Not } from "./utils.ts";
 import { instancesOf } from "./utils.ts";
 
@@ -136,7 +136,9 @@ 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 extends string ? string | { toString(): string } : T;
+type MaybeNodeLikeArg<T> = T extends Node ? T | Builder<T> | null | undefined
+    : T extends string ? string | { toString(): string } | null | undefined
+    : 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>[]
@@ -205,7 +207,7 @@ export let Builder: BuilderConstructor = function <T extends Node & Partial<With
         };
 
         if (instancesOf(value, Signal)) {
-            node.$effect!(() => value.follow(setOrRemoveAttribute, true));
+            node.$bind!(() => value.follow(setOrRemoveAttribute, true));
         } else {
             setOrRemoveAttribute(value);
         }
@@ -222,49 +224,14 @@ export let Builder: BuilderConstructor = function <T extends Node & Partial<With
                 return target[targetName];
             }
 
-            nodeName = (targetName.at(-1) == "$" ? targetName.slice(0, -1) : targetName) as keyof T & string;
+            nodeName = (targetName.at(-1) == "$" ? (targetName.slice(0, -1)) : targetName) as never;
             fn = (instancesOf(node[nodeName], Function) && !Object.hasOwn(node, nodeName))
-                ? (nodeName == targetName) ? (args: unknown[]) => (node[nodeName] as Fn)(...args) : ((
-                    args: unknown[],
-                    computedArgs: Signal<unknown[]>,
-                    hasSignal: boolean | undefined,
-                    unwrap = (value: unknown): string | Node | { toString(): string } => {
-                        if (value == null) {
-                            return unwrap([]);
-                        }
-                        if (instancesOf(value, Builder)) {
-                            return value.$node;
-                        }
-                        if (instancesOf(value, Signal)) {
-                            hasSignal = true;
-                            return unwrap(value.val);
-                        }
-                        if (instancesOf(value, Array)) {
-                            return unwrap(new Builder(document.createDocumentFragment()).append(...value.map(unwrap) as never[]));
-                        }
-                        return value;
-                    },
-                    unwrappedArgs: unknown[],
-                ) => {
-                    // This is the best i can come up with
-                    // Normally if we had a persistent document fragment with lifecyle,
-                    // we could have just wrapped signals with it in the DOM. Not doing these at all.
-                    //
-                    // I can wrap them with an element with lifecycle and give it `display:contents`,
-                    // but that causes other issues in the dx
-                    unwrappedArgs = args.map(unwrap);
-                    if (hasSignal) {
-                        computedArgs = computed(() => args.map(unwrap));
-                        cleanups[targetName] = node.$effect!(() =>
-                            computedArgs.follow((newArgs) => (node[nodeName] as Fn)(...newArgs), true)
-                        );
-                    } else {
-                        (node[nodeName] as Fn)(...unwrappedArgs);
-                    }
-                })
+                ? (nodeName == targetName)
+                    ? (args: unknown[]) => (node[nodeName] as Fn)(...args)
+                    : ((args: Member[]) => (node[nodeName] as Fn)(...args.map(toChild)))
                 : (([value]: [unknown]) => {
                     if (instancesOf(value, Signal)) {
-                        cleanups[targetName] = node.$effect!(() => value.follow((value) => node[nodeName] = value as never, true));
+                        cleanups[targetName] = node.$bind!(() => value.follow((value) => node[nodeName] = value as never, true));
                     } else {
                         node[nodeName] = value as never;
                     }
@@ -290,12 +257,12 @@ export namespace Lifecycle {
     export type OffConnected = () => void;
 }
 export type Lifecycle<T extends HTMLElement = HTMLElement> = {
-    $effect(callback: Lifecycle.OnConnected<T>): Lifecycle.OffConnected;
+    $bind(callback: Lifecycle.OnConnected<T>): Lifecycle.OffConnected;
 };
 
 export type WithLifecycle<T extends HTMLElement = HTMLElement> = T & Lifecycle<T>;
 
-let withLifecycleCache = new Map<{ new (): HTMLElement }, { new (): WithLifecycle<HTMLElement> }>();
+let withLifecycleCache = new WeakMap<{ new (): HTMLElement }, { new (): WithLifecycle<HTMLElement> }>();
 export let WithLifecycle = <BaseConstructor extends { new (...params: any[]): HTMLElement }>(
     Base: BaseConstructor,
 ): {
@@ -311,14 +278,14 @@ export let WithLifecycle = <BaseConstructor extends { new (...params: any[]): HT
                 #callbacks = new Map<Lifecycle.OnConnected<Base>, ReturnType<Lifecycle.OnConnected<Base>> | null>();
 
                 connectedCallback(): void {
-                    this.#callbacks.keys().forEach((callback) => this.#callbacks.set(callback, callback(this)));
+                    this.#callbacks.forEach((_, callback) => this.#callbacks.set(callback, callback(this)));
                 }
 
                 disconnectedCallback(): void {
                     this.#callbacks.forEach((disconnectedCallbackOrNullish) => disconnectedCallbackOrNullish?.());
                 }
 
-                $effect(callback: Lifecycle.OnConnected<Base>): Lifecycle.OffConnected {
+                $bind(callback: Lifecycle.OnConnected<Base>): Lifecycle.OffConnected {
                     this.#callbacks.set(callback, null);
                     return () => {
                         let off = this.#callbacks.get(callback);
@@ -332,3 +299,20 @@ export let WithLifecycle = <BaseConstructor extends { new (...params: any[]): HT
 
     return constructor as never;
 };
+
+export type Member = RecursiveSignalAndArrayOf<MaybeNodeLikeArg<Node | string>>;
+let toChild = (member: Member): string | Node => {
+    if (instancesOf(member, Builder)) {
+        return member.$node;
+    }
+    if (instancesOf(member, Signal)) {
+        return toChild(
+            tags.div({ style: "display:contents" })
+                .$bind((element) => member.follow((value) => element.replaceChildren(toChild(value)), true)),
+        );
+    }
+    if (instancesOf(member, Array)) {
+        return toChild(new Builder(document.createDocumentFragment()).append(...member.map(toChild) as never[]));
+    }
+    return (member satisfies { toString(): string } | null | undefined) as string;
+};