@webjsdev/core 0.7.62 → 0.7.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.62",
+  "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

@@ -40,3 +40,50 @@ export const BINDING_PREFIXES = Object.freeze({
 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, #1579):
+ *
+ *   - `null` / `undefined` omit the attribute. This is the "omit" value, so a
+ *     conditional attribute is `aria-current=${active ? 'page' : null}`.
+ *   - `false` omits it too, EXCEPT on an `aria-*` attribute, where it writes
+ *     `"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
+ * hole: the author wrote the attribute statically, so it stays and a nullish
+ * piece reads as empty text.
+ *
+ * @param {string} name the attribute name as written
+ * @param {unknown} value the hole's value (`live()` already unwrapped)
+ * @returns {string | null}
+ */
+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/render-client/parts.js

@@ -11,6 +11,7 @@ import {
   SLOT_FALLBACK_FRAG, SLOT_STATE, SLOT_OWNER, applySlotAssignments, withRendererWrites,
 } from '../slot.js';
 import { compile, templateCache } from './template-compiler.js';
+import { attrHoleValue } from '../binding-prefixes.js';
 
 /**
  * The container the in-progress `render()` is committing into, or null
@@ -203,7 +204,10 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
       applyChild(part, value, reconcileFormActionsCb);
       break;
     case 'attr': {
-      if (value == null || value === false) part.el.removeAttribute(part.name);
+      // #1573: the shared rule, so this agrees with SSR. `null` / `undefined`
+      // remove, `false` removes except on aria-*, where it writes "false".
+      const written = attrHoleValue(part.name, value);
+      if (written === null) part.el.removeAttribute(part.name);
       else if (isBoundFormAction(value, part.name, part.el.localName)) {
         // #1155: the ONE supported form-action binding, applied to the live
         // form exactly as SSR wrote it. A component that ships re-renders its
@@ -220,7 +224,7 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
         // (mirrors the SSR guard, so a client re-render cannot write a
         // server action's source into the live DOM).
         assertNotFunctionActionAttr(value, part.name, part.el.localName);
-        part.el.setAttribute(part.name, String(value));
+        part.el.setAttribute(part.name, written);
       }
       break;
     }

package/src/render-client/reconciler.js

@@ -7,6 +7,7 @@ import {
   assertIdentifiableAction, FORM_ACTION_FIELD,
 } from '../form-action.js';
 import { isLive } from '../directives.js';
+import { attrHoleValue } from '../binding-prefixes.js';
 import { RENDERING, SLOT_OWNER, SLOT_STATE, drainRendererBackstop, rescueAssignedNodes } from '../slot.js';
 import { compile, submitterActionBindings, INSTANCE } from './template-compiler.js';
 import {
@@ -132,13 +133,17 @@ function reconcileFormActions(formActions, bound, values) {
           rec,
         );
       } else {
-        // What SSR would have emitted for this pass. An attribute hole always
-        // emits (even `name=${null}`, as `name=""`); a boolean hole emits only
-        // when truthy. Both identity channels ask the same question, through
-        // one predicate, so they cannot drift apart again.
+        // What SSR would have emitted for this pass. A plain attribute hole
+        // emits unless `attrHoleValue` omits it (`null` / `undefined` /
+        // `false`, since `name` and `value` are not aria-*, #1573), a mixed
+        // one always emits, and a boolean hole emits only when truthy. Both
+        // identity channels ask the same question, through one predicate, so
+        // they cannot drift apart again.
         const emits = (parts) => parts.some((np) => (np.kind === 'bool'
           ? !!resolveHoleValue(values[np.i])
-          : true));
+          : np.kind === 'attr'
+            ? attrHoleValue('name', resolveHoleValue(values[np.i])) !== null
+            : true));
         reconcileSubmitterAction(
           /** @type any */ (part.el), val, rec,
           emits(rec.nameParts), emits(rec.valueParts),
@@ -267,8 +272,10 @@ function effectiveFormAttr(attrParts, staticValue, values) {
   for (const p of attrParts) {
     if (p.kind === 'bool') return resolveHoleValue(values[p.i]) ? '' : ABSENT;
     if (p.kind === 'attr') {
-      const v = resolveHoleValue(values[p.i]);
-      return v == null ? '' : String(v);
+      // #1573: an omitted plain hole is ABSENT, exactly as SSR emits it, so
+      // `method=${null}` leaves the framework to supply `method="post"`.
+      const w = attrHoleValue('method', resolveHoleValue(values[p.i]));
+      return w === null ? ABSENT : w;
     }
     // A mixed attribute is the concatenation of its static pieces and EVERY one
     // of its holes, so the anchor's own value is only part of the answer.

package/src/render-client/template-compiler.js

@@ -440,9 +440,9 @@ function buildFormActionRecord(el, onEl, parts) {
   /** Prop bindings that cannot converge with SSR; refused when actually bound. */
   const propAttrs = [];
   // `name` holes on a submitter, recorded WITH their kind. Whether one occupies
-  // the identity's channel is not a property of the hole alone: SSR emits
-  // `name=""` for an attribute hole whatever it resolved to, but emits nothing
-  // at all for a FALSY boolean hole and nothing for an `@name` listener. Asking
+  // the identity's channel is not a property of the hole alone: SSR omits an
+  // attribute hole that resolved to `null` / `undefined` / `false` (#1573),
+  // emits nothing for a FALSY boolean hole, and nothing for an `@name` listener. Asking
   // only "is there a part called name" therefore refused templates SSR renders
   // happily, which is the render-on-the-server-throw-on-hydration direction.
   // The kinds travel with the record and `reconcileFormActions` resolves them.

package/src/render-server/template-renderer.js

@@ -1,5 +1,5 @@
 import { html, isTemplate } from '../html.js';
-import { BINDING_PREFIXES } from '../binding-prefixes.js';
+import { BINDING_PREFIXES, attrHoleValue } from '../binding-prefixes.js';
 import { escapeText, escapeAttr } from '../escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
@@ -542,7 +542,12 @@ export async function renderTemplate(tr, ctx) {
           // #1154: never stringify a function into action=/formaction= (it
           // would serialize a server action's source into the served HTML).
           assertNotFunctionActionAttr(val, attrName, currentTag);
-          out += `"${escapeAttr(String(val ?? ''))}"`;
+          // #1573: the client's rule, not a stringify. `null` / `undefined`
+          // (and `false` off an aria-* name) omit the attribute, which is
+          // already in `out` from `attrStart`, so slice it back off.
+          const written = attrHoleValue(attrName, val);
+          if (written === null) out = out.slice(0, attrStart);
+          else out += `"${escapeAttr(written)}"`;
           state = 'in-tag';
           attrName = '';
         }
@@ -922,7 +927,10 @@ export async function streamTemplate(tr, ctx, controller) {
           // `renderToStream(v, { ssr: false })`, which no page render uses, so
           // this covers the public API surface rather than a page leak.
           assertNotFunctionActionAttr(val, attrName, currentTag);
-          buf += `"${escapeAttr(String(val ?? ''))}"`;
+          // #1573: the same omission rule as the buffered renderer above.
+          const written = attrHoleValue(attrName, val);
+          if (written === null) buf = buf.slice(0, attrStart);
+          else buf += `"${escapeAttr(written)}"`;
           state = 'in-tag';
           attrName = '';
         }

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