@sigil-dev/grimoire 0.7.1 → 0.7.3

package/package.json

@@ -3,7 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.7.3",
   "devDependencies": {
     "@types/bun": "latest"
   },
@@ -28,8 +28,8 @@
     "@babel/plugin-syntax-jsx": "^8.0.0-rc.6",
     "@babel/plugin-syntax-typescript": "^8.0.0-rc.6",
     "@babel/types": "^8.0.0-rc.6",
-    "@sigil-dev/compiler": "0.7.1",
-    "@sigil-dev/runtime": "0.7.1",
+    "@sigil-dev/compiler": "0.7.3",
+    "@sigil-dev/runtime": "0.7.3",
     "vite": "^8.0.16"
   },
   "peerDependencies": {

package/src/client/router.ts

@@ -4,38 +4,37 @@ let routeMap: Record<string, (props: any) => any> = {};
 let disposeCurrentPage: (() => void) | null = null;
 
 async function navigate(path: string) {
-	const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
-	const json = await res.json();
-	const { data, params, pattern, head } = json;
+    const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
+    const json = await res.json();
+    const { data, params, pattern, head } = json;
+    const Page = routeMap[pattern];
+    if (!Page) {
+        window.location.href = path;
+        return;
+    }
 
-	const Page = routeMap[pattern];
-	if (!Page) {
-		window.location.href = path;
-		return;
-	}
-
-	// Tear down all effects from the previous page before mounting the next one.
-	disposeCurrentPage?.();
-	disposeCurrentPage = null;
+    disposeCurrentPage?.();
+    disposeCurrentPage = null;
 
-	// SPA navigation has no SSR nodes to claim — start with an empty pool so
-	// the hydrate-compiled components create fresh DOM instead of recycling stale nodes.
-	(globalThis as any).__nodes = [];
+    // SPA navigation: empty pool so components create fresh DOM
+    pushHydrationNodes([]);
+    let node: any;
+    disposeCurrentPage = withEffectScope(() => {
+        try {
+            node = Page({ data, params });
+        } finally {
+            popHydrationNodes();
+        }
+    });
 
-	let node: any;
-	disposeCurrentPage = withEffectScope(() => {
-		node = Page({ data, params });
-	});
-
-	const slot = document.getElementById("grimoire-page");
-	if (!slot) return;
-	slot.replaceChildren(node);
-	updateHead(head);
-	history.pushState({}, "", path);
-	currentPath = path;
-	window.scrollTo(0, 0);
+    const slot = document.getElementById("grimoire-page");
+    if (!slot) return;
+    slot.replaceChildren(node);
+    updateHead(head);
+    history.pushState({}, "", path);
+    currentPath = path;
+    window.scrollTo(0, 0);
 }
-
 let currentPath = location.pathname;
 
 export function initRouter(

package/src/rendering/hydrate.ts

@@ -6,17 +6,21 @@ const stateEl = document.getElementById("__grimoire_state__");
 let initialDispose: (() => void) | undefined;
 
 if (stateEl) {
-	const state = JSON.parse(stateEl.textContent!);
-	const Page = routes[state.pattern];
-	if (Page) {
-		const slot = document.getElementById("grimoire-page");
-		if (slot) {
-			(globalThis as any).__nodes = Array.from(slot.childNodes);
-			initialDispose = withEffectScope(() => {
-				Page({ data: state.data, params: state.params });
-			});
-		}
-	}
+    const state = JSON.parse(stateEl.textContent!);
+    const Page = routes[state.pattern];
+    if (Page) {
+        const slot = document.getElementById("grimoire-page");
+        if (slot) {
+            pushHydrationNodes(Array.from(slot.childNodes) as ChildNode[]);
+            initialDispose = withEffectScope(() => {
+                try {
+                    Page({ data: state.data, params: state.params });
+                } finally {
+                    popHydrationNodes();
+                }
+            });
+        }
+    }
 }
 
 initRouter(routes, initialDispose);