htmx-router 0.2.0 → 1.0.0-alpha.1

package/bin/router.js

@@ -1,281 +1,221 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+import * as endpoint from './util/endpoint.js';
+import * as dynamic from './util/dynamic.js';
+import * as mount from './client/mount.js';
+import * as css from './util/css.js';
+import { Parameterize } from './util/parameters.js';
+import { Cookies } from './util/cookies.js';
+export class GenericContext {
+    request;
+    headers; // response headers
+    cookie;
+    params;
+    url;
+    render;
+    constructor(request, url, renderer) {
+        this.cookie = new Cookies(request.headers);
+        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, shape);
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RouteTree = exports.RouteLeaf = exports.IsAllowedExt = void 0;
-const shared_1 = require("./shared");
-const render_args_1 = require("./render-args");
-const BlankRoute = __importStar(require("./404-route"));
-function IsAllowedExt(ext) {
-    if (ext[0] !== ".")
-        return false;
-    // js, jsx, tsx, ts
-    if (ext[2] !== "s")
-        return false;
-    if (ext[1] !== "j" && ext[1] !== "t")
-        return false;
-    if (ext.length == 3)
-        return true;
-    if (ext.length != 4)
-        return false;
-    if (ext[3] !== "x")
-        return false;
-    return true;
 }
-exports.IsAllowedExt = IsAllowedExt;
-class RouteLeaf {
-    constructor(module, mask) {
+export class RouteContext {
+    request;
+    headers; // response headers
+    cookie;
+    params;
+    url;
+    render;
+    constructor(base, shape) {
+        this.params = Parameterize(base.params, shape);
+        this.cookie = base.cookie;
+        this.headers = base.headers;
+        this.request = base.request;
+        this.render = base.render;
+        this.url = base.url;
+    }
+}
+export class RouteLeaf {
+    module;
+    constructor(module) {
         this.module = module;
-        this.mask = mask;
     }
-    async render(args, mask, routeName) {
+    async resolve(ctx) {
+        const res = await this.renderWrapper(ctx);
+        if (res === null)
+            return null;
+        if (res instanceof Response)
+            return res;
+        return ctx.render(res);
+    }
+    async error(ctx, e) {
+        if (!this.module.error)
+            return null;
+        const res = await this.module.error(ctx, e);
+        if (res === null)
+            return null;
+        if (res instanceof Response)
+            return res;
+        return ctx.render(res);
+    }
+    async renderWrapper(ctx) {
         try {
-            // Always check auth
-            // If auth error this function will throw
-            if (this.module.Auth)
-                await this.module.Auth(args);
-            if (mask === render_args_1.MaskType.show) {
-                if (this.module.Render)
-                    return await this.module.Render(routeName, args);
-            }
-            else {
-                return await args.Outlet();
+            if (!this.module.loader && !this.module.action)
+                return null;
+            const context = ctx.shape(this.module.parameters || {});
+            if (ctx.request.method === "HEAD" || ctx.request.method === "GET") {
+                if (this.module.loader)
+                    return await this.module.loader(context);
+                else
+                    return null;
             }
+            if (this.module.action)
+                return await this.module.action(context);
+            throw new Response("Method not Allowed", { status: 405, statusText: "Method not Allowed", headers: ctx.headers });
         }
         catch (e) {
-            if (e instanceof shared_1.Redirect || e instanceof shared_1.Override)
+            if (this.module.error)
+                return await this.module.error(ctx, e);
+            else
                 throw e;
-            const err = (e instanceof shared_1.ErrorResponse) ? e :
-                new shared_1.ErrorResponse(500, "Runtime Error", e);
-            if (this.module.CatchError)
-                return await this.module.CatchError(routeName, args, err);
-            throw err;
         }
-        return "";
+        return null;
     }
 }
-exports.RouteLeaf = RouteLeaf;
-const blankLeaf = new RouteLeaf(BlankRoute, []);
-class RouteTree {
-    constructor() {
+export class RouteTree {
+    root;
+    nested;
+    // Leaf nodes
+    index; // about._index
+    // Wild card route
+    slug; // $
+    wild; // e.g. $userID
+    wildCard;
+    constructor(root = true) {
+        this.root = root;
         this.nested = new Map();
         this.wildCard = "";
+        this.slug = null;
         this.wild = null;
-        this.default = null;
-        this.route = null;
+        this.index = null;
     }
-    assignRoot(module) {
-        if (!module.Render)
-            throw new Error(`Root route is missing Render()`);
-        if (!module.CatchError)
-            throw new Error(`Root route is missing CatchError()`);
-        this.route = new RouteLeaf(module, []);
-    }
-    ingest(path, module, override) {
-        if (!Array.isArray(path)) {
-            path = path.split(/[\./\\]/g);
-        }
-        if (path.length === 0) {
-            override.push(false);
-            this.route = new RouteLeaf(module, override);
+    ingest(path, module) {
+        if (!Array.isArray(path))
+            path = path.split("/");
+        if (path.length === 0 || (path.length == 1 && path[0] === "_index")) {
+            this.index = new RouteLeaf(module);
             return;
         }
-        if (path.length === 1 && path[0] === "_index") {
-            override.push(false);
-            this.default = new RouteLeaf(module, override);
+        if (path[0] === "$") {
+            this.slug = new RouteLeaf(module);
             return;
         }
-        if (path[0].endsWith("_")) {
-            path[0] = path[0].slice(0, -1);
-            override.push(true);
-        }
-        else {
-            override.push(false);
-        }
         if (path[0][0] === "$") {
             const wildCard = path[0].slice(1);
             // Check wildcard isn't being changed
             if (!this.wild) {
                 this.wildCard = wildCard;
-                this.wild = new RouteTree();
+                this.wild = new RouteTree(false);
             }
             else if (wildCard !== this.wildCard) {
                 throw new Error(`Redefinition of wild card ${this.wildCard} to ${wildCard}`);
             }
             path.splice(0, 1);
-            this.wild.ingest(path, module, override);
+            this.wild.ingest(path, module);
             return;
         }
         let next = this.nested.get(path[0]);
         if (!next) {
-            next = new RouteTree();
+            next = new RouteTree(false);
             this.nested.set(path[0], next);
         }
         path.splice(0, 1);
-        next.ingest(path, module, override);
+        next.ingest(path, module);
     }
-    calculateDepth(from, to) {
-        let depth = 0;
-        if (from.length == 0 || to.length == 0) {
-            depth = 1;
-        }
-        else {
-            const segmentA = from.splice(0, 1)[0];
-            const segmentB = to.splice(0, 1)[0];
-            const subRoute = this.nested.get(segmentA);
-            if (subRoute && segmentA === segmentB) {
-                depth = subRoute.calculateDepth(from, to);
-            }
-            else if (this.wild) {
-                depth = this.wild.calculateDepth(from, to);
-            }
-            else {
-                return 1;
-            }
-        }
-        depth++;
-        return depth;
+    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);
     }
-    async render(req, res, url) {
-        var _a;
-        if (url.pathname.length != 1 && url.pathname.endsWith("/")) {
-            return new shared_1.Redirect(url.pathname.slice(0, -1) + url.search);
-        }
-        const args = new render_args_1.RenderArgs(req, res, url);
-        res.setHeader('Vary', "hx-current-url");
-        const from = req.headers['hx-current-url'] ?
-            new URL(((_a = req.headers['hx-current-url']) === null || _a === void 0 ? void 0 : _a.toString()) || "/").pathname :
-            "";
-        try {
-            const depth = BuildOutlet(this, args, from);
-            if (from) {
-                res.setHeader('HX-Push-Url', req.url || "/");
-                if (depth > 0) {
-                    res.setHeader('HX-Retarget', `#hx-route-${depth.toString(16)}`);
-                }
-                res.setHeader('HX-Reswap', "outerHTML");
-            }
-            const out = await args.Outlet();
-            if (args.title) {
-                const trigger = res.getHeader('HX-Trigger');
-                const entry = `{"setTitle":"${encodeURIComponent(args.title)}"}`;
-                if (Array.isArray(trigger)) {
-                    res.setHeader('HX-Trigger', [...trigger, entry]);
-                }
-                else if (trigger) {
-                    res.setHeader('HX-Trigger', [trigger.toString(), entry]);
-                }
-                else {
-                    res.setHeader('HX-Trigger', [entry]);
-                }
-            }
-            return out;
-        }
-        catch (e) {
-            if (e instanceof shared_1.Redirect)
-                return e;
-            if (e instanceof shared_1.Override)
-                return e;
-            console.error(e);
-            throw new Error(`Unhandled boil up type ${typeof (e)}: ${e}`);
-        }
-        ;
+    async resolveIndex(fragments, ctx) {
+        if (fragments.length > 0)
+            return null;
+        if (!this.index)
+            return null;
+        return await this.index.resolve(ctx);
     }
-}
-exports.RouteTree = RouteTree;
-function BuildOutlet(start, args, fromPath) {
-    const frags = args.url.pathname.split('/').slice(1);
-    if (frags.length === 1 && frags[0] === "") {
-        frags.splice(0, 1);
+    async resolveNext(fragments, ctx) {
+        if (fragments.length < 1)
+            return null;
+        const next = this.nested.get(fragments[0]);
+        if (!next)
+            return null;
+        return await next.resolve(fragments.slice(1), ctx);
     }
-    const from = fromPath.split('/').slice(1);
-    if (from.length === 1 && from[0] === "") {
-        from.splice(0, 1);
+    async resolveWild(fragments, ctx) {
+        if (!this.wild)
+            return null;
+        if (fragments.length < 1)
+            return null;
+        ctx.params[this.wildCard] = fragments[0];
+        return this.wild.resolve(fragments.slice(1), ctx);
     }
-    let matching = fromPath.length > 0;
-    let depth = -1;
-    const stack = [start];
-    let mask = null;
-    while (stack.length > 0) {
-        const cursor = stack.pop();
-        if (!mask) {
-            stack.push(cursor);
-            if (frags.length === 0) {
-                if (matching && from.length !== 0) {
-                    depth = args._outletChain.length + stack.length;
-                    matching = false;
-                }
-                ;
-                if (cursor.default) {
-                    args._addOutlet(cursor.default);
-                    mask = cursor.default.mask;
-                }
-                else {
-                    args._addOutlet(blankLeaf);
-                    mask = [];
-                }
-            }
-            else {
-                if (matching && from.length === 0) {
-                    depth = args._outletChain.length + stack.length;
-                    matching = false;
-                }
-                const segment = frags.splice(0, 1)[0];
-                const other = from.splice(0, 1)[0];
-                const subRoute = cursor.nested.get(segment);
-                if (subRoute) {
-                    if (matching && segment !== other) {
-                        depth = args._outletChain.length + stack.length;
-                        matching = false;
-                    }
-                    ;
-                    stack.push(subRoute);
-                }
-                else if (cursor.wild) {
-                    if (matching && cursor.nested.has(other)) {
-                        depth = args._outletChain.length + stack.length;
-                        matching = false;
-                    }
-                    ;
-                    args.params[cursor.wildCard] = segment;
-                    stack.push(cursor.wild);
-                }
-                else {
-                    args._addOutlet(blankLeaf);
-                    mask = [];
-                }
-            }
-        }
-        else {
-            if (cursor.route) {
-                args._addOutlet(cursor.route);
-            }
-        }
+    async resolveSlug(fragments, ctx) {
+        if (!this.slug)
+            return null;
+        ctx.params["$"] = fragments.join("/");
+        const res = this.slug.resolve
+            ? await this.slug.resolve(ctx)
+            : null;
+        return res;
+    }
+    async resolveNative(fragments, ctx) {
+        if (!this.root)
+            return null;
+        if (fragments.length < 2)
+            return null;
+        if (fragments[0] != "_")
+            return null;
+        return await ResolveNatively(fragments, ctx);
     }
-    if (matching) {
-        depth = args._outletChain.length - 1;
+    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;
+        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);
+        case "endpoint": return endpoint._resolve(fragments, ctx);
+        case "mount": return mount._resolve(fragments);
+        case "style": return css._resolve(fragments);
     }
-    args._applyMask(mask, depth);
-    return depth;
+    return null;
 }

package/bin/types.d.ts

@@ -0,0 +1,10 @@
+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 RenderFunction<T> = (args: T) => Promise<Response | JSX.Element | null>;
+export type RouteModule<T extends ParameterShaper> = {
+    parameters?: T;
+    loader?: RenderFunction<RouteContext<T>>;
+    action?: RenderFunction<RouteContext<T>>;
+    error?: CatchFunction<RouteContext<T>>;
+};

package/bin/types.js

@@ -0,0 +1 @@
+export {};

package/bin/util/cookies.d.ts

@@ -0,0 +1,22 @@
+export interface CookieOptions {
+    domain?: string | undefined;
+    expires?: Date;
+    httpOnly?: boolean;
+    maxAge?: number;
+    partitioned?: boolean;
+    path?: string;
+    priority?: "low" | "medium" | "high";
+    sameSite?: "lax" | "strict" | "none";
+    secure?: boolean;
+}
+export declare class Cookies {
+    private map;
+    private config;
+    constructor(headers: Headers);
+    get(name: string): string | null;
+    has(name: string): boolean;
+    set(name: string, value: string, options?: CookieOptions): void;
+    flash(name: string, value: string): void;
+    unset(name: string): void;
+    export(): string[];
+}

package/bin/util/cookies.js

@@ -0,0 +1,57 @@
+export class Cookies {
+    map;
+    config;
+    constructor(headers) {
+        this.config = {};
+        this.map = {};
+        const cookie = headers.get("Cookie");
+        if (!cookie)
+            return;
+        for (const line of cookie.split("; ")) {
+            const [name, value] = line.split("=");
+            this.map[name] = value;
+        }
+    }
+    get(name) {
+        return this.map[name] || null;
+    }
+    has(name) {
+        return name in this.map;
+    }
+    set(name, value, options = {}) {
+        if (!options['path'])
+            options['path'] = "/";
+        this.config[name] = options;
+        this.map[name] = value;
+    }
+    flash(name, value) {
+        return this.set(name, value, { maxAge: 0 });
+    }
+    unset(name) {
+        return this.set(name, "", { maxAge: 0 });
+    }
+    export() {
+        const headers = new Array();
+        for (const name in this.config) {
+            let config = "";
+            for (const opt in this.config[name]) {
+                const prop = opt === "maxAge"
+                    ? "Max-Age"
+                    : opt[0].toUpperCase() + opt.slice(1);
+                const raw = this.config[name][opt];
+                if (raw === true) {
+                    config += `; ${prop}`;
+                    continue;
+                }
+                if (raw === false)
+                    continue;
+                let value = String(raw);
+                value = value[0].toUpperCase() + value.slice(1);
+                config += `; ${prop}=${value}`;
+            }
+            const cookie = name + "=" + this.map[name] + config + ";";
+            headers.push(cookie);
+        }
+        return headers;
+    }
+}

package/bin/util/css.d.ts

@@ -0,0 +1,9 @@
+export declare class StyleClass {
+    readonly name: string;
+    readonly style: string;
+    readonly hash: string;
+    constructor(name: string, style: string);
+    toString(): string;
+}
+export declare function GetSheetUrl(): string;
+export declare function _resolve(fragments: string[]): Response | null;

package/bin/util/css.js

@@ -0,0 +1,47 @@
+import { QuickHash } from "../util/hash.js";
+const classNamePattern = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
+const registry = new Array();
+let cache = null;
+export class StyleClass {
+    name;
+    style;
+    hash;
+    constructor(name, style) {
+        if (!name.match(classNamePattern))
+            throw new Error("Cannot use given name for CSS class");
+        this.hash = QuickHash(style);
+        this.name = `${name}-${this.hash}`;
+        style = style.replaceAll(".this", "." + this.name);
+        this.style = style;
+        registry.push(this);
+        cache = null;
+    }
+    toString() {
+        return this.name;
+    }
+}
+function GetSheet() {
+    return cache || BuildSheet();
+}
+export function GetSheetUrl() {
+    const sheet = GetSheet();
+    return `/_/style/${sheet.hash}.css`;
+}
+export function _resolve(fragments) {
+    if (!fragments[2])
+        return null;
+    const build = GetSheet();
+    if (!fragments[2].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() {
+    const key = registry.map(x => x.hash).join("");
+    const hash = QuickHash(key);
+    const sheet = registry.map(x => x.style).join("");
+    cache = { hash, sheet };
+    return cache;
+}

package/bin/util/dynamic.d.ts

@@ -0,0 +1,5 @@
+import { GenericContext } from "../router.js";
+export declare function RegisterDynamic<T>(load: Loader<T>): string;
+type Loader<T> = (params: T, ctx: GenericContext) => Promise<JSX.Element>;
+export declare function _resolve(fragments: string[], ctx: GenericContext): Promise<Response | null>;
+export {};

package/bin/util/dynamic.js

@@ -0,0 +1,26 @@
+import { QuickHash } from "../util/hash.js";
+const registry = new Map();
+const index = new Map();
+export function RegisterDynamic(load) {
+    const existing = index.get(load);
+    if (existing)
+        return existing;
+    const hash = QuickHash(String(load));
+    const name = `${encodeURIComponent(load.name)}-${hash}`;
+    registry.set(name, load);
+    const url = `/_/dynamic/${name}?`;
+    index.set(load, url);
+    return url;
+}
+export async function _resolve(fragments, ctx) {
+    if (!fragments[2])
+        return null;
+    const endpoint = registry.get(fragments[2]);
+    if (!endpoint)
+        return null;
+    const props = {};
+    for (const [key, value] of ctx.url.searchParams)
+        props[key] = value;
+    ctx.headers.set("X-Partial", "true");
+    return ctx.render(await endpoint(props, ctx));
+}

package/bin/util/endpoint.d.ts

@@ -0,0 +1,9 @@
+import { RenderFunction } from "../types.js";
+import { GenericContext } from "../router.js";
+export declare class Endpoint {
+    readonly render: RenderFunction<GenericContext>;
+    readonly name: string;
+    readonly url: string;
+    constructor(render: RenderFunction<GenericContext>, name?: string);
+}
+export declare function _resolve(fragments: string[], ctx: GenericContext): Promise<Response | null>;