htmx-router 1.0.0-alpha.1 → 1.0.0-alpha.3

package/bin/cli/index.js

@@ -14,10 +14,13 @@ await writeFile(config.router.output, `/*---------------------------------------
 
 import { GenericContext, RouteTree } from "htmx-router/bin/router";
 import { RegisterDynamic } from "htmx-router/bin/util/dynamic";
+import { GetClientEntryURL } from 'htmx-router/bin/client/entry';
 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();
@@ -46,11 +49,21 @@ export function Dynamic<T extends Record<string, string>>(props: {
 	>{props.children ? props.children : ""}</div>
 }
 
-export function RouteHeaders() {
-	return <>
+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");

package/bin/client/entry.d.ts

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

package/bin/client/entry.js

@@ -0,0 +1,12 @@
+import { readFile } from "fs/promises";
+export async function GetClientEntryURL() {
+    if (process.env.NODE_ENV !== "production")
+        return "/app/entry.client.ts";
+    const config = JSON.parse(await readFile("./dist/client/.vite/manifest.json", "utf8"));
+    for (const key in config) {
+        const def = config[key];
+        if (!def.isEntry)
+            continue;
+        return def.file;
+    }
+}

package/bin/client/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Builds the SSR and client side mounter for client components
+ */
 export declare function GenerateClient(config: {
     adapter: string;
     source: string;

package/bin/client/index.js

@@ -1,3 +1,6 @@
+/**
+ * Builds the SSR and client side mounter for client components
+ */
 import { readFile, writeFile } from "fs/promises";
 import { init, parse } from "es-module-lexer";
 import { QuickHash } from "../util/hash.js";
@@ -10,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"
@@ -44,52 +70,51 @@ 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"
+        + "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/mount.js

@@ -1,5 +1,6 @@
 import { QuickHash } from "../util/hash.js";
 import { CutString } from "../helper.js";
+// this function simply exists so it can be stringified and written into the client js bundle
 function ClientMounter() {
     const theme = {
         infer: () => {
@@ -36,8 +37,8 @@ function ClientMounter() {
             return;
         if (!global.CLIENT)
             throw new Error("Client manifest missing");
-        console.info("hydrating...");
         for (const [funcName, element, json] of mountRequests) {
+            console.info("hydrating", funcName, "into", element);
             const func = global.CLIENT[funcName];
             if (!func)
                 throw new Error(`Component ${funcName} is missing from client manifest`);

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).catch(console.error);
-    };
-    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/request/http.js

@@ -7,11 +7,6 @@ export function createRequestHandler(config) {
             let { response, headers } = await Resolve(request, mod.tree, config);
             res.writeHead(response.status, headers);
             let rendered = await response.text();
-            if (config.viteDevServer) {
-                if (!headers["x-partial"] && response.headers.get("content-type")?.startsWith("text/html")) {
-                    rendered = await config.viteDevServer.transformIndexHtml(req.url || "", rendered);
-                }
-            }
             res.end(rendered);
         }
         catch (e) {

package/bin/request/native.js

@@ -3,17 +3,7 @@ export function createRequestHandler(config) {
     return async (req) => {
         try {
             const mod = typeof config.build === "function" ? await config.build() : await config.build;
-            let { response, headers } = await Resolve(req, mod.tree, config);
-            if (config.viteDevServer) {
-                if (!headers["x-partial"] && response.headers.get("content-type")?.startsWith("text/html")) {
-                    const rendered = await config.viteDevServer.transformIndexHtml(req.url || "", await response.text());
-                    return new Response(rendered, {
-                        status: response.status,
-                        statusText: response.statusText,
-                        headers: response.headers,
-                    });
-                }
-            }
+            let { response } = await Resolve(req, mod.tree, config);
             return response;
         }
         catch (e) {

package/bin/util/cookies.d.ts

@@ -9,6 +9,9 @@ export interface CookieOptions {
     sameSite?: "lax" | "strict" | "none";
     secure?: boolean;
 }
+/**
+ * Helper provided in the Generic and RouteContext which provides reading and updating cookies
+ */
 export declare class Cookies {
     private map;
     private config;

package/bin/util/cookies.js

@@ -1,3 +1,6 @@
+/**
+ * Helper provided in the Generic and RouteContext which provides reading and updating cookies
+ */
 export class Cookies {
     map;
     config;

package/bin/util/css.d.ts

@@ -1,3 +1,7 @@
+/**
+ * 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 {
     readonly name: string;
     readonly style: string;

package/bin/util/css.js

@@ -1,10 +1,14 @@
 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
+ * Use .this as your class name in the source, and it will be replaced with a unique name
+ */
 export class StyleClass {
-    name;
-    style;
+    name; // unique name generated based on the original name and hash of the style
+    style; // the mutated source
     hash;
     constructor(name, style) {
         if (!name.match(classNamePattern))
@@ -13,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() {
@@ -39,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/bin/util/dynamic.d.ts

@@ -1,3 +1,6 @@
+/**
+ * This whole file is only for internal use but the generated router for the <Dynamic> component
+ */
 import { GenericContext } from "../router.js";
 export declare function RegisterDynamic<T>(load: Loader<T>): string;
 type Loader<T> = (params: T, ctx: GenericContext) => Promise<JSX.Element>;

package/bin/util/dynamic.js

@@ -1,3 +1,6 @@
+/**
+ * This whole file is only for internal use but the generated router for the <Dynamic> component
+ */
 import { QuickHash } from "../util/hash.js";
 const registry = new Map();
 const index = new Map();

package/bin/util/endpoint.d.ts

@@ -1,5 +1,9 @@
 import { RenderFunction } from "../types.js";
 import { GenericContext } from "../router.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 name: string;

package/bin/util/endpoint.js

@@ -1,5 +1,9 @@
 import { QuickHash } from "../util/hash.js";
 const registry = new Map();
+/**
+ * Create a route-less endpoint
+ * The name is optional and will be inferred from the function if not given (helpful for network waterfalls)
+ */
 export class Endpoint {
     render;
     name;

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

@@ -1,6 +1,6 @@
 /**
- * Create a new SSE handler
- * Includes auto keep-alive, and graceful shutdown
+ * 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;

package/bin/util/event-source.js

@@ -1,6 +1,6 @@
 /**
- * Create a new SSE handler
- * Includes auto keep-alive, and graceful shutdown
+ * 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;

package/bin/util/hash.d.ts

@@ -1 +1,4 @@
+/**
+ * Not the best hash in the world, but it's something really fast that will work on all JS runtimes
+ */
 export declare function QuickHash(input: string): string;

package/bin/util/hash.js

@@ -1,3 +1,6 @@
+/**
+ * Not the best hash in the world, but it's something really fast that will work on all JS runtimes
+ */
 export function QuickHash(input) {
     let hash = 0;
     for (let i = 0; i < input.length; i++) {

package/bin/util/parameters.d.ts

@@ -1,3 +1,6 @@
+/**
+ * This is used by GenericContext to convert itself to a RouteContext<T>
+ */
 export type Parameterized<T extends ParameterShaper> = {
     [K in keyof T]: ReturnType<T[K]>;
 };

package/bin/util/parameters.js

@@ -1,3 +1,6 @@
+/**
+ * This is used by GenericContext to convert itself to a RouteContext<T>
+ */
 export function Parameterize(params, shape) {
     const out = {};
     for (const key in shape) {

package/bin/util/path-builder.d.ts

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

package/bin/util/path-builder.js

@@ -0,0 +1,43 @@
+import { relative } from "path";
+/*
+// This feature is disabled because vite doesn't compile import.meta.url to the original url when making the SSR build
+// Even though it's used statically in the routes
+
+const parameters = {
+    userID: Number
+};
+
+const urlPath = RoutePathBuilder<typeof parameters>(import.meta.url);
+
+export function loader({ params }: RouteContext<typeof parameters>) {
+    return <div>You are currently at {urlPath({ userID: params.userID.toString() })}</div>
+}
+*/
+// This feature isn't particularly helpful for a router to refer to it's own URL
+// But instead is useful because you could export this function
+// Allowing other routes to use it, and thus if you move the file your imports will auto update by your LSP
+// And thus so would your SSR rendered urls
+function RoutePathBuilder(importUrl) {
+    // file runs all imports before actually executing the route.tsx
+    // so I have to do this BS instead of pre-compiling
+    let compiled = null;
+    return (params) => {
+        if (!compiled) {
+            const root = globalThis.HTMX_ROUTER_ROOT;
+            let path = importUrl.slice("file:///".length);
+            const raw = relative(root, path).replaceAll("\\", "/");
+            const i = raw.lastIndexOf(".");
+            compiled = raw.slice(0, i).split("/");
+        }
+        let path = "";
+        for (const frag of compiled) {
+            path += "/";
+            if (frag[0] != "$") {
+                path += frag;
+                continue;
+            }
+            path += params[frag.slice(1)] || "_";
+        }
+        return path;
+    };
+}

package/bin/util/shell.d.ts

@@ -1,3 +1,8 @@
+/**
+ * These types are just helpers which could be useful
+ * But the goal is to add a feature in the future to help will shells merging meta data
+ * Currently I want more experience using the slug-shell pattern before I build it out
+ */
 export type MetaDescriptor = {
     charSet: "utf-8";
 } | {
@@ -19,14 +24,9 @@ export type MetaDescriptor = {
 } | {
     [name: string]: unknown;
 };
-type LdJsonObject = {
+export type LdJsonObject = {
     [Key in string]?: LdJsonValue | undefined;
 };
-type LdJsonArray = LdJsonValue[] | readonly LdJsonValue[];
-type LdJsonPrimitive = string | number | boolean | null;
-type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
-export type ShellOptions = {
-    meta?: Array<MetaDescriptor>;
-} | undefined;
-export type ShellProps<T> = T & ShellOptions;
-export {};
+export type LdJsonArray = LdJsonValue[] | readonly LdJsonValue[];
+export type LdJsonPrimitive = string | number | boolean | null;
+export type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;

package/bin/util/shell.js

@@ -1 +1,8 @@
+/**
+ * These types are just helpers which could be useful
+ * But the goal is to add a feature in the future to help will shells merging meta data
+ * Currently I want more experience using the slug-shell pattern before I build it out
+ */
 export {};
+// export type ShellOptions = { meta?: Array<MetaDescriptor> } | undefined;
+// export type ShellProps<T> = T & ShellOptions;

package/package.json

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