htmx-router 1.0.0-pre4 → 1.0.0

package/cookies.js

@@ -47,8 +47,9 @@ export class Cookies {
         options.path ||= "/";
         this.config[name] = options;
         this.map[name] = value;
-        if (typeof this.source === "object")
+        if (this.source !== null && typeof this.source === "object") {
             document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+        }
     }
     unset(name) {
         this.parse();

package/defer.js

@@ -75,6 +75,6 @@ export async function loader(ctx) {
     if (res === null)
         return null;
     ctx.headers.set("X-Partial", "true");
-    return ctx.render(res);
+    return ctx.render(res, ctx.headers);
 }
 export const action = loader;

package/endpoint.js

@@ -35,6 +35,6 @@ export async function loader(ctx) {
         return null;
     if (res instanceof Response)
         return res;
-    return ctx.render(res);
+    return ctx.render(res, ctx.headers);
 }
 export const action = loader;

package/internal/compile/manifest.js

@@ -72,18 +72,20 @@ function BuildServerManifest(type, imported) {
     out += `\nimport { Style } from "htmx-router/css";\n`
         + `const island = new Style("i", ".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, data: string, ssr?: JSX.Element) {\n"
-        + "\treturn (<>\n"
-        + `\t\t<div className={island}>{ssr}</div>\n`
-        + `\t\t${SafeScript(type, "`Router.mountAboveWith('${name}', ${data})`")}\n`
-        + "\t</>);\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</div>);\n"
         + "}\n"
-        + "\n"
+        + "function Stringify(data: any) {\n"
+        + "\treturn JSON.stringify(data).replaceAll('<', '\\x3C');\n"
+        + "}\n\n"
         + "const Client = {\n";
     for (const name of names) {
         out += `\t${name}: function(props: FirstArg<typeof ${name}> & { children?: JSX.Element }) {\n`
-            + `\t\tconst { children, ...rest } = props;\n`
-            + `\t\treturn mount("${name}", JSON.stringify(rest), children);\n`
+            + `\t\tconst { children, ...data } = props;\n`
+            + `\t\treturn mount("${name}", Stringify(data), children);\n`
             + `\t},\n`;
     }
     out += "}\nexport default Client;";

package/internal/mount.js

@@ -33,30 +33,68 @@ function ClientMounter() {
     const global = window;
     const mountRequests = new Array();
     function RequestMount(funcName, json) {
-        const elm = document.currentScript.previousElementSibling;
+        const elm = document.currentScript.parentElement;
         if (elm.hasAttribute("mounted"))
             return;
+        if (!document.body.contains(elm))
+            return;
         mountRequests.push([funcName, elm, json]);
     }
-    function Mount() {
-        if (mountRequests.length < 1)
-            return;
+    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("mounted", "yes");
+    }
+    function MountAll() {
         if (!global.CLIENT)
             throw new Error("Client manifest missing");
-        for (const [funcName, element, json] of mountRequests) {
-            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("mounted", "yes");
+        if (mountRequests.length < 1)
+            return;
+        for (const request of mountRequests) {
+            if (!document.body.contains(request[1]))
+                continue;
+            Mount(request);
         }
         mountRequests.length = 0;
     }
-    document.addEventListener("DOMContentLoaded", Mount);
-    document.addEventListener("htmx:load", Mount);
+    function MountStep() {
+        let request = mountRequests.shift();
+        while (request && !document.body.contains(request[1]))
+            request = mountRequests.shift();
+        if (!request) {
+            console.warn("No more pending mount requests");
+            return;
+        }
+        Mount(request);
+    }
+    function Freeze() {
+        localStorage.setItem(freezeKey, "frozen");
+        window.location.reload();
+    }
+    function Unfreeze() {
+        localStorage.removeItem(freezeKey);
+        window.location.reload();
+    }
+    const freezeKey = "htmx-mount-freeze";
+    if (localStorage.getItem(freezeKey)) {
+        const ok = confirm("Client mounting is frozen, do you want to unfreeze");
+        if (ok)
+            Unfreeze();
+    }
+    else {
+        document.addEventListener("DOMContentLoaded", MountAll);
+        document.addEventListener("htmx:load", MountAll);
+    }
     return {
-        mountAboveWith: RequestMount,
+        mountParentWith: RequestMount,
+        mount: {
+            freeze: Freeze,
+            unfreeze: Unfreeze,
+            step: MountStep
+        },
         theme
     };
 }

package/internal/router.d.ts

@@ -9,7 +9,7 @@ export declare class GenericContext {
         [key: string]: string;
     };
     url: URL;
-    render: (res: JSX.Element) => Response;
+    render: (res: JSX.Element, headers: Headers) => Promise<Response> | Response;
     constructor(request: GenericContext["request"], url: GenericContext["url"], renderer: GenericContext["render"]);
     shape<T extends ParameterShaper>(shape: T): RouteContext<T>;
 }

package/navigate.d.ts

@@ -0,0 +1,3 @@
+export declare function navigate(href: string, pushUrl?: boolean): Promise<void>;
+export declare function revalidate(): Promise<void>;
+export declare function htmxAppend(href: string, verb?: string): Promise<void>;

package/navigate.js

@@ -0,0 +1,31 @@
+function htmx() {
+    const htmx = window.htmx;
+    if (typeof htmx !== "object")
+        throw new Error("Missing htmx");
+    return htmx;
+}
+export async function navigate(href, pushUrl = true) {
+    if (typeof window !== "object")
+        return;
+    const url = new URL(href, window.location.href);
+    if (url.host !== window.location.host) {
+        window.location.assign(href);
+        return;
+    }
+    // Perform an HTMX GET request similar to hx-boost
+    await htmx().ajax("GET", href, {
+        target: 'body',
+        swap: 'outerHTML',
+        history: pushUrl
+    });
+}
+export function revalidate() {
+    return navigate("", false);
+}
+export async function htmxAppend(href, verb = "GET") {
+    await htmx().ajax(verb, href, {
+        target: 'body',
+        swap: 'beforeend',
+        history: false
+    });
+}

package/package.json

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

package/router.d.ts

@@ -12,7 +12,7 @@ export declare class RouteContext<T extends ParameterShaper = {}> {
     readonly cookie: Cookies;
     readonly params: Parameterized<T>;
     readonly url: URL;
-    render: (res: JSX.Element) => Response;
+    render: GenericContext["render"];
     constructor(base: GenericContext | RouteContext, params: ParameterPrelude<T>, shape: T);
 }
 export declare class RouteTree {

package/router.js

@@ -173,7 +173,7 @@ class RouteLeaf {
             return null;
         if (res instanceof Response)
             return res;
-        return ctx.render(res);
+        return await ctx.render(res, ctx.headers);
     }
     async error(ctx, e) {
         if (!this.module.error)
@@ -181,7 +181,7 @@ class RouteLeaf {
         const res = await this.module.error(ctx, e);
         if (res instanceof Response)
             return res;
-        return ctx.render(res);
+        return await ctx.render(res, ctx.headers);
     }
     async renderWrapper(ctx) {
         try {

package/vite/bundle-splitter.js

@@ -1,8 +1,9 @@
 import { ServerOnlyWarning } from "../internal/util.js";
 ServerOnlyWarning("bundle-splitter");
+import { init, parse } from "es-module-lexer";
+await init;
 const serverPattern = /\.server\.[tj]s(x)?/;
 const clientPattern = /\.client\.[tj]s(x)?/;
-const BLANK_MODULE = "export {};";
 export function BundleSplitter() {
     return {
         name: "htmx-bundle-splitter",
@@ -11,16 +12,27 @@ export function BundleSplitter() {
             const ssr = options?.ssr || false;
             const pattern = ssr ? clientPattern : serverPattern;
             if (pattern.test(id))
-                return BLANK_MODULE;
+                return StubExports(code);
             if (ssr) {
                 if (code.startsWith('"use client"'))
-                    return BLANK_MODULE;
+                    return StubExports(code);
             }
             else {
                 if (code.startsWith('"use server"'))
-                    return BLANK_MODULE;
+                    return StubExports(code);
             }
             return code;
         }
     };
 }
+// A server only module may be imported into client code,
+// But as long as it isn't used this shouldn't break the program.
+// However JS will crash the import if the export name it's looking for isn't present.
+// Even if it's never used.
+// So we must place some stubs just in case
+function StubExports(code) {
+    const exports = parse(code)[1];
+    return exports.map(x => x.n === "default"
+        ? "export default undefined;"
+        : `export const ${x.n} = undefined;`).join("\n");
+}