vike-lite 1.0.0

package/README.md

@@ -0,0 +1,60 @@
+# vike-lite
+
+### ⬇️ Clone
+```sh
+git clone https://github.com/node-ecosystem/vike-lite.git
+```
+
+### ⚙️ Install
+| Package Manager | Command
+| - | -
+| **npm** | `npm install -D vike-lite`
+| **yarn** | `yarn add -D vike-lite`
+| **pnpm** | `pnpm add -D vike-lite`
+
+### 📖 Usage
+Add Vite plugin
+
+```ts
+// vite.config.ts
+import vikeLite from 'vike-lite/vite'
+
+export default {
+  plugins: [
+    vikeLite()
+  ]
+}
+```
+
+#### Hooks
+
+### renderPage
+```ts
+// /server/index.ts
+import { cors } from 'hono/cors'
+import { Hono } from 'hono'
+import { renderPage } from 'vike-lite/server'
+
+import apiRoutes from './apiRoutes'
+
+const app = new Hono()
+
+if (process.env.NODE_ENV === 'production') {
+  app.use(cors())
+}
+
+app.route('/api', apiRoutes)
+
+// Catch-all remaining requests using custom rendering
+app.get('*', async (c, next) => {
+  const response = await renderPage(c.req.raw)
+  return response ?? next()
+})
+
+app.onError((error, c) => {
+  console.error(error)
+  return c.json({ error: 'Internal Server Error' }, 500)
+})
+
+export default app
+```

package/dist/matchRoute-BONrLRYy.mjs

@@ -0,0 +1,24 @@
+//#region src/shared/matchRoute.ts
+function matchRoute(urlPathname, routes) {
+	for (const route of routes) {
+		const paramNames = [];
+		const regexPath = route.path.replaceAll(/:([^/]+)/g, (_, paramName) => {
+			paramNames.push(paramName);
+			return "([^/]+)";
+		});
+		const regex = new RegExp(`^${regexPath}/?$`);
+		const match = urlPathname.match(regex);
+		if (match) {
+			let index = 0;
+			const routeParams = {};
+			for (const name of paramNames) routeParams[name] = match[++index];
+			return {
+				route,
+				routeParams
+			};
+		}
+	}
+	return null;
+}
+//#endregion
+export { matchRoute as t };

package/dist/server.d.mts

@@ -0,0 +1,16 @@
+//#region src/server/store.d.ts
+interface VikeState {
+  routes: any[];
+  errorRoute: any | null;
+  config: {
+    onRenderHtml: () => Promise<any>;
+  } | null;
+  manifest: Record<string, any> | undefined;
+}
+declare const store: VikeState;
+declare function setVikeState(newState: Partial<VikeState>): void;
+//#endregion
+//#region src/server/renderPage.d.ts
+declare function renderPage(req: Request): Promise<Response>;
+//#endregion
+export { VikeState, renderPage, setVikeState, store };

package/dist/server.mjs

@@ -0,0 +1,172 @@
+import { n as virtualEntryClientId } from "./virtuals-CR__ZAgP.mjs";
+import { t as matchRoute } from "./matchRoute-BONrLRYy.mjs";
+//#region src/server/store.ts
+const store = {
+	routes: [],
+	errorRoute: null,
+	config: null,
+	manifest: void 0
+};
+function setVikeState(newState) {
+	Object.assign(store, newState);
+}
+//#endregion
+//#region src/server/abort.ts
+var AbortRender = class extends Error {
+	statusCode;
+	reason;
+	constructor(statusCode, reason) {
+		super(`Render aborted with status ${statusCode}: ${reason || ""}`);
+		this.statusCode = statusCode;
+		this.reason = reason;
+	}
+};
+//#endregion
+//#region src/server/renderPage.tsx
+const isProd = process.env.NODE_ENV === "production";
+const ESCAPE_LOOKUP = {
+	"&": String.raw`\u0026`,
+	">": String.raw`\u003e`,
+	"<": String.raw`\u003c`,
+	"\u2028": String.raw`\u2028`,
+	"\u2029": String.raw`\u2029`
+};
+const ESCAPE_REGEX = /[&><\u{2028}\u{2029}]/gu;
+function serializeContext(data) {
+	return JSON.stringify(data).replaceAll(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
+function getAssets(pageModuleId) {
+	if (!isProd) return {
+		cssLinks: "",
+		jsPreloads: "",
+		entryClient: "/@id/virtual:entry-client"
+	};
+	const cssFiles = /* @__PURE__ */ new Set();
+	const jsFiles = /* @__PURE__ */ new Set();
+	const manifest = store.manifest;
+	function collectAssets(key) {
+		const chunk = manifest[key];
+		if (!chunk) throw new Error(`Asset not found in manifest for key: ${key}`);
+		jsFiles.add(chunk.file);
+		if (chunk.css) for (const css of chunk.css) cssFiles.add(css);
+		if (chunk.imports) for (const imp of chunk.imports) collectAssets(imp);
+	}
+	collectAssets(virtualEntryClientId);
+	collectAssets(pageModuleId.replace("@/", ""));
+	return {
+		cssLinks: [...cssFiles].map((href) => `<link rel="stylesheet" href="/${href}">`).join(""),
+		jsPreloads: [...jsFiles].map((href) => `<link rel="modulepreload" href="/${href}">`).join(""),
+		entryClient: "/" + manifest[virtualEntryClientId].file
+	};
+}
+async function buildPageContext(pathname, fullUrl, isJsonRequest) {
+	const matched = matchRoute(pathname, store.routes);
+	if (!matched) return null;
+	const { route, routeParams } = matched;
+	const pageContext = {
+		routeParams,
+		urlOriginal: fullUrl,
+		urlPathname: pathname
+	};
+	const [dataMod, titleMod, PageModule, HeadModule, LayoutModule] = await Promise.all([
+		route.data?.() ?? null,
+		route.title?.() ?? null,
+		isJsonRequest ? null : route.Page(),
+		isJsonRequest ? null : route.Head?.() ?? null,
+		isJsonRequest ? null : route.Layout?.() ?? null
+	]);
+	if (dataMod) try {
+		pageContext.data = await (dataMod.data ?? dataMod.default)(pageContext);
+	} catch (error) {
+		console.error("+data hook failed at:", pathname);
+		throw error;
+	}
+	if (titleMod) try {
+		const titleFn = titleMod.title ?? titleMod.default;
+		pageContext.title = typeof titleFn === "function" ? titleFn(pageContext) : titleFn;
+	} catch (error) {
+		console.error("+title hook failed at:", pathname);
+		throw error;
+	}
+	return {
+		pageContext,
+		route,
+		PageModule,
+		HeadModule,
+		LayoutModule
+	};
+}
+async function renderErrorPage(req, status, originalPathname, error) {
+	if (!store.errorRoute) return new Response(status === 404 ? "Not Found" : "Internal Server Error", { status });
+	try {
+		const { onRenderHtml } = await store.config.onRenderHtml();
+		const [PageModule, HeadModule, LayoutModule] = await Promise.all([
+			store.errorRoute.Page(),
+			store.errorRoute.Head?.() ?? null,
+			store.errorRoute.Layout?.() ?? null
+		]);
+		const pageContext = {
+			urlOriginal: req.url,
+			urlPathname: originalPathname,
+			routeParams: {},
+			is404: status === 404,
+			is500: status === 500,
+			errorMessage: status === 500 && error instanceof Error ? error.message : void 0
+		};
+		const html = await onRenderHtml({
+			pageContext,
+			Page: PageModule.Page ?? PageModule.default,
+			Layout: LayoutModule ? LayoutModule.Layout ?? LayoutModule.default : void 0,
+			Head: HeadModule ? HeadModule.Head ?? HeadModule.default : void 0,
+			pageTitleTag: `<title>${status === 404 ? "Page Not Found" : "Server Error"}</title>`,
+			serializedContext: serializeContext(pageContext),
+			assets: getAssets(store.errorRoute.page)
+		});
+		return new Response(html, {
+			status,
+			headers: { "Content-Type": "text/html" }
+		});
+	} catch (renderError) {
+		console.error("Error page render failed:", renderError);
+		return new Response(status === 404 ? "Not Found" : "Internal Server Error", { status });
+	}
+}
+async function renderPage(req) {
+	const { pathname } = new URL(req.url);
+	const isJsonRequest = pathname.endsWith(".pageContext.json");
+	let targetPathname = pathname;
+	if (isJsonRequest) {
+		targetPathname = targetPathname.replace(/\.pageContext\.json$/, "");
+		if (targetPathname === "/index") targetPathname = "/";
+	}
+	try {
+		const resolved = await buildPageContext(targetPathname, req.url, isJsonRequest);
+		if (!resolved) {
+			if (isJsonRequest) return Response.json({ is404: true }, { status: 404 });
+			return renderErrorPage(req, 404, targetPathname);
+		}
+		const { pageContext, route, PageModule, HeadModule, LayoutModule } = resolved;
+		if (isJsonRequest) return Response.json(pageContext);
+		const { onRenderHtml } = await store.config.onRenderHtml();
+		const html = await onRenderHtml({
+			pageContext,
+			Page: PageModule.Page ?? PageModule.default,
+			Head: HeadModule ? HeadModule.Head ?? HeadModule.default : void 0,
+			Layout: LayoutModule ? LayoutModule.Layout ?? LayoutModule.default : void 0,
+			pageTitleTag: pageContext.title ? `<title>${pageContext.title}</title>` : "",
+			serializedContext: serializeContext(pageContext),
+			assets: getAssets(route.page)
+		});
+		return new Response(html, {
+			status: 200,
+			headers: { "Content-Type": "text/html" }
+		});
+	} catch (error) {
+		if (error instanceof AbortRender) return new Response(error.reason || "Not Found", { status: error.statusCode });
+		console.error("Render Error:", error);
+		if (isJsonRequest) return Response.json({ is500: true }, { status: 500 });
+		return renderErrorPage(req, 500, targetPathname, error);
+	}
+}
+//#endregion
+export { renderPage, setVikeState, store };

package/dist/shared.d.mts

@@ -0,0 +1,7 @@
+//#region src/shared/matchRoute.d.ts
+declare function matchRoute(urlPathname: string, routes: Route[]): {
+  route: Route;
+  routeParams: Record<string, string>;
+} | null;
+//#endregion
+export { matchRoute };

package/dist/shared.mjs

@@ -0,0 +1,2 @@
+import { t as matchRoute } from "./matchRoute-BONrLRYy.mjs";
+export { matchRoute };

package/dist/virtuals-CR__ZAgP.mjs

@@ -0,0 +1,8 @@
+//#region src/virtuals.ts
+const virtualModuleId = "virtual:routes";
+const virtualManifestId = "virtual:client-manifest";
+const virtualAdapterId = "virtual:vike-lite-adapter";
+const virtualEntryClientId = "virtual:entry-client";
+const virtualSetupId = "virtual:vike-lite/setup";
+//#endregion
+export { virtualSetupId as a, virtualModuleId as i, virtualEntryClientId as n, virtualManifestId as r, virtualAdapterId as t };

package/dist/vite.d.mts

@@ -0,0 +1,14 @@
+import { Plugin } from "vite";
+
+//#region src/vite-plugin.d.ts
+declare function routerPlugin({
+  pagesDir,
+  serverEntry,
+  apiPrefix
+}?: {
+  pagesDir?: string | undefined;
+  serverEntry?: string | undefined;
+  apiPrefix?: string | undefined;
+}): Plugin;
+//#endregion
+export { routerPlugin as default };

package/dist/vite.mjs

@@ -0,0 +1,245 @@
+import { a as virtualSetupId, i as virtualModuleId, n as virtualEntryClientId, r as virtualManifestId, t as virtualAdapterId } from "./virtuals-CR__ZAgP.mjs";
+import fs from "node:fs";
+import path from "node:path";
+import { Readable } from "node:stream";
+import { pipeline } from "node:stream/promises";
+//#region src/vite-plugin.ts
+function generateRoutes(pagesAbsPath) {
+	if (!fs.existsSync(pagesAbsPath)) return { routes: [] };
+	const routes = [];
+	let errorRoute;
+	function walk(dir, routePath, parentLayout, parentHead) {
+		const files = fs.readdirSync(dir);
+		const importPath = "@/pages" + (dir === pagesAbsPath ? "" : "/" + path.relative(pagesAbsPath, dir).replaceAll("\\", "/"));
+		const currentLayout = files.includes("+Layout.tsx") ? `${importPath}/+Layout.tsx` : parentLayout;
+		const currentHead = files.includes("+Head.tsx") ? `${importPath}/+Head.tsx` : parentHead;
+		if (files.includes("+Page.tsx")) {
+			const route = {
+				path: routePath || "/",
+				page: `${importPath}/+Page.tsx`,
+				hasData: files.includes("+data.ts"),
+				hasTitle: files.includes("+title.ts")
+			};
+			if (currentLayout) route.layout = currentLayout;
+			if (currentHead) route.head = currentHead;
+			routes.push(route);
+		}
+		for (const file of files) {
+			const fullPath = path.join(dir, file);
+			if (!fs.statSync(fullPath).isDirectory()) continue;
+			if (file === "_error") {
+				if (fs.readdirSync(fullPath).includes("+Page.tsx")) errorRoute = {
+					path: "_error",
+					page: `${importPath}/_error/+Page.tsx`,
+					layout: currentLayout,
+					head: currentHead
+				};
+				continue;
+			}
+			if (file.startsWith("_")) continue;
+			walk(fullPath, routePath + (routePath.endsWith("/") ? "" : "/") + file.replace(/^@/, ":"), currentLayout, currentHead);
+		}
+	}
+	walk(pagesAbsPath, "");
+	routes.sort((a, b) => {
+		const aDynamic = a.path.includes(":");
+		const bDynamic = b.path.includes(":");
+		if (aDynamic && !bDynamic) return 1;
+		if (!aDynamic && bDynamic) return -1;
+		return b.path.length - a.path.length;
+	});
+	const homeIndex = routes.findIndex((r) => r.path === "/index");
+	if (homeIndex !== -1) routes[homeIndex].path = "/";
+	return {
+		routes,
+		errorRoute
+	};
+}
+/**
+* Anti-FOUC: Inspect all known SSR modules, ask the client environment
+* to translate them into plain text (thanks to ?direct) and return them.
+*/
+async function injectFOUCStyles(server, html) {
+	const styles = /* @__PURE__ */ new Set();
+	const ssrEnv = server.environments.ssr;
+	const clientEnv = server.environments.client;
+	for (const mod of ssrEnv.moduleGraph.idToModuleMap.values()) {
+		if (!(mod.file && /\.(css|scss|sass|less|styl|stylus)($|\?)/.test(mod.file))) continue;
+		const url = mod.url.split("?", 1)[0];
+		try {
+			const result = await clientEnv.transformRequest(url + "?direct");
+			if (result?.code) styles.add(result.code);
+		} catch {}
+	}
+	if (styles.size === 0) return html;
+	const headEndIndex = html.lastIndexOf("</head>");
+	const bodyEndIndex = html.lastIndexOf("</body>");
+	let cssContent = "";
+	for (const s of styles) cssContent += s;
+	const inlineCss = `<style type="text/css" data-vite-dev-fouc>${cssContent}</style>`;
+	return html.slice(0, headEndIndex) + inlineCss + html.slice(headEndIndex, bodyEndIndex) + `<script type="module" data-vite-dev-fouc-cleanup>requestAnimationFrame(()=>{document.querySelectorAll('[data-vite-dev-fouc]').forEach(el=>el.remove());document.currentScript?.remove();})<\/script>` + html.slice(bodyEndIndex);
+}
+function routerPlugin({ pagesDir = "pages", serverEntry = "server/index.ts", apiPrefix = "/api" } = {}) {
+	const isProd = process.env.NODE_ENV === "production";
+	let viteConfigRoot;
+	const resolvedVirtualModuleId = "\0" + virtualModuleId;
+	const resolvedVirtualManifestId = "\0" + virtualManifestId;
+	const resolvedVirtualEntryClientId = "\0" + virtualEntryClientId;
+	const resolvedVirtualSetupId = "\0" + virtualSetupId;
+	return {
+		name: "vike-lite",
+		config() {
+			return {
+				appType: "custom",
+				environments: {
+					client: { build: {
+						outDir: "../dist/client",
+						emptyOutDir: true,
+						cssMinify: true,
+						manifest: true,
+						rolldownOptions: {
+							input: virtualEntryClientId,
+							output: {
+								format: "esm",
+								entryFileNames: "assets/[name].[hash].js",
+								chunkFileNames: (chunkInfo) => {
+									if (chunkInfo.facadeModuleId?.includes(`/${pagesDir}/`)) return "assets/pages/[name].[hash].js";
+									return "assets/chunks/[name].[hash].js";
+								},
+								assetFileNames: "assets/static/[name].[hash][extname]"
+							}
+						}
+					} },
+					ssr: { build: {
+						target: "esnext",
+						outDir: "../dist/server",
+						emptyOutDir: true,
+						rolldownOptions: {
+							input: serverEntry,
+							output: {
+								format: "esm",
+								entryFileNames: "index.mjs",
+								chunkFileNames: (chunkInfo) => {
+									if (chunkInfo.facadeModuleId?.includes(`/${pagesDir}/`)) return "assets/pages/[name].[hash].mjs";
+									return "assets/chunks/[name].[hash].mjs";
+								}
+							}
+						}
+					} }
+				}
+			};
+		},
+		configResolved(config) {
+			viteConfigRoot = config.root;
+		},
+		resolveId(id) {
+			if (id === "virtual:routes") return resolvedVirtualModuleId;
+			if (id === "virtual:client-manifest") return resolvedVirtualManifestId;
+			if (id === "virtual:entry-client") return resolvedVirtualEntryClientId;
+			if (id === "virtual:vike-lite/setup") return resolvedVirtualSetupId;
+		},
+		async load(id, options) {
+			if (id === resolvedVirtualModuleId) {
+				const { routes, errorRoute } = generateRoutes(path.resolve(viteConfigRoot, pagesDir));
+				const isSSR = options.ssr;
+				let code = `import {onRenderClient,onRenderHtml} from '${virtualAdapterId}';export const config={onRenderClient,onRenderHtml};export const routes=[`;
+				for (const r of routes) {
+					code += `{path:'${r.path}',page:'${r.page}',hasData:${r.hasData},hasTitle:${r.hasTitle},Page:()=>import('${r.page}'),`;
+					if (r.head) code += `Head:()=>import('${r.head}'),`;
+					if (r.layout) code += `Layout:()=>import('${r.layout}'),`;
+					if (isSSR) {
+						if (r.hasData) code += `data:()=>import('${r.page.replace("+Page.tsx", "+data.ts")}'),`;
+						if (r.hasTitle) code += `title:()=>import('${r.page.replace("+Page.tsx", "+title.ts")}'),`;
+					}
+					code += "},";
+				}
+				code += "];";
+				if (errorRoute) {
+					const e = errorRoute;
+					code += `export const errorRoute={path:'${e.path}',page:'${e.page}',Page:()=>import('${e.page}'),`;
+					if (e.layout) code += `Layout:()=>import('${e.layout}'),`;
+					if (e.head) code += `Head:()=>import('${e.head}'),`;
+					code += "};";
+				} else code += "export const errorRoute=null;";
+				return code;
+			}
+			if (id === resolvedVirtualManifestId) {
+				if (!isProd || !options?.ssr) return "";
+				const manifestPath = path.join(viteConfigRoot, "../dist/client/.vite/manifest.json");
+				return `export default ${fs.readFileSync(manifestPath, "utf8")}`;
+			}
+			if (id === resolvedVirtualEntryClientId) return `import{onRenderClient}from'${virtualAdapterId}';onRenderClient();`;
+			if (id === resolvedVirtualManifestId) {
+				if (!isProd || !options?.ssr) return "export default {}";
+				const manifestPath = path.join(viteConfigRoot, "../dist/client/.vite/manifest.json");
+				return `export default ${fs.readFileSync(manifestPath, "utf8")}`;
+			}
+			if (id === resolvedVirtualSetupId) return `
+      // 1. Importa i dati virtuali generati da Vite
+      import { routes, errorRoute, config } from '${virtualModuleId}';
+      
+      // 2. Importa il setter dal TUO pacchetto compilato (assicurati di esportarlo nel package.json)
+      import { setVikeState } from 'vike-lite/store';
+      
+      // 3. Risolve il manifest per la build di produzione
+      let manifest;
+      if (process.env.NODE_ENV === 'production') {
+        manifest = (await import('${virtualManifestId}')).default;
+      }
+      
+      // 4. INIETTA lo stato in memoria!
+      setVikeState({ routes, errorRoute, config, manifest });
+    `;
+		},
+		configureServer(server) {
+			return () => {
+				server.middlewares.use(async (req, res, next) => {
+					try {
+						const ssrEnv = server.environments.ssr;
+						const absoluteServerEntry = path.join(viteConfigRoot, serverEntry);
+						const { default: app } = await ssrEnv.runner.import(absoluteServerEntry);
+						const headers = new Headers();
+						for (const [key, value] of Object.entries(req.headers)) {
+							if (key.startsWith(":")) continue;
+							if (Array.isArray(value)) for (const v of value) headers.append(key, v);
+							else if (value !== void 0) headers.set(key, value);
+						}
+						const requestInit = {
+							method: req.method,
+							headers
+						};
+						if (req.url.startsWith(apiPrefix)) {
+							server.config.logger.info(`API request: ${req.method} ${req.url}`, { timestamp: true });
+							requestInit.body = Readable.toWeb(req);
+							requestInit.duplex = "half";
+						} else if (req.url.endsWith(".pageContext.json")) server.config.logger.info(`SPA Navigation request: ${req.url}`, { timestamp: true });
+						const response = await app.fetch(new Request(`http://${req.headers.host}${req.url}`, requestInit));
+						res.statusCode = response.status;
+						if (response.headers.get("content-type")?.includes("text/html")) {
+							server.config.logger.info(`Page request: ${req.url}`, { timestamp: true });
+							let html = await response.text();
+							html = await injectFOUCStyles(server, html);
+							html = await server.transformIndexHtml(req.url, html);
+							res.setHeader("Content-Type", "text/html");
+							res.end(html);
+							return;
+						}
+						for (const [key, value] of response.headers) res.setHeader(key, value);
+						if (!response.body) {
+							res.end();
+							return;
+						}
+						if (res.destroyed || res.closed) return;
+						try {
+							await pipeline(Readable.fromWeb(response.body), res);
+						} catch {}
+					} catch (error) {
+						next(error);
+					}
+				});
+			};
+		}
+	};
+}
+//#endregion
+export { routerPlugin as default };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "vike-lite",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    "./vite": {
+      "import": "./dist/vite.mjs",
+      "types": "./dist/vite.d.mts"
+    },
+    "./server": {
+      "import": "./dist/server.mjs",
+      "types": "./dist/server.d.mts"
+    },
+    "./shared": {
+      "import": "./dist/shared.mjs",
+      "types": "./dist/shared.d.mts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-ecosystem/vike-lite.git"
+  },
+  "homepage": "https://github.com/node-ecosystem/vike-lite#readme",
+  "bugs": {
+    "url": "https://github.com/node-ecosystem/vike-lite/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint src/**/*.{ts,tsx} *.ts",
+    "build": "tsdown",
+    "od": "yarn outdated"
+  },
+  "devDependencies": {
+    "@types/node": "^26.0.0",
+    "@yarnpkg/sdks": "^3.3.0",
+    "eslint": "^10.5.0",
+    "eslint-plugin-unicorn": "^68.0.0",
+    "tsdown": "^0.22.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.0"
+  },
+  "peerDependencies": {
+    "vite": ">=8"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "packageManager": "yarn@4.17.0"
+}