htmx-router 0.2.0 → 1.0.0-alpha.1

package/bin/cli/config.d.ts

@@ -0,0 +1,10 @@
+export declare function ReadConfig(): Promise<{
+    client?: {
+        adapter: string;
+        source: string;
+    };
+    router: {
+        folder: string;
+        output: string;
+    };
+}>;

package/bin/cli/config.js

@@ -0,0 +1,4 @@
+import { readFile } from "fs/promises";
+export async function ReadConfig() {
+    return JSON.parse(await readFile(process.argv[2] || "./htmx-router.json", "utf-8"));
+}

package/bin/cli/index.js

@@ -1,14 +1,58 @@
 #!/usr/bin/env node
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const dynamic_1 = require("./dynamic");
-const static_1 = require("./static");
-const isDynamic = process.argv.includes('--dynamic');
-const cwd = process.argv[2] || "./";
-console.log(`Building ${isDynamic ? "dynamic" : "static"} routes`);
-if (isDynamic) {
-    (0, dynamic_1.BuildDynamic)(cwd);
+import { writeFile } from "fs/promises";
+import { relative } from "path";
+import { GenerateClient } from "../client/index.js";
+import { ReadConfig } from "../cli/config.js";
+const config = await ReadConfig();
+console.info("Building router");
+const routes = relative(config.router.output, config.router.folder).replaceAll("\\", "/").slice(1);
+await writeFile(config.router.output, `/*------------------------------------------
+ * Generated by htmx-router                *
+ * Warn: Any changes will be overwritten   *
+-------------------------------------------*/
+
+import { GenericContext, RouteTree } from "htmx-router/bin/router";
+import { RegisterDynamic } from "htmx-router/bin/util/dynamic";
+import { GetMountUrl } from 'htmx-router/bin/client/mount';
+import { GetSheetUrl } from 'htmx-router/bin/util/css';
+import { RouteModule } from "htmx-router";
+
+const modules = import.meta.glob('${routes}/**/*.{ts,tsx}', { eager: true });
+
+export const tree = new RouteTree();
+for (const path in modules) {
+	const tail = path.lastIndexOf(".");
+	const url = path.slice(${routes.length + 1}, tail);
+	tree.ingest(url, modules[path] as RouteModule<any>);
 }
-else {
-    (0, static_1.BuildStatic)(cwd);
+
+export function Dynamic<T extends Record<string, string>>(props: {
+	params: T,
+	loader: (params: T, ctx: GenericContext) => Promise<JSX.Element>
+	children?: JSX.Element
+}): JSX.Element {
+	const path = RegisterDynamic(props.loader);
+
+	const query = new URLSearchParams();
+	for (const key in props.params) query.set(key, props.params[key]);
+	const url = path + query.toString();
+
+	return <div
+		hx-get={url}
+		hx-trigger="load"
+		hx-swap="outerHTML transition:true"
+		style={{ display: "contents" }}
+	>{props.children ? props.children : ""}</div>
+}
+
+export function RouteHeaders() {
+	return <>
+		<link href={GetSheetUrl()} rel="stylesheet"></link>
+		<script src={GetMountUrl()}></script>
+	</>
+}`);
+if (config.client) {
+    console.info("Building client islands");
+    await GenerateClient(config.client, true);
 }

package/bin/client/index.d.ts

@@ -0,0 +1,4 @@
+export declare function GenerateClient(config: {
+    adapter: string;
+    source: string;
+}, force?: boolean): Promise<void>;

package/bin/client/index.js

@@ -0,0 +1,100 @@
+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;
+    const parsed = parse(source)[0];
+    const imports = new Array();
+    const names = new Array();
+    for (const imp of parsed) {
+        if (imp.a !== -1)
+            continue;
+        if (imp.t !== 1)
+            continue;
+        imports.push(source.slice(imp.ss, imp.se));
+        names.push(...ExtractNames(source.slice(imp.ss, imp.s)));
+    }
+    await writeFile(config.source, source
+        + pivot
+        + `// hash: ${hash}\n`
+        + BuildClientServer(names));
+    await writeFile(CutString(config.source, ".", -1)[0] + ".manifest.tsx", BuildClientManifest(config.adapter, names, imports));
+}
+function BuildClientServer(names) {
+    let out = "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 style={{ display: "contents" }}>{ssr}</div>\n`
+        + "\t\t<script>{`Router.mountAboveWith(\"${name}\", JSON.parse(\"${data}\"))`}</script>\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;\n\n"
+        + `if (process.env.NODE_ENV !== "production") {\n`
+        + `\t(await import( "htmx-router/bin/client/watch.js")).WatchClient();\n`
+        + `}`;
+    return out;
+}
+function BuildClientManifest(type, names, imports) {
+    let out = "/*------------------------------------------\n"
+        + " * Generated by htmx-router                *\n"
+        + " * Warn: Any changes will be overwritten   *\n"
+        + "-------------------------------------------*/\n"
+        + imports.join(";\n") + ";\n";
+    switch (type) {
+        case "react":
+            out += BuildReactClientManifest(names);
+            break;
+        default:
+            console.error(`Unsupported client adapter ${type}`);
+            process.exit(1);
+    }
+    out += "export default client;\n"
+        + "(window as any).CLIENT = client;";
+    return out;
+}
+function BuildReactClientManifest(names) {
+    let out = `import ReactDOM from "react-dom/client";\n\n`
+        + "const client = {\n";
+    for (const name of names)
+        out += `\t${name}: (element: HTMLElement, props: any) => ReactDOM.createRoot(element).render(<${name} {...props} />),\n`;
+    out += "};\n";
+    return out;
+}
+function ExtractNames(str) {
+    const start = str.indexOf("{");
+    if (start === -1) {
+        const middle = CutString(CutString(str, "import")[1], "from", -1)[0];
+        return [ExtractName(middle)];
+    }
+    const end = str.lastIndexOf("}");
+    const segments = str.slice(start + 1, end).split(",");
+    return segments.map(ExtractName);
+}
+function ExtractName(str) {
+    const parts = CutString(str, "as");
+    if (parts[1])
+        return parts[1].trim();
+    return parts[0].trim();
+}
+function ExtractHash(source) {
+    const regex = /\/\/\s+hash\s*:\s*(\w+)/;
+    const match = source.match(regex);
+    if (match)
+        return match[1] || "";
+    return "";
+}

package/bin/client/mount.d.ts

@@ -0,0 +1,2 @@
+export declare function _resolve(fragments: string[]): Response | null;
+export declare function GetMountUrl(): string;

package/bin/client/mount.js

@@ -0,0 +1,74 @@
+import { QuickHash } from "../util/hash.js";
+import { CutString } from "../helper.js";
+function ClientMounter() {
+    const theme = {
+        infer: () => {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const current = prefersDark ? 'dark' : 'light';
+            localStorage.setItem("theme", current);
+            return current;
+        },
+        apply: () => {
+            const current = localStorage.getItem("theme") || theme.infer();
+            document.documentElement.setAttribute('data-theme', current);
+        },
+        toggle: () => {
+            const current = localStorage.getItem("theme") || theme.infer();
+            if (current === "dark")
+                localStorage.setItem("theme", "light");
+            else
+                localStorage.setItem("theme", "dark");
+            theme.apply();
+        }
+    };
+    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) {
+        mountRequests.push([funcName, document.currentScript.previousElementSibling, json]);
+    }
+    function Mount() {
+        if (mountRequests.length < 1)
+            return;
+        if (!global.CLIENT)
+            throw new Error("Client manifest missing");
+        console.info("hydrating...");
+        for (const [funcName, element, json] of mountRequests) {
+            const func = global.CLIENT[funcName];
+            if (!func)
+                throw new Error(`Component ${funcName} is missing from client manifest`);
+            func(element, json);
+        }
+        mountRequests.length = 0;
+    }
+    document.addEventListener("DOMContentLoaded", Mount);
+    if (global.htmx)
+        global.htmx.onLoad(Mount);
+    return {
+        mountAboveWith: RequestMount,
+        theme
+    };
+}
+;
+const script = "window.Router = (function () {"
+    + CutString(ClientMounter.toString(), "{")[1]
+    + ")();";
+const hash = QuickHash(script);
+export function _resolve(fragments) {
+    if (!fragments[2])
+        return null;
+    // const build = GetSheet();
+    if (!fragments[2].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 });
+}
+export function GetMountUrl() {
+    return `/_/mount/${hash}.js`;
+}

package/bin/client/watch.d.ts

@@ -0,0 +1 @@
+export declare function WatchClient(): Promise<void>;

package/bin/client/watch.js

@@ -0,0 +1,19 @@
+import { watch } from "fs";
+import { GenerateClient } from "../client/index.js";
+import { ReadConfig } from "../cli/config.js";
+export async function WatchClient() {
+    if (process.env.NODE_ENV === "production") {
+        console.warn("Watching client islands is disabled in production");
+        return;
+    }
+    const config = await ReadConfig();
+    const client = config.client;
+    if (!client)
+        return;
+    const rebuild = () => {
+        console.info("Building client");
+        GenerateClient(client).catch(console.error);
+    };
+    watch(client.source, rebuild);
+    rebuild();
+}

package/bin/helper.d.ts

@@ -1,2 +1 @@
-import type * as CSS from 'csstype';
-export declare function StyleCSS(props: CSS.Properties<string | number>): string;
+export declare function CutString(str: string, pivot: string, offset?: number): [string, string];

package/bin/helper.js

@@ -1,16 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleCSS = void 0;
-function StyleCSS(props) {
-    let out = "";
-    for (const key in props) {
-        const value = props[key];
-        if (typeof (value) !== "string" && typeof (value) !== "number")
-            continue;
-        const safeKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-        const safeVal = value.toString().replace(/"/g, "\\\"");
-        out += `${safeKey}: ${safeVal};`;
+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)];
     }
-    return out;
+    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, ""];
 }
-exports.StyleCSS = StyleCSS;

package/bin/index.d.ts

@@ -1,6 +1,8 @@
-import { ErrorResponse, Redirect, Outlet, Override } from "./shared";
-import { RouteTree, IsAllowedExt } from "./router";
-import { RenderArgs } from "./render-args";
-import { Link } from "./components";
-import { StyleCSS } from "./helper";
-export { IsAllowedExt, RouteTree, ErrorResponse, Redirect, Override, RenderArgs, Outlet, StyleCSS, Link };
+import { RouteModule, CatchFunction, RenderFunction } from './types.js';
+import { RouteContext, GenericContext } from "./router.js";
+import { createRequestHandler } from './request/index.js';
+import { Cookies, CookieOptions } from "./util/cookies.js";
+import { EventSourceConnection } from "./util/event-source.js";
+import { StyleClass } from './util/css.js';
+import { Endpoint } from './util/endpoint.js';
+export { CatchFunction, CookieOptions, Cookies, createRequestHandler, Endpoint, EventSourceConnection, GenericContext, RenderFunction, RouteContext, RouteModule, StyleClass, };

package/bin/index.js

@@ -1,16 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = exports.StyleCSS = exports.RenderArgs = exports.Override = exports.Redirect = exports.ErrorResponse = exports.RouteTree = exports.IsAllowedExt = void 0;
-const shared_1 = require("./shared");
-Object.defineProperty(exports, "ErrorResponse", { enumerable: true, get: function () { return shared_1.ErrorResponse; } });
-Object.defineProperty(exports, "Redirect", { enumerable: true, get: function () { return shared_1.Redirect; } });
-Object.defineProperty(exports, "Override", { enumerable: true, get: function () { return shared_1.Override; } });
-const router_1 = require("./router");
-Object.defineProperty(exports, "RouteTree", { enumerable: true, get: function () { return router_1.RouteTree; } });
-Object.defineProperty(exports, "IsAllowedExt", { enumerable: true, get: function () { return router_1.IsAllowedExt; } });
-const render_args_1 = require("./render-args");
-Object.defineProperty(exports, "RenderArgs", { enumerable: true, get: function () { return render_args_1.RenderArgs; } });
-const components_1 = require("./components");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return components_1.Link; } });
-const helper_1 = require("./helper");
-Object.defineProperty(exports, "StyleCSS", { enumerable: true, get: function () { return helper_1.StyleCSS; } });
+import { RouteContext, GenericContext } from "./router.js";
+import { createRequestHandler } from './request/index.js';
+import { Cookies } from "./util/cookies.js";
+import { EventSourceConnection } from "./util/event-source.js";
+import { StyleClass } from './util/css.js';
+import { Endpoint } from './util/endpoint.js';
+export { Cookies, createRequestHandler, Endpoint, EventSourceConnection, GenericContext, RouteContext, StyleClass, };

package/bin/request/http.d.ts

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from "http";
+import type { ViteDevServer } from "vite";
+import { 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/bin/request/http.js

@@ -0,0 +1,46 @@
+import { Resolve } from "../request/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);
+            let rendered = await response.text();
+            if (config.viteDevServer) {
+                if (!headers["x-partial"] && response.headers.get("content-type")?.startsWith("text/html")) {
+                    rendered = await config.viteDevServer.transformIndexHtml(req.url || "", rendered);
+                }
+            }
+            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";
+    return 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
+    });
+}

package/bin/request/index.d.ts

@@ -0,0 +1,16 @@
+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';
+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/bin/request/index.js

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

package/bin/request/native.d.ts

@@ -0,0 +1,9 @@
+import { RouteTree } from '../router.js';
+import { Config } from '../request/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;
+    headers: {
+        [key: string]: string | string[];
+    };
+}>;

package/bin/request/native.js

@@ -0,0 +1,56 @@
+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, headers } = await Resolve(req, mod.tree, config);
+            if (config.viteDevServer) {
+                if (!headers["x-partial"] && response.headers.get("content-type")?.startsWith("text/html")) {
+                    const rendered = await config.viteDevServer.transformIndexHtml(req.url || "", await response.text());
+                    return new Response(rendered, {
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                    });
+                }
+            }
+            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("Not Found", { status: 404, statusText: "Not Found", headers: ctx.headers });
+    // Merge 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 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/router.d.ts

@@ -1,23 +1,48 @@
-/// <reference types="node" />
-import type http from "node:http";
-import { Override, Redirect, RouteModule } from "./shared";
-import { MaskType, RenderArgs } from "./render-args";
-export declare function IsAllowedExt(ext: string): boolean;
+import { Parameterized, ParameterShaper } from './util/parameters.js';
+import { RouteModule } from "./types.js";
+import { Cookies } from './util/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>;
+}
+export declare class RouteContext<T extends ParameterShaper> {
+    request: Request;
+    headers: Headers;
+    cookie: Cookies;
+    params: Parameterized<T>;
+    url: URL;
+    render: (res: JSX.Element) => Response;
+    constructor(base: GenericContext, shape: T);
+}
 export declare class RouteLeaf {
-    module: RouteModule;
-    mask: boolean[];
-    constructor(module: RouteModule, mask: boolean[]);
-    render(args: RenderArgs, mask: MaskType, routeName: string): Promise<string>;
+    module: RouteModule<any>;
+    constructor(module: RouteModule<any>);
+    resolve(ctx: GenericContext): Promise<Response | null>;
+    error(ctx: GenericContext, e: unknown): Promise<Response | null>;
+    private renderWrapper;
 }
 export declare class RouteTree {
+    root: boolean;
     nested: Map<string, RouteTree>;
+    index: RouteLeaf | null;
+    slug: RouteLeaf | null;
     wild: RouteTree | null;
     wildCard: string;
-    default: RouteLeaf | null;
-    route: RouteLeaf | null;
-    constructor();
-    assignRoot(module: RouteModule): void;
-    ingest(path: string | string[], module: RouteModule, override: boolean[]): void;
-    calculateDepth(from: string[], to: string[]): number;
-    render(req: http.IncomingMessage, res: http.ServerResponse, url: URL): Promise<string | Redirect | Override>;
+    constructor(root?: boolean);
+    ingest(path: string | string[], module: RouteModule<any>): void;
+    resolve(fragments: string[], ctx: GenericContext): Promise<Response | null>;
+    private resolveIndex;
+    private resolveNext;
+    private resolveWild;
+    private resolveSlug;
+    private resolveNative;
+    private unwrap;
 }