@sigil-dev/runtime 0.9.5 → 0.9.6

package/index.ts

@@ -699,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());
@@ -716,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/package.json

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