release: WRNexusJS 0.4.0

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/src/nav-runtime.ts

@@ -85,6 +85,46 @@ export const NAV_RUNTIME = String.raw`
     return loaded;
   }
 
+  function runtimeIds(root) {
+    var ids = {};
+    if (!root || !root.querySelectorAll) return ids;
+    var nodes = [];
+    if (root.matches && root.matches("[data-wrnexus-runtime]")) nodes.push(root);
+    root.querySelectorAll("[data-wrnexus-runtime]").forEach(function (node) { nodes.push(node); });
+    nodes.forEach(function (node) {
+      String(node.getAttribute("data-wrnexus-runtime") || "")
+        .split(/[\s,]+/)
+        .forEach(function (id) { if (id) ids[id] = true; });
+    });
+    return ids;
+  }
+
+  function packageRuntimeRegistry() {
+    return window.__wrnexusRuntimes || {};
+  }
+
+  function mountPackageRuntimes(root) {
+    var ids = runtimeIds(root);
+    var registry = packageRuntimeRegistry();
+    Object.keys(ids).forEach(function (id) {
+      var runtime = registry[id];
+      if (!runtime || typeof runtime.mount !== "function") return;
+      try { runtime.mount(root); }
+      catch (error) { console.error("[wrnexus] failed to mount runtime", id, error); }
+    });
+  }
+
+  function unmountPackageRuntimes(root) {
+    var ids = runtimeIds(root);
+    var registry = packageRuntimeRegistry();
+    Object.keys(ids).forEach(function (id) {
+      var runtime = registry[id];
+      if (!runtime || typeof runtime.unmount !== "function") return;
+      try { runtime.unmount(root); }
+      catch (error) { console.error("[wrnexus] failed to unmount runtime", id, error); }
+    });
+  }
+
   /**
    * Append framework runtimes declared by the incoming document but not
    * currently loaded.
@@ -106,8 +146,37 @@ export const NAV_RUNTIME = String.raw`
         var element =
           document.createElement("script");
 
+        Array.prototype.forEach.call(
+          script.attributes,
+          function (attribute) {
+            if (attribute.name === "src") return;
+            element.setAttribute(
+              attribute.name,
+              attribute.value,
+            );
+          },
+        );
         element.src = src;
-        element.async = false;
+        if (!script.hasAttribute("async")) {
+          element.async = false;
+        }
+        element.addEventListener("load", function () {
+          try {
+            mountPackageRuntimes(document);
+            window.dispatchEvent(
+              new CustomEvent(
+                "wrnexus:runtime-loaded",
+                { detail: { src: src } },
+              ),
+            );
+          } catch (_) {}
+        });
+        element.addEventListener("error", function () {
+          console.error(
+            "[wrnexus] failed to load client runtime",
+            src,
+          );
+        });
 
         document.body.appendChild(element);
       });
@@ -120,6 +189,7 @@ export const NAV_RUNTIME = String.raw`
    * disposal here guarantees that unmount hooks run before replacement.
    */
   function dispose(root) {
+    unmountPackageRuntimes(root);
     try {
       if (
         typeof window.__wrnexusDisposeBehaviors ===
@@ -141,6 +211,7 @@ export const NAV_RUNTIME = String.raw`
    * All framework hydration functions must remain idempotent.
    */
   function rehydrate(root) {
+    mountPackageRuntimes(root);
     try {
       if (
         typeof window.__wrnexusHydrateScopes ===
@@ -342,17 +413,6 @@ export const NAV_RUNTIME = String.raw`
           return null;
         }
 
-        var contentType =
-          response.headers.get("content-type") ||
-          "";
-
-        if (
-          contentType.indexOf("text/html") === -1
-        ) {
-          hardNavigate(url);
-          return null;
-        }
-
         return response.text().then(function (text) {
           if (inFlight !== token) {
             return;

packages/csr/test/nav.test.ts

@@ -104,3 +104,25 @@ test("rebinds theme controls after swapping the page", async () => {
   expect(boundRoot).toBe(win.document);
   expect(win.document.querySelector("[data-wire-theme-toggle]")).not.toBeNull();
 });
+
+test("unmounts and remounts package runtimes during client navigation", async () => {
+  install(
+    `<div id="app"><div data-wrnexus-runtime="captcha">Old</div><a href="/next" id="lnk">Next</a></div>`,
+  );
+  let mounts = 0;
+  let unmounts = 0;
+  win.__wrnexusRuntimes = {
+    captcha: {
+      mount: () => mounts++,
+      unmount: () => unmounts++,
+    },
+  };
+  nextHtml = `<html><body><div id="app"><div data-wrnexus-runtime="captcha">New</div></div></body></html>`;
+
+  win.document.getElementById("lnk").click();
+  await flush();
+
+  expect(unmounts).toBe(1);
+  expect(mounts).toBe(1);
+  expect(win.document.getElementById("app").textContent).toContain("New");
+});