htmx-router 1.0.0-pre1 → 1.0.0-pre2

package/internal/compile/manifest.js

@@ -0,0 +1,179 @@
+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 = "/* eslint-disable @typescript-eslint/no-explicit-any */\n";
+    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 += `from "${imp.href}";\n`;
+    }
+    out += `\nimport { 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.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 = "/* eslint-disable @typescript-eslint/no-explicit-any */\n\n";
+    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/component/defer.d.ts

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

package/internal/component/defer.js

@@ -0,0 +1,19 @@
+const generic = `import { Parameterized, ParameterShaper } from "htmx-router/util/parameters";
+import { RenderFunction } from "htmx-router";
+import { Deferral } from "htmx-router/dynamic";
+
+export function Defer<T extends ParameterShaper>(props: {
+	params?: Parameterized<T>,
+	loader:  RenderFunction<T>,
+	children?: JSX.Element
+}): JSX.Element {
+	return <div
+		hx-get={Deferral(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/index.d.ts

@@ -0,0 +1,4 @@
+import defer from "./defer.js";
+import scripts from "./scripts.js";
+import head from "./head.js";
+export { defer, head, scripts };

package/internal/component/index.js

@@ -0,0 +1,4 @@
+import defer from "./defer.js";
+import scripts from "./scripts.js";
+import head from "./head.js";
+export { defer, head, scripts };

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/internal/mount.d.ts

@@ -0,0 +1,10 @@
+import { RouteContext } from "../index.js";
+export declare function GetMountUrl(): string;
+/**
+ * RouteTree mounting point
+ */
+export declare const path = "_/mount/$hash";
+export declare const parameters: {
+    hash: StringConstructor;
+};
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;

package/internal/mount.js

@@ -0,0 +1,88 @@
+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';
+            localStorage.setItem("theme", current);
+            return current;
+        },
+        apply: () => {
+            document.documentElement.setAttribute('data-theme', theme.get());
+        },
+        toggle: () => {
+            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', () => {
+        theme.infer();
+        theme.apply();
+    });
+    theme.apply();
+    const global = window;
+    const mountRequests = new Array();
+    function RequestMount(funcName, json) {
+        const elm = document.currentScript.previousElementSibling;
+        if (elm.hasAttribute("mounted"))
+            return;
+        mountRequests.push([funcName, elm, json]);
+    }
+    function Mount() {
+        if (mountRequests.length < 1)
+            return;
+        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");
+        }
+        mountRequests.length = 0;
+    }
+    document.addEventListener("DOMContentLoaded", Mount);
+    document.addEventListener("htmx:load", Mount);
+    return {
+        mountAboveWith: RequestMount,
+        theme
+    };
+}
+;
+const script = "window.Router = (function () {"
+    + CutString(ClientMounter.toString(), "{")[1]
+    + ")();";
+const hash = QuickHash(script);
+export function GetMountUrl() {
+    return `/_/mount/${hash}.js`;
+}
+/**
+ * RouteTree mounting point
+ */
+export const path = "_/mount/$hash";
+export const parameters = {
+    hash: String
+};
+export async function loader(ctx) {
+    if (!ctx.params.hash)
+        return null;
+    // const build = GetSheet();
+    if (!ctx.params.hash.startsWith(hash))
+        return null;
+    const headers = new Headers();
+    headers.set("Content-Type", "text/javascript");
+    headers.set("Cache-Control", "public, max-age=604800");
+    return new Response(script, { headers });
+}

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/internal/request/index.d.ts

@@ -0,0 +1,17 @@
+import type { ViteDevServer } from "vite";
+import type { GenericContext } from "../router.js";
+import type { 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;
+    render: GenericContext["render"];
+};
+export type RouterModule = {
+    tree: RouteTree;
+};
+export declare const createRequestHandler: {
+    http: typeof http.createRequestHandler;
+    native: typeof native.createRequestHandler;
+};

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/internal/request/native.d.ts

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

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/internal/router.d.ts

@@ -0,0 +1,15 @@
+import { ParameterShaper } from '../util/parameters.js';
+import { RouteContext } from "../router.js";
+import { Cookies } from '../cookies.js';
+export declare class GenericContext {
+    request: Request;
+    headers: Headers;
+    cookie: Cookies;
+    params: {
+        [key: string]: string;
+    };
+    url: URL;
+    render: (res: JSX.Element) => Response;
+    constructor(request: GenericContext["request"], url: GenericContext["url"], renderer: GenericContext["render"]);
+    shape<T extends ParameterShaper>(shape: T): RouteContext<T>;
+}

package/internal/router.js

@@ -0,0 +1,24 @@
+import { ServerOnlyWarning } from "./util.js";
+ServerOnlyWarning("internal/router");
+import { RouteContext } from "../router.js";
+import { Cookies } from '../cookies.js';
+export class GenericContext {
+    request;
+    headers; // response headers
+    cookie;
+    params;
+    url;
+    render;
+    constructor(request, url, renderer) {
+        this.cookie = new Cookies(request.headers.get("cookie"));
+        this.headers = new Headers();
+        this.request = request;
+        this.params = {};
+        this.url = url;
+        this.render = renderer;
+        this.headers.set("x-powered-by", "htmx-router");
+    }
+    shape(shape) {
+        return new RouteContext(this, this.params, shape);
+    }
+}

package/internal/util.d.ts

@@ -0,0 +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/internal/util.js

@@ -0,0 +1,49 @@
+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;
+        while (offset !== 0) {
+            const i = str.indexOf(pivot, cursor);
+            if (i === -1)
+                return [str, ""];
+            cursor = i + 1;
+            offset--;
+        }
+        cursor--;
+        return [str.slice(0, cursor), str.slice(cursor + pivot.length)];
+    }
+    if (offset < 0) {
+        let cursor = str.length;
+        while (offset !== 0) {
+            const i = str.lastIndexOf(pivot, cursor);
+            if (i === -1)
+                return [str, ""];
+            cursor = i - 1;
+            offset++;
+        }
+        cursor++;
+        return [str.slice(0, cursor), str.slice(cursor + pivot.length)];
+    }
+    return [str, ""];
+}
+export function Singleton(name, cb) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const g = globalThis;
+    g.__singletons ??= {};
+    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,6 +1,6 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.0-pre1",
+	"version": "1.0.0-pre2",
 	"description": "A lightweight SSR framework with server+client islands",
 	"keywords": [
 		"htmx", "router", "client islands", "ssr", "vite"

package/response.d.ts

@@ -0,0 +1,13 @@
+export declare function text(text: string, init?: ResponseInit): Response;
+export type TypedResponse<T> = Omit<Response, "json"> & {
+    json(): Promise<T>;
+};
+export type TypedJson<U extends TypedResponse<any>> = U extends TypedResponse<infer T> ? T : never;
+export declare function json<T>(data: T, init?: ResponseInit): TypedResponse<T>;
+export declare function redirect(url: string, init?: ResponseInit & {
+    clientOnly?: boolean;
+}): Response;
+export declare function revalidate(init?: ResponseInit): Response;
+export declare function refresh(init?: ResponseInit & {
+    clientOnly?: boolean;
+}): Response;