@webjsdev/core 0.7.63 → 0.7.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.63",
+  "version": "0.7.64",
   "type": "module",
   "description": "The runtime for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Ships the html and css template tags, the WebComponent base class, signals, directives, and the isomorphic renderers.",
   "types": "./index.d.ts",

package/src/binding-prefixes.js

@@ -41,11 +41,26 @@ export function isBindingPrefix(ch) {
   return Object.prototype.hasOwnProperty.call(BINDING_PREFIXES, ch);
 }
 
+/**
+ * The HTML boolean attributes: present means on, absent means off, and the
+ * value is meant to be empty. A boolean in a PLAIN hole on one of these renders
+ * exactly like `?attr` (#1579), so `checked=${isDefault}` cannot serve the
+ * `checked="false"` that HTML reads as checked. Lowercase, from the HTML spec's
+ * attribute index.
+ */
+const BOOLEAN_ATTRIBUTES = new Set([
+  'allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls',
+  'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'inert',
+  'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate',
+  'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected',
+  'shadowrootclonable', 'shadowrootdelegatesfocus', 'shadowrootserializable',
+]);
+
 /**
  * What a PLAIN attribute hole (`name=${value}`, unquoted, the whole value)
  * writes, or `null` when the attribute is omitted. The one rule both renderers
  * follow, so the server never serves an attribute the client then removes
- * (#1573):
+ * (#1573, #1579):
  *
  *   - `null` / `undefined` omit the attribute. This is the "omit" value, so a
  *     conditional attribute is `aria-current=${active ? 'page' : null}`.
@@ -53,6 +68,9 @@ export function isBindingPrefix(ch) {
  *     `"false"`. For a tri-state ARIA attribute (`aria-expanded`,
  *     `aria-pressed`, `aria-checked`) `"false"` and absent mean different
  *     things, so the value an author passes is the value the user agent gets.
+ *   - `true` on an HTML boolean attribute (`checked`, `selected`, `disabled`,
+ *     and the rest) writes the empty value, exactly as `?attr=${true}` does. Anywhere
+ *     else it is `"true"`.
  *   - anything else is `String(value)`.
  *
  * A quoted or mixed value (`title="${x}"`, `class="a ${x}"`) is not a plain
@@ -66,5 +84,6 @@ export function isBindingPrefix(ch) {
 export function attrHoleValue(name, value) {
   if (value == null) return null;
   if (value === false) return /^aria-/i.test(name) ? 'false' : null;
+  if (value === true && BOOLEAN_ATTRIBUTES.has(String(name).toLowerCase())) return '';
   return String(value);
 }

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/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;
 }