htmx-router 1.0.0-alpha.5 → 1.0.0-alpha.6

package/{bin/client/index.js → internal/compile/manifest.js}

@@ -1,27 +1,14 @@
-/**
- * Builds the SSR and client side mounter for client components
- */
-import { readFile, writeFile } from "fs/promises";
 import { init, parse } from "es-module-lexer";
-import { QuickHash } from "../util/hash.js";
-import { CutString } from "../helper.js";
-const pivot = `\n// DO NOT EDIT BELOW THIS LINE\n`;
-export async function GenerateClient(config, force = false) {
-    const file = await readFile(config.source, "utf8");
-    const [source, history] = CutString(file, pivot);
-    const hash = QuickHash(source);
-    if (!force && ExtractHash(history) === hash)
-        return;
-    await init;
+import { CutString, ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("manifest-compiler");
+export function CompileManifest(adapter, source, ssr) {
     const imported = ParseImports(source);
-    await Promise.all([
-        writeFile(config.source, source
-            + pivot
-            + `// hash: ${hash}\n`
-            + BuildClientServer(config.adapter, imported)),
-        writeFile(CutString(config.source, ".", -1)[0] + ".manifest.tsx", BuildClientManifest(config.adapter, imported))
-    ]);
+    if (ssr)
+        return BuildServerManifest(adapter, imported);
+    return BuildClientManifest(adapter, imported);
+    ;
 }
+await init; // ensure the webassembly module is ready
 function ParseImports(source) {
     const parsed = parse(source)[0];
     const out = [];
@@ -31,6 +18,8 @@ function ParseImports(source) {
         if (imported.t !== 1)
             continue;
         const href = source.slice(imported.s, imported.e);
+        if (href === "htmx-router")
+            continue;
         const front = source.slice(imported.ss, imported.s);
         const start = front.indexOf("{");
         if (start === -1) {
@@ -39,18 +28,20 @@ function ParseImports(source) {
             continue;
         }
         const end = front.lastIndexOf("}");
-        const segments = front.slice(start + 1, end).split(",");
+        const middle = front.slice(start + 1, end);
+        const segments = middle.split(",");
         out.push({ mapping: segments.map(ExtractName), href });
     }
     return out;
 }
-function SafeScript(type, script) {
-    switch (type) {
-        case "react": return `<script dangerouslySetInnerHTML={{__html: ${script}}}></script>`;
-        default: return `<script>${script}</script>`;
-    }
+function ExtractName(str) {
+    const parts = CutString(str, " as ");
+    if (parts[1].length !== 0)
+        return { name: parts[1].trim(), original: parts[0].trim() };
+    const name = parts[0].trim();
+    return { name, original: name };
 }
-function BuildClientServer(type, imported) {
+function BuildServerManifest(type, imported) {
     const names = new Array();
     for (const imp of imported) {
         if (Array.isArray(imp.mapping))
@@ -58,7 +49,27 @@ function BuildClientServer(type, imported) {
         else
             names.push(imp.mapping.name);
     }
-    let out = `import { StyleClass } from "htmx-router";\n`
+    let out = "";
+    for (const imp of imported) {
+        out += "import ";
+        if (!Array.isArray(imp.mapping)) {
+            out += ImportNameSource(imp.mapping) + " ";
+        }
+        else {
+            let first = true;
+            out += "{ ";
+            for (const name of imp.mapping) {
+                if (first)
+                    first = false;
+                else
+                    out += ", ";
+                out += ImportNameSource(name);
+            }
+            out += " } ";
+        }
+        out += `"${imp.href}";\n\n`;
+    }
+    out = `import { StyleClass } from "htmx-router/css";\n`
         + `const island = new StyleClass("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"
@@ -75,58 +86,93 @@ function BuildClientServer(type, imported) {
             + `\t\treturn mount("${name}", JSON.stringify(rest), children);\n`
             + `\t},\n`;
     }
-    out += "}\nexport default Client;\n\n"
-        + `import { __RebuildClient__ } from "htmx-router/bin/client/watch.js";\n`
-        + `__RebuildClient__();`;
+    out += "}\nexport default Client;";
     return out;
 }
-const renderer = {
-    react: '\t\tconst r = await import("react-dom/client");\n'
-        + "\t\tr.createRoot(element).render(<C {...props} />);\n"
-};
-function BuildClientManifest(type, imports) {
-    let out = "/*------------------------------------------\n"
-        + " * Generated by htmx-router                *\n"
-        + " * Warn: Any changes will be overwritten   *\n"
-        + "-------------------------------------------*/\n\n"
-        + "/* eslint-disable @typescript-eslint/no-explicit-any */\n"
-        + "const client = {\n";
-    const render = renderer[type];
-    if (!render) {
-        console.error(`Unsupported client adapter ${type}`);
-        process.exit(1);
+function ImportNameSource(name) {
+    if (name.original === name.name)
+        return name;
+    return `${name.original} as ${name.name}`;
+}
+function SafeScript(type, script) {
+    switch (type) {
+        case "react": return `<script dangerouslySetInnerHTML={{__html: ${script}}}></script>`;
+        default: return `<script>${script}</script>`;
     }
+}
+function BuildClientManifest(type, imports) {
+    const bind = binding[type];
+    if (!bind)
+        throw new Error(`Unsupported client adapter ${type}`);
+    let out = "const client = {\n";
     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`
-                    + render
-                    + `\t},\n`;
+                    + bind.mount
+                    + `\n\t},\n`;
             }
         }
         else {
             out += `\t${imported.mapping.name}: async (element: HTMLElement, props: any) => {\n`
                 + `\t\tconst C = (await import("${imported.href}")).default;\n`
-                + render
-                + `\t},\n`;
+                + bind.mount
+                + `\n\t},\n`;
         }
     }
     out += "}\nexport default client;\n"
-        + "(window as any).CLIENT = client;";
+        + "(window as any).CLIENT = client;\n\n";
+    out += bind.unmount;
+    out += cleanup;
     return out;
 }
-function ExtractName(str) {
-    const parts = CutString(str, "as");
-    if (parts[1].length !== 0)
-        return { name: parts[1].trim(), original: parts[0].trim() };
-    const name = parts[0].trim();
-    return { name, original: name };
-}
-function ExtractHash(source) {
-    const regex = /\/\/\s+hash\s*:\s*(\w+)/;
-    const match = source.match(regex);
-    if (match)
-        return match[1] || "";
-    return "";
+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);',
+        unmount: `
+import type { Root } from "react-dom/client";
+const mounted = new Map<HTMLElement, Root>();
+function Unmount(node: HTMLElement, root: Root) {
+	mounted.delete(node);
+	root.unmount();
+}`
+    }
+};
+const cleanup = `
+
+const limbo = new Set<Node>();
+let queued = false;
+const observer = new MutationObserver((mutations) => {
+	for (const mut of mutations) {
+		for (const node of mut.removedNodes) limbo.add(node);
+		for (const node of mut.addedNodes)   limbo.delete(node);
+	}
+
+	if (!queued) {
+		queueMicrotask(Cleanup);
+		queued = true;
+	}
+});
+observer.observe(document.body, { childList: true, subtree: true });
+
+function Cleanup() {
+	queued = false;
+	for (const elm of limbo) CleanNode(elm);
+	limbo.clear();
 }
+
+function CleanNode(node: Node) {
+	if (node instanceof HTMLElement) {
+		const root = mounted.get(node);
+		if (root) {
+			console.info("unmounting", node);
+			Unmount(node, root);
+		}
+	}
+
+	for (const child of node.childNodes) CleanNode(child);
+}`;

package/internal/compile/router.d.ts

@@ -0,0 +1 @@
+export declare function CompileRouter(folder: string): string;

package/internal/compile/router.js

@@ -0,0 +1,51 @@
+export function CompileRouter(folder) {
+    return `import { GenericContext, RouteTree } from "htmx-router/bin/router";
+import { GetClientEntryURL } from 'htmx-router/bin/client/entry';
+import { DynamicReference } from "htmx-router/bin/util/dynamic";
+import { GetMountUrl } from 'htmx-router/bin/client/mount';
+import { GetSheetUrl } from 'htmx-router/bin/util/css';
+import { resolve } from "path";
+
+const modules = import.meta.glob('/${folder}/**/*.{ts,tsx}', { eager: true });
+console.log("${folder}");
+console.log(modules);
+
+export const tree = new RouteTree();
+for (const path in modules) {
+	const mod = modules[path];
+	const tail = path.lastIndexOf(".");
+	const url = path.slice(${folder.length + 1}, tail);
+	tree.ingest(url, mod);
+}`;
+}
+/*
+export function Dynamic<T extends Record<string, string>>(props: {
+    params?: T,
+    loader: (ctx: GenericContext, params?: T) => Promise<JSX.Element>
+    children?: JSX.Element
+}): JSX.Element {
+    return <div
+        hx-get={DynamicReference(props.loader, props.params)}
+        hx-trigger="load"
+        hx-swap="outerHTML transition:true"
+        style={{ display: "contents" }}
+    >{props.children ? props.children : ""}</div>
+}
+
+let headCache: JSX.Element | null = null;
+const isProduction = process.env.NODE_ENV === "production";
+const clientEntry = await GetClientEntryURL();
+export function Scripts() {
+    if (headCache) return headCache;
+
+    const res = <>
+        <link href={GetSheetUrl()} rel="stylesheet"></link>
+        { isProduction ? "" : <script type="module" src="/@vite/client"></script> }
+        <script type="module" src={clientEntry}></script>
+        <script src={GetMountUrl()}></script>
+    </>;
+
+    if (isProduction) headCache = res;
+    return res;
+}
+*/ 

package/internal/component/dynamic.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    "*": string;
+};
+export default _default;

package/internal/component/dynamic.js

@@ -0,0 +1,18 @@
+const generic = `import { DynamicReference } from "htmx-router/dynamic";
+import { GenericContext } from "htmx-router/router";
+
+export function Dynamic<T extends Record<string, string>>(props: {
+	params?: T,
+	loader: (ctx: GenericContext, params?: T) => Promise<JSX.Element>
+	children?: JSX.Element
+}): JSX.Element {
+	return <div
+		hx-get={DynamicReference(props.loader, props.params)}
+		hx-trigger="load"
+		hx-swap="outerHTML transition:true"
+		style={{ display: "contents" }}
+	>{props.children ? props.children : ""}</div>
+}`;
+export default {
+    "*": generic
+};

package/internal/component/head.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    "*": string;
+    react: string;
+};
+export default _default;

package/internal/component/head.js

@@ -0,0 +1,22 @@
+const generic = `import { RenderMetaDescriptor, ShellOptions } from "htmx-router/shell";
+
+export function Head<T>(props: { options: ShellOptions<T>, children: JSX.Element }) {
+	return <head>
+		{ RenderMetaDescriptor(props.options) as "safe" }
+		{ props.children as "safe" }
+	</head>;
+}`;
+const react = `import { RenderMetaDescriptor, ShellOptions } from "htmx-router/shell";
+import { renderToString } from 'react-dom/server';
+import { ReactNode } from "react";
+
+export function Head<T>(props: { options: ShellOptions<T>, children: ReactNode }) {
+	const body = RenderMetaDescriptor(props.options)
+		+ renderToString(props.children);
+
+	return <head dangerouslySetInnerHTML={{ __html: body }}></head>;
+}`;
+export default {
+    "*": generic,
+    react
+};

package/internal/component/scripts.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    "*": string;
+};
+export default _default;

package/internal/component/scripts.js

@@ -0,0 +1,23 @@
+const generic = `import { GetClientEntryURL } from 'htmx-router/internal/client';
+import { GetMountUrl } from 'htmx-router/internal/mount';
+import { GetSheetUrl } from 'htmx-router/css';
+
+let cache: JSX.Element | null = null;
+const isProduction = process.env.NODE_ENV === "production";
+const clientEntry = await GetClientEntryURL();
+export function Scripts() {
+	if (cache) return cache;
+
+	const res = <>
+		<link href={GetSheetUrl()} rel="stylesheet"></link>
+		{ isProduction ? "" : <script type="module" src="/@vite/client"></script> }
+		<script type="module" src={clientEntry}></script>
+		<script src={GetMountUrl()}></script>
+	</>;
+
+	if (isProduction) cache = res;
+	return res;
+}`;
+export default {
+    "*": generic
+};

package/{bin/client → internal}/mount.js

@@ -1,5 +1,6 @@
-import { QuickHash } from "../util/hash.js";
-import { CutString } from "../helper.js";
+import { ServerOnlyWarning } from "./util.js";
+ServerOnlyWarning("client-mounter");
+import { CutString, QuickHash } from "./util.js";
 // this function simply exists so it can be stringified and written into the client js bundle
 function ClientMounter() {
     const theme = {
@@ -32,7 +33,10 @@ function ClientMounter() {
     const global = window;
     const mountRequests = new Array();
     function RequestMount(funcName, json) {
-        mountRequests.push([funcName, document.currentScript.previousElementSibling, json]);
+        const elm = document.currentScript.previousElementSibling;
+        if (elm.hasAttribute("mounted"))
+            return;
+        mountRequests.push([funcName, elm, json]);
     }
     function Mount() {
         if (mountRequests.length < 1)
@@ -45,51 +49,12 @@ function ClientMounter() {
             if (!func)
                 throw new Error(`Component ${funcName} is missing from client manifest`);
             func(element, json);
+            element.setAttribute("mounted", "yes");
         }
         mountRequests.length = 0;
     }
     document.addEventListener("DOMContentLoaded", Mount);
-    if (global.htmx)
-        global.htmx.onLoad(Mount);
-    // Track the number of active requests
-    let activeRequests = 0;
-    const updateLoadingAttribute = () => {
-        if (activeRequests > 0)
-            document.body.setAttribute('data-loading', 'true');
-        else
-            document.body.removeAttribute('data-loading');
-    };
-    const originalXHROpen = XMLHttpRequest.prototype.open;
-    const originalXHRSend = XMLHttpRequest.prototype.send;
-    // @ts-ignore
-    XMLHttpRequest.prototype.open = function (...args) {
-        this.addEventListener('loadstart', () => {
-            activeRequests++;
-            updateLoadingAttribute();
-        });
-        this.addEventListener('loadend', () => {
-            activeRequests--;
-            updateLoadingAttribute();
-        });
-        originalXHROpen.apply(this, args);
-    };
-    XMLHttpRequest.prototype.send = function (...args) {
-        originalXHRSend.apply(this, args);
-    };
-    // Override fetch
-    const originalFetch = window.fetch;
-    window.fetch = async (...args) => {
-        activeRequests++;
-        updateLoadingAttribute();
-        try {
-            const response = await originalFetch(...args);
-            return response;
-        }
-        finally {
-            activeRequests--;
-            updateLoadingAttribute();
-        }
-    };
+    document.addEventListener("htmx:load", Mount);
     return {
         mountAboveWith: RequestMount,
         theme

package/internal/request/http.d.ts

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from "http";
+import type { ViteDevServer } from "vite";
+import type { GenericContext } from "../../router.js";
+type Config = {
+    build: Promise<any> | (() => Promise<Record<string, any>>);
+    viteDevServer: ViteDevServer | null;
+    render: GenericContext["render"];
+};
+export declare function createRequestHandler(config: Config): (req: IncomingMessage, res: ServerResponse) => Promise<void>;
+export {};

package/internal/request/http.js

@@ -0,0 +1,61 @@
+import { ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("http-request");
+import { Resolve } from "./native.js";
+export function createRequestHandler(config) {
+    return async (req, res) => {
+        try {
+            const mod = typeof config.build === "function" ? await config.build() : await config.build;
+            const request = NativeRequest(req);
+            let { response, headers } = await Resolve(request, mod.tree, config);
+            res.writeHead(response.status, headers);
+            if (response.body instanceof ReadableStream) {
+                const reader = response.body.getReader();
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    res.write(value); // `value` is a Uint8Array.
+                }
+                res.end();
+            }
+            else {
+                const rendered = await response.text();
+                res.end(rendered);
+            }
+        }
+        catch (e) {
+            res.statusCode = 500;
+            if (e instanceof Error) {
+                console.error(e.stack);
+                config.viteDevServer?.ssrFixStacktrace(e);
+                res.end(e.stack);
+            }
+            else {
+                console.error(e);
+                res.end(String(e));
+            }
+        }
+    };
+}
+function NativeRequest(req) {
+    const ctrl = new AbortController();
+    const headers = new Headers(req.headers);
+    const url = new URL(`http://${headers.get('host')}${req.originalUrl || req.url}`);
+    req.once('aborted', () => ctrl.abort());
+    const bodied = req.method !== "GET" && req.method !== "HEAD";
+    const request = new Request(url, {
+        headers,
+        method: req.method,
+        body: bodied ? req : undefined,
+        signal: ctrl.signal,
+        referrer: headers.get("referrer") || undefined,
+        // @ts-ignore
+        duplex: bodied ? 'half' : undefined
+    });
+    if (!request.headers.has("X-Real-IP")) {
+        const info = req.socket.address();
+        if ("address" in info)
+            request.headers.set("X-Real-IP", info.address);
+    }
+    return request;
+}

package/{bin → internal}/request/index.d.ts

@@ -1,7 +1,7 @@
 import type { ViteDevServer } from "vite";
-import * as native from "../request/native.js";
-import * as http from "../request/http.js";
-import { GenericContext, RouteTree } from '../router.js';
+import type { GenericContext, RouteTree } from '../../router.js';
+import * as native from "./native.js";
+import * as http from "./http.js";
 export type Config = {
     build: Promise<any> | (() => Promise<Record<string, any>>);
     viteDevServer: ViteDevServer | null;

package/internal/request/index.js

@@ -0,0 +1,8 @@
+import { ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("request");
+import * as native from "./native.js";
+import * as http from "./http.js";
+export const createRequestHandler = {
+    http: http.createRequestHandler,
+    native: native.createRequestHandler
+};

package/{bin → internal}/request/native.d.ts

@@ -1,5 +1,5 @@
-import { RouteTree } from '../router.js';
-import { Config } from '../request/index.js';
+import { type RouteTree } from '../../router.js';
+import type { Config } from './index.js';
 export declare function createRequestHandler(config: Config): (req: Request) => Promise<Response>;
 export declare function Resolve(request: Request, tree: RouteTree, config: Config): Promise<{
     response: Response;

package/internal/request/native.js

@@ -0,0 +1,48 @@
+import { ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("native-request");
+import { GenericContext } from '../../router.js';
+export function createRequestHandler(config) {
+    return async (req) => {
+        try {
+            const mod = typeof config.build === "function" ? await config.build() : await config.build;
+            let { response } = await Resolve(req, mod.tree, config);
+            return response;
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                console.error(e.stack);
+                config.viteDevServer?.ssrFixStacktrace(e);
+                return new Response(e.message + "\n" + e.stack, { status: 500, statusText: "Internal Server Error" });
+            }
+            else {
+                console.error(e);
+                return new Response(String(e), { status: 500, statusText: "Internal Server Error" });
+            }
+        }
+    };
+}
+export async function Resolve(request, tree, config) {
+    const url = new URL(request.url);
+    const ctx = new GenericContext(request, url, config.render);
+    const x = ctx.url.pathname.endsWith("/") ? ctx.url.pathname.slice(0, -1) : ctx.url.pathname;
+    const fragments = x.split("/").slice(1);
+    let response = await tree.resolve(fragments, ctx);
+    if (response === null)
+        response = new Response("No Route Found", { status: 404, statusText: "Not Found", headers: ctx.headers });
+    // Override with context headers
+    if (response.headers !== ctx.headers) {
+        for (const [key, value] of ctx.headers) {
+            if (response.headers.has(key))
+                continue;
+            response.headers.set(key, value);
+        }
+    }
+    // Merge cookie changes
+    const headers = Object.fromEntries(response.headers);
+    const cookies = ctx.cookie.export();
+    if (cookies.length > 0) {
+        headers['set-cookie'] = cookies;
+        response.headers.set("Set-Cookie", cookies[0]); // Response object doesn't support multi-header..[]
+    }
+    return { response, headers };
+}

package/{bin/helper.d.ts → internal/util.d.ts}

@@ -1,2 +1,4 @@
+export declare function QuickHash(input: string): string;
 export declare function CutString(str: string, pivot: string, offset?: number): [string, string];
 export declare function Singleton<T>(name: string, cb: () => T): T;
+export declare function ServerOnlyWarning(context: string): void;

package/{bin/helper.js → internal/util.js}

@@ -1,3 +1,10 @@
+export function QuickHash(input) {
+    let hash = 0;
+    for (let i = 0; i < input.length; i++) {
+        hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
+    }
+    return hash.toString(36).slice(0, 5);
+}
 export function CutString(str, pivot, offset = 1) {
     if (offset > 0) {
         let cursor = 0;
@@ -32,3 +39,11 @@ export function Singleton(name, cb) {
     g.__singletons[name] ??= cb();
     return g.__singletons[name];
 }
+export function ServerOnlyWarning(context) {
+    if (typeof process !== "undefined")
+        return;
+    if (typeof document == "undefined")
+        return;
+    console.warn(`Warn: Server-side only htmx-router feature ${context} has leaked to client code`);
+    console.log(typeof document, typeof process);
+}

package/package.json

@@ -1,15 +1,19 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.0-alpha.5",
+	"version": "1.0.0-alpha.6",
 	"description": "A simple SSR framework with dynamic+client islands",
-	"keywords": ["htmx", "router", ""],
-	"main": "./bin/index.js",
+	"keywords": [
+		"htmx",
+		"router",
+		""
+	],
+	"main": "./index.js",
 	"type": "module",
 	"scripts": {
 		"build": "tsc && tsc-alias"
 	},
 	"bin": {
-		"htmx-router": "bin/cli/index.js"
+		"htmx-router": "./cli/index.js"
 	},
 	"repository": {
 		"type": "git",
@@ -23,7 +27,7 @@
 	"homepage": "https://github.com/AjaniBilby/htmx-router#readme",
 	"dependencies": {
 		"es-module-lexer": "^1.5.4",
-		"vite": "^6.0.1"
+		"vite": "^6.0.6"
 	},
 	"devDependencies": {
 		"@types/node": "^20.4.5",