htmx-router 1.0.0-pre1 → 1.0.0-pre4

package/util/path-builder.js

@@ -0,0 +1,45 @@
+import { ServerOnlyWarning } from "../internal/util.js";
+ServerOnlyWarning("path-builder");
+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/util/route.d.ts

@@ -0,0 +1,2 @@
+import { ParameterShaper } from "./parameters.js";
+export declare function RoutePath<T extends ParameterShaper>(): (params: { [K in keyof T]: string; }) => string;

package/util/route.js

@@ -0,0 +1,58 @@
+import { ServerOnlyWarning } from "../internal/util.js";
+ServerOnlyWarning("route-path");
+export function RoutePath() {
+    const frags = new Array();
+    return (params) => {
+        const t = params;
+        if (typeof t === "string") {
+            Compile("/" + t, frags);
+            return "";
+        }
+        return Parse(frags, params);
+    };
+}
+const indexRoute = "/_index";
+function Compile(url, into) {
+    let cursor = 0;
+    let i = 1;
+    for (; i < url.length; i++) {
+        if (url[i] !== "$")
+            continue;
+        if (url[i - 1] !== "/")
+            continue;
+        let e = url.indexOf("/", i + 1);
+        if (e === -1)
+            e = url.length;
+        into.push(url.slice(cursor, i));
+        into.push(url.slice(i, e));
+        cursor = e;
+        i = e - 1;
+    }
+    // remainder
+    if (cursor != i)
+        into.push(url.slice(cursor));
+    // remove _index from end if present
+    const lastI = into.length - 1;
+    const last = into[lastI];
+    if (last && last.endsWith(indexRoute)) {
+        if (last.length === indexRoute.length)
+            into.length--;
+        else
+            into[lastI] = last.slice(0, -indexRoute.length);
+    }
+}
+function Parse(fragments, params) {
+    let out = "";
+    for (const frag of fragments) {
+        if (!frag.startsWith("$")) {
+            out += frag;
+            continue;
+        }
+        const key = frag.slice(1);
+        const param = params[key];
+        if (!param)
+            throw new Error(`Missing ${key} parameter required for route`);
+        out += param;
+    }
+    return out;
+}

package/vite/bundle-splitter.d.ts

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

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/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/example/eventdim-react/package.json

@@ -1,67 +0,0 @@
-{
-	"name": "eventdim-react",
-	"private": "true",
-	"version": "1.0.0",
-	"main": "index.js",
-	"type": "module",
-	"scripts": {
-		"prepare": "npx htmx-router && prisma generate && prisma migrate deploy",
-		"docker": "docker compose up -d",
-		"dev": "node ./server.js",
-		"build": "run-s build:*",
-		"build:router": "npx htmx-router",
-		"build:prisma": "npx prisma generate",
-		"build:client": "vite build",
-		"build:server": "vite build --ssr app/entry.server.ts --outDir dist/server",
-		"validate": "run-s validate:*",
-		"validate:typecheck": "tsc --noEmit",
-		"validate:lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-		"preview": "cross-env NODE_ENV=production node ./server.js"
-	},
-	"keywords": [],
-	"author": "",
-	"license": "ISC",
-	"description": "",
-	"dependencies": {
-		"@fortawesome/free-brands-svg-icons": "^6.7.2",
-		"@fortawesome/free-solid-svg-icons": "^6.7.2",
-		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@prisma/client": "^6.1.0",
-		"bcryptjs": "^2.4.3",
-		"cbor2": "^1.8.0",
-		"cross-env": "^7.0.3",
-		"dotenv": "^16.4.7",
-		"express": "^4.21.2",
-		"htmx-router": "^1.0.0-alpha.5",
-		"morgan": "^1.10.0",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"tiny-invariant": "^1.3.3",
-		"zxcvbn": "^4.4.2"
-	},
-	"devDependencies": {
-		"@types/bcryptjs": "^2.4.6",
-		"@types/express": "^4.17.21",
-		"@types/nodemailer": "^6.4.15",
-		"@types/react": "^18.2.20",
-		"@types/react-dom": "^18.2.7",
-		"@types/zxcvbn": "^4.4.4",
-		"@typescript-eslint/eslint-plugin": "^6.7.4",
-		"@typescript-eslint/parser": "^6.7.4",
-		"eslint": "^8.38.0",
-		"eslint-import-resolver-typescript": "^3.6.1",
-		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"npm-run-all": "^4.1.5",
-		"prisma": "^6.1.0",
-		"typed-htmx": "^0.3.1",
-		"typescript": "^5.5.4",
-		"vite-tsconfig-paths": "^5.1.3",
-		"vite": "^6.0.1"
-	},
-	"engines": {
-		"node": ">=20.0.0"
-	}
-}

package/example/eventdim-react/server.js

@@ -1,90 +0,0 @@
-/// <reference types="node" />
-/* eslint-disable */
-import 'dotenv/config'
-import * as path from "path";
-import { createRequestHandler } from 'htmx-router';
-import { renderToString } from 'react-dom/server';
-import express from 'express';
-import morgan from "morgan";
-
-const port = process.env.PORT || 3000;
-const app = express();
-
-const viteDevServer =
-	process.env.NODE_ENV === "production"
-		? null
-		: await import("vite").then((vite) =>
-				vite.createServer({
-					server: { middlewareMode: true },
-					appType: 'custom'
-				})
-			);
-
-app.use(
-	viteDevServer
-		? viteDevServer.middlewares
-		: express.static("./dist/client")
-);
-
-// logging
-app.use(morgan("tiny"));
-
-const build = viteDevServer
-	? () => viteDevServer.ssrLoadModule('./app/entry.server.ts')
-	: await import('./dist/server/entry.server.js');
-
-app.use('*', createRequestHandler.http({
-	build, viteDevServer,
-	render: (res) => {
-		const headers = new Headers();
-		headers.set("Content-Type", "text/html; charset=UTF-8");
-		headers.set("Cache-Control", "no-cache");
-
-		const stream = renderToString(res);
-		return new Response(stream, { headers });
-	}
-}));
-
-// Start http server
-app.listen(port, () => {
-	console.log(`Server started at http://localhost:${port}`)
-})
-
-
- // Reload pages on file change
-if (viteDevServer) {
-	const focus = path.resolve("./app");
-	viteDevServer.watcher.on('change', (file) => {
-		if (!file.startsWith(focus)) return;
-		console.log(`File changed: ${path.relative("./app", file)}`);
-
-		console.log('Triggering full page reload');
-		viteDevServer.ws.send({ type: 'full-reload' });
-	});
-}
-
-const shutdown = () => {
-	console.log("Shutting down server...");
-
-	// Close the server gracefully
-	server.close((err) => {
-		if (err) {
-			console.error("Error during server shutdown:", err);
-			process.exit(1);
-		}
-		console.log("Server shut down gracefully.");
-		process.exit(0);
-	});
-};
-
-process.on('SIGTERM', shutdown);
-process.on('SIGHUP', shutdown);
-
-
-process .on('unhandledRejection', (reason, p) => {
-	console.error(reason, 'Unhandled Rejection at Promise', p);
-})
-.on('uncaughtException', err => {
-	console.error(err, 'Uncaught Exception thrown');
-	process.exit(1);
-});

package/example/island-react/global.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-
-declare global {
-	namespace JSX {
-		type Element = ReactNode;
-		interface HTMLAttributes extends HtmxAttributes {}
-	}
-}

package/example/island-react/package.json

@@ -1,38 +0,0 @@
-{
-	"type": "module",
-	"scripts": {
-		"prepare": "npx htmx-router",
-		"dev": "node ./server.js",
-		"build": "run-s build:*",
-		"build:router": "npx htmx-router",
-		"build:client": "vite build",
-		"build:server": "vite build --ssr app/entry.server.ts --outDir dist/server",
-		"preview": "cross-env NODE_ENV=production node ./server.js",
-		"validate": "npx tsc -noEmit"
-	},
-	"license": "MIT",
-	"dependencies": {
-		"cross-env": "^7.0.3",
-		"dotenv": "^16.3.1",
-		"express": "^4.21.1",
-		"morgan": "^1.10.0",
-		"npm-run-all": "^4.1.5",
-		"htmx-router": "^1.0.0-alpha.1",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"serve-static": "^1.16.2",
-		"tsconfig-paths": "^4.2.0"
-	},
-	"devDependencies": {
-		"@types/express": "^5.0.0",
-		"@types/node": "^20.4.5",
-		"@types/react-dom": "^19.0.2",
-		"@types/react": "^19.0.1",
-		"@types/serve-static": "^1.15.7",
-		"ts-node": "^10.9.1",
-		"typed-htmx": "^0.3.1",
-		"typescript": "^5.1.6",
-		"vite-tsconfig-paths": "^5.1.3",
-		"vite": "^6.0.1"
-	}
-}

package/example/island-react/server.js

@@ -1,58 +0,0 @@
-import { createRequestHandler } from 'htmx-router';
-import { renderToString } from 'react-dom/server';
-import express from 'express';
-import morgan from "morgan";
-
-const port = process.env.PORT || 5173;
-const app = express();
-
-
-const viteDevServer =
-	process.env.NODE_ENV === "production"
-		? null
-		: await import("vite").then((vite) =>
-				vite.createServer({
-					server: { middlewareMode: true },
-					appType: 'custom'
-				})
-			);
-
-app.use(
-	viteDevServer
-		? viteDevServer.middlewares
-		: express.static("./dist/client")
-);
-
-// logging
-app.use(morgan("tiny"));
-
-const build = viteDevServer
-	? () => viteDevServer.ssrLoadModule('./app/entry.server.ts')
-	: await import('./dist/server/entry.server.js');
-
-app.use('*', createRequestHandler.http({
-	build, viteDevServer,
-	render: (res) => {
-		const headers = new Headers();
-		headers.set("Content-Type", "text/html; charset=UTF-8");
-
-		const stream = renderToString(res);
-		return new Response(stream, { headers });
-	}
-}));
-
-
-// Start http server
-app.listen(port, () => {
-	console.log(`Server started at http://localhost:${port}`)
-})
-
-
- // Reload pages on file change
-if (viteDevServer)
-	viteDevServer.watcher.on('change', (file) => {
-	console.log(`File changed: ${file}`);
-
-	console.log('Triggering full page reload');
-	viteDevServer.ws.send({ type: 'full-reload' });
-});