@octanejs/vite-plugin 0.1.4 → 0.1.6

package/src/server/render-route.js

@@ -1,7 +1,18 @@
 // @ts-check
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
+import { composeHtmlStream } from './html-stream.js';
+import {
+	getContextNonce,
+	injectHydrationEntry,
+	nonceAttribute,
+	splitSsrTemplate,
+} from './html-template.js';
+import {
+	createLayoutWrapper,
+	createPropsWrapper,
+	createRootBoundaryWrapper,
+} from './component-wrappers.js';
 import {
 	get_component_export,
 	get_route_entry_export_name,
@@ -55,7 +66,8 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 		// Load the octane streaming renderer. The wrappers call components
 		// directly (no ssrComponent injection — the root must NOT be
 		// marker-wrapped).
-		const { renderToReadableStream } = await vite.ssrLoadModule('octane/server');
+		const serverRuntime = await vite.ssrLoadModule('octane/server');
+		const { renderToReadableStream } = serverRuntime;
 
 		// Load the page component (compiled in server mode by octane()).
 		const entryPath = get_route_entry_path(route.entry);
@@ -76,7 +88,8 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 		// entry exports.
 		let RootComponent;
 		const requestUrl = context.url.pathname + context.url.search;
-		const pageProps = { params: context.params, url: requestUrl };
+		const pageProps = { params: context.params, url: requestUrl, state: context.state };
+		const nonce = getContextNonce(context);
 
 		if (route.layout) {
 			const layoutModule = await vite.ssrLoadModule(route.layout);
@@ -95,6 +108,16 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 			RootComponent = createPropsWrapper(/** @type {any} */ (PageComponent), pageProps);
 		}
 
+		const pendingEntry = octaneConfig?.rootBoundary.pending;
+		const catchEntry = octaneConfig?.rootBoundary.catch;
+		const PendingComponent = await loadBoundaryComponent(vite, pendingEntry, 'pending');
+		const CatchComponent = await loadBoundaryComponent(vite, catchEntry, 'catch');
+		RootComponent = createRootBoundaryWrapper(
+			RootComponent,
+			{ pending: PendingComponent, catch: CatchComponent },
+			/** @type {any} */ (serverRuntime),
+		);
+
 		// Build head content with hydration data. The client entry is CONFIG-FREE
 		// (importing octane.config.ts into the browser would drag the plugin + the
 		// server adapter — and their `node:fs` imports — into the client graph and
@@ -111,8 +134,12 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 			params: context.params,
 			url: requestUrl,
 			preHydrate: octaneConfig?.router.preHydrate ?? null,
+			rootBoundary: {
+				pending: serializeComponentEntry(pendingEntry),
+				catch: serializeComponentEntry(catchEntry),
+			},
 		});
-		const headContent = `<script id="__octane_data" type="application/json">${escapeScript(routeData)}</script>`;
+		const headContent = `<script id="__octane_data" type="application/json"${nonceAttribute(nonce)}>${escapeScript(routeData)}</script>`;
 
 		// Load and process index.html template.
 		const templatePath = join(vite.config.root, 'index.html');
@@ -121,17 +148,18 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 		// Apply Vite's HTML transforms (HMR client, module resolution, etc.).
 		template = await vite.transformIndexHtml(context.url.pathname, template);
 
-		let html = template.replace('<!--ssr-head-->', headContent);
-
-		// Inject the hydration entry before </body>.
-		const hydrationScript = `<script type="module" src="/@id/virtual:octane-hydrate"></script>`;
-		html = html.replace('</body>', `${hydrationScript}\n</body>`);
+		// Validate the raw SSR template and inject the request-nonced hydrate entry
+		// before consuming the one required head marker with request data.
+		let html = injectHydrationEntry(template, '/@id/virtual:octane-hydrate', nonce);
+		html = html.replace('<!--ssr-head-->', headContent);
 
 		// Start the render. This await resolves at SHELL-ready (so a synchronous
 		// render error still falls into the catch below and produces the dev 500
 		// page); segments keep flushing through the returned stream afterwards.
 		/** @type {ReadableStream<Uint8Array>} */
 		const renderStream = await renderToReadableStream(RootComponent, undefined, {
+			nonce: nonce ?? undefined,
+			signal: context.request.signal,
 			onError(/** @type {unknown} */ error) {
 				if (error instanceof Error) vite.ssrFixStacktrace(error);
 				console.error('[octane] SSR render error:', error);
@@ -141,42 +169,12 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 		const status = route.status ?? 200;
 		const headers = { 'Content-Type': 'text/html; charset=utf-8' };
 
-		// No body placeholder → nothing to stream into; cancel the render and
-		// serve the transformed template (matches the old buffered behavior).
-		const splitAt = html.indexOf('<!--ssr-body-->');
-		if (splitAt === -1) {
-			await renderStream.cancel();
-			return new Response(html, { status, headers });
-		}
-		const prefix = html.slice(0, splitAt);
-		const suffix = html.slice(splitAt + '<!--ssr-body-->'.length);
+		const [prefix, suffix] = splitSsrTemplate(html);
 
 		// Template prefix → render stream (shell, then out-of-order segments) →
 		// template suffix. The hydration <script> is in the SUFFIX, so by the time
 		// the browser requests the entry every segment is already in the DOM.
-		const encoder = new TextEncoder();
-		const body = new ReadableStream({
-			async start(controller) {
-				controller.enqueue(encoder.encode(prefix));
-				const reader = renderStream.getReader();
-				try {
-					while (true) {
-						const { done, value } = await reader.read();
-						if (done) break;
-						controller.enqueue(value);
-					}
-					controller.enqueue(encoder.encode(suffix));
-					controller.close();
-				} catch (error) {
-					controller.error(error);
-				} finally {
-					reader.releaseLock();
-				}
-			},
-			cancel(reason) {
-				return renderStream.cancel(reason);
-			},
-		});
+		const body = composeHtmlStream(prefix, renderStream, suffix);
 
 		return new Response(body, { status, headers });
 	} catch (error) {
@@ -192,6 +190,33 @@ export async function handleRenderRoute(route, context, vite, octaneConfig) {
 	}
 }
 
+/**
+ * @param {ViteDevServer} vite
+ * @param {import('@octanejs/vite-plugin').RenderRouteEntry | undefined} entry
+ * @param {'pending' | 'catch'} kind
+ * @returns {Promise<((props?: any, scope?: any, extra?: any) => string | void) | null>}
+ */
+async function loadBoundaryComponent(vite, entry, kind) {
+	if (!entry) return null;
+	const modulePath = get_route_entry_path(entry);
+	const module = await vite.ssrLoadModule(/** @type {string} */ (modulePath));
+	const component = get_component_export(module, get_route_entry_export_name(entry));
+	if (!component) {
+		throw new Error(`No ${kind} rootBoundary component found in ${modulePath}`);
+	}
+	return /** @type {(props?: any, scope?: any, extra?: any) => string | void} */ (component);
+}
+
+/**
+ * @param {import('@octanejs/vite-plugin').RenderRouteEntry | undefined} entry
+ * @returns {{ path: string, exportName: string | null } | null}
+ */
+function serializeComponentEntry(entry) {
+	const path = get_route_entry_path(entry);
+	if (!path) return null;
+	return { path, exportName: get_route_entry_export_name(entry) ?? null };
+}
+
 /**
  * @param {ResolvedOctaneConfig | undefined} config
  * @param {RenderRoute} route

package/src/server/router.js

@@ -1,123 +1 @@
-// @ts-check
-/**
- * @typedef {import('@octanejs/vite-plugin').Route} Route
- * @typedef {import('@octanejs/vite-plugin').RenderRoute} RenderRoute
- * @typedef {import('@octanejs/vite-plugin').ServerRoute} ServerRoute
- */
-
-/**
- * @typedef {Object} RouteMatch
- * @property {Route} route
- * @property {Record<string, string>} params
- */
-
-/**
- * @typedef {Object} CompiledRoute
- * @property {Route} route
- * @property {RegExp} pattern
- * @property {string[]} paramNames
- * @property {number} specificity - Higher = more specific (static > param > catch-all)
- */
-
-/**
- * Convert a route path pattern to a RegExp
- * Supports:
- * - Static segments: /about, /api/hello
- * - Named params: /posts/:id, /users/:userId/posts/:postId
- * - Catch-all: /docs/*slug
- *
- * @param {string} path
- * @returns {{ pattern: RegExp, paramNames: string[], specificity: number }}
- */
-function compilePath(path) {
-	/** @type {string[]} */
-	const paramNames = [];
-	let specificity = 0;
-
-	// Escape special regex characters except our param syntax
-	const regexString = path
-		.split('/')
-		.map((segment) => {
-			if (!segment) return '';
-
-			// Catch-all param: *slug
-			if (segment.startsWith('*')) {
-				const paramName = segment.slice(1);
-				paramNames.push(paramName);
-				specificity += 1; // Lowest specificity
-				return '(.+)';
-			}
-
-			// Named param: :id
-			if (segment.startsWith(':')) {
-				const paramName = segment.slice(1);
-				paramNames.push(paramName);
-				specificity += 10; // Medium specificity
-				return '([^/]+)';
-			}
-
-			// Static segment
-			specificity += 100; // Highest specificity
-			return escapeRegex(segment);
-		})
-		.join('/');
-
-	const pattern = new RegExp(`^${regexString || '/'}$`);
-	return { pattern, paramNames, specificity };
-}
-
-/**
- * Escape special regex characters
- * @param {string} str
- * @returns {string}
- */
-function escapeRegex(str) {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-/**
- * Create a router from a list of routes
- * @param {Route[]} routes
- * @returns {{ match: (method: string, pathname: string) => RouteMatch | null }}
- */
-export function createRouter(routes) {
-	/** @type {CompiledRoute[]} */
-	const compiledRoutes = routes.map((route) => {
-		const { pattern, paramNames, specificity } = compilePath(route.path);
-		return { route, pattern, paramNames, specificity };
-	});
-
-	// Sort by specificity (higher first) for correct matching order
-	compiledRoutes.sort((a, b) => b.specificity - a.specificity);
-
-	return {
-		/**
-		 * Match a request to a route
-		 * @param {string} method
-		 * @param {string} pathname
-		 * @returns {RouteMatch | null}
-		 */
-		match(method, pathname) {
-			for (const { route, pattern, paramNames } of compiledRoutes) {
-				// Check method for ServerRoute
-				if (route.type === 'server') {
-					const methods = /** @type {ServerRoute} */ (route).methods;
-					if (!methods.includes(method.toUpperCase())) {
-						continue;
-					}
-				}
-
-				const match = pathname.match(pattern);
-				if (match) {
-					/** @type {Record<string, string>} */
-					const params = {};
-					for (let i = 0; i < paramNames.length; i++) {
-						params[paramNames[i]] = decodeURIComponent(match[i + 1]);
-					}
-					return { route, params };
-				}
-			}
-			return null;
-		},
-	};
-}
+export { createRouter } from '@octanejs/app-core/routes';

package/src/server/server-route.js

@@ -1,47 +1 @@
-// @ts-check
-/**
- * @typedef {import('@octanejs/vite-plugin').Context} Context
- * @typedef {import('@octanejs/vite-plugin').ServerRoute} ServerRoute
- * @typedef {import('@octanejs/vite-plugin').Middleware} Middleware
- */
-
-import { runMiddlewareChain } from './middleware.js';
-
-/**
- * Handle a ServerRoute (API endpoint)
- *
- * @param {ServerRoute} route
- * @param {Context} context
- * @param {Middleware[]} globalMiddlewares
- * @returns {Promise<Response>}
- */
-export async function handleServerRoute(route, context, globalMiddlewares) {
-	try {
-		// The handler wrapped as a function returning Promise<Response>
-		const handler = async () => {
-			return route.handler(context);
-		};
-
-		// Run the middleware chain: global → before → handler → after
-		const response = await runMiddlewareChain(
-			context,
-			globalMiddlewares,
-			route.before,
-			handler,
-			route.after,
-		);
-
-		return response;
-	} catch (error) {
-		console.error('[octane] API route error:', error);
-
-		// Return error response
-		const message = error instanceof Error ? error.message : 'Internal Server Error';
-		return new Response(JSON.stringify({ error: message }), {
-			status: 500,
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		});
-	}
-}
+export { handleServerRoute } from '@octanejs/app-core/middleware';

package/src/server/virtual-entry.js

@@ -1,184 +1 @@
-// @ts-check
-/**
- * Production server-entry generator.
- *
- * `generateServerEntry` emits the module the SSR sub-build (closeBundle in
- * src/index.js) uses as its Rollup input. The generated module statically
- * imports every RenderRoute entry/layout module (compiled in server mode by
- * the octane plugin the sub-build inherits from the app's vite.config) plus
- * octane.config.ts itself, wires them into `createHandler`, and:
- *
- *   - exports `handler`  — the Web fetch handler `(Request) => Promise<Response>`
- *   - exports `nodeHandler` — a Node `(req, res)` wrapper for serverless
- *     platforms (e.g. a Vercel Node function does
- *     `export { nodeHandler as default } from '../dist/server/entry.js'`)
- *   - auto-boots when run directly (`node dist/server/entry.js`): the
- *     adapter's `serve()` when configured, else the built-in Node server
- *     (static dist/client assets + the handler).
- *
- * It is unused in dev (dev SSR loads modules through `vite.ssrLoadModule`).
- */
-
-/** @import { Route } from '@octanejs/vite-plugin' */
-/** @import { ClientAssetEntry } from '../../types/production.d.ts' */
-
-import { get_route_entry_path } from '../routes.js';
-
-/**
- * @typedef {Object} ServerEntryOptions
- * @property {Route[]} routes - Route definitions from octane.config.ts
- * @property {string} octaneConfigPath - Absolute path to octane.config.ts
- * @property {Record<string, ClientAssetEntry>} [clientAssetMap] - Route entry path → built client asset paths
- */
-
-/**
- * @param {ServerEntryOptions} options
- * @returns {string} The generated JavaScript module source
- */
-export function generateServerEntry(options) {
-	const { routes, octaneConfigPath, clientAssetMap = {} } = options;
-
-	// Unique page-entry and layout module paths (multiple routes may share both).
-	/** @type {Map<string, string>} module path → import variable name */
-	const page_imports = new Map();
-	/** @type {Map<string, string>} */
-	const layout_imports = new Map();
-
-	for (const route of routes) {
-		if (route.type !== 'render') continue;
-		const entryPath = get_route_entry_path(route.entry);
-		if (entryPath && !page_imports.has(entryPath)) {
-			page_imports.set(entryPath, `_page_${page_imports.size}`);
-		}
-		if (typeof route.layout === 'string' && !layout_imports.has(route.layout)) {
-			layout_imports.set(route.layout, `_layout_${layout_imports.size}`);
-		}
-	}
-
-	const import_lines = [];
-	for (const [modulePath, varName] of page_imports) {
-		import_lines.push(`import * as ${varName} from ${JSON.stringify(modulePath)};`);
-	}
-	for (const [modulePath, varName] of layout_imports) {
-		import_lines.push(`import * as ${varName} from ${JSON.stringify(modulePath)};`);
-	}
-
-	// The manifest maps MODULE PATHS to module namespaces; createHandler picks
-	// the export per-route with the same `get_component_export` dev uses.
-	const component_entries = [...page_imports]
-		.map(([modulePath, varName]) => `\t${JSON.stringify(modulePath)}: ${varName},`)
-		.join('\n');
-	const layout_entries = [...layout_imports]
-		.map(([modulePath, varName]) => `\t${JSON.stringify(modulePath)}: ${varName},`)
-		.join('\n');
-
-	return `\
-// Auto-generated by @octanejs/vite-plugin — the production server entry.
-// Do not edit; regenerated on every build.
-
-import { readFileSync } from 'node:fs';
-import { createHash } from 'node:crypto';
-import { AsyncLocalStorage } from 'node:async_hooks';
-import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-
-import { renderToReadableStream, executeServerFunction } from 'octane/server';
-import { prerender } from 'octane/static';
-import { createHandler, resolveOctaneConfig } from '@octanejs/vite-plugin/production';
-import { createNodeServer, nodeRequestToWebRequest, sendWebResponse } from '@octanejs/vite-plugin/node';
-
-// The app config — bundled (the sub-build aliases '@octanejs/vite-plugin' to
-// its config-surface facade, so this does not drag the compiler in).
-import _rawOctaneConfig from ${JSON.stringify(octaneConfigPath)};
-
-${import_lines.join('\n')}
-
-const octaneConfig = resolveOctaneConfig(_rawOctaneConfig);
-
-// Platform primitives: the adapter's when configured, else Node defaults.
-// (hash mirrors the compiler's module-server hashing: sha-256 hex, 8 chars.)
-const runtime = octaneConfig.adapter?.runtime ?? {
-	hash: (str) => createHash('sha256').update(str).digest('hex').slice(0, 8),
-	createAsyncContext: () => {
-		const als = new AsyncLocalStorage();
-		return { run: (store, fn) => als.run(store, fn), getStore: () => als.getStore() };
-	},
-};
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-// The HTML template is the BUILT client index.html (hashed hydrate script and
-// asset links already in place), moved next to this entry by the build.
-const htmlTemplate = readFileSync(join(__dirname, './index.html'), 'utf-8');
-
-const components = {
-${component_entries}
-};
-
-const layouts = {
-${layout_entries}
-};
-
-const clientAssets = ${JSON.stringify(clientAssetMap, null, '\t')};
-
-export const handler = createHandler(
-	{
-		routes: octaneConfig.router.routes,
-		components,
-		layouts,
-		middlewares: octaneConfig.middlewares,
-		trustProxy: octaneConfig.server.trustProxy,
-		render: octaneConfig.server.render,
-		rootBoundary: octaneConfig.rootBoundary,
-		preHydrate: octaneConfig.router.preHydrate ?? null,
-		rpcModules: {},
-		runtime,
-		clientAssets,
-	},
-	{
-		renderToReadableStream,
-		prerender,
-		htmlTemplate,
-		executeServerFunction,
-	},
-);
-
-/**
- * Node-style (req, res) wrapper — for serverless platforms whose functions
- * speak Node HTTP (e.g. Vercel's Node runtime).
- */
-export async function nodeHandler(req, res) {
-	try {
-		const response = await handler(nodeRequestToWebRequest(req));
-		await sendWebResponse(res, response);
-	} catch (error) {
-		console.error('[@octanejs/vite-plugin] Request error:', error);
-		if (!res.headersSent) {
-			res.statusCode = 500;
-			res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-		}
-		res.end('Internal Server Error');
-	}
-}
-
-// Auto-boot when run directly (node dist/server/entry.js); stay quiet when
-// imported by a serverless wrapper.
-const isMainModule =
-	typeof process !== 'undefined' &&
-	process.argv[1] &&
-	fileURLToPath(import.meta.url) === resolve(process.argv[1]);
-
-if (isMainModule) {
-	const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
-	if (isNaN(port) || port < 1 || port > 65535) {
-		console.error('[@octanejs/vite-plugin] Invalid PORT value:', process.env.PORT);
-		process.exit(1);
-	}
-	const staticDir = join(__dirname, '../client');
-	const server = octaneConfig.adapter?.serve
-		? octaneConfig.adapter.serve(handler, { static: { dir: staticDir } })
-		: createNodeServer(handler, { staticDir });
-	server.listen(port);
-	console.log('[@octanejs/vite-plugin] Production server listening on port ' + port);
-}
-`;
-}
+export { generateServerEntry, generateServerManifestEntry } from '@octanejs/app-core/codegen';