@havelaer/vite-plugin-ssr 0.0.3

package/README.md

@@ -0,0 +1,125 @@
+# Vite SSR
+
+SSR for Vite. And optional API servers. Build with Vite's new [Environment API](https://vite.dev/guide/api-environment.html).
+
+## Getting Started
+
+Install the SSR Vite plugin.
+
+```bash
+npm install @havelaer/vite-plugin-ssr
+```
+
+Configure the plugin in your Vite config by providing the client entry, the SSR entry, and optionally the API entries.
+
+The keys in the `apis` object are the names of the APIs. They are also used as base path for the API requests. Eg. `/api*` requests will be sent to the `api` API.
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import ssr from "@havelaer/vite-plugin-ssr";
+
+export default defineConfig({
+  plugins: [ssr({
+    client: "src/entry-client.ts",
+    ssr: "src/entry-ssr.ts",
+    apis: {
+      api: "src/entry-api.ts",
+    },
+  })],
+});
+```
+
+Setup your client entry.
+
+```ts
+// src/entry-client.ts
+console.log("Hello from client");
+
+fetch("/api").then((res) => res.json()).then((data) => {
+  console.log(data.message); // "Hello from the API"
+});
+```
+
+Setup your SSR entry. This serves the HTML based on the request.
+
+```ts
+// src/entry-ssr.ts
+import clientEntryUrl from "./entry-client.ts?url";
+
+export default function fetch(request: Request): Promise<Response> {
+  return new Response(`
+    <h1>Hello from server</h1>
+    <script src="${clientEntryUrl}" type="module"></script>
+  `);
+}
+```
+
+Optionally, setup your API entry.
+
+```ts
+// src/entry-api.ts
+export default function fetch(request: Request): Promise<Response> {
+  return new Response(JSON.stringify({
+    message: "Hello from the API",
+  }), {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+```
+
+## Production
+
+First update your package.json to build all environments by adding the `--app` flag to the `vite build` script.
+Also add a `serve` script to run the server. 
+
+```json
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build --app",
+    "serve": "node server.js"
+  }
+}
+```
+
+Setup a server. You can use any server and any runtime. For this example we're using [Hono](https://hono.dev) with the Node.js runtime.
+
+```js
+// server.js
+import { serve } from "@hono/node-server";
+import { serveStatic } from "@hono/node-server/serve-static";
+import { Hono } from "hono";
+import apiFetch from "./dist/api/entry-api.js";
+import ssrFetch from "./dist/ssr/entry-ssr.js";
+
+const app = new Hono();
+
+app.use(serveStatic({ root: "./dist/client" }));
+
+app.use("/api/*", (c) => apiFetch(c.req.raw));
+
+app.use((c) => ssrFetch(c.req.raw));
+
+serve(app, (info) => {
+  console.log(`Listening on http://localhost:${info.port}`);
+});
+```
+
+Build for production.
+
+```bash
+npm run build
+```
+
+Run the server.
+
+```bash
+npm run serve
+```
+
+## License
+
+MIT

package/dist/plugin.d.ts

@@ -0,0 +1,21 @@
+import { EnvironmentOptions, Plugin } from "vite";
+
+//#region src/plugin.d.ts
+type ServerEntryHandler = (req: Request) => Promise<Response>;
+interface BaseEnvConfig {
+  entry: string;
+  environment?: (env: EnvironmentOptions) => EnvironmentOptions;
+}
+interface ClientConfig extends BaseEnvConfig {}
+interface SSRConfig extends BaseEnvConfig {}
+interface APIConfig extends BaseEnvConfig {
+  route?: string;
+}
+type Options = {
+  client: string | ClientConfig;
+  ssr: string | SSRConfig;
+  apis?: Record<string, string | APIConfig>;
+};
+declare function ssrPlugin(options: Options): Plugin;
+//#endregion
+export { ServerEntryHandler, ssrPlugin as default };

package/dist/plugin.js

@@ -0,0 +1,157 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { getRequestListener } from "@hono/node-server";
+import * as cheerio from "cheerio";
+import { createServerModuleRunner, normalizePath } from "vite";
+
+//#region src/plugin.ts
+function getEntry(config) {
+	if (typeof config === "string") return config;
+	return config.entry;
+}
+function getEnvironment(config, environment) {
+	if (typeof config === "string") return environment;
+	return config.environment?.(environment) ?? environment;
+}
+function extractHtmlScripts(html) {
+	const $ = cheerio.load(html);
+	const scripts = [];
+	$("script").each((_, element) => {
+		const src = $(element).attr("src");
+		const content = $(element).html() ?? void 0;
+		scripts.push({
+			src,
+			content
+		});
+	});
+	return scripts;
+}
+function ssrPlugin(options) {
+	let viteServer;
+	let resolvedConfig;
+	let configEnv;
+	let injectedScripts = [];
+	return {
+		name: "havelaer-vite-ssr",
+		sharedDuringBuild: true,
+		enforce: "pre",
+		config(config, env) {
+			configEnv = env;
+			const outDirRoot = config.build?.outDir ?? "dist";
+			return {
+				environments: {
+					client: getEnvironment(options.client, { build: {
+						outDir: `${outDirRoot}/client`,
+						emitAssets: true,
+						copyPublicDir: true,
+						emptyOutDir: false,
+						rollupOptions: {
+							input: normalizePath(path.resolve(getEntry(options.client))),
+							output: {
+								entryFileNames: "static/entry-client.js",
+								chunkFileNames: "static/assets/[name]-[hash].js",
+								assetFileNames: "static/assets/[name]-[hash][extname]"
+							}
+						}
+					} }),
+					ssr: getEnvironment(options.ssr, { build: {
+						outDir: `${outDirRoot}/ssr`,
+						copyPublicDir: false,
+						emptyOutDir: false,
+						ssrEmitAssets: false,
+						rollupOptions: {
+							input: normalizePath(path.resolve(getEntry(options.ssr))),
+							output: {
+								entryFileNames: "entry-ssr.js",
+								chunkFileNames: "assets/[name]-[hash].js",
+								assetFileNames: "assets/[name]-[hash][extname]"
+							}
+						}
+					} }),
+					...options.apis ? Object.entries(options.apis).reduce((apiEnvironments, [api, config$1]) => {
+						apiEnvironments[api] = getEnvironment(config$1, { build: {
+							rollupOptions: {
+								input: normalizePath(path.resolve(getEntry(config$1))),
+								output: { entryFileNames: `entry-${api}.js` }
+							},
+							outDir: `${outDirRoot}/${api}`,
+							emptyOutDir: false,
+							copyPublicDir: false
+						} });
+						return apiEnvironments;
+					}, {}) : {}
+				},
+				builder: { async buildApp(builder) {
+					await fs.rm(path.resolve(builder.config.root, outDirRoot), {
+						recursive: true,
+						force: true
+					});
+					await Promise.all([
+						builder.build(builder.environments.client),
+						builder.build(builder.environments.ssr),
+						...options.apis ? Object.entries(options.apis).map(([api]) => builder.build(builder.environments[api])) : []
+					]);
+				} },
+				appType: "custom"
+			};
+		},
+		configResolved(config) {
+			resolvedConfig = config;
+		},
+		async configureServer(server) {
+			viteServer = server;
+			const ssrRunner = createServerModuleRunner(server.environments.ssr);
+			const templateHtml = `<html><head></head><body></body></html>`;
+			const transformedHtml = await server.transformIndexHtml("/", templateHtml);
+			injectedScripts = extractHtmlScripts(transformedHtml);
+			if (options.apis) Object.entries(options.apis).forEach(([api, config]) => {
+				const moduleRunner = createServerModuleRunner(server.environments[api]);
+				const route = typeof config !== "string" && config.route ? config.route : `/${api}`;
+				server.middlewares.use(async (req, res, next) => {
+					if (req.url?.startsWith(route)) {
+						const apiFetch = await moduleRunner.import(getEntry(config));
+						await getRequestListener(apiFetch.default)(req, res);
+						return;
+					}
+					next();
+				});
+			});
+			return async () => {
+				server.middlewares.use(async (req, res, next) => {
+					if (res.writableEnded) return next();
+					try {
+						const ssrFetch = await ssrRunner.import(getEntry(options.ssr));
+						await getRequestListener(ssrFetch.default)(req, res);
+					} catch (e) {
+						viteServer?.ssrFixStacktrace(e);
+						console.info(e.stack);
+						res.statusCode = 500;
+						res.end(e.stack);
+					}
+				});
+			};
+		},
+		hotUpdate(ctx) {
+			if (this.environment.name === "ssr" && ctx.modules.length > 0) ctx.server.environments.client.hot.send({ type: "full-reload" });
+		},
+		resolveId(id, parent) {
+			if (id.endsWith("?url") && parent) {
+				const resolvedClientEntry = normalizePath(path.resolve(getEntry(options.client)));
+				const resolvedId = path.resolve(path.dirname(parent), id.slice(0, -4));
+				if (resolvedId === resolvedClientEntry) return `\0virtual:vite-ssr/client-entry-url`;
+			}
+			if (id.endsWith("@vite-ssr-entry-client")) return `\0virtual:vite-ssr/client-entry`;
+		},
+		load(id) {
+			if (id === `\0virtual:vite-ssr/client-entry-url`) if (configEnv.command === "build") return `export default "${resolvedConfig.base}static/entry-client.js";`;
+			else return `export default "${resolvedConfig.base}@vite-ssr-entry-client";`;
+			if (id === `\0virtual:vite-ssr/client-entry`) {
+				const content = injectedScripts.map((script) => script.content || `import "${script.src}";`).join("\n");
+				return `${content}\nawait import("${resolvedConfig.base}${getEntry(options.client)}");`;
+			}
+		}
+	};
+}
+
+//#endregion
+export { ssrPlugin as default };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@havelaer/vite-plugin-ssr",
+  "version": "0.0.3",
+  "description": "SSR for Vite",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "scripts": {
+    "build": "tsdown src/plugin.ts --dts",
+    "dev": "tsdown src/plugin.ts --dts --watch",
+    "lint": "biome check .",
+    "prepublishOnly": "npm run lint -- --fix && npm run build && npm version patch -m 'chore: publishing version %s'",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vite",
+    "ssr"
+  ],
+  "author": "Havelaer",
+  "license": "MIT",
+  "peerDependencies": {
+    "vite": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.1.3",
+    "@types/node": "^24.1.0",
+    "tsdown": "^0.13.1",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.6"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.18.0",
+    "cheerio": "^1.1.2"
+  }
+}