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

package/vite/bundle-splitter.js

@@ -0,0 +1,26 @@
+import { ServerOnlyWarning } from "../internal/util.js";
+ServerOnlyWarning("bundle-splitter");
+const serverPattern = /\.server\.[tj]s(x)?/;
+const clientPattern = /\.client\.[tj]s(x)?/;
+const BLANK_MODULE = "export {};";
+export function BundleSplitter() {
+    return {
+        name: "htmx-bundle-splitter",
+        enforce: "pre",
+        transform: (code, id, options) => {
+            const ssr = options?.ssr || false;
+            const pattern = ssr ? clientPattern : serverPattern;
+            if (pattern.test(id))
+                return BLANK_MODULE;
+            if (ssr) {
+                if (code.startsWith('"use client"'))
+                    return BLANK_MODULE;
+            }
+            else {
+                if (code.startsWith('"use server"'))
+                    return BLANK_MODULE;
+            }
+            return code;
+        }
+    };
+}

package/vite/client-island.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from "vite";
+type SupportedFramework = "react";
+export declare function ClientIsland(framework: SupportedFramework): Plugin;
+export {};

package/vite/client-island.js

@@ -0,0 +1,14 @@
+import { resolve } from "path";
+import { CompileManifest } from "../internal/compile/manifest.js";
+export function ClientIsland(framework) {
+    const file = resolve("./app/manifest.tsx").replaceAll("\\", "/");
+    return {
+        name: "vite-plugin-htmx-client-island",
+        enforce: "pre",
+        transform: (code, id, options) => {
+            if (id !== file)
+                return code;
+            return CompileManifest(framework, code, options?.ssr || false);
+        }
+    };
+}

package/vite/code-splitting.d.ts

@@ -0,0 +1,4 @@
+import type { UserConfig } from "vite";
+type Plugin = NonNullable<UserConfig["plugins"]>[number];
+export declare function BundleSplitting(): Plugin;
+export {};

package/vite/code-splitting.js

@@ -0,0 +1,14 @@
+const serverPattern = /\.server\.[tj]s(x)?/;
+const clientPattern = /\.client\.[tj]s(x)?/;
+export function BundleSplitting() {
+    return {
+        name: "htmx-bundle-splitter",
+        enforce: "pre",
+        transform: (code, id, options) => {
+            const pattern = options?.ssr ? clientPattern : serverPattern;
+            if (pattern.test(id))
+                return "export {};";
+            return code;
+        }
+    };
+}

package/vite/index.d.ts

@@ -0,0 +1,3 @@
+import { BundleSplitter } from "./bundle-splitter.js";
+import { ClientIsland } from "./client-island.js";
+export { BundleSplitter, ClientIsland };

package/vite/index.js

@@ -0,0 +1,3 @@
+import { BundleSplitter } from "./bundle-splitter.js";
+import { ClientIsland } from "./client-island.js";
+export { BundleSplitter, ClientIsland };

package/vite/router.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function Router(): Plugin;

package/vite/router.js

@@ -0,0 +1,29 @@
+export function Router() {
+    const virtualModuleId = "virtual:htmx-router/dynamic.tsx";
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+    return {
+        name: "vite-plugin-htmx-router",
+        resolveId(id) {
+            if (id === virtualModuleId)
+                return resolvedVirtualModuleId;
+        },
+        load(id) {
+            if (id !== resolvedVirtualModuleId)
+                return;
+            return source;
+        }
+    };
+}
+const source = `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/bin/cli/config.d.ts

@@ -1,10 +0,0 @@
-export declare function ReadConfig(): Promise<{
-    client?: {
-        adapter: string;
-        source: string;
-    };
-    router: {
-        folder: string;
-        output: string;
-    };
-}>;

package/bin/cli/config.js

@@ -1,4 +0,0 @@
-import { readFile } from "fs/promises";
-export async function ReadConfig() {
-    return JSON.parse(await readFile(process.argv[2] || "./htmx-config.json", "utf-8"));
-}

package/bin/cli/index.js

@@ -1,66 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-import { writeFile } from "fs/promises";
-import { relative } from "path";
-import { GenerateClient } from "../client/index.js";
-import { ReadConfig } from "../cli/config.js";
-const config = await ReadConfig();
-console.info("Building router");
-const routes = relative(config.router.output, config.router.folder).replaceAll("\\", "/").slice(1);
-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 { 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 { RouteModule } from "htmx-router";
-import { resolve } from "path";
-
-(globalThis as any).HTMX_ROUTER_ROOT = resolve('${config.router.folder.replaceAll("\\", "/")}');
-const modules = import.meta.glob('${routes}/**/*.{ts,tsx}', { eager: true });
-
-export const tree = new RouteTree();
-for (const path in modules) {
-	const tail = path.lastIndexOf(".");
-	const url = path.slice(${routes.length + 1}, tail);
-	tree.ingest(url, modules[path] as RouteModule<any>);
-}
-
-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;
-}`);
-if (config.client) {
-    console.info("Building client islands");
-    await GenerateClient(config.client, true);
-}

package/bin/client/entry.d.ts

@@ -1 +0,0 @@
-export declare function GetClientEntryURL(): Promise<any>;

package/bin/client/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * Builds the SSR and client side mounter for client components
- */
-export declare function GenerateClient(config: {
-    adapter: string;
-    source: string;
-}, force?: boolean): Promise<void>;

package/bin/client/watch.d.ts

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

package/bin/client/watch.js

@@ -1,11 +0,0 @@
-import { GenerateClient } from "../client/index.js";
-import { ReadConfig } from "../cli/config.js";
-export async function __RebuildClient__() {
-    if (process.env.NODE_ENV === "production")
-        return;
-    const config = await ReadConfig();
-    const client = config.client;
-    if (!client)
-        return;
-    GenerateClient(client, false).catch(console.error);
-}

package/bin/index.d.ts

@@ -1,11 +0,0 @@
-import { RouteModule, CatchFunction, RenderFunction } from './types.js';
-import { RouteContext, GenericContext } from "./router.js";
-import { createRequestHandler } from './request/index.js';
-import { MetaDescriptor, RenderMetaDescriptor, ShellOptions, ApplyMetaDescriptorDefaults, LdJsonObject, OpenGraph, OpenGraphImage, OpenGraphVideo, OpenGraphAudio, InferShellOptions } from './util/shell.js';
-import { redirect, refresh, revalidate, text, json } from './util/response.js';
-import { Cookies, CookieOptions } from "./util/cookies.js";
-import { EventSourceConnection } from "./util/event-source.js";
-import { DynamicReference } from './util/dynamic.js';
-import { StyleClass } from './util/css.js';
-import { Endpoint } from './util/endpoint.js';
-export { createRequestHandler, CatchFunction, RenderFunction, RouteContext, RouteModule, GenericContext, Cookies, CookieOptions, Endpoint, DynamicReference, StyleClass, EventSourceConnection, redirect, refresh, revalidate, text, json, MetaDescriptor, RenderMetaDescriptor, ShellOptions, ApplyMetaDescriptorDefaults, LdJsonObject, OpenGraph, OpenGraphImage, OpenGraphVideo, OpenGraphAudio, InferShellOptions };

package/bin/index.js

@@ -1,18 +0,0 @@
-import { RouteContext, GenericContext } from "./router.js";
-import { createRequestHandler } from './request/index.js';
-import { RenderMetaDescriptor, ApplyMetaDescriptorDefaults } from './util/shell.js';
-import { redirect, refresh, revalidate, text, json } from './util/response.js';
-import { Cookies } from "./util/cookies.js";
-import { EventSourceConnection } from "./util/event-source.js";
-import { DynamicReference } from './util/dynamic.js';
-import { StyleClass } from './util/css.js';
-import { Endpoint } from './util/endpoint.js';
-export { createRequestHandler, RouteContext, GenericContext, 
-// Request helpers
-Cookies, Endpoint, DynamicReference, 
-// CSS Helper
-StyleClass, 
-// SSE helper
-EventSourceConnection, 
-// Response helpers
-redirect, refresh, revalidate, text, json, RenderMetaDescriptor, ApplyMetaDescriptorDefaults };

package/bin/request/index.js

@@ -1,6 +0,0 @@
-import * as native from "../request/native.js";
-import * as http from "../request/http.js";
-export const createRequestHandler = {
-    http: http.createRequestHandler,
-    native: native.createRequestHandler
-};

package/bin/response.d.ts

@@ -1,9 +0,0 @@
-export declare function text(text: string, init?: ResponseInit): Response;
-export declare function json(data: unknown, init?: ResponseInit): Response;
-export declare function redirect(url: string, init?: ResponseInit & {
-    client?: boolean;
-}): Response;
-export declare function revalidate(init?: ResponseInit): Response;
-export declare function refresh(init?: ResponseInit & {
-    client?: boolean;
-}): Response;

package/bin/response.js

@@ -1,46 +0,0 @@
-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");
-    res.headers.set("X-Caught", "true");
-    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");
-    res.headers.set("X-Caught", "true");
-    return res;
-}
-export function redirect(url, init) {
-    init ||= {};
-    init.statusText ||= "Temporary Redirect";
-    init.status = 307;
-    const res = new Response("", init);
-    if (!init?.client)
-        res.headers.set("Location", url);
-    res.headers.set("HX-Location", url); // use hx-boost if applicable
-    return res;
-}
-export function revalidate(init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response("", init);
-    res.headers.set("HX-Location", "");
-    return res;
-}
-export function refresh(init) {
-    init ||= {};
-    init.statusText ||= "ok";
-    init.status = 200;
-    const res = new Response("", init);
-    if (!init?.client)
-        res.headers.set("Refresh", "0"); // fallback
-    res.headers.set("HX-Refresh", "true");
-    return res;
-}

package/bin/types.d.ts

@@ -1,10 +0,0 @@
-import { ParameterShaper } from "./util/parameters.js";
-import { RouteContext } from "./router.js";
-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;
-    loader?: RenderFunction<RouteContext<T>>;
-    action?: RenderFunction<RouteContext<T>>;
-    error?: CatchFunction<RouteContext<T>>;
-};

package/bin/types.js

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

package/bin/util/event-source.d.ts

@@ -1,16 +0,0 @@
-/**
- * Helper for Server-Sent-Events, with auto close on SIGTERM and SIGHUP messages
- * Includes a keep alive empty packet sent every 30sec (because Chrome implodes at 120sec, and can be unreliable at 60sec)
- */
-export declare class EventSourceConnection {
-    private controller;
-    private stream;
-    private timer;
-    readonly createdAt: number;
-    constructor(request: Request, keepAlive?: number);
-    response(): Response;
-    private keepAlive;
-    send(type: string, data: string, timeStamp: number): boolean;
-    isClosed(): boolean;
-    close(unlink?: boolean): boolean;
-}

package/bin/util/event-source.js

@@ -1,85 +0,0 @@
-/**
- * Helper for Server-Sent-Events, with auto close on SIGTERM and SIGHUP messages
- * Includes a keep alive empty packet sent every 30sec (because Chrome implodes at 120sec, and can be unreliable at 60sec)
- */
-export class EventSourceConnection {
-    controller;
-    stream;
-    timer;
-    createdAt; // unix time
-    constructor(request, keepAlive = 30_000) {
-        this.createdAt = Date.now();
-        this.controller = null;
-        this.stream = new ReadableStream({
-            start: (c) => { this.controller = c; },
-            cancel: () => { this.close(); }
-        });
-        request.signal.addEventListener('abort', () => this.close());
-        this.timer = setInterval(() => this.keepAlive(), keepAlive);
-        register.push(this);
-    }
-    response() {
-        const headers = new Headers();
-        headers.set("Content-Type", "text/event-stream");
-        headers.set("Transfer-Encoding", "chunked");
-        headers.set("Connection", "keep-alive");
-        headers.set("Keep-Alive", `timeout=120`);
-        return new Response(this.stream, { headers });
-    }
-    keepAlive() {
-        if (!this.controller)
-            return;
-        try {
-            this.controller.enqueue("\n\n");
-        }
-        catch (e) {
-            console.error(e);
-            this.close(); // unbind on failure
-        }
-    }
-    send(type, data, timeStamp) {
-        if (!this.controller)
-            return false;
-        try {
-            this.controller.enqueue(`event: ${type}\ndata: [${data},${timeStamp}]\n\n`);
-            return true;
-        }
-        catch (e) {
-            console.error(e);
-            this.close(); // unbind on failure
-            return false;
-        }
-    }
-    isClosed() {
-        return this.controller === null;
-    }
-    close(unlink = true) {
-        clearInterval(this.timer);
-        if (!this.controller)
-            return false;
-        if (unlink) {
-            const i = register.indexOf(this);
-            if (i !== -1)
-                register.splice(i, 1);
-        }
-        try {
-            this.controller?.close();
-        }
-        catch (e) {
-            console.error(e);
-            this.controller = null;
-            return false;
-        }
-        this.controller = null;
-        return true;
-    }
-}
-// Auto close all SSE streams when shutdown requested
-// Without this graceful shutdowns will hang indefinitely
-const register = new Array();
-function CloseAll() {
-    for (const connection of register)
-        connection.close(false); // don't waste time unregistering
-}
-process.on('SIGTERM', CloseAll);
-process.on('SIGHUP', CloseAll);

package/bin/util/index.d.ts

@@ -1 +0,0 @@
-export declare function MergeHeaders(base: Headers, extension: Headers, override: boolean): void;

package/bin/util/index.js

@@ -1,7 +0,0 @@
-export function MergeHeaders(base, extension, override) {
-    extension.forEach((val, key) => {
-        if (!override && base.has(key))
-            return;
-        base.set(key, val);
-    });
-}