@sigil-dev/runtime 0.4.0 → 0.6.0

package/boundary.ts

@@ -1,44 +1,44 @@
-/**
- * Error boundary for Sigil components.
- *
- * Wraps children so that errors during rendering are caught
- * and handled instead of crashing the app.
- *
- * Usage:
- *   <Boundary
- *     fallbackError={({ error, reset }) => <button onClick={reset}>Retry</button>}
- *     onError={(e) => reportToSentry(e)}
- *   >
- *     <FlakyComponent />
- *   </Boundary>
- */
-
-import { createSignal } from "./index.js";
-
-interface BoundaryProps {
-	children: any;
-	fallbackError?: (ctx: { error: Error; reset: () => void }) => any;
-	onError?: (error: Error) => void;
-}
-
-export function Boundary(props: BoundaryProps): any {
-	const error = createSignal<Error | null>(null);
-
-	const reset = () => error.set(null);
-
-	if (error()) {
-		return props.fallbackError
-			? props.fallbackError({ error: error()!, reset })
-			: null;
-	}
-
-	try {
-		return props.children;
-	} catch (e) {
-		props.onError?.(e as Error);
-		error.set(e as Error);
-		return props.fallbackError
-			? props.fallbackError({ error: e as Error, reset })
-			: null;
-	}
-}
+/**
+ * Error boundary for Sigil components.
+ *
+ * Wraps children so that errors during rendering are caught
+ * and handled instead of crashing the app.
+ *
+ * Usage:
+ *   <Boundary
+ *     fallbackError={({ error, reset }) => <button onClick={reset}>Retry</button>}
+ *     onError={(e) => reportToSentry(e)}
+ *   >
+ *     <FlakyComponent />
+ *   </Boundary>
+ */
+
+import { createSignal } from "./index.js";
+
+interface BoundaryProps {
+	children: any;
+	fallbackError?: (ctx: { error: Error; reset: () => void }) => any;
+	onError?: (error: Error) => void;
+}
+
+export function Boundary(props: BoundaryProps): any {
+	const error = createSignal<Error | null>(null);
+
+	const reset = () => error.set(null);
+
+	if (error()) {
+		return props.fallbackError
+			? props.fallbackError({ error: error()!, reset })
+			: null;
+	}
+
+	try {
+		return props.children;
+	} catch (e) {
+		props.onError?.(e as Error);
+		error.set(e as Error);
+		return props.fallbackError
+			? props.fallbackError({ error: e as Error, reset })
+			: null;
+	}
+}

package/index.test.ts

@@ -753,32 +753,32 @@ describe("hydration: full element tree claim", () => {
 });
 
 describe("Scary reactivity", () => {
-    test("effect unsubscribes from stale dependencies", () => {
-        const condition = createSignal(true);
-        const a = createSignal(1);
-        const b = createSignal(1);
-        let runs = 0;
-
-        createEffect(() => {
-            runs++;
-            if (condition()) {
-                a(); // read a only when condition is true
-            } else {
-                b(); // read b only when condition is false
-            }
-        });
-
-        expect(runs).toBe(1);
-
-        // flip condition, effect should now track b, not a
-        condition.set(false);
-        expect(runs).toBe(2);
-
-        // updating a should NOT trigger the effect anymore
-        a.set(99);
-        expect(runs).toBe(2); // ← this will fail with current implementation
-    });
-})
+	test("effect unsubscribes from stale dependencies", () => {
+		const condition = createSignal(true);
+		const a = createSignal(1);
+		const b = createSignal(1);
+		let runs = 0;
+
+		createEffect(() => {
+			runs++;
+			if (condition()) {
+				a(); // read a only when condition is true
+			} else {
+				b(); // read b only when condition is false
+			}
+		});
+
+		expect(runs).toBe(1);
+
+		// flip condition, effect should now track b, not a
+		condition.set(false);
+		expect(runs).toBe(2);
+
+		// updating a should NOT trigger the effect anymore
+		a.set(99);
+		expect(runs).toBe(2); // ← this will fail with current implementation
+	});
+});
 
 describe("withEffectScope", () => {
 	test("collects effects created during fn()", () => {
@@ -820,8 +820,14 @@ describe("withEffectScope", () => {
 		let runsA = 0;
 		let runsB = 0;
 		const dispose = withEffectScope(() => {
-			createEffect(() => { a(); runsA++; });
-			createEffect(() => { b(); runsB++; });
+			createEffect(() => {
+				a();
+				runsA++;
+			});
+			createEffect(() => {
+				b();
+				runsB++;
+			});
 		});
 		a.set(1);
 		b.set(1);
@@ -841,10 +847,16 @@ describe("withEffectScope", () => {
 		let outsideRuns = 0;
 		let insideRuns = 0;
 
-		createEffect(() => { count(); outsideRuns++; });
+		createEffect(() => {
+			count();
+			outsideRuns++;
+		});
 
 		const dispose = withEffectScope(() => {
-			createEffect(() => { count(); insideRuns++; });
+			createEffect(() => {
+				count();
+				insideRuns++;
+			});
 		});
 
 		count.set(1);
@@ -855,7 +867,7 @@ describe("withEffectScope", () => {
 
 		count.set(2);
 		expect(outsideRuns).toBe(3); // still running
-		expect(insideRuns).toBe(2);  // stopped
+		expect(insideRuns).toBe(2); // stopped
 	});
 
 	test("nested scopes: inner dispose doesn't affect outer", () => {
@@ -864,10 +876,16 @@ describe("withEffectScope", () => {
 		let innerRuns = 0;
 
 		const disposeOuter = withEffectScope(() => {
-			createEffect(() => { count(); outerRuns++; });
+			createEffect(() => {
+				count();
+				outerRuns++;
+			});
 			// simulates a child component scope inside a page scope
 			const disposeInner = withEffectScope(() => {
-				createEffect(() => { count(); innerRuns++; });
+				createEffect(() => {
+					count();
+					innerRuns++;
+				});
 			});
 			disposeInner();
 		});
@@ -886,7 +904,10 @@ describe("withEffectScope", () => {
 		let memoRuns = 0;
 		const dispose = withEffectScope(() => {
 			// createMemo internally calls createEffect
-			const doubled = createMemo(() => { memoRuns++; return count() * 2; });
+			const doubled = createMemo(() => {
+				memoRuns++;
+				return count() * 2;
+			});
 			expect(doubled()).toBe(0);
 		});
 		expect(memoRuns).toBe(1);
@@ -902,7 +923,10 @@ describe("withEffectScope", () => {
 		const count = createSignal(0);
 		let runs = 0;
 		const dispose = withEffectScope(() => {
-			createEffect(() => { count(); runs++; });
+			createEffect(() => {
+				count();
+				runs++;
+			});
 		});
 		dispose();
 		dispose(); // second call must not throw or double-fire

package/index.ts

@@ -1,444 +1,451 @@
-export const SIGIL_SAFE = Symbol.for("sigil.safe");
-export class SafeHtml {
-    [SIGIL_SAFE] = true;
-    constructor(public v: string) { }
-    toString() {
-        return this.v;
-    }
-}
-
-let currentEffect: (() => void) | null = null;
-let currentDeps: Set<Set<() => void>> | null = null;
-
-let batchDepth = 0;
-const pendingEffects = new Set<() => void>();
-
-const targetDepsMap = new WeakMap<
-    object,
-    Map<string | symbol, Set<() => void>>
->();
-
-function getDeps(target: object, key: string | symbol): Set<() => void> {
-    let deps = targetDepsMap.get(target);
-    if (!deps) {
-        deps = new Map();
-        targetDepsMap.set(target, deps);
-    }
-    let set = deps.get(key);
-    if (!set) {
-        set = new Set();
-        deps.set(key, set);
-    }
-    return set;
-}
-
-function track(target: object, key: string | symbol) {
-    if (currentEffect && currentDeps) {
-        const deps = getDeps(target, key);
-        deps.add(currentEffect);
-        currentDeps.add(deps); // Set, deduplicates automatically
-    }
-}
-
-function trigger(target: object, key: string | symbol) {
-    const deps = targetDepsMap.get(target);
-    if (!deps) return;
-    const set = deps.get(key);
-    if (!set) return;
-    for (const fn of [...set]) {
-        if (batchDepth > 0) pendingEffects.add(fn);
-        else fn();
-    }
-}
-
-const proxyCache = new WeakMap<object, object>();
-const reactiveTargets = new WeakSet<object>();
-
-function createReactiveProxy<T extends object>(target: T): T {
-    const existing = proxyCache.get(target);
-    if (existing) return existing as T;
-
-    const proxy = new Proxy(target, {
-        get(target, key, receiver) {
-            if (key === "set") {
-                return (newValue: T) => {
-                    const oldKeys = new Set(Object.keys(target));
-                    const newKeys = new Set(Object.keys(newValue));
-                    for (const k of oldKeys) {
-                        if (!newKeys.has(k)) {
-                            delete (target as any)[k];
-                            trigger(target, k);
-                        }
-                    }
-                    for (const k of newKeys) {
-                        (target as any)[k] = (newValue as any)[k];
-                        trigger(target, k);
-                    }
-                    if (Array.isArray(target)) {
-                        trigger(target, "length");
-                    }
-                };
-            }
-
-            if (key === "peek") {
-                return () => target;
-            }
-
-            if (typeof key === "symbol") {
-                return Reflect.get(target, key, receiver);
-            }
-
-            track(target, key);
-            const value = target[key as keyof T];
-
-            if (typeof value === "object" && value !== null) {
-                return createReactiveProxy(value);
-            }
-
-            return value;
-        },
-
-        set(target, key, newValue, receiver) {
-            const oldValue = target[key as keyof T];
-            const result = Reflect.set(target, key, newValue, receiver);
-            if (oldValue !== newValue) {
-                trigger(target, key as string | symbol);
-                if (
-                    Array.isArray(target) &&
-                    typeof key === "string" &&
-                    !Number.isNaN(Number(key))
-                ) {
-                    trigger(target, "length");
-                }
-            }
-            return result;
-        },
-
-        deleteProperty(target, key) {
-            const result = Reflect.deleteProperty(target, key);
-            trigger(target, key as string | symbol);
-            return result;
-        },
-    });
-
-    proxyCache.set(target, proxy);
-    reactiveTargets.add(target);
-    return proxy as T;
-}
-
-// ─── createSignal (branches on type) ───
-
-export type Signal<T> = {
-    (): T;
-    set: (next: T) => void;
-    peek: () => T;
-};
-
-export function batch(fn: () => void) {
-    batchDepth++;
-    fn();
-    batchDepth--;
-    if (batchDepth === 0) {
-        // biome-ignore lint/suspicious/useIterableCallbackReturn: effects returing cleanup is intended
-        pendingEffects.forEach((e) => e());
-        pendingEffects.clear();
-    }
-}
-
-export function createSignal<T>(initial: T): Signal<T> {
-    if (typeof initial === "object" && initial !== null) {
-        const proxy = createReactiveProxy(initial);
-        const getter = () => proxy;
-        getter.set = (next: T) => (proxy as any).set(next);
-        getter.peek = () => initial;
-        return getter;
-    }
-
-    const subs = new Set<() => void>();
-    let value = initial;
-
-    const getter = () => {
-        if (currentEffect && currentDeps) {
-            subs.add(currentEffect);
-            currentDeps.add(subs);
-        }
-        return value;
-    };
-
-    getter.set = (next: T) => {
-        value = next;
-        for (const fn of [...subs]) {
-            if (batchDepth > 0) pendingEffects.add(fn);
-            else fn();
-        }
-    };
-
-    getter.peek = () => value;
-
-    return getter;
-}
-
-// biome-ignore  lint/suspicious/noConfusingVoidType: please shut up its a weird type
-export function createEffect(fn: () => void | (() => void)): () => void {
-    let cleanup: (() => void) | void;
-    const ownDeps = new Set<Set<() => void>>();
-
-    const effect = () => {
-        if (cleanup) cleanup();
-        for (const depSet of ownDeps) depSet.delete(effect);
-        ownDeps.clear();
-
-        const prevEffect = currentEffect;
-        const prevDeps = currentDeps;
-        currentEffect = effect;
-        currentDeps = ownDeps;
-        try {
-            cleanup = fn();
-        } finally {
-            currentEffect = prevEffect;
-            currentDeps = prevDeps;
-        }
-    };
-
-    effect();
-
-    const dispose = () => {
-        for (const depSet of ownDeps) depSet.delete(effect);
-        ownDeps.clear();
-        if (cleanup) cleanup();
-    };
-
-    ((globalThis as any).__sigilEffectScope as (() => void)[] | undefined)?.push(dispose);
-    return dispose;
-}
-
-/**
- * Run fn() and return a dispose function that tears down every effect
- * created during that call (including effects inside child createMemo calls).
- * Supports nesting: inner scopes don't leak to outer ones.
- */
-export function withEffectScope(fn: () => void): () => void {
-    const prev = (globalThis as any).__sigilEffectScope;
-    const disposers: (() => void)[] = [];
-    (globalThis as any).__sigilEffectScope = disposers;
-    try {
-        fn();
-    } finally {
-        (globalThis as any).__sigilEffectScope = prev;
-    }
-    return () => {
-        for (const d of disposers) d();
-        disposers.length = 0;
-    };
-}
-
-export function createMemo<T>(fn: () => T): Signal<T> {
-    const inner = createSignal<T>(undefined as T);
-    createEffect(() => inner.set(fn()));
-    return inner;
-}
-
-/**
- * Claim an existing element from a hydration pool by tag name, or create a new one.
- * Removes the claimed node from the pool array.
- * When falling back to createElement, appends to parent if provided (SPA mode).
- */
-export function claim(
-    nodes: ChildNode[],
-    tag: string,
-    parent?: Element,
-): Element {
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (
-            node instanceof Element &&
-            node.tagName.toLowerCase() === tag.toLowerCase()
-        ) {
-            nodes.splice(i, 1);
-            return node;
-        }
-    }
-    const el = document.createElement(tag);
-    if (parent) parent.appendChild(el);
-    return el;
-}
-
-/**
- * Claim an existing Text node from a hydration pool, or create a new empty one.
- * Removes the claimed node from the pool array.
- * When falling back to createTextNode, appends to parent if provided (SPA mode).
- */
-export function claimText(nodes: ChildNode[], parent?: Element): Text {
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (node instanceof Text) {
-            nodes.splice(i, 1);
-            return node;
-        }
-    }
-    const text = document.createTextNode("");
-    if (parent) parent.appendChild(text);
-    return text;
-}
-
-/**
- * Claim an existing Comment node from a hydration pool, or create a new one.
- * Removes the claimed node from the pool array.
- * When falling back to createComment, appends to parent if provided (SPA mode).
- */
-export function claimComment(
-    nodes: ChildNode[],
-    text: string = "",
-    parent?: Element,
-): Comment {
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (node instanceof Comment && node.data === text) {
-            nodes.splice(i, 1);
-            return node;
-        }
-    }
-    const comment = document.createComment(text);
-    if (parent) parent.appendChild(comment);
-    return comment;
-}
-
-/**
- * Reconcile a list of keyed DOM nodes.
- * anchor.before(node) handles both insert and move natively.
- * @param claimNode - Optional hydration callback. Called with (element, key) for
- *   server-rendered elements removed from the DOM. Returns the element to use,
- *   or null to discard.
- */
-export function reconcile<T>(
-    anchor: Partial<Comment>,
-    keyMap: Map<unknown, Node>,
-    newItems: T[],
-    getKey: (item: T) => unknown,
-    createNode: (item: T) => Node,
-    // is this meant to be unused? claimNode?: (element: Element, key: unknown) => Element | null,
-): void {
-    const newKeys = new Set(newItems.map(getKey));
-
-    // Remove nodes no longer in list (or claim them for hydration)
-    for (const [key, node] of keyMap) {
-        if (!newKeys.has(key)) {
-            node.parentNode?.removeChild(node);
-            keyMap.delete(key);
-        }
-    }
-
-    // Insert/move in order — anchor.before() handles both cases
-    for (const item of newItems) {
-        const key = getKey(item);
-        let node = keyMap.get(key);
-        if (!node) {
-            node = createNode(item);
-            keyMap.set(key, node);
-        }
-        anchor.before?.(node);
-    }
-}
-
-/**
- * Hydrate a keyed list: claim the comment anchor, walk its sibling elements
- * to build a keyMap, then reconcile with signal data.
- *
- * SSR renders items as flat siblings. Hydration claims them by position,
- * builds the keyMap, removes from DOM, then reconcile re-inserts in order.
- */
-export function hydrateKeyedList<T>(
-    nodesVar: ChildNode[],
-    signalItems: T[],
-    getKey: (item: T) => unknown,
-    createNode: (item: T) => Node,
-    parent?: Element,
-): { anchor: Comment; keyMap: Map<unknown, Node> } {
-    // 1. Claim the <!--g--> opening delimiter as anchor
-    const anchor = claimComment(nodesVar, "g", parent);
-
-    // 2. Walk siblings after anchor, collect elements up to <!--/g-->, build keyMap
-    const keyMap = new Map<unknown, Node>();
-    const anchorParent = anchor.parentNode;
-    if (anchorParent && signalItems.length > 0) {
-        const claimed: Element[] = [];
-        let next = anchor.nextSibling;
-        while (next) {
-            const current = next;
-            next = next.nextSibling;
-            // Stop at closing <!--/g--> delimiter and consume it
-            if (current instanceof Comment && current.data === "/g") {
-                current.remove();
-                break;
-            }
-            if (current instanceof Element) {
-                current.remove();
-                claimed.push(current);
-            }
-        }
-        // Map claimed elements to keys by index
-        for (let i = 0; i < claimed.length && i < signalItems.length; i++) {
-            //@ts-expect-error i is always in bounds
-            const key = getKey(signalItems[i]);
-            //@ts-expect-error i is always in bounds
-            keyMap.set(key, claimed[i]);
-        }
-    }
-
-    // 3. Reconcile — keyMap is pre-populated with claimed nodes
-    reconcile(anchor, keyMap, signalItems, getKey, createNode);
-    return { anchor, keyMap };
-}
-
-export function insert(parent: Element, value: unknown): void {
-    if (value === false || value === null || value === undefined) return;
-    if (Array.isArray(value)) {
-        for (const item of value) insert(parent, item);
-        return;
-    }
-    if (value instanceof Node) {
-        parent.appendChild(value);
-        return;
-    }
-    parent.append(String(value));
-}
-
-/**
- * Apply a use: directive to an element.
- * The directive function receives (element, params) and may return a cleanup function.
- * Cleanup runs when the enclosing $effect re-runs or the component is destroyed.
- */
-export type Directive = (node: Element, params: unknown) => void | (() => void);
-
-export function applyDirective(node: Element, directive: Directive | [Directive, unknown]): void {
-    const [fn, params] = Array.isArray(directive) ? directive : [directive, undefined];
-    const cleanup = fn(node, params);
-    if (typeof cleanup === "function") {
-        createEffect(() => () => cleanup());
-    }
-}
-
-export type ContextKey<T> = symbol & { __type: T };
-
-const clientContextStore = new Map<symbol, unknown>();
-
-let storeProvider: (() => Map<symbol, unknown>) | null = null;
-export function __setStoreProvider(fn: () => Map<symbol, unknown>) {
-    storeProvider = fn;
-}
-
-function getStore(): Map<symbol, unknown> {
-    return storeProvider?.() ?? clientContextStore;
-}
-
-export function createContext<T>(): ContextKey<T> {
-    return Symbol() as ContextKey<T>;
-}
-
-export function setContext<T>(key: ContextKey<T>, value: T): void {
-    getStore().set(key as unknown as symbol, value);
-}
-
-export function getContext<T>(key: ContextKey<T>): T {
-    return getStore().get(key as unknown as symbol) as T;
-}
+export const SIGIL_SAFE = Symbol.for("sigil.safe");
+export class SafeHtml {
+	[SIGIL_SAFE] = true;
+	constructor(public v: string) {}
+	toString() {
+		return this.v;
+	}
+}
+
+let currentEffect: (() => void) | null = null;
+let currentDeps: Set<Set<() => void>> | null = null;
+
+let batchDepth = 0;
+const pendingEffects = new Set<() => void>();
+
+const targetDepsMap = new WeakMap<
+	object,
+	Map<string | symbol, Set<() => void>>
+>();
+
+function getDeps(target: object, key: string | symbol): Set<() => void> {
+	let deps = targetDepsMap.get(target);
+	if (!deps) {
+		deps = new Map();
+		targetDepsMap.set(target, deps);
+	}
+	let set = deps.get(key);
+	if (!set) {
+		set = new Set();
+		deps.set(key, set);
+	}
+	return set;
+}
+
+function track(target: object, key: string | symbol) {
+	if (currentEffect && currentDeps) {
+		const deps = getDeps(target, key);
+		deps.add(currentEffect);
+		currentDeps.add(deps); // Set, deduplicates automatically
+	}
+}
+
+function trigger(target: object, key: string | symbol) {
+	const deps = targetDepsMap.get(target);
+	if (!deps) return;
+	const set = deps.get(key);
+	if (!set) return;
+	for (const fn of [...set]) {
+		if (batchDepth > 0) pendingEffects.add(fn);
+		else fn();
+	}
+}
+
+const proxyCache = new WeakMap<object, object>();
+const reactiveTargets = new WeakSet<object>();
+
+function createReactiveProxy<T extends object>(target: T): T {
+	const existing = proxyCache.get(target);
+	if (existing) return existing as T;
+
+	const proxy = new Proxy(target, {
+		get(target, key, receiver) {
+			if (key === "set") {
+				return (newValue: T) => {
+					const oldKeys = new Set(Object.keys(target));
+					const newKeys = new Set(Object.keys(newValue));
+					for (const k of oldKeys) {
+						if (!newKeys.has(k)) {
+							delete (target as any)[k];
+							trigger(target, k);
+						}
+					}
+					for (const k of newKeys) {
+						(target as any)[k] = (newValue as any)[k];
+						trigger(target, k);
+					}
+					if (Array.isArray(target)) {
+						trigger(target, "length");
+					}
+				};
+			}
+
+			if (key === "peek") {
+				return () => target;
+			}
+
+			if (typeof key === "symbol") {
+				return Reflect.get(target, key, receiver);
+			}
+
+			track(target, key);
+			const value = target[key as keyof T];
+
+			if (typeof value === "object" && value !== null) {
+				return createReactiveProxy(value);
+			}
+
+			return value;
+		},
+
+		set(target, key, newValue, receiver) {
+			const oldValue = target[key as keyof T];
+			const result = Reflect.set(target, key, newValue, receiver);
+			if (oldValue !== newValue) {
+				trigger(target, key as string | symbol);
+				if (
+					Array.isArray(target) &&
+					typeof key === "string" &&
+					!Number.isNaN(Number(key))
+				) {
+					trigger(target, "length");
+				}
+			}
+			return result;
+		},
+
+		deleteProperty(target, key) {
+			const result = Reflect.deleteProperty(target, key);
+			trigger(target, key as string | symbol);
+			return result;
+		},
+	});
+
+	proxyCache.set(target, proxy);
+	reactiveTargets.add(target);
+	return proxy as T;
+}
+
+// ─── createSignal (branches on type) ───
+
+export type Signal<T> = {
+	(): T;
+	set: (next: T) => void;
+	peek: () => T;
+};
+
+export function batch(fn: () => void) {
+	batchDepth++;
+	fn();
+	batchDepth--;
+	if (batchDepth === 0) {
+		// biome-ignore lint/suspicious/useIterableCallbackReturn: effects returing cleanup is intended
+		pendingEffects.forEach((e) => e());
+		pendingEffects.clear();
+	}
+}
+
+export function createSignal<T>(initial: T): Signal<T> {
+	if (typeof initial === "object" && initial !== null) {
+		const proxy = createReactiveProxy(initial);
+		const getter = () => proxy;
+		getter.set = (next: T) => (proxy as any).set(next);
+		getter.peek = () => initial;
+		return getter;
+	}
+
+	const subs = new Set<() => void>();
+	let value = initial;
+
+	const getter = () => {
+		if (currentEffect && currentDeps) {
+			subs.add(currentEffect);
+			currentDeps.add(subs);
+		}
+		return value;
+	};
+
+	getter.set = (next: T) => {
+		value = next;
+		for (const fn of [...subs]) {
+			if (batchDepth > 0) pendingEffects.add(fn);
+			else fn();
+		}
+	};
+
+	getter.peek = () => value;
+
+	return getter;
+}
+
+// biome-ignore  lint/suspicious/noConfusingVoidType: please shut up its a weird type
+export function createEffect(fn: () => void | (() => void)): () => void {
+	let cleanup: (() => void) | void;
+	const ownDeps = new Set<Set<() => void>>();
+
+	const effect = () => {
+		if (cleanup) cleanup();
+		for (const depSet of ownDeps) depSet.delete(effect);
+		ownDeps.clear();
+
+		const prevEffect = currentEffect;
+		const prevDeps = currentDeps;
+		currentEffect = effect;
+		currentDeps = ownDeps;
+		try {
+			cleanup = fn();
+		} finally {
+			currentEffect = prevEffect;
+			currentDeps = prevDeps;
+		}
+	};
+
+	effect();
+
+	const dispose = () => {
+		for (const depSet of ownDeps) depSet.delete(effect);
+		ownDeps.clear();
+		if (cleanup) cleanup();
+	};
+
+	((globalThis as any).__sigilEffectScope as (() => void)[] | undefined)?.push(
+		dispose,
+	);
+	return dispose;
+}
+
+/**
+ * Run fn() and return a dispose function that tears down every effect
+ * created during that call (including effects inside child createMemo calls).
+ * Supports nesting: inner scopes don't leak to outer ones.
+ */
+export function withEffectScope(fn: () => void): () => void {
+	const prev = (globalThis as any).__sigilEffectScope;
+	const disposers: (() => void)[] = [];
+	(globalThis as any).__sigilEffectScope = disposers;
+	try {
+		fn();
+	} finally {
+		(globalThis as any).__sigilEffectScope = prev;
+	}
+	return () => {
+		for (const d of disposers) d();
+		disposers.length = 0;
+	};
+}
+
+export function createMemo<T>(fn: () => T): Signal<T> {
+	const inner = createSignal<T>(undefined as T);
+	createEffect(() => inner.set(fn()));
+	return inner;
+}
+
+/**
+ * Claim an existing element from a hydration pool by tag name, or create a new one.
+ * Removes the claimed node from the pool array.
+ * When falling back to createElement, appends to parent if provided (SPA mode).
+ */
+export function claim(
+	nodes: ChildNode[],
+	tag: string,
+	parent?: Element,
+): Element {
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (
+			node instanceof Element &&
+			node.tagName.toLowerCase() === tag.toLowerCase()
+		) {
+			nodes.splice(i, 1);
+			return node;
+		}
+	}
+	const el = document.createElement(tag);
+	if (parent) parent.appendChild(el);
+	return el;
+}
+
+/**
+ * Claim an existing Text node from a hydration pool, or create a new empty one.
+ * Removes the claimed node from the pool array.
+ * When falling back to createTextNode, appends to parent if provided (SPA mode).
+ */
+export function claimText(nodes: ChildNode[], parent?: Element): Text {
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node instanceof Text) {
+			nodes.splice(i, 1);
+			return node;
+		}
+	}
+	const text = document.createTextNode("");
+	if (parent) parent.appendChild(text);
+	return text;
+}
+
+/**
+ * Claim an existing Comment node from a hydration pool, or create a new one.
+ * Removes the claimed node from the pool array.
+ * When falling back to createComment, appends to parent if provided (SPA mode).
+ */
+export function claimComment(
+	nodes: ChildNode[],
+	text: string = "",
+	parent?: Element,
+): Comment {
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node instanceof Comment && node.data === text) {
+			nodes.splice(i, 1);
+			return node;
+		}
+	}
+	const comment = document.createComment(text);
+	if (parent) parent.appendChild(comment);
+	return comment;
+}
+
+/**
+ * Reconcile a list of keyed DOM nodes.
+ * anchor.before(node) handles both insert and move natively.
+ * @param claimNode - Optional hydration callback. Called with (element, key) for
+ *   server-rendered elements removed from the DOM. Returns the element to use,
+ *   or null to discard.
+ */
+export function reconcile<T>(
+	anchor: Partial<Comment>,
+	keyMap: Map<unknown, Node>,
+	newItems: T[],
+	getKey: (item: T) => unknown,
+	createNode: (item: T) => Node,
+	// is this meant to be unused? claimNode?: (element: Element, key: unknown) => Element | null,
+): void {
+	const newKeys = new Set(newItems.map(getKey));
+
+	// Remove nodes no longer in list (or claim them for hydration)
+	for (const [key, node] of keyMap) {
+		if (!newKeys.has(key)) {
+			node.parentNode?.removeChild(node);
+			keyMap.delete(key);
+		}
+	}
+
+	// Insert/move in order — anchor.before() handles both cases
+	for (const item of newItems) {
+		const key = getKey(item);
+		let node = keyMap.get(key);
+		if (!node) {
+			node = createNode(item);
+			keyMap.set(key, node);
+		}
+		anchor.before?.(node);
+	}
+}
+
+/**
+ * Hydrate a keyed list: claim the comment anchor, walk its sibling elements
+ * to build a keyMap, then reconcile with signal data.
+ *
+ * SSR renders items as flat siblings. Hydration claims them by position,
+ * builds the keyMap, removes from DOM, then reconcile re-inserts in order.
+ */
+export function hydrateKeyedList<T>(
+	nodesVar: ChildNode[],
+	signalItems: T[],
+	getKey: (item: T) => unknown,
+	createNode: (item: T) => Node,
+	parent?: Element,
+): { anchor: Comment; keyMap: Map<unknown, Node> } {
+	// 1. Claim the <!--g--> opening delimiter as anchor
+	const anchor = claimComment(nodesVar, "g", parent);
+
+	// 2. Walk siblings after anchor, collect elements up to <!--/g-->, build keyMap
+	const keyMap = new Map<unknown, Node>();
+	const anchorParent = anchor.parentNode;
+	if (anchorParent && signalItems.length > 0) {
+		const claimed: Element[] = [];
+		let next = anchor.nextSibling;
+		while (next) {
+			const current = next;
+			next = next.nextSibling;
+			// Stop at closing <!--/g--> delimiter and consume it
+			if (current instanceof Comment && current.data === "/g") {
+				current.remove();
+				break;
+			}
+			if (current instanceof Element) {
+				current.remove();
+				claimed.push(current);
+			}
+		}
+		// Map claimed elements to keys by index
+		for (let i = 0; i < claimed.length && i < signalItems.length; i++) {
+			//@ts-expect-error i is always in bounds
+			const key = getKey(signalItems[i]);
+			//@ts-expect-error i is always in bounds
+			keyMap.set(key, claimed[i]);
+		}
+	}
+
+	// 3. Reconcile — keyMap is pre-populated with claimed nodes
+	reconcile(anchor, keyMap, signalItems, getKey, createNode);
+	return { anchor, keyMap };
+}
+
+export function insert(parent: Element, value: unknown): void {
+	if (value === false || value === null || value === undefined) return;
+	if (Array.isArray(value)) {
+		for (const item of value) insert(parent, item);
+		return;
+	}
+	if (value instanceof Node) {
+		parent.appendChild(value);
+		return;
+	}
+	parent.append(String(value));
+}
+
+/**
+ * Apply a use: directive to an element.
+ * The directive function receives (element, params) and may return a cleanup function.
+ * Cleanup runs when the enclosing $effect re-runs or the component is destroyed.
+ */
+export type Directive = (node: Element, params: unknown) => void | (() => void);
+
+export function applyDirective(
+	node: Element,
+	directive: Directive | [Directive, unknown],
+): void {
+	const [fn, params] = Array.isArray(directive)
+		? directive
+		: [directive, undefined];
+	const cleanup = fn(node, params);
+	if (typeof cleanup === "function") {
+		createEffect(() => () => cleanup());
+	}
+}
+
+export type ContextKey<T> = symbol & { __type: T };
+
+const clientContextStore = new Map<symbol, unknown>();
+
+let storeProvider: (() => Map<symbol, unknown>) | null = null;
+export function __setStoreProvider(fn: () => Map<symbol, unknown>) {
+	storeProvider = fn;
+}
+
+function getStore(): Map<symbol, unknown> {
+	return storeProvider?.() ?? clientContextStore;
+}
+
+export function createContext<T>(): ContextKey<T> {
+	return Symbol() as ContextKey<T>;
+}
+
+export function setContext<T>(key: ContextKey<T>, value: T): void {
+	getStore().set(key as unknown as symbol, value);
+}
+
+export function getContext<T>(key: ContextKey<T>): T {
+	return getStore().get(key as unknown as symbol) as T;
+}

package/jsr.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sigil-dev/runtime",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"exports": "./index.ts",
 	"publish": {
 		"exclude": ["src/**/*.test.ts"]

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@sigil-dev/runtime",
 	"module": "index.ts",
 	"type": "module",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"description": "Runtime for the Sigil framework",
 	"private": false,
 	"devDependencies": {