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

package/internal/compile/manifest.js

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

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

package/internal/compile/router.js

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

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

package/internal/component/dynamic.js

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

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

package/internal/component/head.js

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

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

package/internal/component/scripts.js

@@ -1,23 +0,0 @@
-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/hash.d.ts

@@ -1,4 +0,0 @@
-/**
- * Not the best hash in the world, but it's something really fast that will work on all JS runtimes
- */
-export declare function QuickHash(input: string): string;

package/internal/hash.js

@@ -1,10 +0,0 @@
-/**
- * Not the best hash in the world, but it's something really fast that will work on all JS runtimes
- */
-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);
-}

package/internal/mount.d.ts

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

package/internal/mount.js

@@ -1,81 +0,0 @@
-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 _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/internal/request/http.d.ts

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

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

@@ -1,16 +0,0 @@
-import type { ViteDevServer } from "vite";
-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;
-    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

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

@@ -1,9 +0,0 @@
-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;
-    headers: {
-        [key: string]: string | string[];
-    };
-}>;

package/internal/request/native.js

@@ -1,48 +0,0 @@
-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/util.d.ts

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

@@ -1,49 +0,0 @@
-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/request/http.d.ts

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