vike-lite 1.15.20 → 1.16.0

package/dist/__internal/client.d.mts

@@ -83,6 +83,17 @@ declare function buildInitialClientContext<T extends object>(rawContext: T | und
   isClientSide: true;
   isHydration: boolean;
 };
+/**
+ * Build the pageContext object for a completed client-side navigation. Centralized
+ * here (rather than each adapter constructing its own object literal) so the
+ * required `isClientSide`/`isHydration` flags can never be silently omitted —
+ * every adapter previously had to remember to add them by hand, and more than
+ * one forgot, silently dropping the flags from `pageContext` on every navigation.
+ */
+declare function buildNavigationPageContext<T extends object>(fields: T): T & {
+  isClientSide: true;
+  isHydration: false;
+};
 interface HydrationInitialContext {
   urlPathname?: string;
   is404?: boolean;
@@ -107,4 +118,4 @@ declare function resolveHydrationView<TComponent = unknown>(initialContext: Hydr
  */
 declare function consumeMatchingInitialContext(pathname: string): boolean;
 //#endregion
-export { PageContextJson, ViewComponents, buildInitialClientContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph };
+export { PageContextJson, ViewComponents, buildInitialClientContext, buildNavigationPageContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph };

package/dist/__internal/client.mjs

@@ -125,6 +125,20 @@ function buildInitialClientContext(rawContext, isHydration) {
 	};
 }
 /**
+* Build the pageContext object for a completed client-side navigation. Centralized
+* here (rather than each adapter constructing its own object literal) so the
+* required `isClientSide`/`isHydration` flags can never be silently omitted —
+* every adapter previously had to remember to add them by hand, and more than
+* one forgot, silently dropping the flags from `pageContext` on every navigation.
+*/
+function buildNavigationPageContext(fields) {
+	return {
+		...fields,
+		isClientSide: true,
+		isHydration: false
+	};
+}
+/**
 * Resolve the Page/Layout/Head modules to hydrate with, matching what the server
 * actually rendered into the HTML: the error route's modules when the server
 * reported a 404/500/error, otherwise the modules of the route matching the
@@ -156,4 +170,4 @@ function consumeMatchingInitialContext(pathname) {
 	return true;
 }
 //#endregion
-export { buildInitialClientContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph };
+export { buildInitialClientContext, buildNavigationPageContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph };

package/dist/__internal/server.d.mts

@@ -25,5 +25,28 @@ interface HtmlShellParams {
  * React/Vue/Solid, as it did before this was factored out.
  */
 declare function renderHtmlShell({ pageTitleTag, cssLinks, jsPreloads, headHtml, appHtml, serializedContext, entryClient, nonce, extraHeadHtml }: HtmlShellParams): string;
+interface HtmlShellStreamParams extends Omit<HtmlShellParams, 'appHtml'> {
+  /**
+   * The app markup, as a stream of `string` or `Uint8Array` chunks (whatever the
+   * UI framework's streaming renderer produces). Framework adapters build this by
+   * calling their framework's own Web Streams-based SSR API — e.g. React's
+   * `renderToReadableStream` (from `react-dom/server.edge`) or Vue's
+   * `renderToWebStream` (from `vue/server-renderer`).
+   */
+  appStream: ReadableStream<string | Uint8Array>;
+}
+/**
+ * Same document shell as {@link renderHtmlShell}, but returns a standard
+ * `ReadableStream<Uint8Array>` instead of a fully-buffered `string`: the shell's
+ * opening tags are enqueued immediately, the framework's app stream is piped
+ * through chunk by chunk as it becomes available, and the closing tags are
+ * enqueued once the app stream ends.
+ *
+ * Built entirely on the platform-native `ReadableStream`/`TextEncoder` globals
+ * (no Node-specific stream types), so the exact same code streams correctly on
+ * Node.js (18+), Deno, Bun, and Edge runtimes (Cloudflare Workers, Vercel Edge,
+ * etc.) — anywhere a `Response` with a streamed body can be returned.
+ */
+declare function renderHtmlShellStream({ appStream, ...shellParams }: HtmlShellStreamParams): ReadableStream<Uint8Array>;
 //#endregion
-export { VikeState, renderHtmlShell, setVikeState, store };
+export { VikeState, renderHtmlShell, renderHtmlShellStream, setVikeState, store };

package/dist/__internal/server.mjs

@@ -8,8 +8,23 @@ import { n as store, t as setVikeState } from "../store-BCs8gL_o.mjs";
 * React/Vue/Solid, as it did before this was factored out.
 */
 function renderHtmlShell({ pageTitleTag, cssLinks, jsPreloads, headHtml, appHtml, serializedContext, entryClient, nonce, extraHeadHtml = "" }) {
+	const { start, end } = htmlShellParts({
+		pageTitleTag,
+		cssLinks,
+		jsPreloads,
+		headHtml,
+		serializedContext,
+		entryClient,
+		nonce,
+		extraHeadHtml
+	});
+	return `${start}${appHtml}${end}`;
+}
+/** Splits the shell markup around the app content so it can be streamed. */
+function htmlShellParts({ pageTitleTag, cssLinks, jsPreloads, headHtml, serializedContext, entryClient, nonce, extraHeadHtml = "" }) {
 	const nonceAttr = nonce ? ` nonce="${nonce}"` : "";
-	return `<!DOCTYPE html>
+	return {
+		start: `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
@@ -21,10 +36,49 @@ ${headHtml}
 ${extraHeadHtml ? `${extraHeadHtml}\n` : ""}<script${nonceAttr}>window.__PAGE_CONTEXT__=${serializedContext}<\/script>
 </head>
 <body>
-<div id="root" tabindex="-1">${appHtml}</div>
+<div id="root" tabindex="-1">`,
+		end: `</div>
 <script type="module" src="${entryClient}"${nonceAttr}><\/script>
 </body>
-</html>`;
+</html>`
+	};
+}
+/**
+* Same document shell as {@link renderHtmlShell}, but returns a standard
+* `ReadableStream<Uint8Array>` instead of a fully-buffered `string`: the shell's
+* opening tags are enqueued immediately, the framework's app stream is piped
+* through chunk by chunk as it becomes available, and the closing tags are
+* enqueued once the app stream ends.
+*
+* Built entirely on the platform-native `ReadableStream`/`TextEncoder` globals
+* (no Node-specific stream types), so the exact same code streams correctly on
+* Node.js (18+), Deno, Bun, and Edge runtimes (Cloudflare Workers, Vercel Edge,
+* etc.) — anywhere a `Response` with a streamed body can be returned.
+*/
+function renderHtmlShellStream({ appStream, ...shellParams }) {
+	const { start, end } = htmlShellParts(shellParams);
+	const encoder = new TextEncoder();
+	return new ReadableStream({
+		async start(controller) {
+			controller.enqueue(encoder.encode(start));
+			const reader = appStream.getReader();
+			try {
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					controller.enqueue(typeof value === "string" ? encoder.encode(value) : value);
+				}
+			} catch (error) {
+				controller.error(error);
+				return;
+			}
+			controller.enqueue(encoder.encode(end));
+			controller.close();
+		},
+		async cancel(reason) {
+			await appStream.cancel?.(reason);
+		}
+	});
 }
 //#endregion
-export { renderHtmlShell, setVikeState, store };
+export { renderHtmlShell, renderHtmlShellStream, setVikeState, store };

package/dist/__internal/vite.d.mts

@@ -27,13 +27,21 @@ declare function createDepsConfigPlugin({ packageName, optimizeDepsInclude }: {
  *
  * This centralizes logic that is otherwise identical across every `vike-lite-*` package.
  */
-declare function createFrameworkAdapterPlugin({ packageName, hydration, wrapServerHydration }: {
+declare function createFrameworkAdapterPlugin({ packageName, hydration, wrapServerHydration, streaming }: {
   /** The framework adapter's package name, e.g. 'vike-lite-react'. */
   packageName: string;
   /** @default true */
   hydration?: boolean;
   /** @default true */
   wrapServerHydration?: boolean;
+  /**
+   * Stream the server-rendered app markup via the framework's Web Streams-based
+   * SSR API instead of buffering it into a single string. Threaded through to
+   * `onRenderHtml` the same way `hydration` is. Ignored by adapters whose
+   * `onRenderHtml` doesn't accept a `streaming` option.
+   * @default false
+   */
+  streaming?: boolean;
 }): Plugin;
 //#endregion
 export { createDepsConfigPlugin, createFrameworkAdapterPlugin };

package/dist/__internal/vite.mjs

@@ -35,7 +35,7 @@ function createDepsConfigPlugin({ packageName, optimizeDepsInclude }) {
 *
 * This centralizes logic that is otherwise identical across every `vike-lite-*` package.
 */
-function createFrameworkAdapterPlugin({ packageName, hydration = true, wrapServerHydration = true }) {
+function createFrameworkAdapterPlugin({ packageName, hydration = true, wrapServerHydration = true, streaming = false }) {
 	const virtualClientId = "virtual:vike-lite/client";
 	const virtualServerId = "virtual:vike-lite/server";
 	const resolvedVirtualClientId = "\0virtual:vike-lite/client";
@@ -49,7 +49,7 @@ function createFrameworkAdapterPlugin({ packageName, hydration = true, wrapServe
 		},
 		load(id) {
 			if (id === resolvedVirtualClientId) return `export const onRenderClient=async(options)=>(await import("${packageName}/__internal/client/onRenderClient")).onRenderClient({...options,hydration:${hydration}});`;
-			if (id === resolvedVirtualServerId) return wrapServerHydration ? `import { onRenderHtml as _onRenderHtml } from '${packageName}/__internal/server/onRenderHtml';export const onRenderHtml = (ctx) => _onRenderHtml({ ...ctx, hydration: ${hydration} });` : `export{onRenderHtml}from'${packageName}/__internal/server/onRenderHtml';`;
+			if (id === resolvedVirtualServerId) return `import { onRenderHtml as _onRenderHtml } from '${packageName}/__internal/server/onRenderHtml';export const onRenderHtml = (ctx) => _onRenderHtml({ ...ctx, ${wrapServerHydration ? `hydration:${hydration},streaming:${streaming}` : `streaming:${streaming}`} });`;
 		}
 	};
 }

package/dist/vite.mjs

@@ -377,25 +377,63 @@ function vikeLite({ pagesDir = "pages", apiPrefix = "/api", prerender = false, s
 							method: req.method,
 							headers
 						};
-						if (req.url.startsWith(apiPrefix)) {
-							server.config.logger.info(`⚡ API: ${req.method} ${req.url}`, { timestamp: true });
-							if (req.method !== "GET" && req.method !== "HEAD") {
-								requestInit.body = Readable.toWeb(req);
-								requestInit.duplex = "half";
-							}
-						} else if (req.url.endsWith(".pageContext.json")) server.config.logger.info(`🔄 SPA Navigation: ${req.url}`, { timestamp: true });
-						const response = await app.fetch(new Request(`http://${req.headers.host}${req.url}`, requestInit));
+						if (req.method !== "GET" && req.method !== "HEAD") {
+							requestInit.body = Readable.toWeb(req);
+							requestInit.duplex = "half";
+						}
+						if (req.url.startsWith(apiPrefix)) server.config.logger.info(`⚡ API: ${req.method} ${req.url}`, { timestamp: true });
+						else if (req.url.endsWith(".pageContext.json")) server.config.logger.info(`🔄 SPA Navigation: ${req.url}`, { timestamp: true });
+						const host = req.headers.host || "localhost";
+						const response = await app.fetch(new Request(`http://${host}${req.url}`, requestInit));
 						res.statusCode = response.status;
+						for (const [key, value] of response.headers) if (key.toLowerCase() !== "set-cookie") res.setHeader(key, value);
+						const cookies = response.headers.getSetCookie();
+						if (cookies.length > 0) res.setHeader("Set-Cookie", cookies);
 						if (response.headers.get("content-type")?.includes("text/html")) {
+							res.removeHeader("content-length");
 							server.config.logger.info(`📄 Page: ${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);
+							if (req.method === "HEAD" || !response.body) {
+								await response.body?.cancel();
+								return res.end();
+							}
+							if (res.destroyed || res.closed) {
+								await response.body.cancel();
+								return;
+							}
+							let headBuffered = "";
+							let headInjected = false;
+							const decoder = new TextDecoder();
+							const encoder = new TextEncoder();
+							const transform = new TransformStream({
+								async transform(chunk, controller) {
+									if (headInjected) {
+										controller.enqueue(chunk);
+										return;
+									}
+									headBuffered += decoder.decode(chunk, { stream: true });
+									if (headBuffered.includes("</head>") || headBuffered.includes("<body") || headBuffered.length > 8192) {
+										headInjected = true;
+										let html = await injectFOUCStyles(server, headBuffered);
+										html = await server.transformIndexHtml(req.url, html);
+										controller.enqueue(encoder.encode(html));
+									}
+								},
+								async flush(controller) {
+									if (!headInjected) {
+										headBuffered += decoder.decode();
+										let html = await injectFOUCStyles(server, headBuffered);
+										html = await server.transformIndexHtml(req.url, html);
+										controller.enqueue(encoder.encode(html));
+									}
+								}
+							});
+							try {
+								await pipeline(Readable.fromWeb(response.body.pipeThrough(transform)), res);
+							} catch (err) {
+								if (err.code !== "ERR_STREAM_PREMATURE_CLOSE") throw err;
+							}
 							return;
 						}
-						for (const [key, value] of response.headers) res.setHeader(key, value);
 						if (req.method === "HEAD" || !response.body) {
 							await response.body?.cancel();
 							if (!res.destroyed && !res.closed) res.end();
@@ -407,7 +445,9 @@ function vikeLite({ pagesDir = "pages", apiPrefix = "/api", prerender = false, s
 						}
 						try {
 							await pipeline(Readable.fromWeb(response.body), res);
-						} catch {}
+						} catch (err) {
+							if (err.code !== "ERR_STREAM_PREMATURE_CLOSE") throw err;
+						}
 					} catch (error) {
 						next(error);
 					}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-lite",
-  "version": "1.15.20",
+  "version": "1.16.0",
   "license": "MIT",
   "repository": {
     "type": "git",