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

package/bin/client/index.js

@@ -1,132 +0,0 @@
-/**
- * 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;
-    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))
-    ]);
-}
-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);
-        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 segments = front.slice(start + 1, end).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 BuildClientServer(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 = `import { StyleClass } from "htmx-router";\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;\n\n"
-        + `import { __RebuildClient__ } from "htmx-router/bin/client/watch.js";\n`
-        + `__RebuildClient__();`;
-    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);
-    }
-    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`;
-            }
-        }
-        else {
-            out += `\t${imported.mapping.name}: async (element: HTMLElement, props: any) => {\n`
-                + `\t\tconst C = (await import("${imported.href}")).default;\n`
-                + render
-                + `\t},\n`;
-        }
-    }
-    out += "}\nexport default client;\n"
-        + "(window as any).CLIENT = client;";
-    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 "";
-}

package/bin/client/mount.d.ts

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

package/bin/client/mount.js

@@ -1,116 +0,0 @@
-import { QuickHash } from "../util/hash.js";
-import { CutString } from "../helper.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) {
-        mountRequests.push([funcName, document.currentScript.previousElementSibling, 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);
-        }
-        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();
-        }
-    };
-    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

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

package/bin/client/watch.js

@@ -1,11 +0,0 @@
-import { GenerateClient } from "../client/index.js";
-import { ReadConfig } from "../cli/config.js";
-export async function __RebuildClient__() {
-    if (process.env.NODE_ENV === "production")
-        return;
-    const config = await ReadConfig();
-    const client = config.client;
-    if (!client)
-        return;
-    GenerateClient(client, false).catch(console.error);
-}

package/bin/helper.d.ts

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

package/bin/helper.js

@@ -1,34 +0,0 @@
-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];
-}

package/bin/index.d.ts

@@ -1,11 +0,0 @@
-import { RouteModule, CatchFunction, RenderFunction } from './types.js';
-import { RouteContext, GenericContext } from "./router.js";
-import { createRequestHandler } from './request/index.js';
-import { MetaDescriptor, RenderMetaDescriptor, ShellOptions, ApplyMetaDescriptorDefaults, LdJsonObject, OpenGraph, OpenGraphImage, OpenGraphVideo, OpenGraphAudio, InferShellOptions } from './util/shell.js';
-import { redirect, refresh, revalidate, text, json } from './util/response.js';
-import { Cookies, CookieOptions } from "./util/cookies.js";
-import { EventSourceConnection } from "./util/event-source.js";
-import { DynamicReference } from './util/dynamic.js';
-import { StyleClass } from './util/css.js';
-import { Endpoint } from './util/endpoint.js';
-export { createRequestHandler, CatchFunction, RenderFunction, RouteContext, RouteModule, GenericContext, Cookies, CookieOptions, Endpoint, DynamicReference, StyleClass, EventSourceConnection, redirect, refresh, revalidate, text, json, MetaDescriptor, RenderMetaDescriptor, ShellOptions, ApplyMetaDescriptorDefaults, LdJsonObject, OpenGraph, OpenGraphImage, OpenGraphVideo, OpenGraphAudio, InferShellOptions };

package/bin/index.js

@@ -1,18 +0,0 @@
-import { RouteContext, GenericContext } from "./router.js";
-import { createRequestHandler } from './request/index.js';
-import { RenderMetaDescriptor, ApplyMetaDescriptorDefaults } from './util/shell.js';
-import { redirect, refresh, revalidate, text, json } from './util/response.js';
-import { Cookies } from "./util/cookies.js";
-import { EventSourceConnection } from "./util/event-source.js";
-import { DynamicReference } from './util/dynamic.js';
-import { StyleClass } from './util/css.js';
-import { Endpoint } from './util/endpoint.js';
-export { createRequestHandler, RouteContext, GenericContext, 
-// Request helpers
-Cookies, Endpoint, DynamicReference, 
-// CSS Helper
-StyleClass, 
-// SSE helper
-EventSourceConnection, 
-// Response helpers
-redirect, refresh, revalidate, text, json, RenderMetaDescriptor, ApplyMetaDescriptorDefaults };

package/bin/request/http.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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();
-            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

@@ -1,16 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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 (ctx.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/response.d.ts

@@ -1,9 +0,0 @@
-export declare function text(text: string, init?: ResponseInit): Response;
-export declare function json(data: unknown, init?: ResponseInit): Response;
-export declare function redirect(url: string, init?: ResponseInit & {
-    client?: boolean;
-}): Response;
-export declare function revalidate(init?: ResponseInit): Response;
-export declare function refresh(init?: ResponseInit & {
-    client?: boolean;
-}): Response;

package/bin/response.js

@@ -1,46 +0,0 @@
-export function text(text, init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response(text, init);
-    res.headers.set("Content-Type", "text/plain");
-    res.headers.set("X-Caught", "true");
-    return res;
-}
-export function json(data, init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response(JSON.stringify(data), init);
-    res.headers.set("Content-Type", "application/json");
-    res.headers.set("X-Caught", "true");
-    return res;
-}
-export function redirect(url, init) {
-    init ||= {};
-    init.statusText ||= "Temporary Redirect";
-    init.status = 307;
-    const res = new Response("", init);
-    if (!init?.client)
-        res.headers.set("Location", url);
-    res.headers.set("HX-Location", url); // use hx-boost if applicable
-    return res;
-}
-export function revalidate(init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response("", init);
-    res.headers.set("HX-Location", "");
-    return res;
-}
-export function refresh(init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response("", init);
-    if (!init?.client)
-        res.headers.set("Refresh", "0"); // fallback
-    res.headers.set("HX-Refresh", "true");
-    return res;
-}

package/bin/router.d.ts

@@ -1,49 +0,0 @@
-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<any>;
-    constructor(module: RouteModule<any>);
-    resolve(ctx: GenericContext): Promise<Response | null>;
-    error(ctx: GenericContext, e: unknown): Promise<Response>;
-    private renderWrapper;
-}
-export declare class RouteTree {
-    root: boolean;
-    nested: Map<string, RouteTree>;
-    index: RouteLeaf | null;
-    slug: RouteLeaf | null;
-    wild: RouteTree | null;
-    wildCard: string;
-    constructor(root?: boolean);
-    ingest(path: string | string[], module: RouteModule<any>): void;
-    resolve(fragments: string[], ctx: GenericContext): Promise<Response | null>;
-    private _resolve;
-    private resolveIndex;
-    private resolveNext;
-    private resolveWild;
-    private resolveSlug;
-    private resolveNative;
-    private unwrap;
-}