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

package/cli/index.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+"use strict";
+import chalk from 'chalk';
+import { readFile, writeFile } from "fs/promises";
+import * as components from "../internal/component/index.js";
+import { CompileManifest } from "../internal/compile/manifest.js";
+import { ReadConfig } from "./config.js";
+const config = await ReadConfig();
+console.info("");
+if (config.client) {
+    console.info(`Generating ${chalk.green("client island")} manifest`);
+    const source = await readFile(config.client.source, "utf8");
+    await writeFile(config.client.output.server, CompileManifest(config.framework, source, true));
+    console.log(`  - ${chalk.cyan("server")} ${chalk.gray(config.client.output.server)}`);
+    await writeFile(config.client.output.client, CompileManifest(config.framework, source, false));
+    console.log(`  - ${chalk.cyan("client")} ${chalk.gray(config.client.output.client)}`);
+    console.log("");
+}
+if (config.component) {
+    console.info(`Generating ${chalk.green("components")} for ${chalk.cyan(config.framework)}`);
+    const padding = Math.max(...Object.keys(config.component).map(x => x.length)) || 0;
+    for (const key in config.component) {
+        const prefix = `  - ${chalk.cyan(key)}` + " ".repeat(padding + 1 - key.length);
+        const component = components[key];
+        if (!component) {
+            console.log(prefix + chalk.red("unknown component"));
+            continue;
+        }
+        const source = component[config.framework] || component["*"];
+        if (!source) {
+            console.log(prefix + chalk.red("unable to find definition for ") + chalk.cyan(config.framework));
+            continue;
+        }
+        const output = config.component[key];
+        await writeFile(output, source);
+        console.log(prefix + chalk.gray(output));
+    }
+}

package/cookies.d.ts

@@ -13,13 +13,17 @@ export interface CookieOptions {
  * Helper provided in the Generic and RouteContext which provides reading and updating cookies
  */
 export declare class Cookies {
-    private map;
+    private source;
     private config;
-    constructor(headers: Headers);
+    private map;
+    constructor(source?: Document | string | null);
+    private parse;
     get(name: string): string | null;
+    entries(): Array<[string, string]>;
+    [Symbol.iterator](): IterableIterator<[string, string]>;
     has(name: string): boolean;
     set(name: string, value: string, options?: CookieOptions): void;
-    flash(name: string, value: string): void;
     unset(name: string): void;
+    /** Creates the response headers required to make the changes done to these cookies */
     export(): string[];
 }

package/cookies.js

@@ -2,37 +2,57 @@
  * Helper provided in the Generic and RouteContext which provides reading and updating cookies
  */
 export class Cookies {
-    map;
+    source;
     config;
-    constructor(headers) {
+    map;
+    constructor(source) {
+        this.source = source || null;
         this.config = {};
         this.map = {};
-        const cookie = headers.get("Cookie");
-        if (!cookie)
+    }
+    parse() {
+        if (this.source === null)
             return;
-        for (const line of cookie.split("; ")) {
+        const source = typeof this.source === "object" ? this.source.cookie : this.source;
+        for (const line of source.split("; ")) {
             const [name, value] = line.split("=");
             this.map[name] = value;
         }
+        // keep source it document
+        if (typeof this.source === "string")
+            this.source = null;
     }
     get(name) {
+        this.parse();
         return this.map[name] || null;
     }
+    entries() {
+        this.parse();
+        return Object.entries(this.map);
+    }
+    *[Symbol.iterator]() {
+        this.parse();
+        for (const [key, value] of Object.entries(this.map)) {
+            yield [key, value];
+        }
+    }
     has(name) {
+        this.parse();
         return name in this.map;
     }
     set(name, value, options = {}) {
-        if (!options['path'])
-            options['path'] = "/";
+        this.parse();
+        options.path ||= "/";
         this.config[name] = options;
         this.map[name] = value;
-    }
-    flash(name, value) {
-        return this.set(name, value, { maxAge: 0 });
+        if (typeof this.source === "object")
+            document.cookie = `${name}=${value}`;
     }
     unset(name) {
+        this.parse();
         return this.set(name, "", { maxAge: 0 });
     }
+    /** Creates the response headers required to make the changes done to these cookies */
     export() {
         const headers = new Array();
         for (const name in this.config) {

package/css.d.ts

@@ -1,8 +1,9 @@
+import { RouteContext } from "./index.js";
 /**
  * Create a new css class to be included in the sheet
  * Use .this as your class name in the source, and it will be replaced with a unique name
  */
-export declare class StyleClass {
+export declare class Style {
     readonly name: string;
     readonly style: string;
     readonly hash: string;
@@ -10,4 +11,11 @@ export declare class StyleClass {
     toString(): string;
 }
 export declare function GetSheetUrl(): string;
-export declare function _resolve(fragments: string[]): Response | null;
+/**
+ * RouteTree mounting point
+ */
+export declare const path = "_/style/$hash";
+export declare const parameters: {
+    hash: StringConstructor;
+};
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;

package/css.js

@@ -6,7 +6,7 @@ let cache = null;
  * Create a new css class to be included in the sheet
  * Use .this as your class name in the source, and it will be replaced with a unique name
  */
-export class StyleClass {
+export class Style {
     name; // unique name generated based on the original name and hash of the style
     style; // the mutated source
     hash;
@@ -24,6 +24,17 @@ export class StyleClass {
         return this.name;
     }
 }
+function BuildSheet() {
+    let composite = "";
+    let sheet = "";
+    for (const [key, def] of registry) {
+        composite += key;
+        sheet += def.style;
+    }
+    const hash = QuickHash(composite);
+    cache = { hash, sheet };
+    return cache;
+}
 function GetSheet() {
     return cache || BuildSheet();
 }
@@ -31,25 +42,19 @@ export function GetSheetUrl() {
     const sheet = GetSheet();
     return `/_/style/${sheet.hash}.css`;
 }
-export function _resolve(fragments) {
-    if (!fragments[2])
-        return null;
+/**
+ * RouteTree mounting point
+ */
+export const path = "_/style/$hash";
+export const parameters = {
+    hash: String
+};
+export async function loader(ctx) {
     const build = GetSheet();
-    if (!fragments[2].startsWith(build.hash))
+    if (!ctx.params.hash.startsWith(build.hash))
         return null;
     const headers = new Headers();
     headers.set("Content-Type", "text/css");
     headers.set("Cache-Control", "public, max-age=604800");
     return new Response(build.sheet, { headers });
 }
-function BuildSheet() {
-    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/defer.d.ts

@@ -0,0 +1,14 @@
+import { Parameterized, Parameterizer, ParameterShaper } from "./util/parameters.js";
+import { RenderFunction } from "./index.js";
+import { RouteContext } from "./router.js";
+export declare function RegisterDeferral<T extends ParameterShaper>(shape: T, func: RenderFunction<T>, converter?: Parameterizer<T>): string;
+export declare function Deferral<T extends ParameterShaper>(func: RenderFunction<T>, params?: Parameterized<T>): string;
+/**
+ * RouteTree mounting point
+ */
+export declare const path = "_/defer/$";
+export declare const parameters: {
+    $: StringConstructor;
+};
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;
+export declare const action: typeof loader;

package/defer.js

@@ -0,0 +1,80 @@
+import { ServerOnlyWarning } from "./internal/util.js";
+ServerOnlyWarning("dynamic-ref");
+import { RouteContext } from "./router.js";
+import { QuickHash } from "./internal/util.js";
+const registry = new Map();
+const index = new Map();
+function MakeIdentity(func) {
+    const hash = QuickHash(String(func));
+    const name = `${encodeURIComponent(func.name)}-${hash}`;
+    const url = `/_/defer/${name}`;
+    return { name, url };
+}
+export function RegisterDeferral(shape, func, converter) {
+    const existing = index.get(func);
+    if (existing)
+        return existing.url;
+    const { url, name } = MakeIdentity(func);
+    registry.set(name, func);
+    index.set(func, { url, shape, converter });
+    return url;
+}
+export function Deferral(func, params) {
+    const entry = index.get(func);
+    let url;
+    if (!entry) {
+        const identity = MakeIdentity(func);
+        console.warn(`Warn: Function ${identity.name} has not registered before use`);
+        url = identity.url;
+    }
+    else {
+        url = entry.url;
+    }
+    if (!params)
+        return url;
+    const query = new URLSearchParams();
+    if (entry?.converter) {
+        const convert = entry.converter;
+        for (const key in convert) {
+            if (!(key in params))
+                throw new Error(`Missing parameter ${key}`);
+            const raw = params[key];
+            const str = convert[key](raw);
+            query.set(key, str);
+        }
+    }
+    else {
+        for (const key in params)
+            query.set(key, String(params[key]));
+    }
+    return url + "?" + query.toString();
+}
+/**
+ * RouteTree mounting point
+ */
+export const path = "_/defer/$";
+export const parameters = {
+    "$": String
+};
+export async function loader(ctx) {
+    const endpoint = registry.get(ctx.params["$"]);
+    if (!endpoint)
+        return null;
+    const prelude = {};
+    for (const [key, value] of ctx.url.searchParams)
+        prelude[key] = value;
+    const entry = index.get(endpoint);
+    if (!entry) {
+        console.warn(`Warn: Function ${endpoint.name} was not registered for defer use`);
+        return null;
+    }
+    const forward = new RouteContext(ctx, prelude, entry.shape);
+    const res = await endpoint(forward);
+    if (res instanceof Response)
+        return res;
+    if (res === null)
+        return null;
+    ctx.headers.set("X-Partial", "true");
+    return ctx.render(res);
+}
+export const action = loader;

package/endpoint.d.ts

@@ -1,13 +1,20 @@
-import type { GenericContext } from "./router.js";
-import type { RenderFunction } from "./index.js";
+import type { RenderFunction, RouteContext } from "./index.js";
 /**
  * Create a route-less endpoint
  * The name is optional and will be inferred from the function if not given (helpful for network waterfalls)
  */
 export declare class Endpoint {
-    readonly render: RenderFunction<GenericContext>;
+    readonly render: RenderFunction<{}>;
     readonly name: string;
     readonly url: string;
-    constructor(render: RenderFunction<GenericContext>, name?: string);
+    constructor(render: RenderFunction<{}>, name?: string);
 }
-export declare function _resolve(fragments: string[], ctx: GenericContext): Promise<Response | null>;
+/**
+ * RouteTree mounting point
+ */
+export declare const path = "_/endpoint/$";
+export declare const parameters: {
+    $: StringConstructor;
+};
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;
+export declare const action: typeof loader;

package/endpoint.js

@@ -12,17 +12,22 @@ export class Endpoint {
     url;
     constructor(render, name) {
         this.render = render;
-        name ||= render.constructor.name;
+        name ||= render.name;
         const hash = QuickHash(String(render));
         this.name = name ? `${encodeURIComponent(name)}-${hash}` : hash;
         this.url = `/_/endpoint/${this.name}`;
         registry.set(this.name, this);
     }
 }
-export async function _resolve(fragments, ctx) {
-    if (!fragments[2])
-        return null;
-    const endpoint = registry.get(fragments[2]);
+/**
+ * RouteTree mounting point
+ */
+export const path = "_/endpoint/$";
+export const parameters = {
+    "$": String
+};
+export async function loader(ctx) {
+    const endpoint = registry.get(ctx.params["$"]);
     if (!endpoint)
         return null;
     const res = await endpoint.render(ctx);
@@ -32,3 +37,4 @@ export async function _resolve(fragments, ctx) {
         return res;
     return ctx.render(res);
 }
+export const action = loader;

package/event-source.js

@@ -21,7 +21,7 @@ export class EventSource {
         request.signal.addEventListener('abort', () => this.close());
         this.response = new Response(stream, { headers });
         this.timer = setInterval(() => this.keepAlive(), keepAlive);
-        register.push(this);
+        register.add(this);
     }
     get readyState() {
         return this.state;
@@ -51,11 +51,8 @@ export class EventSource {
     close(unlink = true) {
         if (this.state === 2)
             return false;
-        if (unlink) {
-            const i = register.indexOf(this);
-            if (i !== -1)
-                register.splice(i, 1);
-        }
+        if (unlink)
+            register.delete(this);
         try {
             this.controller?.close();
         }
@@ -109,15 +106,11 @@ headers.set("Keep-Alive", "timeout=120"); // the maximum keep alive chrome shoul
 headers.set("Connection", "keep-alive");
 // Auto close all SSE streams when shutdown requested
 // Without this graceful shutdowns will hang indefinitely
-const register = new Array();
+const register = new EventSourceSet();
 function CloseAll() {
-    for (const connection of register)
-        connection.close(false); // don't waste time unregistering
+    register.closeAll();
 }
 if (process) {
     process.on('SIGTERM', CloseAll);
-    process.on('SIGHUP', CloseAll);
-}
-else {
-    console.warn("htmx-router's EventSource has been unsafely loaded on the client");
+    process.on('SIGTERM', CloseAll);
 }

package/index.d.ts

@@ -1,13 +1,13 @@
-import type { GenericContext, RouteContext } from "./router.js";
 import type { ParameterShaper } from "./util/parameters.js";
+import type { RouteContext } from "./router.js";
 import { createRequestHandler } from "./internal/request/index.js";
-export type RenderFunction<T> = (args: T) => Promise<Response | JSX.Element | null>;
-export type CatchFunction<T> = (args: T, err: unknown) => Promise<Response | JSX.Element>;
+export type RenderFunction<T extends ParameterShaper = {}> = (ctx: RouteContext<T>) => Promise<Response | JSX.Element | null>;
+export type CatchFunction<T extends ParameterShaper = {}> = (ctx: RouteContext<T>, err: unknown) => Promise<Response | JSX.Element>;
 export type RouteModule<T extends ParameterShaper> = {
     parameters?: T;
-    loader?: RenderFunction<RouteContext<T>>;
-    action?: RenderFunction<RouteContext<T>>;
-    error?: CatchFunction<RouteContext<T>>;
+    loader?: RenderFunction<T>;
+    action?: RenderFunction<T>;
+    error?: CatchFunction<T>;
     route?: (params: Record<string, string>) => string;
 };
 export type ClientIslandManifest<T> = {
@@ -16,4 +16,4 @@ export type ClientIslandManifest<T> = {
 type ClientIsland<T> = T extends (props: infer P) => JSX.Element ? (props: P & {
     children?: JSX.Element;
 }) => JSX.Element : T;
-export { createRequestHandler, GenericContext, RouteContext };
+export { createRequestHandler, RouteContext };

package/internal/compile/manifest.js

@@ -49,7 +49,7 @@ function BuildServerManifest(type, imported) {
         else
             names.push(imp.mapping.name);
     }
-    let out = "";
+    let out = "/* eslint-disable @typescript-eslint/no-explicit-any */\n";
     for (const imp of imported) {
         out += "import ";
         if (!Array.isArray(imp.mapping)) {
@@ -67,9 +67,9 @@ function BuildServerManifest(type, imported) {
             }
             out += " } ";
         }
-        out += `"${imp.href}";\n\n`;
+        out += `from "${imp.href}";\n`;
     }
-    out = `import { StyleClass } from "htmx-router/css";\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"
@@ -91,7 +91,7 @@ function BuildServerManifest(type, imported) {
 }
 function ImportNameSource(name) {
     if (name.original === name.name)
-        return name;
+        return name.name;
     return `${name.original} as ${name.name}`;
 }
 function SafeScript(type, script) {
@@ -104,7 +104,8 @@ function BuildClientManifest(type, imports) {
     const bind = binding[type];
     if (!bind)
         throw new Error(`Unsupported client adapter ${type}`);
-    let out = "const client = {\n";
+    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) {

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

@@ -1,2 +1,10 @@
-export declare function _resolve(fragments: string[]): Response | null;
+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

@@ -65,17 +65,24 @@ const script = "window.Router = (function () {"
     + CutString(ClientMounter.toString(), "{")[1]
     + ")();";
 const hash = QuickHash(script);
-export function _resolve(fragments) {
-    if (!fragments[2])
+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 (!fragments[2].startsWith(hash))
+    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 });
 }
-export function GetMountUrl() {
-    return `/_/mount/${hash}.js`;
-}

package/internal/request/http.d.ts

@@ -1,6 +1,6 @@
 import type { IncomingMessage, ServerResponse } from "http";
 import type { ViteDevServer } from "vite";
-import type { GenericContext } from "../../router.js";
+import type { GenericContext } from "../router.js";
 type Config = {
     build: Promise<any> | (() => Promise<Record<string, any>>);
     viteDevServer: ViteDevServer | null;

package/internal/request/index.d.ts

@@ -1,5 +1,6 @@
 import type { ViteDevServer } from "vite";
-import type { GenericContext, RouteTree } from '../../router.js';
+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 = {

package/internal/request/native.d.ts

@@ -1,5 +1,5 @@
-import { type RouteTree } from '../../router.js';
 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;

package/internal/request/native.js

@@ -1,6 +1,6 @@
 import { ServerOnlyWarning } from "../util.js";
 ServerOnlyWarning("native-request");
-import { GenericContext } from '../../router.js';
+import { GenericContext } from "../router.js";
 export function createRequestHandler(config) {
     return async (req) => {
         try {

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);
+    }
+}