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

package/internal/compile/manifest.js

@@ -0,0 +1,178 @@
+import { init, parse } from "es-module-lexer";
+import { CutString, ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("manifest-compiler");
+export function CompileManifest(adapter, source, ssr) {
+    const imported = ParseImports(source);
+    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 = [];
+    for (const imported of parsed) {
+        if (imported.a !== -1)
+            continue;
+        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) {
+            const middle = CutString(CutString(front, "import")[1], "from", -1)[0];
+            out.push({ mapping: ExtractName(middle), href });
+            continue;
+        }
+        const end = front.lastIndexOf("}");
+        const middle = front.slice(start + 1, end);
+        const segments = middle.split(",");
+        out.push({ mapping: segments.map(ExtractName), href });
+    }
+    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 BuildServerManifest(type, imported) {
+    const names = new Array();
+    for (const imp of imported) {
+        if (Array.isArray(imp.mapping))
+            names.push(...imp.mapping.map(x => x.name));
+        else
+            names.push(imp.mapping.name);
+    }
+    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"
+        + "\treturn (<>\n"
+        + `\t\t<div className={island}>{ssr}</div>\n`
+        + `\t\t${SafeScript(type, "`Router.mountAboveWith('${name}', ${data})`")}\n`
+        + "\t</>);\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},\n`;
+    }
+    out += "}\nexport default Client;";
+    return out;
+}
+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`
+                    + 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`
+                + bind.mount
+                + `\n\t},\n`;
+        }
+    }
+    out += "}\nexport default client;\n"
+        + "(window as any).CLIENT = client;\n\n";
+    out += bind.unmount;
+    out += cleanup;
+    return out;
+}
+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,8 +1,12 @@
-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 = {
+        get: () => {
+            return (localStorage.getItem("theme") || theme.infer());
+        },
         infer: () => {
             const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
             const current = prefersDark ? 'dark' : 'light';
@@ -10,16 +14,15 @@ function ClientMounter() {
             return current;
         },
         apply: () => {
-            const current = localStorage.getItem("theme") || theme.infer();
-            document.documentElement.setAttribute('data-theme', current);
+            document.documentElement.setAttribute('data-theme', theme.get());
         },
         toggle: () => {
-            const current = localStorage.getItem("theme") || theme.infer();
-            if (current === "dark")
+            if (theme.get() === "dark")
                 localStorage.setItem("theme", "light");
             else
                 localStorage.setItem("theme", "dark");
             theme.apply();
+            return localStorage.getItem("theme");
         }
     };
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -30,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)
@@ -43,12 +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);
+    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/{bin → internal}/request/native.js

@@ -1,4 +1,6 @@
-import { GenericContext } from '../router.js';
+import { ServerOnlyWarning } from "../util.js";
+ServerOnlyWarning("native-request");
+import { GenericContext } from '../../router.js';
 export function createRequestHandler(config) {
     return async (req) => {
         try {
@@ -27,24 +29,20 @@ export async function Resolve(request, tree, config) {
     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(ctx.headers);
+    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..[]
     }
-    // Merge context headers
-    if (response.headers !== ctx.headers) {
-        for (const [key, value] of response.headers) {
-            if (!headers[key]) {
-                headers[key] = value;
-                continue;
-            }
-            if (!Array.isArray(headers[key]))
-                headers[key] = [headers[key]];
-            headers[key].push(value);
-        }
-    }
     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.4",
+	"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",