@ecopages/react-router 0.2.0-alpha.10 → 0.2.0-alpha.12

package/CHANGELOG.md

@@ -8,10 +8,8 @@ All notable changes to `@ecopages/react-router` are documented here.
 
 ### Bug Fixes
 
-- Fixed React-to-non-React handoffs to replay queued clicks through the next active runtime and reuse prefetched HTML documents instead of forcing a second fetch.
-- Fixed stale handoff cleanup and fallback races so older React-router or browser-router navigations cannot overwrite a newer navigation.
-- Standardized React route payload reads on `window.__ECO_PAGES__.page` and explicit document owner markers so mixed-router page ownership stays stable.
-- Restored current-page HMR refreshes with persist layouts enabled by targeting the active React-router owner.
+- Fixed React-to-browser-router handoffs, queued-click replay, and stale-navigation races during mixed-router navigations.
+- Standardized route payload reads, document-owner markers, rerun scripts, and current-page HMR refreshes for persisted React layouts.
 
 ### Refactoring
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react-router",
-  "version": "0.2.0-alpha.10",
+  "version": "0.2.0-alpha.12",
   "description": "Client-side SPA router for EcoPages React applications",
   "keywords": [
     "ecopages",
@@ -32,8 +32,8 @@
     "directory": "packages/react-router"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.10",
-    "@ecopages/react": "0.2.0-alpha.10"
+    "@ecopages/core": "0.2.0-alpha.12",
+    "@ecopages/react": "0.2.0-alpha.12"
   },
   "dependencies": {
     "react": "^19",

package/src/head-morpher.d.ts

@@ -3,6 +3,10 @@
  * Intelligently syncs head elements between pages using key-based diffing.
  * @module
  */
+export type HeadMorphResult = {
+    cleanup: () => void;
+    flushRerunScripts: () => void;
+};
 /**
  * Morphs the current document head to match the new document's head.
  * Now splits the process into adding new elements and returning a cleanup function
@@ -10,6 +14,6 @@
  * don't disappear before the "old" snapshot is taken.
  *
  * @param newDocument - The parsed document from the navigation target
- * @returns Promise that resolves to a cleanup function when new stylesheets have loaded
+ * @returns Promise that resolves to cleanup and rerun hooks when new stylesheets have loaded
  */
-export declare function morphHead(newDocument: Document): Promise<() => void>;
+export declare function morphHead(newDocument: Document): Promise<HeadMorphResult>;

package/src/head-morpher.js

@@ -1,4 +1,6 @@
 const PRESERVE_SELECTORS = ['script[type="importmap"]', "meta[charset]", "[data-eco-persist]"];
+const RERUN_SRC_ATTR = "data-eco-rerun-src";
+let rerunNonce = 0;
 function isNonExecutableHeadScript(el) {
   if (el.tagName !== "SCRIPT") {
     return false;
@@ -31,6 +33,13 @@ function shouldPersistExecutableInlineHeadScript(el) {
   }
   return !isNonExecutableHeadScript(el);
 }
+function isRerunScript(el) {
+  return el.tagName === "SCRIPT" && el.hasAttribute("data-eco-rerun");
+}
+function isHydrationScript(el) {
+  const src = el.getAttribute("src");
+  return !!src && src.includes("hydration.js") && src.includes("ecopages-react");
+}
 function getHeadElementKey(el) {
   const tag = el.tagName.toLowerCase();
   switch (tag) {
@@ -52,7 +61,7 @@ function getHeadElementKey(el) {
       if (el.getAttribute("type") === "importmap") return "importmap";
       const scriptId = el.getAttribute("data-eco-script-id") || el.getAttribute("id");
       if (scriptId) return `script-id:${scriptId}`;
-      const src = el.src;
+      const src = el.getAttribute(RERUN_SRC_ATTR) || el.src;
       return src ? `script:${src}` : null;
     }
     case "style": {
@@ -70,6 +79,12 @@ async function morphHead(newDocument) {
   const newElements = /* @__PURE__ */ new Map();
   const stylesheetPromises = [];
   const elementsToRemove = [];
+  const pendingRerunScripts = Array.from(newHead.querySelectorAll("script[data-eco-rerun]")).filter((script) => !isHydrationScript(script)).map((script) => ({
+    attributes: Array.from(script.attributes).map((attr) => [attr.name, attr.value]),
+    textContent: script.textContent ?? "",
+    scriptId: script.getAttribute("data-eco-script-id"),
+    src: script.getAttribute("src")
+  }));
   for (const el of Array.from(currentHead.children)) {
     const key = getHeadElementKey(el);
     if (key) currentElements.set(key, el);
@@ -80,9 +95,11 @@ async function morphHead(newDocument) {
   }
   for (const [key, newEl] of newElements) {
     const currentEl = currentElements.get(key);
+    if (isRerunScript(newEl)) {
+      continue;
+    }
     if (!currentEl) {
-      const src = newEl.getAttribute("src");
-      if (newEl.tagName === "SCRIPT" && src && src.includes("hydration.js") && src.includes("ecopages-react")) {
+      if (newEl.tagName === "SCRIPT" && isHydrationScript(newEl)) {
         continue;
       }
       const cloned = newEl.cloneNode(true);
@@ -104,7 +121,7 @@ async function morphHead(newDocument) {
   }
   for (const newEl of Array.from(newHead.children)) {
     const key = getHeadElementKey(newEl);
-    if (!key) {
+    if (!key && !isRerunScript(newEl)) {
       currentHead.appendChild(newEl.cloneNode(true));
     }
   }
@@ -119,12 +136,55 @@ async function morphHead(newDocument) {
       }
     }
   }
-  return () => {
-    for (const el of elementsToRemove) {
-      el.remove();
+  return {
+    cleanup: () => {
+      for (const el of elementsToRemove) {
+        el.remove();
+      }
+    },
+    flushRerunScripts: () => {
+      for (const script of pendingRerunScripts) {
+        const replacement = document.createElement("script");
+        const shouldBustModuleSrc = isExternalModuleRerunScript(script);
+        for (const [name, value] of script.attributes) {
+          if (name === "src" && shouldBustModuleSrc) {
+            replacement.setAttribute(RERUN_SRC_ATTR, value);
+            replacement.setAttribute("src", createRerunScriptUrl(value));
+            continue;
+          }
+          replacement.setAttribute(name, value);
+        }
+        replacement.textContent = script.textContent;
+        const existingScript = findExistingRerunScript(script);
+        if (existingScript) {
+          existingScript.replaceWith(replacement);
+          continue;
+        }
+        document.head.appendChild(replacement);
+      }
     }
   };
 }
+function findExistingRerunScript(script) {
+  const scripts = Array.from(document.head.querySelectorAll("script"));
+  if (script.scriptId) {
+    return scripts.find((candidate) => candidate.getAttribute("data-eco-script-id") === script.scriptId) ?? null;
+  }
+  return scripts.find(
+    (candidate) => (candidate.getAttribute(RERUN_SRC_ATTR) ?? candidate.getAttribute("src")) === script.src && (candidate.textContent ?? "") === script.textContent
+  ) ?? null;
+}
+function isExternalModuleRerunScript(script) {
+  if (!script.src) {
+    return false;
+  }
+  return script.attributes.some(([name, value]) => name === "type" && value === "module");
+}
+function createRerunScriptUrl(src) {
+  const url = new URL(src, document.baseURI);
+  url.searchParams.set("__eco_rerun", String(++rerunNonce));
+  return url.toString();
+}
 export {
   morphHead
 };

package/src/router.js

@@ -217,7 +217,7 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
         if (result) {
           const { Component, props, doc, finalPath, moduleUrl } = result;
           const nextPage = { Component, props };
-          const cleanupHead = await morphHead(doc);
+          const { cleanup: cleanupHead, flushRerunScripts } = await morphHead(doc);
           if (isStale()) {
             cleanupHead();
             return;
@@ -257,6 +257,7 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
                   if (isStale()) {
                     return;
                   }
+                  flushRerunScripts();
                   cleanupHead();
                   applyViewTransitionNames();
                 } finally {
@@ -266,8 +267,21 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
             });
             await navigationCommitPromise;
           } else {
+            pendingRenderRef.current?.resolve();
+            const renderDfd = createDeferred();
+            pendingRenderRef.current = {
+              navigationId,
+              page: nextPage,
+              resolve: renderDfd.resolve
+            };
             commitPageData(moduleUrl, props);
             setCurrentPage(nextPage);
+            await renderDfd.promise;
+            if (isStale()) {
+              cleanupHead();
+              return;
+            }
+            flushRerunScripts();
             cleanupHead();
             applyViewTransitionNames();
           }