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

package/bin/cli/index.js

@@ -56,9 +56,9 @@ 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>
-		<link href={GetSheetUrl()} rel="stylesheet"></link>
 		<script src={GetMountUrl()}></script>
 	</>;
 

package/bin/client/index.js

@@ -13,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"
@@ -47,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/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, false).catch(console.error); // rebuild only if the hash has changed
-    };
-    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/util/css.js

@@ -1,6 +1,6 @@
 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
@@ -17,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() {
@@ -43,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/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "htmx-router",
-	"version": "1.0.0-alpha.2",
+	"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": {