@octanejs/vite-plugin 0.1.5 → 0.1.9

package/src/server/production.js

@@ -1,286 +1 @@
-// @ts-check
-/**
- * Production fetch-handler factory + config re-exports.
- *
- * `createHandler(manifest, deps)` is the runtime entry the generated server
- * bundle (dist/server/entry.js) calls in production. It is designed to be
- * BUNDLED: platform-agnostic (no Node imports — platform capabilities come via
- * `manifest.runtime`), and free of vite / octane-compiler imports (which is why
- * `resolveOctaneConfig` is re-exported from resolve-config.js, not
- * load-config.js).
- *
- * The render path mirrors the DEV middleware's `handleRenderRoute`
- * (server/render-route.js) byte-for-byte in everything hydration can see —
- * the same `renderToReadableStream` engine, the same `#__octane_data` payload
- * (same keys, same order), and the same template-prefix → render-stream →
- * template-suffix assembly — so `hydrateRoot()` adopts a production response
- * exactly as it adopts a dev one. Deliberate differences: the template is the
- * BUILT dist/client/index.html (hashed hydrate script already in place, so
- * nothing is injected per-request), per-route `<link rel=stylesheet/modulepreload>`
- * tags from the client manifest join the head, and render errors produce a
- * plain 500 (no dev stack page). Keep the two files in sync when the shape
- * changes.
- */
-
-import { createRouter } from './router.js';
-import { createContext, runMiddlewareChain } from './middleware.js';
-import { handleServerRoute } from './server-route.js';
-import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
-import {
-	get_component_export,
-	get_route_entry_export_name,
-	get_route_entry_path,
-} from '../routes.js';
-import {
-	patch_global_fetch,
-	build_rpc_lookup,
-	is_rpc_request,
-	handle_rpc_request,
-} from '@ripple-ts/adapter/rpc';
-
-export { resolveOctaneConfig } from '../resolve-config.js';
-
-/**
- * @typedef {import('@octanejs/vite-plugin').RenderRoute} RenderRoute
- * @typedef {import('@octanejs/vite-plugin').Middleware} Middleware
- * @typedef {import('@octanejs/vite-plugin').Context} Context
- */
-/**
-@import { ServerManifest, HandlerOptions, ClientAssetEntry } from '../../types/production.d.ts'
- */
-
-/**
- * Create the production request handler from a manifest.
- *
- * The returned function is a standard Web `fetch`-style handler:
- * `(request: Request) => Promise<Response>` — the generated server entry boots
- * it behind the adapter's `serve()` (or the built-in Node server), and
- * serverless wrappers import it directly.
- *
- * @param {ServerManifest} manifest
- * @param {HandlerOptions} deps
- * @returns {(request: Request) => Promise<Response>}
- */
-export function createHandler(manifest, deps) {
-	const { renderToReadableStream, prerender, htmlTemplate, executeServerFunction } = deps;
-	const router = createRouter(manifest.routes);
-	const globalMiddlewares = manifest.middlewares ?? [];
-	const trustProxy = manifest.trustProxy ?? false;
-	const runtime = manifest.runtime;
-
-	// RPC lookup for `module server` functions (hash → server function). Empty
-	// today — the octane compiler does not emit `module server` modules yet —
-	// but the wiring matches the dev middleware so it lights up when it does.
-	const rpcLookup =
-		manifest.rpcModules && runtime ? build_rpc_lookup(manifest.rpcModules, runtime.hash) : null;
-
-	// Request-scoped async context + same-origin fetch short-circuit: fetch()
-	// during SSR that resolves to this origin routes through the handler
-	// in-process instead of a network round-trip.
-	const asyncContext = runtime?.createAsyncContext();
-	const fetchHandle = asyncContext ? patch_global_fetch(asyncContext) : null;
-
-	const handler = async function handler(/** @type {Request} */ request) {
-		const url = new URL(request.url);
-		const method = request.method;
-
-		if (is_rpc_request(url.pathname)) {
-			if (!rpcLookup || !asyncContext) {
-				return new Response(JSON.stringify({ error: 'RPC is not configured' }), {
-					status: 404,
-					headers: { 'Content-Type': 'application/json' },
-				});
-			}
-			return handle_rpc_request(request, {
-				resolveFunction(/** @type {string} */ hash) {
-					const entry = rpcLookup.get(hash);
-					if (!entry) return null;
-					const fn = entry.serverObj[entry.funcName];
-					return typeof fn === 'function' ? fn : null;
-				},
-				executeServerFunction,
-				asyncContext,
-				trustProxy,
-			});
-		}
-
-		const match = router.match(method, url.pathname);
-		if (!match) {
-			// Static assets never reach here (the static layer — the built-in Node
-			// server, or the platform's file serving — runs first); an app with a
-			// catch-all RenderRoute matches everything else, so this is only hit
-			// when no catch-all exists.
-			return new Response('Not Found', { status: 404 });
-		}
-
-		const context = createContext(request, match.params);
-
-		try {
-			if (match.route.type === 'render') {
-				return await runMiddlewareChain(
-					context,
-					globalMiddlewares,
-					match.route.before || [],
-					async () => renderRoute(/** @type {RenderRoute} */ (match.route), context),
-					[],
-				);
-			}
-			return await handleServerRoute(match.route, context, globalMiddlewares);
-		} catch (error) {
-			console.error('[@octanejs/vite-plugin] Request error:', error);
-			return new Response('Internal Server Error', { status: 500 });
-		}
-	};
-
-	fetchHandle?.set_handler(handler);
-
-	/**
-	 * Render a RenderRoute — the production twin of dev's `handleRenderRoute`.
-	 *
-	 * @param {RenderRoute} route
-	 * @param {Context} context
-	 * @returns {Promise<Response>}
-	 */
-	async function renderRoute(route, context) {
-		const entryPath = get_route_entry_path(route.entry);
-		const exportName = get_route_entry_export_name(route.entry);
-		const PageComponent = entryPath
-			? get_component_export(manifest.components[entryPath] ?? {}, exportName)
-			: null;
-		if (!PageComponent) {
-			throw new Error(`Component not found for route ${route.path}`);
-		}
-
-		// Identical props to dev: `{ params, url }`, url origin-free so the client
-		// re-renders the exact string.
-		const requestUrl = context.url.pathname + context.url.search;
-		const pageProps = { params: context.params, url: requestUrl };
-
-		let RootComponent;
-		if (route.layout) {
-			const LayoutComponent = get_component_export(manifest.layouts[route.layout] ?? {}, undefined);
-			if (!LayoutComponent) {
-				throw new Error(`No layout component found for ${route.layout}`);
-			}
-			RootComponent = createLayoutWrapper(
-				/** @type {any} */ (LayoutComponent),
-				/** @type {any} */ (PageComponent),
-				pageProps,
-			);
-		} else {
-			RootComponent = createPropsWrapper(/** @type {any} */ (PageComponent), pageProps);
-		}
-
-		// The hydration payload — SAME keys, SAME order as dev render-route.js, so
-		// the data script is byte-identical between dev and production.
-		const routeData = JSON.stringify({
-			entry: entryPath,
-			exportName: exportName ?? null,
-			layout: route.layout ?? null,
-			routeIndex: getRenderRouteIndex(manifest.routes, route),
-			params: context.params,
-			url: requestUrl,
-			preHydrate: manifest.preHydrate ?? null,
-		});
-		const dataScript = `<script id="__octane_data" type="application/json">${escapeScript(routeData)}</script>`;
-
-		// Per-route asset hints from the client manifest: stylesheet links so
-		// page CSS applies before hydration, modulepreload so the page chunk
-		// downloads in parallel with the hydrate entry (which the template's own
-		// script tag already references).
-		/** @type {string[]} */
-		const preloadTags = [];
-		const entryAssets = entryPath ? manifest.clientAssets?.[entryPath] : undefined;
-		if (entryAssets) {
-			for (const cssFile of entryAssets.css) {
-				preloadTags.push(`<link rel="stylesheet" href="/${cssFile}">`);
-			}
-			if (entryAssets.js) {
-				preloadTags.push(`<link rel="modulepreload" href="/${entryAssets.js}">`);
-			}
-		}
-
-		const headContent = [...preloadTags, dataScript].join('\n');
-		const html = htmlTemplate.replace('<!--ssr-head-->', headContent);
-
-		const status = route.status ?? 200;
-		const headers = { 'Content-Type': 'text/html; charset=utf-8' };
-
-		const splitAt = html.indexOf('<!--ssr-body-->');
-		if (splitAt === -1) {
-			return new Response(html, { status, headers });
-		}
-		const prefix = html.slice(0, splitAt);
-		const suffix = html.slice(splitAt + '<!--ssr-body-->'.length);
-
-		if (manifest.render === 'buffered') {
-			// Await-everything fallback (`prerender` from octane/static): no
-			// streaming, one document. The deduped scoped-style tags lead the body
-			// markup inside #root — the same position they hold in the streamed
-			// shell — so hydrateRoot's leading-style skip applies unchanged.
-			const { html: body, css } = await prerender(RootComponent, undefined, {
-				onError(/** @type {unknown} */ error) {
-					console.error('[octane] SSR render error:', error);
-				},
-			});
-			return new Response(prefix + css + body + suffix, { status, headers });
-		}
-
-		// Streaming (default): shell flushes at first await, suspense segments
-		// stream out-of-order behind it — identical to dev.
-		/** @type {ReadableStream<Uint8Array>} */
-		const renderStream = await renderToReadableStream(RootComponent, undefined, {
-			onError(/** @type {unknown} */ error) {
-				console.error('[octane] SSR render error:', error);
-			},
-		});
-
-		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);
-			},
-		});
-
-		return new Response(body, { status, headers });
-	}
-
-	return handler;
-}
-
-/**
- * @param {import('@octanejs/vite-plugin').Route[]} routes
- * @param {RenderRoute} route
- * @returns {number | undefined}
- */
-function getRenderRouteIndex(routes, route) {
-	const renderRoutes = routes.filter((r) => r.type === 'render');
-	const index = renderRoutes.indexOf(route);
-	return index === -1 ? undefined : index;
-}
-
-/**
- * Escape script content to prevent XSS in the inline JSON data block.
- * @param {string} str
- * @returns {string}
- */
-function escapeScript(str) {
-	return str.replace(/</g, '\\u003c').replace(/>/g, '\\u003e');
-}
+export * from '@octanejs/app-core/production';

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';