htmx-router 1.0.1 → 1.0.3

package/defer.d.ts

@@ -10,5 +10,5 @@ export declare const path = "_/defer/$";
 export declare const parameters: {
     $: StringConstructor;
 };
-export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<JSX.Element | null>;
 export declare const action: typeof loader;

package/defer.js

@@ -68,13 +68,8 @@ export async function loader(ctx) {
         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, ctx.headers);
+    const forward = new RouteContext(ctx, prelude, entry.shape);
+    return await endpoint(forward);
 }
 export const action = loader;

package/endpoint.d.ts

@@ -16,5 +16,5 @@ export declare const path = "_/endpoint/$";
 export declare const parameters: {
     $: StringConstructor;
 };
-export declare function loader(ctx: RouteContext<typeof parameters>): Promise<Response | null>;
+export declare function loader(ctx: RouteContext<typeof parameters>): Promise<JSX.Element | null>;
 export declare const action: typeof loader;

package/endpoint.js

@@ -30,11 +30,6 @@ export async function loader(ctx) {
     const endpoint = registry.get(ctx.params["$"]);
     if (!endpoint)
         return null;
-    const res = await endpoint.render(ctx);
-    if (res === null)
-        return null;
-    if (res instanceof Response)
-        return res;
-    return ctx.render(res, ctx.headers);
+    return await endpoint.render(ctx);
 }
 export const action = loader;

package/internal/router.d.ts

@@ -1,6 +1,7 @@
 import { ParameterShaper } from '../util/parameters.js';
 import { RouteContext } from "../router.js";
 import { Cookies } from '../cookies.js';
+type Rendered = Response | BodyInit;
 export declare class GenericContext {
     request: Request;
     headers: Headers;
@@ -9,7 +10,8 @@ export declare class GenericContext {
         [key: string]: string;
     };
     url: URL;
-    render: (res: JSX.Element, headers: Headers) => Promise<Response> | Response;
+    render: (res: JSX.Element, headers: Headers) => Promise<Rendered> | Rendered;
     constructor(request: GenericContext["request"], url: GenericContext["url"], renderer: GenericContext["render"]);
     shape<T extends ParameterShaper>(shape: T): RouteContext<T>;
 }
+export {};

package/navigate.d.ts

@@ -1,3 +1,3 @@
-export declare function navigate(href: string, pushUrl?: boolean): Promise<void>;
+export declare function navigate(href: string, pushHistory?: boolean): Promise<void>;
 export declare function revalidate(): Promise<void>;
 export declare function htmxAppend(href: string, verb?: string): Promise<void>;

package/navigate.js

@@ -4,20 +4,30 @@ function htmx() {
         throw new Error("Missing htmx");
     return htmx;
 }
-export async function navigate(href, pushUrl = true) {
+const driver = (typeof document === "object" ? document.createElement("a") : null);
+export async function navigate(href, pushHistory = true) {
     if (typeof window !== "object")
         return;
+    if (!driver)
+        return;
     const url = new URL(href, window.location.href);
     if (url.host !== window.location.host) {
         window.location.assign(href);
         return;
     }
-    // Perform an HTMX GET request similar to hx-boost
-    await htmx().ajax("GET", href, {
-        target: 'body',
-        swap: 'outerHTML',
-        history: pushUrl
-    });
+    driver.setAttribute("hx-boost", "true");
+    driver.setAttribute("href", url.href);
+    if (pushHistory) {
+        driver.setAttribute("hx-push-url", "true");
+        driver.removeAttribute("hx-replace-url");
+    }
+    else {
+        driver.setAttribute("hx-replace-url", "true");
+        driver.removeAttribute("hx-push-url");
+    }
+    document.body.appendChild(driver);
+    htmx().process(driver);
+    driver.click();
 }
 export function revalidate() {
     return navigate("", false);
@@ -25,7 +35,6 @@ export function revalidate() {
 export async function htmxAppend(href, verb = "GET") {
     await htmx().ajax(verb, href, {
         target: 'body',
-        swap: 'beforeend',
-        history: false
+        swap: 'beforeend'
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"description": "A lightweight SSR framework with server+client islands",
 	"keywords": [
 		"htmx",

package/response.d.ts

@@ -1,4 +1,5 @@
 export declare function text(text: string, init?: ResponseInit): Response;
+export declare function html(text: string, init?: ResponseInit): Response;
 export type TypedResponse<T> = Omit<Response, "json"> & {
     json(): Promise<T>;
 };

package/response.js

@@ -7,6 +7,15 @@ export function text(text, init) {
     res.headers.set("X-Caught", "true");
     return res;
 }
+export function html(text, init) {
+    init ||= {};
+    init.statusText ||= "ok";
+    init.status ||= 200;
+    const res = new Response(text, init);
+    res.headers.set("Content-Type", "text/html; charset=UTF-8");
+    res.headers.set("X-Caught", "true");
+    return res;
+}
 export function json(data, init) {
     init ||= {};
     init.statusText ||= "ok";

package/router.js

@@ -114,6 +114,8 @@ export class RouteTree {
             || await this.resolveWild(fragments, ctx)
             || await this.resolveSlug(fragments, ctx);
         if (res instanceof Response) {
+            if (res.ok)
+                return res;
             if (100 <= res.status && res.status <= 399)
                 return res;
             if (res.headers.has("X-Caught"))
@@ -127,7 +129,10 @@ export class RouteTree {
             return null;
         if (!this.index)
             return null;
-        return await this.index.resolve(ctx);
+        const res = await this.index.resolve(ctx);
+        if (res instanceof Response)
+            return res;
+        return new Response(res, { headers: ctx.headers });
     }
     async resolveNext(fragments, ctx) {
         if (fragments.length < 1)
@@ -152,14 +157,24 @@ export class RouteTree {
         const res = this.slug.resolve
             ? await this.slug.resolve(ctx)
             : null;
-        return res;
+        if (res instanceof Response)
+            return res;
+        return new Response(res, { headers: ctx.headers });
     }
     async unwrap(ctx, res) {
         if (!this.slug)
             throw res;
         const caught = await this.slug.error(ctx, res);
-        caught.headers.set("X-Caught", "true");
-        return caught;
+        if (caught instanceof Response) {
+            caught.headers.set("X-Caught", "true");
+            return caught;
+        }
+        ctx.headers.set("X-Caught", "true");
+        return new Response(caught, res instanceof Response ? res : {
+            status: 500,
+            statusText: "Internal Server Error",
+            headers: ctx.headers
+        });
     }
 }
 class RouteLeaf {

package/status.d.ts

@@ -0,0 +1,69 @@
+declare const definitions: {
+    100: "Continue";
+    101: "Switching Protocols";
+    102: "Processing";
+    103: "Early Hints";
+    200: "OK";
+    201: "Created";
+    202: "Accepted";
+    203: "Non-Authoritative Information";
+    204: "No Content";
+    205: "Reset Content";
+    206: "Partial Content";
+    207: "Multi-Status";
+    208: "Already Reported";
+    226: "IM Used";
+    300: "Multiple Choices";
+    301: "Moved Permanently";
+    302: "Found";
+    303: "See Other";
+    304: "Not Modified";
+    305: "Use Proxy";
+    306: "Switch Proxy";
+    308: "Permanent Redirect";
+    400: "Bad Request";
+    401: "Unauthorized";
+    402: "Payment Required";
+    403: "Forbidden";
+    405: "Method Not Allowed";
+    406: "Not Acceptable";
+    407: "Proxy Authentication Required";
+    408: "Request Timeout";
+    409: "Conflict";
+    410: "Gone";
+    411: "Length Required";
+    412: "Precondition Failed";
+    413: "Payload Too Large";
+    414: "URI Too Long";
+    415: "Unsupported Media Type";
+    416: "Range Not Satisfiable";
+    417: "Expectation Failed";
+    418: "I'm a teapot";
+    421: "Misdirected Request";
+    422: "Unprocessable Content";
+    423: "Locked";
+    424: "Failed Dependency";
+    425: "Too Early";
+    426: "Upgrade Required";
+    428: "Precondition Required";
+    429: "Too Many Requests";
+    431: "Request Header Fields Too Large";
+    451: "Unavailable For Legal Reasons";
+    500: "Internal Server Error";
+    501: "Not Implemented";
+    502: "Bad Gateway";
+    503: "Service Unavailable";
+    504: "Gateway Timeout";
+    505: "HTTP Version Not Supported";
+    506: "Variant Also Negotiates";
+    507: "Insufficient Storage";
+    508: "Loop Detected";
+    510: "Not Extended";
+    511: "Network Authentication Required";
+};
+export type StatusText = typeof definitions[keyof typeof definitions];
+export declare function MakeStatus(lookup: number | StatusText | string): {
+    status: number;
+    statusText: string;
+};
+export {};

package/status.js

@@ -0,0 +1,91 @@
+const definitions = {
+    100: "Continue",
+    101: "Switching Protocols",
+    102: "Processing",
+    103: "Early Hints",
+    200: "OK",
+    201: "Created",
+    202: "Accepted",
+    203: "Non-Authoritative Information",
+    204: "No Content",
+    205: "Reset Content",
+    206: "Partial Content",
+    207: "Multi-Status",
+    208: "Already Reported",
+    226: "IM Used",
+    300: "Multiple Choices",
+    301: "Moved Permanently",
+    302: "Found",
+    303: "See Other",
+    304: "Not Modified",
+    305: "Use Proxy",
+    306: "Switch Proxy",
+    308: "Permanent Redirect",
+    400: "Bad Request",
+    401: "Unauthorized",
+    402: "Payment Required",
+    403: "Forbidden",
+    405: "Method Not Allowed",
+    406: "Not Acceptable",
+    407: "Proxy Authentication Required",
+    408: "Request Timeout",
+    409: "Conflict",
+    410: "Gone",
+    411: "Length Required",
+    412: "Precondition Failed",
+    413: "Payload Too Large",
+    414: "URI Too Long",
+    415: "Unsupported Media Type",
+    416: "Range Not Satisfiable",
+    417: "Expectation Failed",
+    418: "I'm a teapot",
+    421: "Misdirected Request",
+    422: "Unprocessable Content",
+    423: "Locked",
+    424: "Failed Dependency",
+    425: "Too Early",
+    426: "Upgrade Required",
+    428: "Precondition Required",
+    429: "Too Many Requests",
+    431: "Request Header Fields Too Large",
+    451: "Unavailable For Legal Reasons",
+    500: "Internal Server Error",
+    501: "Not Implemented",
+    502: "Bad Gateway",
+    503: "Service Unavailable",
+    504: "Gateway Timeout",
+    505: "HTTP Version Not Supported",
+    506: "Variant Also Negotiates",
+    507: "Insufficient Storage",
+    508: "Loop Detected",
+    510: "Not Extended",
+    511: "Network Authentication Required",
+};
+const lookup = new Array(500);
+for (let i = 100; i < 600; i++) {
+    lookup[i - 100] = definitions[i]
+        || definitions[i % 100];
+}
+const index = new Map();
+for (const key in definitions) {
+    const code = Number(key);
+    index.set(definitions[code].toLowerCase(), code);
+}
+export function MakeStatus(lookup) {
+    if (typeof lookup === "number")
+        return lookupCode(lookup);
+    return lookupStatus(lookup);
+}
+function lookupCode(status) {
+    if (status < 100)
+        throw new TypeError(`Status ${status}<100`);
+    if (status > 599)
+        throw new TypeError(`Status ${status}>599`);
+    return { status, statusText: lookup[status] };
+}
+function lookupStatus(statusText) {
+    const status = index.get(statusText.toLowerCase());
+    if (!status)
+        throw new TypeError(`statusText ${statusText} is not of type StatusText`);
+    return { status, statusText };
+}