@webjsdev/core 0.7.63 → 0.7.65

package/src/router-client/dom-differ.js

@@ -554,11 +554,15 @@ export function reconcileChildren(dst, src) {
         keyedLive.delete(k);
         continue;
       }
-      // Positional match: same tag, same index, neither has a key.
+      // Positional match: same tag, same index, neither has a key. A form
+      // control must also be the SAME control (#1581): reusing the `email`
+      // input for an incoming `name` input carries the live typed value into
+      // the wrong field, because `value` is a live attribute the diff keeps.
       const livePeer = liveChildren[i];
       if (livePeer && livePeer.nodeType === 1 &&
           !keyOf(/** @type {Element} */ (livePeer)) &&
-          /** @type {Element} */ (livePeer).tagName === /** @type {Element} */ (inc).tagName) {
+          /** @type {Element} */ (livePeer).tagName === /** @type {Element} */ (inc).tagName &&
+          sameControlIdentity(/** @type {Element} */ (livePeer), /** @type {Element} */ (inc))) {
         diffElementInPlace(/** @type {Element} */ (livePeer), /** @type {Element} */ (inc));
         finalNodes.push(livePeer);
         continue;
@@ -597,6 +601,25 @@ export function reconcileChildren(dst, src) {
   }
 }
 
+/**
+ * Whether two same-tag elements may stand for each other in a positional
+ * match. Anything but a form control always may. An `<input>`, `<select>` or
+ * `<textarea>` must agree on `name` (and an input on `type`), since the
+ * differ keeps a reused control's live value and a mismatch would move typed
+ * text into another field (#1581).
+ *
+ * @param {Element} a
+ * @param {Element} b
+ * @returns {boolean}
+ */
+function sameControlIdentity(a, b) {
+  const tag = a.localName;
+  if (tag !== 'input' && tag !== 'select' && tag !== 'textarea') return true;
+  if (a.getAttribute('name') !== b.getAttribute('name')) return false;
+  if (tag === 'input' && (a.getAttribute('type') || 'text').toLowerCase() !== (b.getAttribute('type') || 'text').toLowerCase()) return false;
+  return true;
+}
+
 /**
  * Get the diff key for an element: `data-key` if present, else `id`.
  * Returns null for elements with no stable key.

package/src/router-client/form-state.js

@@ -0,0 +1,190 @@
+/**
+ * Client router: keep what a person typed across a failed submission (#1581).
+ *
+ * A bound form that fails validation is answered with a 422 re-render, which
+ * the router applies in place. The differ keeps a control's live state only
+ * when it reuses the old node (a keyed match, or the same tag at the same
+ * index), so an error message inserted above the inputs shifts every position
+ * and the inputs come back as fresh server markup: empty, unless the page
+ * refilled each one from `actionData.values`. Pages forget a field often
+ * enough that the framework should not depend on it.
+ *
+ * So the router snapshots the submitted form's controls at submit time and,
+ * after a non-2xx response is applied, writes the typed state back into the
+ * re-rendered form. A control is restored only when its server-rendered
+ * DEFAULT (the `value` attribute, `checked`, an option's `selected`, a
+ * textarea's text) is the same as before the submission. A default that
+ * changed means the server rendered that control on purpose (refilled it,
+ * normalized it, reset it), and the server wins.
+ *
+ * Never restored: password inputs (re-entering one after a failure is the
+ * convention, and nothing the server renders can say otherwise), file inputs
+ * (a script cannot set them), hidden inputs (server-owned), and buttons. A
+ * form opts out with `data-preserve-values="false"`.
+ *
+ * @module
+ */
+
+const FORM_ACTION_FIELD = '__webjs_action';
+const SKIP_TYPES = new Set(['password', 'file', 'hidden', 'submit', 'button', 'image', 'reset']);
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   kind: 'text' | 'check' | 'select',
+ *   n: number,
+ *   value?: string,
+ *   def: string,
+ *   cur: string,
+ * }} ControlState
+ * @typedef {{ form: HTMLFormElement, key: string, ord: number, controls: ControlState[] }} FormSnapshot
+ */
+
+/**
+ * How a form is found again after a re-render: its `id`, else its bound
+ * action identity, else its `action` attribute, plus its position among the
+ * forms sharing that key.
+ *
+ * @param {Element} form
+ * @returns {string}
+ */
+function formKey(form) {
+  if (form.id) return `id:${form.id}`;
+  const field = form.querySelector(`input[name="${FORM_ACTION_FIELD}"]`);
+  if (field) return `act:${field.getAttribute('value') || ''}`;
+  return `url:${form.getAttribute('action') || ''}`;
+}
+
+/** @param {Element} form @param {string} key */
+function ordinalOf(form, key) {
+  let i = 0;
+  for (const f of document.querySelectorAll('form')) {
+    if (f === form) return i;
+    if (formKey(f) === key) i++;
+  }
+  return -1;
+}
+
+/** @param {Element} el */
+function kindOf(el) {
+  const tag = el.localName;
+  if (tag === 'textarea') return 'text';
+  if (tag === 'select') return 'select';
+  if (tag !== 'input') return null;
+  const type = (el.getAttribute('type') || 'text').toLowerCase();
+  if (SKIP_TYPES.has(type)) return null;
+  return type === 'checkbox' || type === 'radio' ? 'check' : 'text';
+}
+
+/**
+ * The controls of `form`, in document order, each with its per-name ordinal.
+ * Uses `form.elements` so a control associated by `form="id"` outside the
+ * form element is included.
+ *
+ * @param {HTMLFormElement} form
+ * @returns {Array<{ el: any, name: string, kind: 'text' | 'check' | 'select', n: number }>}
+ */
+function controlsOf(form) {
+  /** @type {Map<string, number>} */
+  const seen = new Map();
+  const out = [];
+  const list = form.elements ? [...form.elements] : [...form.querySelectorAll('input, textarea, select')];
+  for (const el of list) {
+    const name = el.getAttribute && el.getAttribute('name');
+    if (!name || name === FORM_ACTION_FIELD) continue;
+    const kind = kindOf(el);
+    if (!kind) continue;
+    // Radios and checkboxes are told apart by their value, so the ordinal
+    // counts within name + value; text controls count within the name.
+    const key = kind === 'check' ? `${name}\u0000${el.getAttribute('value') ?? 'on'}` : name;
+    const n = seen.get(key) || 0;
+    seen.set(key, n + 1);
+    out.push({ el, name, kind: /** @type any */ (kind), n });
+  }
+  return out;
+}
+
+/** @param {any} el @param {'text' | 'check' | 'select'} kind */
+function readState(el, kind) {
+  if (kind === 'check') return { def: String(!!el.defaultChecked), cur: String(!!el.checked) };
+  if (kind === 'select') {
+    const opts = [...el.options];
+    return {
+      def: JSON.stringify(opts.map((o) => o.defaultSelected)),
+      cur: JSON.stringify(opts.filter((o) => o.selected).map((o) => o.value)),
+    };
+  }
+  return { def: el.defaultValue ?? '', cur: el.value ?? '' };
+}
+
+/**
+ * Snapshot a form's controls, or null when the form opts out.
+ *
+ * @param {HTMLFormElement | null | undefined} form
+ * @returns {FormSnapshot | null}
+ */
+export function captureFormState(form) {
+  if (!form || form.getAttribute('data-preserve-values') === 'false') return null;
+  const key = formKey(form);
+  const controls = controlsOf(form).map(({ el, name, kind, n }) => ({
+    name, kind, n,
+    ...(kind === 'check' ? { value: el.getAttribute('value') ?? 'on' } : {}),
+    ...readState(el, kind),
+  }));
+  if (!controls.length) return null;
+  return { form, key, ord: ordinalOf(form, key), controls };
+}
+
+/**
+ * Find the snapshot's form in the current document.
+ *
+ * @param {FormSnapshot} snap
+ * @returns {HTMLFormElement | null}
+ */
+function findForm(snap) {
+  if (snap.form.isConnected) return snap.form;
+  let i = 0;
+  for (const f of document.querySelectorAll('form')) {
+    if (formKey(f) !== snap.key) continue;
+    if (i === snap.ord) return /** @type any */ (f);
+    i++;
+  }
+  return null;
+}
+
+/**
+ * Write the snapshot's typed state back into the re-rendered form, control by
+ * control, wherever the server left the control's default unchanged.
+ *
+ * @param {FormSnapshot | null} snap
+ * @returns {number} how many controls were restored (for tests)
+ */
+export function restoreFormState(snap) {
+  if (!snap) return 0;
+  const form = findForm(snap);
+  if (!form) return 0;
+  const byKey = new Map();
+  for (const c of controlsOf(form)) {
+    const k = c.kind === 'check'
+      ? `${c.name}\u0000${c.el.getAttribute('value') ?? 'on'}\u0000${c.n}`
+      : `${c.name}\u0000${c.n}`;
+    byKey.set(k, c);
+  }
+  let restored = 0;
+  for (const s of snap.controls) {
+    const k = s.kind === 'check' ? `${s.name}\u0000${s.value}\u0000${s.n}` : `${s.name}\u0000${s.n}`;
+    const c = byKey.get(k);
+    if (!c || c.kind !== s.kind) continue;
+    const now = readState(c.el, c.kind);
+    // The server rendered this control differently on purpose, so it wins.
+    if (now.def !== s.def) continue;
+    if (now.cur === s.cur) continue;
+    if (s.kind === 'check') c.el.checked = s.cur === 'true';
+    else if (s.kind === 'select') {
+      const want = new Set(JSON.parse(s.cur));
+      for (const o of c.el.options) o.selected = want.has(o.value);
+    } else c.el.value = s.cur;
+    restored++;
+  }
+  return restored;
+}

package/src/router-client/navigator.js

@@ -13,6 +13,7 @@ import { parseHTML } from './dom-parse.js';
 import { onClick, onPopState, onSubmit } from './events.js';
 import { fetchAndApply } from './fetch-apply.js';
 import { clearFormBusy, markFormBusy } from './frames.js';
+import { captureFormState, restoreFormState } from './form-state.js';
 import { clearPrefetchHover, clearPrefetchRefused, clearPrefetchViewTimers, onPrefetchIntent, onPrefetchOut, prefetchCache, prefetchClearAll, prefetchEvict, refreshPrefetchObservers, teardownPrefetchViewObserver } from './prefetch.js';
 // `restoreGeneration` is imported READ-ONLY: the deferred restore captures it
 // and re-compares after the frame, so it must be the live binding. Writes go
@@ -869,6 +870,10 @@ export async function performSubmission(href, method, body, frameId, form, opts)
   // (markFormBusy/clearFormBusy) keeps a superseded submit's teardown from
   // clearing the busy state a newer submit set.
   const busyForm = form ? markFormBusy(form, myToken, url.href) : null;
+  // #1581: what the person typed, taken before the request leaves, so a failed
+  // submission's in-place re-render can hand it back (see form-state.js). A
+  // safe-method submission is a search, not a write, and is left alone.
+  const typed = !isSafe ? captureFormState(form) : null;
   let outcomeOk = false;
   try {
     const outcome = await fetchAndApply(
@@ -884,6 +889,13 @@ export async function performSubmission(href, method, body, frameId, form, opts)
       { preserveScroll: !!(opts && opts.preserveScroll) },
     );
     outcomeOk = !!(outcome && outcome.ok);
+    // A non-2xx response applied in place is the failed-validation re-render.
+    // Restore after the swap COMMITS: under an async view transition the DOM
+    // changes a frame later than `fetchAndApply` returns.
+    if (typed && outcome && outcome.applied && !outcome.ok && myToken === currentNavigationToken) {
+      await _swapCommit;
+      if (myToken === currentNavigationToken) restoreFormState(typed);
+    }
     // Mutating submissions invalidate cached versions of other URLs -
     // do this *after* the response applies so the new page itself is
     // snapshotted on the next nav, not pre-emptively wiped. Clear the

package/src/router-client/snapshot-cache.js

@@ -9,7 +9,7 @@
 import { SNAPSHOT_CAP } from './constants.js';
 
 /** @typedef {{ html: string, scrollX: number, scrollY: number, scrollHeight: number }} Snapshot */
-/** @type {Map<string, Snapshot | string>} */
+/** @type {Map<string, Snapshot>} */
 export const snapshotCache = new Map();
 
 /**
@@ -59,9 +59,7 @@ export function snapshotCurrent(url) {
 }
 
 /**
- * Look up a cached snapshot by URL. Returns a normalized Snapshot or
- * null. Tolerates legacy string entries (e.g. from test fixtures that
- * `_snapshotCache.set('/x', 'snap')`).
+ * Look up a cached snapshot by URL, or null on a miss.
  *
  * @param {string} url
  * @returns {Snapshot | null}
@@ -73,14 +71,6 @@ export function snapshotGet(url) {
   // Move-to-front.
   snapshotCache.delete(key);
   snapshotCache.set(key, v);
-  // A legacy string entry carries no offsets and no height. `scrollHeight: 0`
-  // is stated rather than left undefined so the returned object satisfies the
-  // `Snapshot` typedef, and because `reserveRestoredHeight` treats a
-  // non-positive height as "nothing to reserve" and no-ops: there is no
-  // recorded height to hold, so reserving is not merely skippable, it is
-  // meaningless. Such an entry restores with no reservation, which is the
-  // pre-#1428 behaviour and correct for a snapshot that never recorded one.
-  if (typeof v === 'string') return { html: v, scrollX: 0, scrollY: 0, scrollHeight: 0 };
   return v;
 }
 

package/src/routes.d.ts

@@ -124,6 +124,8 @@ export interface PageProps<R extends string = string> {
    * Present ONLY on the re-render after a failed page `action` submission
    * (#244). `undefined` on a normal GET render. Read `actionData.fieldErrors`
    * / `actionData.values` to surface validation errors and repopulate inputs.
+   * On a failure `values` carries every submitted text field, with the action's
+   * own `values` on top (#1581).
    */
   actionData?: unknown;
 }

package/src/slot.js

@@ -74,7 +74,7 @@
  *
  * SSR. This module is import-safe in Node (DOM access is guarded on
  * `typeof HTMLSlotElement !== 'undefined'`). Server-side slot substitution
- * lives in render-server.js (injectDSD); slot.js drives the client runtime.
+ * lives in render-server/expand.js (`finishSlot`); slot.js drives the client runtime.
  */
 
 // ---------------------------------------------------------------------------

package/src/render-server/slots.js

@@ -1,213 +0,0 @@
-import { escapeAttr } from '../escape.js';
-import {
-  endOfComment, escapeRegex, findClosingTagInString, inertAt, inertRanges, isVoidElement,
-} from './html-scan.js';
-
-/**
- * SSR light-DOM slot projection: partition a component's authored children by
- * their `slot=""` attribute, then substitute each `<slot>` in the rendered
- * template with the projected children or the authored fallback.
- *
- * String-level throughout, so it depends on `html-scan.js` and nothing else in
- * this directory.
- */
-
-/**
- * Extract the `slot` attribute value from an attribute string. Returns
- * null when the attribute is absent.
- *
- * @param {string} attrsRaw
- * @returns {string | null}
- */
-function extractSlotAttr(attrsRaw) {
-  const m = /\bslot\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-  if (!m) return null;
-  const value = m[1] ?? m[2] ?? m[3] ?? '';
-  // Per shadow DOM spec, slot="" (empty) and missing slot attribute both
-  // route to the default slot. `default` is the framework's reserved alias
-  // for it (#1015: the client record normalizes it identically, so both
-  // sides agree end to end).
-  return value === '' || value === 'default' ? null : value;
-}
-
-/**
- * Partition authored inner HTML by each top-level child's `slot=""`
- * attribute. Text nodes, comment nodes, and elements without `slot=""`
- * all route to the default-slot key (null).
- *
- * Returns a Map keyed by slot name (null for default) whose values are
- * the concatenated HTML strings for that slot in source order.
- *
- * @param {string} html
- * @returns {Map<string|null, string>}
- */
-export function partitionAuthoredBySlot(html) {
-  /** @type {Map<string|null, string>} */
-  const groups = new Map();
-  let defaultBuf = '';
-  let cursor = 0;
-  while (cursor < html.length) {
-    const lt = html.indexOf('<', cursor);
-    if (lt === -1) {
-      defaultBuf += html.slice(cursor);
-      break;
-    }
-    if (lt > cursor) defaultBuf += html.slice(cursor, lt);
-    const rest = html.slice(lt);
-    if (rest.startsWith('<!--')) {
-      // Find the comment's end the same way inertRanges does, rather than with
-      // a bare `indexOf('-->')`. The two helpers both decide where a comment
-      // stops, so a bare search makes them DISAGREE on the spec short forms
-      // (`--!>`, `<!-->`, `<!--->`): this one would run past the real end and
-      // swallow the slotted children that follow, silently routing a
-      // `slot="head"` child into the default slot.
-      const commentEnd = endOfComment(html, lt);
-      if (commentEnd === -1) {
-        defaultBuf += rest;
-        cursor = html.length;
-        break;
-      }
-      defaultBuf += html.slice(lt, commentEnd);
-      cursor = commentEnd;
-      continue;
-    }
-    if (rest.startsWith('<!') || rest.startsWith('</')) {
-      const end = html.indexOf('>', lt);
-      if (end === -1) {
-        defaultBuf += rest;
-        cursor = html.length;
-        break;
-      }
-      defaultBuf += html.slice(lt, end + 1);
-      cursor = end + 1;
-      continue;
-    }
-    const tagMatch = /^<([a-zA-Z][\w-]*)((?:"[^"]*"|'[^']*'|[^>])*?)(\/?)>/.exec(rest);
-    if (!tagMatch) {
-      defaultBuf += '<';
-      cursor = lt + 1;
-      continue;
-    }
-    const [tagFull, tagName, attrsRaw, selfCloseSlash] = tagMatch;
-    const lower = tagName.toLowerCase();
-    const isSelfClose = !!selfCloseSlash || isVoidElement(lower);
-    const slotAttr = extractSlotAttr(attrsRaw);
-    let elemEnd;
-    if (isSelfClose) {
-      elemEnd = lt + tagFull.length;
-    } else {
-      const innerStart = lt + tagFull.length;
-      const closeIdx = findClosingTagInString(html, innerStart, lower);
-      if (closeIdx === -1) {
-        // Unclosed element. Take to end of html.
-        const elementHTML = html.slice(lt);
-        if (slotAttr !== null) appendStringToMap(groups, slotAttr, elementHTML);
-        else defaultBuf += elementHTML;
-        cursor = html.length;
-        continue;
-      }
-      const closeRe = new RegExp(`</${escapeRegex(lower)}\\s*>`, 'i');
-      const tail = html.slice(closeIdx);
-      const closeMatch = closeRe.exec(tail);
-      const closeLen = closeMatch ? closeMatch[0].length : `</${lower}>`.length;
-      elemEnd = closeIdx + closeLen;
-    }
-    const elementHTML = html.slice(lt, elemEnd);
-    if (slotAttr !== null) appendStringToMap(groups, slotAttr, elementHTML);
-    else defaultBuf += elementHTML;
-    cursor = elemEnd;
-  }
-  if (defaultBuf.length > 0) groups.set(null, defaultBuf);
-  return groups;
-}
-
-/** Append a string to a Map<K, string>, concatenating if the key exists. */
-function appendStringToMap(map, key, value) {
-  const existing = map.get(key);
-  if (existing !== undefined) map.set(key, existing + value);
-  else map.set(key, value);
-}
-
-/**
- * Substitute every `<slot>` tag in `rendered` with a framework-marked
- * `<slot data-webjs-light data-projection="actual|fallback">` element
- * carrying either the projected children for that slot (from
- * `partitioned`) or the slot's authored fallback content. Multiple
- * slots with the same name follow the first-wins rule per spec; later
- * same-named slots fall back regardless of available projection.
- *
- * The `ownerTag` (the tag of the component whose template rendered these
- * slots) is emitted as `data-wj-slot-owner` so the client resolves template
- * ownership on hydration the same way the client renderer stamps SLOT_OWNER,
- * which is what makes a FORWARDED slot (rendered by this component but nested
- * inside a child) route to this component and not the child (#1023).
- *
- * @param {string} rendered
- * @param {Map<string|null, string>} partitioned
- * @param {string} ownerTag
- * @returns {string}
- */
-export function substituteSlotsInRender(rendered, partitioned, ownerTag) {
-  const ownerAttr = ownerTag ? ` data-wj-slot-owner="${escapeAttr(ownerTag)}"` : '';
-  /** @type {Set<string|null>} */
-  const consumedNames = new Set();
-  let result = '';
-  let cursor = 0;
-  const slotRe = /<slot((?:"[^"]*"|'[^']*'|[^>])*?)(\/?)>/gi;
-  // A `<slot>` written inside a comment is documentation, not a slot (#1128).
-  // Substituting one is worse here than in the element walk: a commented slot
-  // has no `</slot>`, so the fallback scan below swallows the rest of the
-  // template, the component's REAL slot is never substituted, and the authored
-  // children are dropped from the page entirely.
-  const inert = inertRanges(rendered);
-  const isInert = inertAt(inert);
-  let m;
-  while ((m = slotRe.exec(rendered)) !== null) {
-    if (isInert(m.index)) continue;
-    result += rendered.slice(cursor, m.index);
-    const [fullOpen, attrsRaw, selfCloseSlash] = m;
-    const isSelfClose = !!selfCloseSlash;
-    const nameMatch = /\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-    const name = nameMatch ? (nameMatch[1] ?? nameMatch[2] ?? nameMatch[3]) : null;
-    // Strip the `name` attribute from the carried-through attribute
-    // string so we can re-add it (with escaping) on the framework slot.
-    const otherAttrs = attrsRaw.replace(/\bname\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '').trim();
-    let fallback = '';
-    let totalEnd;
-    if (isSelfClose) {
-      totalEnd = m.index + fullOpen.length;
-    } else {
-      const innerStart = m.index + fullOpen.length;
-      const closeIdx = findClosingTagInString(rendered, innerStart, 'slot', inert);
-      if (closeIdx === -1) {
-        fallback = rendered.slice(innerStart);
-        totalEnd = rendered.length;
-      } else {
-        fallback = rendered.slice(innerStart, closeIdx);
-        const closeRe = /<\/slot\s*>/i;
-        const tail = rendered.slice(closeIdx);
-        const closeMatch = closeRe.exec(tail);
-        const closeLen = closeMatch ? closeMatch[0].length : '</slot>'.length;
-        totalEnd = closeIdx + closeLen;
-      }
-    }
-    // `default` and `''` are the reserved aliases for the default slot
-    // (#1015), matching the client's keyOfName exactly: the LOOKUP key
-    // normalizes, while the emitted name attribute stays as authored so the
-    // output bytes are unchanged for every other app.
-    const slotKey = name === 'default' || name === '' ? null : name;
-    const projected = partitioned.get(slotKey);
-    const nameAttr = name !== null ? ` name="${escapeAttr(name)}"` : '';
-    const extraAttrs = otherAttrs ? ` ${otherAttrs}` : '';
-    if (projected !== undefined && !consumedNames.has(slotKey)) {
-      consumedNames.add(slotKey);
-      result += `<slot data-webjs-light data-projection="actual"${ownerAttr}${nameAttr}${extraAttrs}>${projected}</slot>`;
-    } else {
-      result += `<slot data-webjs-light data-projection="fallback"${ownerAttr}${nameAttr}${extraAttrs}>${fallback}</slot>`;
-    }
-    cursor = totalEnd;
-    slotRe.lastIndex = totalEnd;
-  }
-  result += rendered.slice(cursor);
-  return result;
-}