@sigil-dev/runtime 0.9.3 → 0.9.5

package/index.ts

@@ -20,6 +20,7 @@ export {
 } from "./easing.ts";
 export { ReactiveMap } from "./reactivity/map.ts";
 export { ReactiveSet } from "./reactivity/set.ts";
+export { mountTransition, removeAnimated } from "./transition.ts";
 
 export const SIGIL_SAFE = Symbol.for("sigil.safe");
 export class SafeHtml {
@@ -142,6 +143,9 @@ function createReactiveProxy<T extends object>(target: T): T {
 						trigger(target, k);
 					}
 					if (Array.isArray(target)) {
+						// delete leaves holes — length must shrink to the new value's,
+						// or iteration (spread, reconcile) sees phantom trailing slots
+						target.length = (newValue as unknown[]).length;
 						trigger(target, "length");
 					}
 				};
@@ -287,6 +291,23 @@ export function tracking(): boolean {
 	return currentEffect !== null;
 }
 
+/**
+ * Run fn() outside of any reactive context: signal reads inside fn() do not
+ * register dependencies on the enclosing effect.
+ */
+export function untrack<T>(fn: () => T): T {
+	const prevEffect = currentEffect;
+	const prevDeps = currentDeps;
+	currentEffect = null;
+	currentDeps = null;
+	try {
+		return fn();
+	} finally {
+		currentEffect = prevEffect;
+		currentDeps = prevDeps;
+	}
+}
+
 // A4: $inspect — dev-only effect logging
 export function createInspectEffect(
 	getValues: () => unknown[],
@@ -360,6 +381,15 @@ export function createProfilerEffect(
 	});
 }
 
+// Deferred effect mode for hydration: effects created while the flag is set
+// are queued instead of run immediately, then flushed after DOM insertion.
+const deferredEffectQueue: (() => void)[] = [];
+
+export function flushDeferredEffects(): void {
+	const pending = deferredEffectQueue.splice(0);
+	for (const run of pending) run();
+}
+
 // biome-ignore  lint/suspicious/noConfusingVoidType: please shut up its a weird type
 export function createEffect(fn: () => void | (() => void)): () => void {
 	let cleanup: (() => void) | undefined;
@@ -383,7 +413,13 @@ export function createEffect(fn: () => void | (() => void)): () => void {
 		}
 	};
 
-	effect();
+	// In deferred mode (hydration), queue the effect instead of running immediately.
+	// This ensures the DOM is inserted before effect callbacks query it.
+	if ((globalThis as any).__sigilDeferEffects) {
+		deferredEffectQueue.push(() => effect());
+	} else {
+		effect();
+	}
 
 	const dispose = () => {
 		for (const depSet of ownDeps) depSet.delete(effect);
@@ -417,12 +453,137 @@ export function withEffectScope(fn: () => void): () => void {
 	};
 }
 
+type EffectScopeGlobal = { __sigilEffectScope?: (() => void)[] };
+
+/**
+ * Run fn() with a detached effect scope. Effects created inside are invisible
+ * to enclosing scopes (the scope array is replaced, not merged) and live until
+ * dispose() is called — for app bootstrap, routers, and long-lived listeners.
+ */
+export function createRoot<T>(fn: (dispose: () => void) => T): T {
+	const g = globalThis as EffectScopeGlobal;
+	const prev = g.__sigilEffectScope;
+	const disposers: (() => void)[] = [];
+	g.__sigilEffectScope = disposers;
+	const dispose = () => {
+		for (const d of disposers.splice(0)) d();
+	};
+	try {
+		return fn(dispose);
+	} finally {
+		g.__sigilEffectScope = prev;
+	}
+}
+
+export interface Resource<T> {
+	data: () => T | undefined;
+	loading: () => boolean;
+	error: () => Error | undefined;
+	refetch: () => void;
+}
+
+/**
+ * Async data source with reactive re-fetching. Re-runs when `source()` changes
+ * or refetch() is called; stale responses are discarded by request id.
+ */
+export function createResource<T>(
+	fetcher: (source: unknown, info: { refetch: () => void }) => Promise<T>,
+	source?: () => unknown,
+): Resource<T> {
+	const data = createSignal<T | undefined>(undefined);
+	const loading = createSignal(true);
+	const error = createSignal<Error | undefined>(undefined);
+	const version = createSignal(0);
+	let requestCount = 0;
+	let versionCounter = 0;
+
+	const refetch = () => {
+		versionCounter++;
+		version.set(versionCounter);
+	};
+
+	createEffect(() => {
+		const src = source?.();
+		version(); // track refetch bumps
+		const id = ++requestCount;
+		loading.set(true);
+		error.set(undefined);
+		fetcher(src, { refetch }).then(
+			(result) => {
+				if (id !== requestCount) return; // stale response
+				data.set(result);
+				loading.set(false);
+			},
+			(err: unknown) => {
+				if (id !== requestCount) return;
+				error.set(err instanceof Error ? err : new Error(String(err)));
+				loading.set(false);
+			},
+		);
+	});
+
+	return { data, loading, error, refetch };
+}
+
 export function createMemo<T>(fn: () => T): Signal<T> {
 	const inner = createSignal<T>(undefined as T);
 	createEffect(() => inner.set(fn()));
 	return inner;
 }
 
+/**
+ * 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.
+ */
+const lastItemFor = new WeakMap<object, unknown>();
+
+export function reconcile<T>(
+	anchor: Partial<Comment>,
+	keyMap: Map<unknown, Node>,
+	newItems: T[],
+	getKey: (item: T, index: number) => 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((item, i) => getKey(item, i)));
+
+	// 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.
+	// A surviving node whose item instance changed is rebuilt: compiled row
+	// bodies bake item reads at creation time, so immutable-style updates
+	// (new object, same key) must swap the node to show fresh content.
+	for (let i = 0; i < newItems.length; i++) {
+		const item = newItems[i]!;
+		const key = getKey(item, i);
+		let node = keyMap.get(key);
+		if (
+			node &&
+			lastItemFor.has(node) &&
+			!Object.is(lastItemFor.get(node), item)
+		) {
+			node.parentNode?.removeChild(node);
+			keyMap.delete(key);
+			node = undefined;
+		}
+		if (!node) {
+			node = createNode(item);
+			lastItemFor.set(node, item);
+			keyMap.set(key, node);
+		}
+		anchor.before?.(node);
+	}
+}
+
 /**
  * Claim an existing element from a hydration pool by tag name, or create a new one.
  * Removes the claimed node from the pool array.
@@ -488,43 +649,6 @@ export function claimComment(
 	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.
@@ -535,7 +659,7 @@ export function reconcile<T>(
 export function hydrateKeyedList<T>(
 	nodesVar: ChildNode[],
 	signalItems: T[],
-	getKey: (item: T) => unknown,
+	getKey: (item: T, index: number) => unknown,
 	createNode: (item: T) => Node,
 	parent?: Element,
 ): { anchor: Comment; keyMap: Map<unknown, Node> } {
@@ -564,7 +688,7 @@ export function hydrateKeyedList<T>(
 		// 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]);
+			const key = getKey(signalItems[i], i);
 			//@ts-expect-error i is always in bounds
 			keyMap.set(key, claimed[i]);
 		}

package/jsr.json

@@ -1,8 +1,8 @@
-{
-	"name": "@sigil-dev/runtime",
-	"version": "0.6.0",
-	"exports": "./index.ts",
-	"publish": {
-		"exclude": ["src/**/*.test.ts"]
-	}
-}
+{
+	"name": "@sigil-dev/runtime",
+	"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.9.3",
+  "version": "0.9.5",
   "description": "Runtime for the Sigil framework",
   "private": false,
   "devDependencies": {

package/reactivity/map.ts

@@ -1,98 +1,98 @@
-import { createSignal, type Signal } from "../index.ts";
-
-export class ReactiveMap<K, V> extends Map<K, V> {
-	#keyVersions: Map<K, Signal<number>> = new Map();
-	#structVersion: Signal<number>;
-	#structVal: number = 0;
-	#getKeyVersion(key: K): Signal<number> {
-		let sig = this.#keyVersions.get(key);
-		if (!sig) {
-			const inner = createSignal(0);
-			this.#keyVersions.set(key, inner);
-			sig = inner;
-		}
-		return sig;
-	}
-	#bumpKey(key: K) {
-		const sig = this.#keyVersions.get(key);
-		if (sig) {
-			const v = sig.peek() + 1;
-			(sig as Signal<number>).set(v);
-		}
-	}
-	#bumpStruct() {
-		this.#structVal++;
-		this.#structVersion.set(this.#structVal);
-	}
-
-	constructor(entries?: readonly (readonly [K, V])[] | null) {
-		super(entries);
-		this.#structVersion = createSignal(0);
-		if (entries) {
-			for (const [k] of entries) this.#getKeyVersion(k);
-		}
-	}
-
-	get(key: K): V | undefined {
-		this.#getKeyVersion(key)();
-		return super.get(key);
-	}
-
-	set(key: K, value: V): this {
-		const existed = super.has(key);
-		super.set(key, value);
-		this.#bumpKey(key);
-		if (!existed) this.#bumpStruct();
-		return this;
-	}
-
-	delete(key: K): boolean {
-		const result = super.delete(key);
-		if (result) {
-			this.#bumpKey(key);
-			this.#bumpStruct();
-		}
-		return result;
-	}
-
-	clear(): void {
-		if (this.size > 0) {
-			for (const key of this.keys()) this.#bumpKey(key);
-			super.clear();
-			this.#bumpStruct();
-		}
-	}
-
-	forEach(
-		callbackfn: (value: V, key: K, map: Map<K, V>) => void,
-		thisArg?: unknown,
-	): void {
-		this.#structVersion();
-		super.forEach(callbackfn, thisArg);
-	}
-
-	get size(): number {
-		this.#structVersion();
-		return super.size;
-	}
-
-	entries(): IterableIterator<[K, V]> {
-		this.#structVersion();
-		return super.entries();
-	}
-
-	keys(): IterableIterator<K> {
-		this.#structVersion();
-		return super.keys();
-	}
-
-	values(): IterableIterator<V> {
-		this.#structVersion();
-		return super.values();
-	}
-
-	[Symbol.iterator](): IterableIterator<[K, V]> {
-		this.#structVersion();
-		return super[Symbol.iterator]();
-	}
-}
+import { createSignal, type Signal } from "../index.ts";
+
+export class ReactiveMap<K, V> extends Map<K, V> {
+	#keyVersions: Map<K, Signal<number>> = new Map();
+	#structVersion: Signal<number>;
+	#structVal: number = 0;
+	#getKeyVersion(key: K): Signal<number> {
+		let sig = this.#keyVersions.get(key);
+		if (!sig) {
+			const inner = createSignal(0);
+			this.#keyVersions.set(key, inner);
+			sig = inner;
+		}
+		return sig;
+	}
+	#bumpKey(key: K) {
+		const sig = this.#keyVersions.get(key);
+		if (sig) {
+			const v = sig.peek() + 1;
+			(sig as Signal<number>).set(v);
+		}
+	}
+	#bumpStruct() {
+		this.#structVal++;
+		this.#structVersion.set(this.#structVal);
+	}
+
+	constructor(entries?: readonly (readonly [K, V])[] | null) {
+		super(entries);
+		this.#structVersion = createSignal(0);
+		if (entries) {
+			for (const [k] of entries) this.#getKeyVersion(k);
+		}
+	}
+
+	get(key: K): V | undefined {
+		this.#getKeyVersion(key)();
+		return super.get(key);
+	}
+
+	set(key: K, value: V): this {
+		const existed = super.has(key);
+		super.set(key, value);
+		this.#bumpKey(key);
+		if (!existed) this.#bumpStruct();
+		return this;
+	}
+
+	delete(key: K): boolean {
+		const result = super.delete(key);
+		if (result) {
+			this.#bumpKey(key);
+			this.#bumpStruct();
+		}
+		return result;
+	}
+
+	clear(): void {
+		if (this.size > 0) {
+			for (const key of this.keys()) this.#bumpKey(key);
+			super.clear();
+			this.#bumpStruct();
+		}
+	}
+
+	forEach(
+		callbackfn: (value: V, key: K, map: Map<K, V>) => void,
+		thisArg?: unknown,
+	): void {
+		this.#structVersion();
+		super.forEach(callbackfn, thisArg);
+	}
+
+	get size(): number {
+		this.#structVersion();
+		return super.size;
+	}
+
+	entries(): IterableIterator<[K, V]> {
+		this.#structVersion();
+		return super.entries();
+	}
+
+	keys(): IterableIterator<K> {
+		this.#structVersion();
+		return super.keys();
+	}
+
+	values(): IterableIterator<V> {
+		this.#structVersion();
+		return super.values();
+	}
+
+	[Symbol.iterator](): IterableIterator<[K, V]> {
+		this.#structVersion();
+		return super[Symbol.iterator]();
+	}
+}

package/reactivity/set.ts

@@ -1,74 +1,74 @@
-import { createSignal, type Signal } from "../index.ts";
-
-export class ReactiveSet<T> extends Set<T> {
-	#version: Signal<number>;
-	#versionVal: number = 0;
-
-	constructor(values?: readonly T[] | null) {
-		super(values);
-		this.#version = createSignal(0);
-	}
-
-	#bump() {
-		this.#versionVal++;
-		this.#version.set(this.#versionVal);
-	}
-
-	has(value: T): boolean {
-		this.#version();
-		return super.has(value);
-	}
-
-	add(value: T): this {
-		const sizeBefore = super.size;
-		super.add(value);
-		if (super.size !== sizeBefore) this.#bump();
-		return this;
-	}
-
-	delete(value: T): boolean {
-		const result = super.delete(value);
-		if (result) this.#bump();
-		return result;
-	}
-
-	clear(): void {
-		if (this.size > 0) {
-			super.clear();
-			this.#bump();
-		}
-	}
-
-	forEach(
-		callbackfn: (value: T, value2: T, set: Set<T>) => void,
-		thisArg?: unknown,
-	): void {
-		this.#version();
-		super.forEach(callbackfn, thisArg);
-	}
-
-	get size(): number {
-		this.#version();
-		return super.size;
-	}
-
-	entries(): IterableIterator<[T, T]> {
-		this.#version();
-		return super.entries();
-	}
-
-	keys(): IterableIterator<T> {
-		this.#version();
-		return super.keys();
-	}
-
-	values(): IterableIterator<T> {
-		this.#version();
-		return super.values();
-	}
-
-	[Symbol.iterator](): IterableIterator<T> {
-		this.#version();
-		return super[Symbol.iterator]();
-	}
-}
+import { createSignal, type Signal } from "../index.ts";
+
+export class ReactiveSet<T> extends Set<T> {
+	#version: Signal<number>;
+	#versionVal: number = 0;
+
+	constructor(values?: readonly T[] | null) {
+		super(values);
+		this.#version = createSignal(0);
+	}
+
+	#bump() {
+		this.#versionVal++;
+		this.#version.set(this.#versionVal);
+	}
+
+	has(value: T): boolean {
+		this.#version();
+		return super.has(value);
+	}
+
+	add(value: T): this {
+		const sizeBefore = super.size;
+		super.add(value);
+		if (super.size !== sizeBefore) this.#bump();
+		return this;
+	}
+
+	delete(value: T): boolean {
+		const result = super.delete(value);
+		if (result) this.#bump();
+		return result;
+	}
+
+	clear(): void {
+		if (this.size > 0) {
+			super.clear();
+			this.#bump();
+		}
+	}
+
+	forEach(
+		callbackfn: (value: T, value2: T, set: Set<T>) => void,
+		thisArg?: unknown,
+	): void {
+		this.#version();
+		super.forEach(callbackfn, thisArg);
+	}
+
+	get size(): number {
+		this.#version();
+		return super.size;
+	}
+
+	entries(): IterableIterator<[T, T]> {
+		this.#version();
+		return super.entries();
+	}
+
+	keys(): IterableIterator<T> {
+		this.#version();
+		return super.keys();
+	}
+
+	values(): IterableIterator<T> {
+		this.#version();
+		return super.values();
+	}
+
+	[Symbol.iterator](): IterableIterator<T> {
+		this.#version();
+		return super[Symbol.iterator]();
+	}
+}

package/test-preload.ts

@@ -1,9 +1,9 @@
-import { Window } from "happy-dom";
-
-const window = new Window();
-(globalThis as any).document = window.document;
-(globalThis as any).Element = window.Element;
-(globalThis as any).Text = window.Text;
-(globalThis as any).Node = window.Node;
-(globalThis as any).HTMLElement = window.HTMLElement;
-(globalThis as any).Comment = window.Comment;
+import { Window } from "happy-dom";
+
+const window = new Window();
+(globalThis as any).document = window.document;
+(globalThis as any).Element = window.Element;
+(globalThis as any).Text = window.Text;
+(globalThis as any).Node = window.Node;
+(globalThis as any).HTMLElement = window.HTMLElement;
+(globalThis as any).Comment = window.Comment;