fix: load page component modules on same-layout navigation

vivek7405 · vivek7405 · commit a04a97426b6b · 2026-04-18T15:41:35.000+05:30
Root cause of both bugs: on client-side navigation within the same
layout, the router swapped &lt;main&gt; content but did NOT load the new
page's component modules. Components like &lt;new-post&gt; appeared in the
DOM as plain HTMLElement — never upgraded, no event handlers, no
interactivity.

The fix: call mergeHead() on same-layout swaps (previously skipped
by design). This adds new &lt;link rel="modulepreload"&gt; and executes
new &lt;script type="module"&gt; tags from the target page's &lt;head&gt;,
registering the page's components so they upgrade after insertion.

Also fixed mergeHead to recreate &lt;script&gt; elements instead of
cloning them — cloned scripts don't execute in the browser.
diff --git a/packages/core/src/router-client.js b/packages/core/src/router-client.js
@@ -201,9 +201,8 @@ async function performNavigation(href, isPopState) {
     if (currentShell && newShell &&
         (currentShell.tagName === newShell.tagName ||
          (currentShell.getAttribute('data-layout') && currentShell.getAttribute('data-layout') === newShell.getAttribute('data-layout')))) {
-      // Same layout — minimal swap: title + page content only.
-      const newTitle = doc.querySelector('title');
-      if (newTitle) document.title = newTitle.textContent || '';
+      // Same layout — swap page content + merge head for new modules.
+      mergeHead(doc.head);
 
       // For data-layout shells, swap only the <main> element's children
       // (header and footer stay mounted). For custom element shells with
@@ -345,7 +344,15 @@ function mergeHead(newHead) {
     if (el.tagName === 'BASE') continue;
     if (el.tagName === 'TITLE') continue;
     if (!currentSet.has(el.outerHTML)) {
-      currentHead.appendChild(el.cloneNode(true));
+      if (el.tagName === 'SCRIPT') {
+        // Scripts must be recreated (not cloned) to execute.
+        const script = document.createElement('script');
+        for (const attr of el.attributes) script.setAttribute(attr.name, attr.value);
+        script.textContent = el.textContent;
+        currentHead.appendChild(script);
+      } else {
+        currentHead.appendChild(el.cloneNode(true));
+      }
     }
   }
 }
