@sigil-dev/runtime 0.9.4 → 0.9.6

package/index.ts

@@ -381,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;
@@ -404,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);
@@ -551,7 +566,11 @@ export function reconcile<T>(
 		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)) {
+		if (
+			node &&
+			lastItemFor.has(node) &&
+			!Object.is(lastItemFor.get(node), item)
+		) {
 			node.parentNode?.removeChild(node);
 			keyMap.delete(key);
 			node = undefined;
@@ -680,7 +699,10 @@ export function hydrateKeyedList<T>(
 	return { anchor, keyMap };
 }
 
-export function insert(parent: Element, value: unknown): void {
+export function insert(
+	parent: Element | DocumentFragment,
+	value: unknown,
+): void {
 	if (value === false || value === null || value === undefined) return;
 	if (typeof value === "function") {
 		insert(parent, value());
@@ -697,6 +719,74 @@ export function insert(parent: Element, value: unknown): void {
 	parent.append(String(value));
 }
 
+/**
+ * Hydrate a `<!--g-->…<!--/g-->` slot.
+ *
+ * Consumes the delimiter pair and the SSR content between them from `nodes`,
+ * then runs `value` against that content as its hydration pool. Component
+ * children are compiled to thunks precisely so this call — not the caller's
+ * pool — decides what they claim: `<Wrap><Item/></Wrap>` puts `Item`'s SSR
+ * markup inside `Wrap`'s root, which the caller cannot see.
+ *
+ * SSR left no slot (SPA navigation renders into empty elements): fall back to
+ * a fresh `insert`.
+ */
+export function hydrateSlot(
+	nodes: ChildNode[],
+	parent: Element | DocumentFragment,
+	value: unknown,
+): void {
+	let open = -1;
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node instanceof Comment && node.data === "g") {
+			open = i;
+			break;
+		}
+	}
+	if (open === -1) {
+		insert(parent, value);
+		return;
+	}
+	let close = open + 1;
+	while (close < nodes.length) {
+		const node = nodes[close];
+		if (node instanceof Comment && node.data === "/g") break;
+		close++;
+	}
+	const inner = nodes.slice(open + 1, close);
+	// Drop the whole run so later siblings can't claim slot content.
+	nodes.splice(open, close - open + 1);
+	pushHydrationNodes(inner);
+	try {
+		attachHydrated(parent, value);
+	} finally {
+		popHydrationNodes();
+	}
+}
+
+/**
+ * Realize a slot value that already has SSR markup in the DOM: run thunks,
+ * skip primitives (their text is already rendered), and append only nodes
+ * that hydration created fresh instead of claiming.
+ */
+function attachHydrated(
+	parent: Element | DocumentFragment,
+	value: unknown,
+): void {
+	if (typeof value === "function") {
+		attachHydrated(parent, (value as () => unknown)());
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) attachHydrated(parent, item);
+		return;
+	}
+	if (value instanceof Node && value.parentNode !== parent) {
+		parent.appendChild(value);
+	}
+}
+
 /**
  * Apply a use: directive to an element.
  * The directive function receives (element, params) and may return a cleanup function.

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.4",
+  "version": "0.9.6",
   "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;

package/tsconfig.json

@@ -1,30 +1,30 @@
-{
-	"compilerOptions": {
-		// Environment setup & latest features
-		"lib": ["ESNext", "DOM"],
-		"target": "ESNext",
-		"module": "Preserve",
-		"moduleDetection": "force",
-		"jsx": "react-jsx",
-		"allowJs": true,
-		"types": ["bun"],
-
-		// Bundler mode
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"noEmit": true,
-
-		// Best practices
-		"strict": true,
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"noImplicitOverride": true,
-
-		// Some stricter flags (disabled by default)
-		"noUnusedLocals": false,
-		"noUnusedParameters": false,
-		"noPropertyAccessFromIndexSignature": false
-	}
-}
+{
+	"compilerOptions": {
+		// Environment setup & latest features
+		"lib": ["ESNext", "DOM"],
+		"target": "ESNext",
+		"module": "Preserve",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
+		"types": ["bun"],
+
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	}
+}