@webjsdev/server 0.8.8 → 0.8.10

package/src/ssr.js

@@ -1,6 +1,6 @@
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { resolve } from 'node:path';
-import { renderToString, isNotFound, isRedirect, lookupModuleUrl, isLazy } from '@webjsdev/core';
+import { renderToString, isNotFound, isRedirect, lookupModuleUrl, isLazy, cspNonce } from '@webjsdev/core';
 import { importMapTag, vendorIntegrityFor, publishedBuildId } from './importmap.js';
 import { jsonForScriptTag } from './script-tag-json.js';
 import { readToken, newToken, cookieHeader } from './csrf.js';
@@ -20,7 +20,7 @@ import { transitiveDeps } from './module-graph.js';
  * @param {import('./router.js').PageRoute} route
  * @param {Record<string,string>} params
  * @param {URL} url
- * @param {{ dev: boolean, appDir: string, req?: Request, moduleGraph?: import('./module-graph.js').ModuleGraph, serverFiles?: Map<string,string> | Set<string> }} opts
+ * @param {{ dev: boolean, appDir: string, req?: Request, moduleGraph?: import('./module-graph.js').ModuleGraph, serverFiles?: Map<string,string> | Set<string>, actionData?: unknown, status?: number, pageModule?: Record<string, unknown> }} opts
  * @returns {Promise<Response>}
  */
 export async function ssrPage(route, params, url, opts) {
@@ -28,6 +28,12 @@ export async function ssrPage(route, params, url, opts) {
     params,
     searchParams: Object.fromEntries(url.searchParams.entries()),
     url: url.toString(),
+    // Populated only when this render is the re-render after a failed page
+    // `action` submission (#244). The page function and every layout receive
+    // it so they can surface field errors and repopulate inputs from the
+    // user's submitted values. Undefined on a normal GET render, so GET output
+    // is byte-identical to before this feature.
+    actionData: opts.actionData,
   };
 
   // Collect metadata across layouts (outermost first) then page.
@@ -46,7 +52,7 @@ export async function ssrPage(route, params, url, opts) {
     const have = haveHeader
       ? new Set(haveHeader.split(',').map((s) => s.trim()).filter(Boolean))
       : null;
-    const body = await renderChain(route, ctx, opts.dev, suspenseCtx, have);
+    const body = await renderChain(route, ctx, opts.dev, suspenseCtx, have, opts.pageModule);
     // Module URLs for the page + every layout in its chain. These ride
     // the importmap; the browser fetches each file as it walks the
     // import graph. Combined with the modulepreload hints below, this
@@ -102,7 +108,10 @@ export async function ssrPage(route, params, url, opts) {
       streamBody,
       closer,
       suspenseCtx,
-      200,
+      // Normally 200. After a failed page `action` submission the caller passes
+      // 422 (or another 4xx) so the re-rendered page with field errors carries
+      // the right status for both the no-JS reload and the enhanced swap (#244).
+      opts.status || 200,
       opts.req,
       url,
       metadata,
@@ -209,8 +218,12 @@ async function ssrNotFoundHtml(notFoundFile, opts) {
   });
 }
 
-async function renderChain(route, ctx, dev, suspenseCtx, have) {
-  const page = await loadModule(route.file, dev);
+async function renderChain(route, ctx, dev, suspenseCtx, have, pageModule) {
+  // Reuse a caller-supplied page module when present (the page-action
+  // re-render passes the exact module whose `action` just ran, so the
+  // failure re-render shares that single evaluation instead of re-importing
+  // and re-running the module's top-level side effects).
+  const page = pageModule || await loadModule(route.file, dev);
   if (!page.default) throw new Error(`Page ${route.file} must have a default export`);
   let tree = await page.default(ctx);
 
@@ -1254,10 +1267,17 @@ function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url,
 }
 
 /**
+ * Import a route module. In prod the URL is stable so Node's module cache
+ * serves a single evaluation; in dev a cache-bust query forces a fresh
+ * evaluation so source edits take effect (which also re-runs the module's
+ * top-level side effects, the reason pages/layouts must keep their top level
+ * side-effect-free). Exported so page-action.js loads the page module the same
+ * way the SSR re-render does.
+ *
  * @param {string} file
  * @param {boolean} dev
  */
-async function loadModule(file, dev) {
+export async function loadModule(file, dev) {
   const url = pathToFileURL(file).toString();
   const bust = dev ? `?t=${Date.now()}-${Math.random().toString(36).slice(2)}` : '';
   return import(url + bust);
@@ -1275,26 +1295,24 @@ function toUrlPath(file, appDir) {
 }
 
 /**
- * Extract a CSP nonce from the request's Content-Security-Policy header.
- * Matches `'nonce-<base64>'` in the script-src directive.
+ * The CSP nonce for the in-flight request, or undefined if none is in
+ * scope. Delegates to `cspNonce()`, which returns the per-request nonce
+ * the handler MINTED when CSP is enabled (issue #233), or, as a fallback,
+ * the nonce parsed from an inbound `Content-Security-Policy` request
+ * header (the legacy consume-only path). Using the same source as the
+ * `Content-Security-Policy` response header is what guarantees the inline
+ * boot script, the importmap, the modulepreload hints, and the header all
+ * carry the EXACT same nonce: one minted value, no drift.
  *
- * The regex matches the first `nonce-...` token anywhere in the
- * header, regardless of which directive it sits under. This is
- * intentional: in practice every reasonable CSP uses the same
- * nonce across `script-src` and `style-src` (a per-request
- * single-nonce model), and webjs only emits `<script>` /
- * `<link rel="modulepreload">` tags, so reading the first match
- * is the right behaviour. A future caller that emits styled
- * inline content under a separate style nonce would need to
- * extend this to be directive-scoped.
+ * `req` is accepted (and ignored) so existing call sites stay unchanged;
+ * the value comes from the request-scoped AsyncLocalStorage store, not
+ * the argument.
  *
- * @param {Request} req
+ * @param {Request} [_req]
  * @returns {string | undefined}
  */
-function getNonce(req) {
-  const csp = req.headers.get('content-security-policy') || '';
-  const match = /\bnonce-([A-Za-z0-9+/=]+)/.exec(csp);
-  return match ? match[1] : undefined;
+function getNonce(_req) {
+  return cspNonce() || undefined;
 }
 
 /** @param {string} s */