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

package/bin/cli/index.js

@@ -11,6 +11,7 @@ await writeFile(config.router.output, `/*---------------------------------------
  * Generated by htmx-router                *
  * Warn: Any changes will be overwritten   *
 -------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { GenericContext, RouteTree } from "htmx-router/bin/router";
 import { RegisterDynamic } from "htmx-router/bin/util/dynamic";
@@ -56,9 +57,9 @@ 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>
-		<link href={GetSheetUrl()} rel="stylesheet"></link>
 		<script src={GetMountUrl()}></script>
 	</>;
 

package/bin/client/index.js

@@ -13,29 +13,52 @@ export async function GenerateClient(config, force = false) {
     if (!force && ExtractHash(history) === hash)
         return;
     await init;
+    const imported = ParseImports(source);
+    await Promise.all([
+        writeFile(config.source, source
+            + pivot
+            + `// hash: ${hash}\n`
+            + BuildClientServer(imported)),
+        writeFile(CutString(config.source, ".", -1)[0] + ".manifest.tsx", BuildClientManifest(config.adapter, imported))
+    ]);
+}
+function ParseImports(source) {
     const parsed = parse(source)[0];
-    const imports = new Array();
-    const names = new Array();
-    for (const imp of parsed) {
-        if (imp.a !== -1)
+    const out = [];
+    for (const imported of parsed) {
+        if (imported.a !== -1)
             continue;
-        if (imp.t !== 1)
+        if (imported.t !== 1)
             continue;
-        imports.push(source.slice(imp.ss, imp.se));
-        names.push(...ExtractNames(source.slice(imp.ss, imp.s)));
+        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 });
     }
-    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));
+    return out;
 }
-function BuildClientServer(names) {
-    let out = "type FirstArg<T> = T extends (arg: infer U, ...args: any[]) => any ? U : never;\n"
+function BuildClientServer(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 style={{ display: "contents" }}>{ssr}</div>\n`
-        + "\t\t<script>{`Router.mountAboveWith(\"${name}\", JSON.parse(\"${data}\"))`}</script>\n"
+        + `\t\t<div className={island}>{ssr}</div>\n`
+        + "\t\t<script>{`Router.mountAboveWith('${name}', ${data})`}</script>\n"
         + "\t</>);\n"
         + "}\n"
         + "\n"
@@ -47,52 +70,52 @@ function BuildClientServer(names) {
             + `\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`
-        + `}`;
+        + `import { __RebuildClient__ } from "htmx-router/bin/client/watch.js";\n`
+        + `__RebuildClient__();`;
     return out;
 }
-function BuildClientManifest(type, names, imports) {
+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"
-        + imports.join(";\n") + ";\n";
-    switch (type) {
-        case "react":
-            out += BuildReactClientManifest(names);
-            break;
-        default:
-            console.error(`Unsupported client adapter ${type}`);
-            process.exit(1);
+        + "-------------------------------------------*/\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);
     }
-    out += "export default 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`
+                    + 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 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();
+    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+)/;

package/bin/client/watch.d.ts

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

package/bin/client/watch.js

@@ -1,19 +1,11 @@
-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");
+export async function __RebuildClient__() {
+    if (process.env.NODE_ENV === "production")
         return;
-    }
     const config = await ReadConfig();
     const client = config.client;
     if (!client)
         return;
-    const rebuild = () => {
-        console.info("Building client");
-        GenerateClient(client, false).catch(console.error); // rebuild only if the hash has changed
-    };
-    watch(client.source, rebuild);
-    rebuild();
+    GenerateClient(client, false).catch(console.error);
 }

package/bin/helper.d.ts

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

@@ -25,3 +25,10 @@ export function CutString(str, pivot, offset = 1) {
     }
     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

@@ -5,4 +5,5 @@ 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, };
+import { redirect, text, json, refresh } from './response.js';
+export { CatchFunction, CookieOptions, Cookies, createRequestHandler, Endpoint, EventSourceConnection, GenericContext, RenderFunction, RouteContext, RouteModule, StyleClass, redirect, text, json, refresh };

package/bin/index.js

@@ -4,4 +4,5 @@ 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, };
+import { redirect, text, json, refresh } from './response.js';
+export { Cookies, createRequestHandler, Endpoint, EventSourceConnection, GenericContext, RouteContext, StyleClass, redirect, text, json, refresh };

package/bin/request/native.js

@@ -26,15 +26,7 @@ export async function Resolve(request, tree, config) {
     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);
-        }
-    }
+        response = new Response("No Route Found", { status: 404, statusText: "Not Found", headers: ctx.headers });
     // Merge cookie changes
     const headers = Object.fromEntries(ctx.headers);
     const cookies = ctx.cookie.export();
@@ -42,5 +34,17 @@ export async function Resolve(request, tree, config) {
         headers['set-cookie'] = cookies;
         response.headers.set("Set-Cookie", cookies[0]); // Response object doesn't support multi-header..[]
     }
+    // Merge context headers
+    if (response.headers !== ctx.headers) {
+        for (const [key, value] of response.headers) {
+            if (!headers[key]) {
+                headers[key] = value;
+                continue;
+            }
+            if (!Array.isArray(headers[key]))
+                headers[key] = [headers[key]];
+            headers[key].push(value);
+        }
+    }
     return { response, headers };
 }

package/bin/response.d.ts

@@ -0,0 +1,4 @@
+export declare function redirect(url: string, init?: ResponseInit): Response;
+export declare function text(text: string, init?: ResponseInit): Response;
+export declare function json(data: unknown, init?: ResponseInit): Response;
+export declare function refresh(init?: ResponseInit): Response;

package/bin/response.js

@@ -0,0 +1,33 @@
+export function redirect(url, init) {
+    init ||= {};
+    init.statusText ||= "Temporary Redirect";
+    init.status = 307;
+    const res = new Response("", init);
+    res.headers.set("X-Caught", "true");
+    res.headers.set("Location", url);
+    return res;
+}
+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");
+    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");
+    return res;
+}
+export function refresh(init) {
+    init ||= {};
+    init.statusText ||= "ok";
+    init.status = 200;
+    const res = new Response("", init);
+    res.headers.set("HX-Refresh", "true");
+    return res;
+}

package/bin/router.d.ts

@@ -26,7 +26,7 @@ export declare class RouteLeaf {
     module: RouteModule<any>;
     constructor(module: RouteModule<any>);
     resolve(ctx: GenericContext): Promise<Response | null>;
-    error(ctx: GenericContext, e: unknown): Promise<Response | null>;
+    error(ctx: GenericContext, e: unknown): Promise<Response>;
     private renderWrapper;
 }
 export declare class RouteTree {
@@ -39,6 +39,7 @@ export declare class RouteTree {
     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;

package/bin/router.js

@@ -55,10 +55,8 @@ export class RouteLeaf {
     }
     async error(ctx, e) {
         if (!this.module.error)
-            return null;
+            throw e;
         const res = await this.module.error(ctx, e);
-        if (res === null)
-            return null;
         if (res instanceof Response)
             return res;
         return ctx.render(res);
@@ -79,10 +77,7 @@ export class RouteLeaf {
             throw new Response("Method not Allowed", { status: 405, statusText: "Method not Allowed", headers: ctx.headers });
         }
         catch (e) {
-            if (this.module.error)
-                return await this.module.error(ctx, e);
-            else
-                throw e;
+            return await this.error(ctx, e);
         }
         return null;
     }
@@ -138,12 +133,29 @@ export class RouteTree {
         next.ingest(path, module);
     }
     async resolve(fragments, ctx) {
+        if (!this.slug)
+            return await this._resolve(fragments, ctx);
+        try {
+            return await this._resolve(fragments, ctx);
+        }
+        catch (e) {
+            return this.unwrap(ctx, e);
+        }
+    }
+    async _resolve(fragments, ctx) {
         let res = await this.resolveNative(fragments, ctx)
             || await this.resolveIndex(fragments, ctx)
             || await this.resolveNext(fragments, ctx)
             || await this.resolveWild(fragments, ctx)
             || await this.resolveSlug(fragments, ctx);
-        return this.unwrap(ctx, res);
+        if (res instanceof Response) {
+            if (100 <= res.status && res.status <= 399)
+                return res;
+            if (res.headers.has("X-Caught"))
+                return res;
+            this.unwrap(ctx, res);
+        }
+        return res;
     }
     async resolveIndex(fragments, ctx) {
         if (fragments.length > 0)
@@ -187,29 +199,13 @@ export class RouteTree {
         return await ResolveNatively(fragments, ctx);
     }
     async unwrap(ctx, res) {
-        if (!BadResponse(res))
-            return res;
         if (!this.slug)
-            return res;
-        if (res === null)
-            res = new Response("Not Found", { status: 404, statusText: "Not Found", headers: ctx.headers });
-        if (res.headers.has("X-Caught"))
-            return res;
+            throw res;
         const caught = await this.slug.error(ctx, res);
-        if (!caught)
-            return res;
         caught.headers.set("X-Caught", "true");
         return caught;
     }
 }
-function BadResponse(res) {
-    if (res === null)
-        return true;
-    if (res.status < 200)
-        return true;
-    if (res.status > 299)
-        return true;
-}
 async function ResolveNatively(fragments, ctx) {
     switch (fragments[1]) {
         case "dynamic": return dynamic._resolve(fragments, ctx);

package/bin/types.d.ts

@@ -1,6 +1,6 @@
 import { ParameterShaper } from "./util/parameters.js";
 import { RouteContext } from "./router.js";
-export type CatchFunction<T> = (args: T, err: unknown) => Promise<Response | JSX.Element | null>;
+export type CatchFunction<T> = (args: T, err: unknown) => Promise<Response | JSX.Element>;
 export type RenderFunction<T> = (args: T) => Promise<Response | JSX.Element | null>;
 export type RouteModule<T extends ParameterShaper> = {
     parameters?: T;

package/bin/util/css.js

@@ -1,6 +1,6 @@
 import { QuickHash } from "../util/hash.js";
 const classNamePattern = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
-const registry = new Array();
+const registry = new Map();
 let cache = null;
 /**
  * Create a new css class to be included in the sheet
@@ -17,7 +17,7 @@ export class StyleClass {
         this.name = `${name}-${this.hash}`;
         style = style.replaceAll(".this", "." + this.name);
         this.style = style;
-        registry.push(this);
+        registry.set(this.name, this);
         cache = null;
     }
     toString() {
@@ -43,9 +43,13 @@ export function _resolve(fragments) {
     return new Response(build.sheet, { headers });
 }
 function BuildSheet() {
-    const key = registry.map(x => x.hash).join("");
-    const hash = QuickHash(key);
-    const sheet = registry.map(x => x.style).join("");
+    let composite = "";
+    let sheet = "";
+    for (const [key, def] of registry) {
+        composite += key;
+        sheet += def.style;
+    }
+    const hash = QuickHash(composite);
     cache = { hash, sheet };
     return cache;
 }

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.0-alpha.2",
+	"version": "1.0.0-alpha.4",
 	"description": "A simple SSR framework with dynamic+client islands",
+	"keywords": ["htmx", "router", ""],
 	"main": "./bin/index.js",
 	"type": "module",
 	"scripts": {