htmx-router 1.0.15 → 1.0.16

package/event-source.d.ts

@@ -14,6 +14,7 @@ export declare class EventSource {
     static OPEN: number;
     static CLOSED: number;
     constructor(request: Request, keepAlive?: number);
+    isAborted(): boolean;
     private sendBytes;
     private sendText;
     private keepAlive;

package/event-source.js

@@ -42,7 +42,7 @@ export class EventSource {
         this.createdAt = Date.now();
         this.#updatedAt = 0;
         // immediate prepare for abortion
-        const cancel = () => { this.close(); };
+        const cancel = () => { this.close(); request.signal.removeEventListener("abort", cancel); };
         request.signal.addEventListener('abort', cancel);
         this.#signal = request.signal;
         const start = (c) => { this.#controller = c; this.#state = EventSource.OPEN; };
@@ -51,12 +51,13 @@ export class EventSource {
         this.#timer = setInterval(() => this.keepAlive(), keepAlive);
         register.add(this);
     }
+    isAborted() { return this.#signal.aborted; }
     sendBytes(chunk, active) {
         if (this.#state === EventSource.CLOSED) {
             const err = new Error(`Warn: Attempted to send data on closed stream for: ${this.url}`);
             console.warn(err);
         }
-        if (this.#signal.aborted) {
+        if (this.isAborted()) {
             this.close();
             return false;
         }

package/internal/compile/manifest.js

@@ -70,12 +70,12 @@ function BuildServerManifest(type, imported) {
         out += `from "${imp.href}";\n`;
     }
     out += `\nimport { Style } from "htmx-router/css";\n`
-        + `const island = new Style("i", ".this{display:contents;}\\n").name;\n\n`
+        + `const island = new Style("hx", ".this{display:contents;}\\n").name;\n\n`
         + "type FirstArg<T> = T extends (arg: infer U, ...args: any[]) => any ? U : never;\n"
         + "function mount(name: string, json: string, ssr?: JSX.Element) {\n"
         + "\treturn (<div className={island}>\n"
         + `\t\t{ssr}\n`
-        + `\t\t${SafeScript(type, "`Router.mountParentWith('${name}', ${json})`")}\n`
+        + `\t\t${SafeScript(type, "`Router._mount('${name}', ${json})`")}\n`
         + "\t</div>);\n"
         + "}\n"
         + "function Stringify(data: any) {\n"
@@ -111,17 +111,11 @@ function BuildClientManifest(type, imports) {
     for (const imported of imports) {
         if (Array.isArray(imported.mapping)) {
             for (const map of imported.mapping) {
-                out += `\t${map.name}: async (element: HTMLElement, props: any) => {\n`
-                    + `\t\tconst C = (await import("${imported.href}")).${map.original};\n`
-                    + bind.mount
-                    + `\n\t},\n`;
+                out += BuildClientMounter(map.name, map.original, imported.href, bind.mount);
             }
         }
         else {
-            out += `\t${imported.mapping.name}: async (element: HTMLElement, props: any) => {\n`
-                + `\t\tconst C = (await import("${imported.href}")).default;\n`
-                + bind.mount
-                + `\n\t},\n`;
+            out += BuildClientMounter(imported.mapping.name, "default", imported.href, bind.mount);
         }
     }
     out += "}\nexport default client;\n"
@@ -130,12 +124,19 @@ function BuildClientManifest(type, imports) {
     out += cleanup;
     return out;
 }
+function BuildClientMounter(output, input, href, mounter) {
+    return `\t${output}: async (element: HTMLElement, props: any, hydrate: boolean) => {\n`
+        + `\t\tconst C = (await import("${href}")).${input};\n`
+        + mounter
+        + `\n\t},\n`;
+}
 const binding = {
     react: {
-        mount: '\t\tconst d = await import("react-dom/client");\n'
-            + '\t\tconst r = d.createRoot(element);\n'
-            + '\t\tr.render(<C {...props} />);\n'
-            + '\t\tmounted.set(element, r);',
+        mount: `const d = await import("react-dom/client");
+		const c = <C {...props} />;
+		const r = hydrate ? d.hydrateRoot(element, c) : d.createRoot(element);
+		if (!hydrate) r.render(<C {...props} />);
+		mounted.set(element, r);\n`,
         unmount: `
 import type { Root } from "react-dom/client";
 const mounted = new Map<HTMLElement, Root>();
@@ -174,7 +175,7 @@ function CleanNode(node: Node) {
 	if (node instanceof HTMLElement) {
 		const root = mounted.get(node);
 		if (root) {
-			console.info("unmounting", node);
+			if (window.Router?.verbose) console.info("unmounting", node);
 			Unmount(node, root);
 		}
 	}

package/internal/mount.js

@@ -25,6 +25,23 @@ function ClientMounter() {
             return localStorage.getItem("theme");
         }
     };
+    /**
+     * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+     * derived from Java's string hashcode implementation
+     */
+    function HashString(s) {
+        let h = 0;
+        for (let i = 0; i < s.length; i++)
+            h = Math.imul(31, h) + s.charCodeAt(i) | 0;
+        return h;
+    }
+    const mountKey = "htmx-router-cache";
+    function GetElementCache(elm) {
+        return elm[mountKey] || null;
+    }
+    function SetElementCache(elm, cache) {
+        elm[mountKey] = cache;
+    }
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
         theme.infer();
         theme.apply();
@@ -33,21 +50,33 @@ function ClientMounter() {
     const global = window;
     const mountRequests = new Array();
     function RequestMount(funcName, json) {
-        const elm = document.currentScript.parentElement;
-        if (elm.hasAttribute("mounted"))
-            return;
+        const scope = document.currentScript;
+        let elm = scope.previousElementSibling;
+        if (!elm) {
+            const parent = scope.parentElement;
+            if (!parent)
+                throw new Error("Mounting script does not exist within <div>");
+            elm = document.createElement("div");
+            elm.style.display = "contents";
+            parent.prepend(elm);
+        }
         if (!document.body.contains(elm))
             return;
         mountRequests.push([funcName, elm, json]);
     }
     function Mount([funcName, element, json]) {
-        console.info("hydrating", funcName, "into", element);
         const func = global.CLIENT[funcName];
         if (!func)
             throw new Error(`Component ${funcName} is missing from client manifest`);
-        func(element, json);
-        element.setAttribute("component", funcName);
-        element.setAttribute("mounted", "yes");
+        const cache = GetElementCache(element);
+        const data = JSON.stringify(json);
+        const hash = HashString(data);
+        const hydrate = !!cache && cache.component === funcName
+            && cache.hash === hash && cache.data == data;
+        if (config.verbose)
+            console.info(hydrate ? "hydrating" : "mounting", funcName, "into", element);
+        func(element, json, hydrate);
+        SetElementCache(element, { component: funcName, data, hash });
     }
     function MountAll() {
         if (!global.CLIENT)
@@ -89,15 +118,18 @@ function ClientMounter() {
         document.addEventListener("DOMContentLoaded", MountAll);
         document.addEventListener("htmx:load", MountAll);
     }
-    return {
+    const config = {
+        _mount: RequestMount,
         mountParentWith: RequestMount,
         mount: {
             freeze: Freeze,
             unfreeze: Unfreeze,
             step: MountStep
         },
-        theme
+        theme,
+        verbose: window.location.hostname === "localhost"
     };
+    return config;
 }
 ;
 const script = "window.Router = (function () {"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.15",
+	"version": "1.0.16",
 	"description": "A lightweight SSR framework with server+client islands",
 	"keywords": [
 		"htmx",