@webjsdev/server 0.8.91 → 0.9.0

package/src/dev-styles.js

@@ -61,17 +61,28 @@ export function preloadStyles(root, now, timeoutMs) {
     kept[key] = { el, url };
   }
   let committed = false;
-  /** @type {Array<{ key: string, old: Element, next: Element, state: string }>} */
+  /** @type {Array<{ key: string, file: string, old: Element, next: Element, state: string }>} */
   const pairs = [];
   // Drop every other copy of this sheet (the old link, a copy the head merge
-  // re-appended) so exactly the replacement is left.
+  // re-appended, the client router's temporary preload copy) so exactly the
+  // replacement is left. The router marks its copy `data-webjs-preload-style`
+  // and gives it only the fetch attributes, so it never shares the identity
+  // key. Left in place it waits for a twin link this function has just
+  // removed, and lingers until the router's timeout. So a copy goes too when
+  // it is the same file (the same URL once the dev cache-buster is ignored,
+  // so `?theme=dark` stays when `?theme=light` is rebuilt) AND has already
+  // loaded: an unloaded copy is one a navigation is still waiting on, and
+  // removing it would stall that navigation for the whole timeout.
   const settleLoaded = function (pair) {
+    if (pair.old.parentNode) pair.old.parentNode.removeChild(pair.old);
     const links = [].slice.call(scope.querySelectorAll('link[rel~="stylesheet"][href]'));
     for (const el of links) {
       if (el === pair.next) continue;
       let url;
       try { url = new URL(el.getAttribute('href'), location.href); } catch (_) { continue; }
-      if (url.origin === location.origin && identityKey(el, url) === pair.key && el.parentNode) el.parentNode.removeChild(el);
+      if (url.origin !== location.origin || !el.parentNode) continue;
+      const routerCopy = el.hasAttribute(ROUTER_PRELOAD_ATTR) && !!el.sheet && withoutBuster(url) === pair.file;
+      if (routerCopy || identityKey(el, url) === pair.key) el.parentNode.removeChild(el);
     }
   };
   const waits = [];
@@ -79,13 +90,30 @@ export function preloadStyles(root, now, timeoutMs) {
     const old = kept[key].el;
     const url = kept[key].url;
     if (!old.parentNode) continue;
+    const file = withoutBuster(url);
     url.searchParams.set('__webjs_dev', String(stamp()));
     const next = /** @type {Element} */ (old.cloneNode(false));
     next.setAttribute('href', url.pathname + url.search);
-    const pair = { key, old, next, state: 'pending' };
+    // The copy loads under a media query that matches nothing, so it never
+    // applies before its load handler has decided whether it should: the
+    // client router can switch the link off or on (#1669) while this refresh
+    // waits, so that state is read at load, not now.
+    const media = authoredMedia(old);
+    next.removeAttribute('data-wj-style-media');
+    next.setAttribute('media', 'not all');
+    const pair = { key, file, old, next, state: 'pending' };
     pairs.push(pair);
     waits.push(new Promise(function (resolve) {
       next.addEventListener('load', function () {
+        // A section sheet the router switched off is refreshed too, so going
+        // back to the section switches on the edited file, but the copy stays
+        // off until then, like the link it replaces. Media first: Firefox and
+        // WebKit give the link a new sheet object when its media changes, so
+        // disabling before would be lost.
+        const off = old.parentNode ? old.hasAttribute('data-wj-style-off') : next.hasAttribute('data-wj-style-off');
+        if (off) next.setAttribute('data-wj-style-off', ''); else next.removeAttribute('data-wj-style-off');
+        if (media) next.setAttribute('media', media); else next.removeAttribute('media');
+        if (next.sheet) next.sheet.disabled = off;
         pair.state = 'load';
         if (committed) settleLoaded(pair);
         resolve(undefined);
@@ -112,6 +140,24 @@ export function preloadStyles(root, now, timeoutMs) {
   });
 }
 
+/**
+ * The attribute the client router marks its temporary stylesheet copies with
+ * (`PRELOAD_ATTR` in core's `router-client/stylesheets.js`). Duplicated rather
+ * than imported, since this module is inlined into the reload client as source.
+ */
+const ROUTER_PRELOAD_ATTR = 'data-webjs-preload-style';
+
+/**
+ * A stylesheet URL with the dev cache-buster removed, which is what names the
+ * file: two links that differ only by `__webjs_dev` load the same rules.
+ * @param {URL} url
+ */
+function withoutBuster(url) {
+  const u = new URL(url.href);
+  u.searchParams.delete('__webjs_dev');
+  return u.pathname + u.search;
+}
+
 /**
  * A link's identity for de-duping: its path plus every attribute except `href`.
  * JSON-encoded over a sorted list so no separator can collide with an attribute
@@ -123,9 +169,21 @@ function identityKey(el, url) {
   const parts = [];
   const attrs = el.attributes;
   for (let a = 0; a < attrs.length; a++) {
-    if (attrs[a].name === 'href') continue;
-    parts.push([attrs[a].name, attrs[a].value]);
+    const name = attrs[a].name;
+    // The client router's switch-off state (#1669) is not part of which sheet
+    // a link is, and neither is a held `not all` media: the author's is.
+    if (name === 'href' || name === 'data-wj-style-off' || name === 'data-wj-style-media') continue;
+    parts.push([name, name === 'media' ? authoredMedia(el) : attrs[a].value]);
   }
   parts.sort((x, y) => (x[0] < y[0] ? -1 : x[0] > y[0] ? 1 : 0));
   return JSON.stringify([url.pathname, parts]);
 }
+
+/**
+ * The media a link applies under: the author's, also while the client router
+ * holds it under `not all` (`data-wj-style-media`, owned-styles.js).
+ * @param {Element} el
+ */
+function authoredMedia(el) {
+  return el.hasAttribute('data-wj-style-media') ? el.getAttribute('data-wj-style-media') : el.getAttribute('media');
+}

package/src/form-dispatch.js

@@ -8,6 +8,7 @@ import { lookupActionIdentity } from './form-action-identity.js';
 import { verifyOrigin } from './csrf.js';
 import { actionMethod, actionConfigFn, actionMiddleware, resolveTags, RESERVED_CONFIG } from './action-config.js';
 import { runValidate } from './actions.js';
+import { formInput } from './action-input.js';
 import { runActionChain } from './action-middleware.js';
 import { runWithActionSignal } from './action-signal.js';
 import { isStreamable } from './action-stream.js';
@@ -527,10 +528,15 @@ export async function runFormAction(route, params, url, req, ssrOpts, deps) {
     );
   }
 
-  // A form-bound action always receives the `FormData` (#1155). `validate` is
-  // the typing seam: it takes the FormData and its transform-return becomes the
-  // action's typed input, the same `runValidate` contract the RPC path uses.
-  let args = [formData];
+  // A form-bound action receives the submitted fields as ONE object that reads
+  // both ways (`action-input.js`): `input.title`, the shape the same action gets
+  // over RPC and through `route()`, and `input.get('title')`, the FormData
+  // readers. It used to receive the raw FormData, so a validator written for
+  // the RPC shape read `undefined` and answered every submission with a 422
+  // (#1664). `validate`, middleware, the action and `invalidates` all see it.
+  // The raw `formData` local keeps feeding the #1581 submitted-values path.
+  const warn = ssrOpts.dev ? (logger && logger.warn ? (m) => logger.warn(m) : (m) => console.warn(m)) : undefined;
+  let args = [formInput(formData, { warn, label: fnName })];
   const validate = actionConfigFn(mod, 'validate');
   if (typeof validate === 'function') {
     const v = runValidate(validate, args[0]);

package/src/ssr/document.js

@@ -1,4 +1,4 @@
-import { collectHoistedHeadTags, hoistHeadTags, wrapHead } from './head.js';
+import { collectHoistedHeadTags, hoistHeadTags, hoistOwnedStylesheets, stylesheetKeys, wrapHead } from './head.js';
 
 /**
  * Derive a layout's segment path from its file path. The path identifies
@@ -331,19 +331,27 @@ export function buildDocumentParts(body, wrapOpts) {
   if (shell) {
     const headInner = buildHeadInner(wrapOpts);
     const hoist = collectHoistedHeadTags(shell.userBody);
-    const composedHead = [headInner, shell.userHead.trim(), hoist.tags.join('\n')]
+    const rootHead = [headInner, shell.userHead.trim(), hoist.tags.join('\n')]
       .filter(Boolean)
       .join('\n');
+    // A nested layout's or page's leading stylesheets join the head after the
+    // root's, so the cascade reads root to leaf (#1669).
+    const owned = hoistOwnedStylesheets(hoist.body, stylesheetKeys(rootHead, wrapOpts.pageUrl), wrapOpts.pageUrl);
+    const composedHead = [rootHead, owned.tags.join('\n')].filter(Boolean).join('\n');
     const prefix =
       `<!doctype html>\n<html${shell.htmlAttrs}>\n<head${shell.headAttrs}>\n` +
       composedHead +
       `\n</head>\n<body${shell.bodyAttrs}>\n`;
-    return { prefix, streamBody: hoist.body, closer: `\n</body>\n</html>` };
+    return { prefix, streamBody: owned.body, closer: `\n</body>\n</html>` };
   }
   // No user shell: framework owns the wrapper.
   const headHtml = wrapHead(wrapOpts);
   const { head, body: bodyOut } = hoistHeadTags(headHtml, body);
-  return { prefix: head, streamBody: bodyOut, closer: `\n</body>\n</html>` };
+  const owned = hoistOwnedStylesheets(bodyOut, stylesheetKeys(head, wrapOpts.pageUrl), wrapOpts.pageUrl);
+  const prefix = owned.tags.length
+    ? head.replace('</head>', () => owned.tags.join('\n') + '\n</head>')
+    : head;
+  return { prefix, streamBody: owned.body, closer: `\n</body>\n</html>` };
 }
 
 /** Re-export for unit testing. */

package/src/ssr/head.js

@@ -305,7 +305,7 @@ export function collectHoistedHeadTags(bodyHtml) {
  * (breaks the ES-module waterfall without a bundler) and any user-declared
  * `metadata.preload` entries.
  *
- * @param {{ metadata: Record<string,any>, moduleUrls: string[], dev: boolean, streaming: boolean, preloads?: string[], lazyComponents?: Record<string, string>, nonce?: string }} opts
+ * @param {{ metadata: Record<string,any>, moduleUrls: string[], dev: boolean, streaming: boolean, preloads?: string[], lazyComponents?: Record<string, string>, nonce?: string, pageUrl?: string }} opts
  */
 /**
  * Extract leading `<script>`, `<style>`, and `<link>` tags from the body
@@ -323,13 +323,161 @@ export function hoistHeadTags(headHtml, bodyHtml) {
   // streaming path so both hoist identically. See collectHoistedHeadTags.
   const { tags: hoisted, body: remaining } = collectHoistedHeadTags(bodyHtml);
   if (!hoisted.length) return { head: headHtml, body: bodyHtml };
-  const newHead = headHtml.replace('</head>', hoisted.join('\n') + '\n</head>');
+  const newHead = headHtml.replace('</head>', () => hoisted.join('\n') + '\n</head>');
   return { head: newHead, body: remaining };
 }
 
 /** Internal helper re-exported for unit testing. */
 export const _hoistHeadTags = hoistHeadTags;
 
+/**
+ * The attribute naming the boundary a hoisted stylesheet came from (#1669).
+ * Its value is the SEGMENT of the `wj:children` range the link was rendered
+ * in: a nested layout's own markup sits inside its parent's range, and a
+ * page's inside its own boundary or its innermost layout's. The client router
+ * switches the sheet off when it swaps that range and the incoming page no
+ * longer links the same file, so a section's stylesheet leaves with the
+ * section, and switches it back on when a later page links it again.
+ */
+export const STYLE_OWNER_ATTR = 'data-wj-style-owner';
+
+const BOUNDARY_OPEN = '<!--wj:children:';
+// One token of a leading run after a boundary marker: a comment that is not a
+// client-router marker, or a `<link>` tag (quote-aware, like the root hoist).
+// Sticky, so it matches at `lastIndex` without copying the rest of the body.
+const OWNED_RUN_TOKEN_RE =
+  /\s*(<!--(?!\/?wj:)[\s\S]*?-->|<link\b(?:[^>"']|"[^"]*"|'[^']*')*>)/iy;
+const LINK_TAG_RE = /<link\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+
+// One attribute after the tag name, read in order so a quoted value is
+// consumed whole and never mistaken for another attribute.
+const ATTR_RE = /\s*([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/y;
+
+/**
+ * A tag's attributes, lowercased names to raw values (the first of a repeated
+ * name wins, as in HTML).
+ * @param {string} tag
+ * @returns {Map<string, string>}
+ */
+function tagAttrs(tag) {
+  /** @type {Map<string, string>} */
+  const out = new Map();
+  const start = /^<[a-zA-Z][^\s/>]*/.exec(tag);
+  let pos = start ? start[0].length : 0;
+  for (;;) {
+    ATTR_RE.lastIndex = pos;
+    const m = ATTR_RE.exec(tag);
+    if (!m || m[0].length === 0) break;
+    pos += m[0].length;
+    const name = m[1].toLowerCase();
+    if (!out.has(name)) out.set(name, m[2] ?? m[3] ?? m[4] ?? '');
+  }
+  return out;
+}
+
+/**
+ * The identity of a stylesheet `<link>`, or null when the tag is not an
+ * active one (`rel` naming `stylesheet` and not `alternate`, with an href).
+ * The URL the href resolves to against the page's own URL (`base`), plus the
+ * `media` it applies under, so `./a.css` and `/a.css` on one page are one
+ * sheet and a print sheet and a screen sheet of one file are two. The router
+ * keys its sheets the same way (owned-styles.js). With no base the href is
+ * used as written.
+ * @param {string} tag
+ * @param {string} [base]
+ * @returns {string | null}
+ */
+function stylesheetTagKey(tag, base) {
+  const attrs = tagAttrs(tag);
+  const rel = (attrs.get('rel') || '').toLowerCase().split(/\s+/);
+  let href = attrs.get('href');
+  if (!rel.includes('stylesheet') || rel.includes('alternate') || !href) return null;
+  if (base) { try { href = new URL(href, base).href; } catch { /* keep as written */ } }
+  const media = (attrs.get('media') || '').trim();
+  return media && media !== 'all' ? `${href} ${media}` : href;
+}
+
+/**
+ * The keys (`stylesheetTagKey`) of every stylesheet `<link>` in an HTML string.
+ * @param {string} html
+ * @param {string} [base]  The page's URL, which hrefs resolve against.
+ * @returns {Set<string>}
+ */
+export function stylesheetKeys(html, base) {
+  const out = new Set();
+  for (const m of html.matchAll(LINK_TAG_RE)) {
+    const key = stylesheetTagKey(m[0], base);
+    if (key) out.add(key);
+  }
+  return out;
+}
+
+/**
+ * Hoist the stylesheet links at the start of each nested layout's and page's
+ * output into `<head>` (#1669). The root hoist (`collectHoistedHeadTags`) only
+ * reads the leading run of the WHOLE body and stops at the first boundary
+ * marker, so a section layout's `<link rel="stylesheet">` stayed in `<body>`,
+ * where it is not reliably render-blocking (#406). This reads the leading run
+ * after EVERY `<!--wj:children:...-->` open marker instead.
+ *
+ * Only `rel="stylesheet"` links move, each tagged with `STYLE_OWNER_ATTR` set
+ * to the marker's segment. Comments and other `<link>` tags in the run stay
+ * where they are and do not end it; anything else does. A stylesheet whose
+ * href and media are already in `seen` (the head so far, or an earlier
+ * hoist) is dropped rather than hoisted twice, since one URL linked twice is
+ * two active sheets the browser matches every rule against. Every framework
+ * the WebJs router takes cues from puts a route's sheet in the head and
+ * dedupes by href. Attributes are read in order (`tagAttrs`), so a name
+ * inside another attribute's quoted value is never mistaken for one.
+ *
+ * @param {string} bodyHtml
+ * @param {Set<string>} [seen]  Keys (`stylesheetKeys`) already linked in the head (mutated).
+ * @param {string} [base]  The page's URL, which hrefs resolve against for the key.
+ * @returns {{ tags: string[], body: string }}
+ */
+export function hoistOwnedStylesheets(bodyHtml, seen = new Set(), base) {
+  if (!bodyHtml.includes(BOUNDARY_OPEN)) return { tags: [], body: bodyHtml };
+  /** @type {string[]} */
+  const tags = [];
+  let out = '';
+  let pos = 0;
+  for (;;) {
+    const open = bodyHtml.indexOf(BOUNDARY_OPEN, pos);
+    if (open < 0) break;
+    const close = bodyHtml.indexOf('-->', open);
+    if (close < 0) break;
+    const markerEnd = close + 3;
+    out += bodyHtml.slice(pos, markerEnd);
+    // The route-key is everything after the LAST ':' (the router's own split,
+    // boundaries.js), so the segment is everything before it.
+    const rest = bodyHtml.slice(open + BOUNDARY_OPEN.length, close);
+    const cut = rest.lastIndexOf(':');
+    const segment = cut > 0 ? rest.slice(0, cut) : null;
+    pos = markerEnd;
+    if (!segment) continue;
+    let m;
+    for (;;) {
+      OWNED_RUN_TOKEN_RE.lastIndex = pos;
+      m = OWNED_RUN_TOKEN_RE.exec(bodyHtml);
+      if (!m) break;
+      const token = m[1];
+      const lead = m[0].slice(0, m[0].length - token.length);
+      pos += m[0].length;
+      const key = token.startsWith('<!--') ? null : stylesheetTagKey(token, base);
+      if (!key) {
+        out += lead + token;
+        continue;
+      }
+      out += lead;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const owner = ` ${STYLE_OWNER_ATTR}="${escapeAttr(segment)}">`;
+      tags.push(token.replace(/\s*\/?>$/, () => owner));
+    }
+  }
+  return { tags, body: out + bodyHtml.slice(pos) };
+}
+
 /**
  * The initial-load Suspense resolver: swaps each streamed
  * `<template data-webjs-resolve>` into its placeholder.

package/src/ssr/render.js

@@ -1153,6 +1153,8 @@ export async function ssrPage(route, params, url, opts) {
       vendorPreloads,
       lazyComponents,
       nonce,
+      // The page's own URL, which hoisted stylesheet hrefs are keyed against.
+      pageUrl: url.href,
     };
     // buildDocumentParts picks up a user-supplied <!doctype><html>…</html>
     // shell from the body when present; otherwise auto-emits the framework

package/src/ssr/shipped-modules.js

@@ -102,6 +102,36 @@ export function assembleBootModules(files, deps) {
   return { moduleUrls, frontierLazy };
 }
 
+/**
+ * The 103 Early Hints `Link` values for the boot's modules: a plain
+ * `rel=preload; as=script; crossorigin=anonymous` per url, NEVER
+ * `rel=modulepreload`.
+ *
+ * A module hint in a 103 arrives before the document, so it is processed
+ * before the page's `<script type="importmap">` can be parsed. Firefox treats
+ * a modulepreload as the start of module loading and then refuses the import
+ * map ("Import maps are not allowed after a module load or preload has
+ * started"), so every bare `@webjsdev/core` import failed and no script ran on
+ * a Node-served page. The HTML spec gives modulepreload no early-hint
+ * behaviour at all (its "process a link header" steps do nothing), and
+ * Chromium acts only on preload and preconnect there, so the modulepreload
+ * hint was a no-op in Chromium and fatal in Firefox.
+ *
+ * A plain preload only puts the bytes in the preload cache: it creates no
+ * module script, resolves no specifier and fetches no descendants, so it
+ * cannot run ahead of the import map on any engine. `as=script` with
+ * `crossorigin=anonymous` is a CORS fetch with same-origin credentials,
+ * which is exactly the request a module script makes, so the body's
+ * `<link rel="modulepreload">` and the boot's import reuse the response
+ * instead of fetching it again.
+ *
+ * @param {string[]} urls  the hinted boot module urls (`hintedBootModules`)
+ * @returns {string[]}
+ */
+export function earlyHintLinks(urls) {
+  return urls.map((u) => `<${u}>; rel=preload; as=script; crossorigin=anonymous`);
+}
+
 /**
  * The 103 Early Hints url list for `route`: the SAME modules the boot
  * imports, through `withBasePath` then `withAssetHash`, so the hint warms

package/src/testing.d.ts

@@ -51,7 +51,7 @@ export declare function withSessionCookie(init: RequestInit | undefined, session
 export declare function submitForm(
   handle: Handle,
   path: string,
-  fields?: Record<string, string> | URLSearchParams | FormData,
+  fields?: Record<string, string | string[]> | URLSearchParams | FormData,
   opts?: {
     index?: number;
     match?: string | RegExp;

package/src/testing.js

@@ -221,7 +221,7 @@ export async function loginAndGetCookies(handle, credentials, opts = {}) {
  *
  * @param {Handle} handle
  * @param {string} path the page to render AND, by default, to submit back to
- * @param {Record<string, string> | URLSearchParams | FormData} [fields]
+ * @param {Record<string, string | string[]> | URLSearchParams | FormData} [fields]
  * @param {{
  *   index?: number,
  *   match?: string | RegExp,
@@ -299,7 +299,12 @@ export async function submitForm(handle, path, fields = {}, opts = {}) {
   const entries = fields instanceof URLSearchParams || fields instanceof FormData
     ? fields.entries()
     : Object.entries(fields);
-  for (const [k, v] of entries) body.append(k, String(v));
+  // An array value posts once per element, the way a checkbox group submits,
+  // so a test can exercise the `name[]` convention (#1664).
+  for (const [k, v] of entries) {
+    if (Array.isArray(v)) for (const item of v) body.append(k, String(item));
+    else body.append(k, String(v));
+  }
 
   const init = {
     method: 'POST',

package/webjs-config.schema.json

@@ -175,7 +175,7 @@
           "items": { "type": "string" }
         },
         "regenerate": {
-          "description": "On-request build-output regeneration (#967), DEV-ONLY. Each rule rebuilds a stale `output` before the server serves it, instead of relying on a live watcher that can die and serve stale output. The scaffold uses this to keep the static public/tailwind.css fresh (#947) with no `tailwindcss --watch`. Read by the server (readRegenerateRules in dev-regenerate.js).",
+          "description": "On-request build-output regeneration (#967). In dev, each rule rebuilds an `output` that does not match its build record (.webjs/regenerate.json, #1672) before the server serves it, and `webjs regenerate` runs the same rules from dev.before / start.before / CI, instead of relying on a live watcher that can die and serve stale output. The scaffold uses this to keep the static public/tailwind.css fresh (#947) with no `tailwindcss --watch`. Read by the server (readRegenerateRules in dev-regenerate.js).",
           "type": "array",
           "items": {
             "type": "object",
@@ -191,7 +191,7 @@
                 "type": "string"
               },
               "inputs": {
-                "description": "Source paths (files or directories) whose newest mtime is compared to `output`'s. If any is newer (or the output is missing), the command runs. For Tailwind: the @source dirs plus public/input.css.",
+                "description": "Source paths (files or directories) the output is built from. Every build records a fingerprint of the files under them (path, size, mtime) in .webjs/regenerate.json, and the command runs again when that fingerprint, the command, or the output no longer matches the record, or the output is missing (#1672). For Tailwind: the @source dirs plus public/input.css.",
                 "type": "array",
                 "items": { "type": "string" }
               }