@ecopages/browser-router 0.2.0-alpha.5 → 0.2.0-alpha.7

package/src/client/services/dom-swapper.js

@@ -1,5 +1,6 @@
 import morphdom from "morphdom";
 const DEFAULT_PERSIST_ATTR = "data-eco-persist";
+const RERUN_SRC_ATTR = "data-eco-rerun-src";
 function isPersisted(element, persistAttribute) {
   return element.hasAttribute(persistAttribute) || element.hasAttribute(DEFAULT_PERSIST_ATTR);
 }
@@ -8,6 +9,9 @@ function isHydratedCustomElement(element) {
 }
 class DomSwapper {
   persistAttribute;
+  pendingHeadScripts = [];
+  pendingRerunScripts = [];
+  rerunNonce = 0;
   constructor(persistAttribute) {
     this.persistAttribute = persistAttribute;
   }
@@ -78,6 +82,9 @@ class DomSwapper {
    * - Injects new scripts from the incoming page that are absent from the current head
    */
   morphHead(newDocument) {
+    this.pendingHeadScripts = [];
+    this.pendingRerunScripts = this.collectRerunScripts(newDocument);
+    this.removeStaleHeadScripts(newDocument);
     const newTitle = newDocument.head.querySelector("title");
     if (newTitle && document.title !== newTitle.textContent) {
       document.title = newTitle.textContent || "";
@@ -97,25 +104,6 @@ class DomSwapper {
         document.head.appendChild(newMeta.cloneNode(true));
       }
     }
-    const existingScriptIds = new Set(
-      Array.from(document.head.querySelectorAll("script[data-eco-script-id]")).map(
-        (s) => s.getAttribute("data-eco-script-id")
-      )
-    );
-    const rerunScripts = newDocument.head.querySelectorAll("script[data-eco-rerun]");
-    for (const script of rerunScripts) {
-      const scriptId = script.getAttribute("data-eco-script-id");
-      if (scriptId && !existingScriptIds.has(scriptId)) {
-        const newScript = document.createElement("script");
-        for (const attr of script.attributes) {
-          if (attr.name !== "data-eco-rerun") {
-            newScript.setAttribute(attr.name, attr.value);
-          }
-        }
-        newScript.textContent = script.textContent;
-        document.head.appendChild(newScript);
-      }
-    }
     const existingScriptSrcs = new Set(
       Array.from(document.head.querySelectorAll("script[src]")).map((s) => s.getAttribute("src"))
     );
@@ -126,27 +114,98 @@ class DomSwapper {
     for (const script of allNewHeadScripts) {
       if (script.hasAttribute("data-eco-rerun")) continue;
       const src = script.getAttribute("src");
+      const scriptId = script.getAttribute("data-eco-script-id") || script.getAttribute("id");
+      const existingScript = this.findExistingHeadScript(script);
+      if (scriptId && existingScript) {
+        if (!this.isNonExecutableHeadScript(script)) {
+          continue;
+        }
+        if (this.areHeadScriptsEquivalent(script, existingScript)) {
+          continue;
+        }
+        this.pendingHeadScripts.push({
+          attributes: Array.from(script.attributes).map((attr) => [attr.name, attr.value]),
+          textContent: script.textContent ?? "",
+          src,
+          scriptId,
+          replaceExisting: true
+        });
+        continue;
+      }
       if (src) {
         if (existingScriptSrcs.has(src)) continue;
-        const newScript = document.createElement("script");
-        for (const attr of script.attributes) {
-          newScript.setAttribute(attr.name, attr.value);
-        }
-        document.head.appendChild(newScript);
+        this.pendingHeadScripts.push({
+          attributes: Array.from(script.attributes).map((attr) => [attr.name, attr.value]),
+          textContent: script.textContent ?? "",
+          src,
+          scriptId,
+          replaceExisting: false
+        });
         existingScriptSrcs.add(src);
       } else {
         const content = (script.textContent ?? "").trim();
         if (!content || existingInlineContents.has(content)) continue;
-        const newScript = document.createElement("script");
-        for (const attr of script.attributes) {
-          newScript.setAttribute(attr.name, attr.value);
-        }
-        newScript.textContent = script.textContent;
-        document.head.appendChild(newScript);
+        this.pendingHeadScripts.push({
+          attributes: Array.from(script.attributes).map((attr) => [attr.name, attr.value]),
+          textContent: script.textContent ?? "",
+          src: null,
+          scriptId,
+          replaceExisting: false
+        });
         existingInlineContents.add(content);
       }
     }
   }
+  /**
+   * Replays queued `data-eco-rerun` scripts after the body swap completes.
+   *
+   * Scripts are intentionally flushed after the new body is in place so DOM-
+   * dependent bootstraps bind against the incoming page rather than the page
+   * being replaced.
+   */
+  flushRerunScripts() {
+    for (const script of this.pendingHeadScripts) {
+      const replacement = document.createElement("script");
+      for (const [name, value] of script.attributes) {
+        replacement.setAttribute(name, value);
+      }
+      replacement.textContent = script.textContent;
+      const existingScript = this.findExistingHeadScript(script);
+      if (script.replaceExisting && existingScript) {
+        existingScript.replaceWith(replacement);
+        continue;
+      }
+      document.head.appendChild(replacement);
+    }
+    this.pendingHeadScripts = [];
+    for (const script of this.pendingRerunScripts) {
+      const targetParent = script.parent === "body" ? document.body : document.head;
+      const replacement = document.createElement("script");
+      const shouldBustModuleSrc = this.isExternalModuleRerunScript(script);
+      for (const [name, value] of script.attributes) {
+        if (name === "data-eco-rerun") {
+          continue;
+        }
+        if (name === "src" && shouldBustModuleSrc) {
+          replacement.setAttribute(RERUN_SRC_ATTR, value);
+          replacement.setAttribute("src", this.createRerunScriptUrl(value));
+          continue;
+        }
+        replacement.setAttribute(name, value);
+      }
+      replacement.textContent = script.textContent;
+      const existingScript = this.findExistingRerunScript(targetParent, script);
+      if (existingScript) {
+        existingScript.replaceWith(replacement);
+        continue;
+      }
+      targetParent.appendChild(replacement);
+    }
+    this.pendingRerunScripts = [];
+  }
+  shouldReplaceBodyForRerunScripts() {
+    return this.pendingRerunScripts.length > 0;
+  }
   /**
    * Detects custom elements without shadow DOM (light-DOM custom elements).
    * These need full replacement rather than morphing, because morphdom would
@@ -155,6 +214,15 @@ class DomSwapper {
   isLightDomCustomElement(element) {
     return element.localName.includes("-") && element.shadowRoot === null;
   }
+  replaceCustomElement(fromEl, toEl) {
+    const newEl = document.createElement(toEl.tagName);
+    for (const attr of toEl.attributes) {
+      newEl.setAttribute(attr.name, attr.value);
+    }
+    newEl.innerHTML = toEl.innerHTML;
+    fromEl.replaceWith(newEl);
+    return false;
+  }
   /**
    * Morphs document body using morphdom.
    * Preserves persisted elements and hydrated custom elements.
@@ -169,16 +237,10 @@ class DomSwapper {
           return false;
         }
         if (isHydratedCustomElement(fromEl)) {
-          return false;
+          return this.replaceCustomElement(fromEl, toEl);
         }
         if (this.isLightDomCustomElement(fromEl)) {
-          const newEl = document.createElement(toEl.tagName);
-          for (const attr of toEl.attributes) {
-            newEl.setAttribute(attr.name, attr.value);
-          }
-          newEl.innerHTML = toEl.innerHTML;
-          fromEl.replaceWith(newEl);
-          return false;
+          return this.replaceCustomElement(fromEl, toEl);
         }
         if (fromEl.isEqualNode(toEl)) {
           return false;
@@ -214,6 +276,116 @@ class DomSwapper {
     document.body.replaceChildren(...newDocument.body.childNodes);
     this.processDeclarativeShadowDOM(document.body);
   }
+  collectRerunScripts(newDocument) {
+    return Array.from(newDocument.querySelectorAll("script[data-eco-rerun]")).map((script) => ({
+      parent: script.closest("body") ? "body" : "head",
+      attributes: Array.from(script.attributes).map((attr) => [attr.name, attr.value]),
+      textContent: script.textContent ?? "",
+      src: script.getAttribute("src"),
+      scriptId: script.getAttribute("data-eco-script-id")
+    }));
+  }
+  removeStaleHeadScripts(newDocument) {
+    const nextScriptKeys = new Set(
+      Array.from(newDocument.head.querySelectorAll("script")).map((script) => this.getHeadScriptKey(script)).filter((key) => key !== null)
+    );
+    for (const script of Array.from(document.head.querySelectorAll("script"))) {
+      const key = this.getHeadScriptKey(script);
+      if (!key || nextScriptKeys.has(key)) {
+        continue;
+      }
+      if (this.shouldPersistExecutableInlineHeadScript(script)) {
+        continue;
+      }
+      script.remove();
+    }
+  }
+  shouldPersistExecutableInlineHeadScript(script) {
+    const scriptId = script.getAttribute("data-eco-script-id") || script.getAttribute("id");
+    if (!scriptId) {
+      return false;
+    }
+    if (script.hasAttribute("data-eco-rerun")) {
+      return false;
+    }
+    if (script.getAttribute(RERUN_SRC_ATTR) || script.getAttribute("src")) {
+      return false;
+    }
+    return !this.isNonExecutableHeadScript(script);
+  }
+  isNonExecutableHeadScript(script) {
+    const type = (script.getAttribute("type") ?? "").trim().toLowerCase();
+    if (!type) {
+      return false;
+    }
+    return ![
+      "application/javascript",
+      "application/ecmascript",
+      "module",
+      "text/ecmascript",
+      "text/javascript"
+    ].includes(type);
+  }
+  areHeadScriptsEquivalent(nextScript, currentScript) {
+    if (this.getHeadScriptKey(nextScript) !== this.getHeadScriptKey(currentScript)) {
+      return false;
+    }
+    if ((nextScript.textContent ?? "") !== (currentScript.textContent ?? "")) {
+      return false;
+    }
+    const nextAttributes = Array.from(nextScript.attributes).map((attribute) => [attribute.name, attribute.value]);
+    const currentAttributes = Array.from(currentScript.attributes).map((attribute) => [
+      attribute.name,
+      attribute.value
+    ]);
+    if (nextAttributes.length !== currentAttributes.length) {
+      return false;
+    }
+    return nextAttributes.every(
+      ([name, value], index) => currentAttributes[index]?.[0] === name && currentAttributes[index]?.[1] === value
+    );
+  }
+  getHeadScriptKey(script) {
+    const scriptId = script instanceof HTMLScriptElement ? script.getAttribute("data-eco-script-id") || script.getAttribute("id") : script.scriptId;
+    if (scriptId) {
+      return `id:${scriptId}`;
+    }
+    const src = script instanceof HTMLScriptElement ? script.getAttribute(RERUN_SRC_ATTR) || script.getAttribute("src") : script.src;
+    if (src) {
+      return `src:${src}`;
+    }
+    const textContent = (script.textContent ?? "").trim();
+    return textContent ? `inline:${textContent}` : null;
+  }
+  findExistingHeadScript(script) {
+    const scriptKey = this.getHeadScriptKey(script);
+    if (!scriptKey) {
+      return null;
+    }
+    return Array.from(document.head.querySelectorAll("script")).find(
+      (candidate) => this.getHeadScriptKey(candidate) === scriptKey
+    ) ?? null;
+  }
+  findExistingRerunScript(root, script) {
+    const scripts = Array.from(root.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;
+  }
+  isExternalModuleRerunScript(script) {
+    if (!script.src) {
+      return false;
+    }
+    return script.attributes.some(([name, value]) => name === "type" && value === "module");
+  }
+  createRerunScriptUrl(src) {
+    const url = new URL(src, document.baseURI);
+    url.searchParams.set("__eco_rerun", String(++this.rerunNonce));
+    return url.toString();
+  }
   /**
    * Manually attaches declarative shadow DOM templates.
    * Browsers only process `<template shadowrootmode>` during initial parse.