what-core 0.12.3 → 0.13.0

package/src/form.js

@@ -1,10 +1,73 @@
 // What Framework - Form Utilities
 // Controlled inputs, validation, and form state management
 
-import { signal, computed, batch } from './reactive.js';
-import { getCurrentComponent } from './dom.js';
+import { signal, computed, batch, effect, __DEV__ } from './reactive.js';
+import { getCurrentComponent, _isEventProp } from './dom.js';
 import { h } from './h.js';
 
+// --- Registration plumbing ---
+
+// A ref can be a callback or a { current } box; both spellings are public API,
+// so anything that wants to install its OWN ref has to forward the caller's.
+function _applyRef(ref, el) {
+  if (typeof ref === 'function') ref(el);
+  else if (ref && typeof ref === 'object') ref.current = el;
+}
+
+// Run BOTH handlers when a registration and its caller want the same DOM event.
+// Registration first, caller second, so the caller's handler observes form state
+// that is already up to date (React Hook Form orders its `register(name, {
+// onChange })` option the same way).
+function _composeHandlers(registered, callerHandler) {
+  if (typeof registered !== 'function') return callerHandler;
+  if (typeof callerHandler !== 'function') return registered;
+  /** @this {any} */
+  return function composedHandler(...args) {
+    registered.apply(this, args);
+    return callerHandler.apply(this, args);
+  };
+}
+
+// Merge a register() result into caller props WITHOUT dropping the caller's
+// event handlers. The obvious `{ ...props, ...registered }` silently loses every
+// handler the two objects share, and it does not even need matching keys to do
+// it: `onChange` and `onchange` are different object keys that resolve to the
+// SAME DOM event, and setProp keys its listener bookkeeping by event name, so
+// the second one applied replaces the first. That is how <Radio onBlur> stopped
+// firing — the registration's onBlur always exists, so it always won.
+// Non-event props keep plain spread semantics (the registration wins: it is what
+// makes the input controlled).
+function _mergeRegistration(props, registered) {
+  const merged = { ...props };
+  // Event identity, not key identity: strip the `on` prefix and lowercase, so
+  // onChange/onchange collapse together while onBlurCapture (capture phase — a
+  // genuinely different listener) stays separate. When the caller wrote two keys
+  // for one event, the LAST one wins in the DOM, and it is also the one left in
+  // this map, so that is the one the registration composes with.
+  const callerKeyByEvent = new Map();
+  for (const key in merged) {
+    if (_isEventProp(key)) callerKeyByEvent.set(key.slice(2).toLowerCase(), key);
+  }
+
+  for (const key in registered) {
+    const value = registered[key];
+    if (!_isEventProp(key)) {
+      merged[key] = value;
+      continue;
+    }
+    const callerKey = callerKeyByEvent.get(key.slice(2).toLowerCase());
+    if (callerKey === undefined) {
+      merged[key] = value;
+      callerKeyByEvent.set(key.slice(2).toLowerCase(), key);
+      continue;
+    }
+    // Keep the caller's key so their props still read back the way they wrote
+    // them; the composed function underneath carries both handlers.
+    merged[callerKey] = _composeHandlers(value, merged[callerKey]);
+  }
+  return merged;
+}
+
 // --- useForm Hook ---
 // Complete form state management with validation
 
@@ -150,12 +213,77 @@ function createFormController(options = {}) {
   // Register a field — only subscribes to THIS field's signal
   function register(name, options = {}) {
     const fieldSig = getFieldSignal(name);
-    const isCheckbox = options.type === 'checkbox' || options.type === 'radio';
+    const isRadio = options.type === 'radio';
+    const isCheckbox = options.type === 'checkbox';
+    // A radio does NOT store its own checkedness: every radio in a group shares
+    // one field, and that field holds the SELECTED option's value. A declared
+    // options.value is what this particular radio contributes, so it is both
+    // what the change handler writes and what `checked` compares the field
+    // against. radioValueOf() below covers the case where it was not declared.
+    const hasRadioValue = isRadio && options.value !== undefined;
+
+    // The value THIS radio contributes to the shared field. A declared
+    // options.value wins; otherwise the element's own `value` ATTRIBUTE is the
+    // contribution, which is exactly how a plain HTML radio group works.
+    // undefined means "this radio has nothing to contribute": the DOM reports
+    // the default "on" for EVERY valueless radio, so a group of them could not
+    // represent a choice, and a `checked` binding derived from it would light up
+    // every radio in the group at once.
+    function radioValueOf(el) {
+      if (hasRadioValue) return options.value;
+      if (!el) return undefined;
+      // Only a real element can tell `value=""` apart from "no value attribute";
+      // the `value` IDL property reports "on" for the second case and cannot.
+      if (typeof el.hasAttribute === 'function') {
+        return el.hasAttribute('value') ? el.value : undefined;
+      }
+      return el.value; // synthetic target (tests, custom widgets)
+    }
+
+    // Warn-once latches: register() runs once per input, so these fire once per
+    // offending input rather than once per keystroke or click.
+    let warnedValuelessRadio = false;
+    let warnedUntypedRadio = false;
 
     const handler = (e) => {
-      const value = (e.target.type === 'checkbox' || e.target.type === 'radio')
-        ? e.target.checked
-        : e.target.value;
+      const target = e && e.target;
+      // NOT `|| {}`: a missing target used to read as `{}`, whose `.value` is
+      // undefined, so calling the handler without an event quietly OVERWROTE the
+      // field with undefined. Refuse instead — there is no value to apply.
+      if (!target) {
+        if (__DEV__) {
+          console.warn(
+            `[what] register("${name}") change handler was called without an event. ` +
+            'Pass the DOM event through (or call form.setValue() directly). Ignoring.'
+          );
+        }
+        return;
+      }
+      // options.type is the declared intent; target.type covers a bare
+      // register('x') spread straight onto a checkbox or radio input.
+      const type = options.type || target.type;
+      let value;
+      if (type === 'radio') {
+        // NOT target.checked: a radio's change event only ever fires when it
+        // becomes checked, so `true` carries no information. The field wants the
+        // value of whichever radio in the group was picked.
+        value = radioValueOf(target);
+        if (value === undefined) {
+          // Nothing identifies this radio, so any write would be a guess.
+          if (__DEV__ && !warnedValuelessRadio) {
+            warnedValuelessRadio = true;
+            console.warn(
+              `[what] register("${name}", { type: 'radio' }) cannot tell which value this radio ` +
+              'contributes: pass { value } or give the <input> a value attribute. Field left unchanged.'
+            );
+          }
+          return;
+        }
+      } else if (type === 'checkbox') {
+        value = target.checked;
+      } else {
+        value = target.value;
+      }
       setValue(name, value);
 
       if (mode === 'onChange' || (isSubmitted.peek() && reValidateMode === 'onChange')) {
@@ -176,8 +304,57 @@ function createFormController(options = {}) {
       ref: options.ref,
     };
 
-    if (isCheckbox) {
-      // Checkbox/radio: use checked prop + onchange event
+    if (isRadio) {
+      // Without a declared value this thunk must report FALSE, never `!!field`:
+      // the contribution can only come from the element, which a prop thunk does
+      // not have, and `!!field` is true for every radio in the group at once, so
+      // picking any option rendered ALL of them checked. The ref below fixes up
+      // the real DOM once it does have the element.
+      const isChecked = hasRadioValue
+        ? () => fieldSig() === options.value
+        : () => false;
+
+      if (hasRadioValue) result.value = options.value;
+      // A FUNCTION, not the getter the checkbox branch uses: every consumer
+      // spreads this object (`<Radio>` does, and so does hand-written
+      // `{...register(...)}`), and a spread RESOLVES a getter into a one-shot
+      // value that never updates again. A function prop is the framework's
+      // reactive-binding protocol — setProp() wraps it in an effect, and the SSR
+      // serializer calls it — so one thunk covers both renderers.
+      result.checked = isChecked;
+      result.onchange = handler;
+      result.ref = (el) => {
+        _applyRef(options.ref, el);
+        if (!el || typeof el !== 'object') return;
+
+        // The reactive `checked` prop above only stamps the checked CONTENT
+        // ATTRIBUTE, and the attribute stops controlling checkedness the moment
+        // the DOM sets an input's "dirty checkedness" flag, which the user's
+        // first click does permanently. From then on, re-selecting that radio
+        // through form state would set the attribute and change nothing on
+        // screen. Writing the checked PROPERTY is what a controlled radio needs
+        // (React and Solid do the same) and it also runs the DOM's radio-group
+        // invariant that unchecks the siblings.
+        // Disposal rides on the el._propEffects convention that dom.js and
+        // render.js both walk on unmount; the ':property' suffix keeps it from
+        // colliding with setProp's own effect for the `checked` attribute.
+        if (!el._propEffects) el._propEffects = {};
+        const key = 'checked:property';
+        if (el._propEffects[key]) {
+          try { el._propEffects[key](); } catch { /* already disposed */ }
+        }
+        // radioValueOf(el) is re-read on every run rather than captured, so a
+        // registration without a declared value still binds correctly once the
+        // element's own value attribute is in place, and an unidentifiable radio
+        // is simply never checked instead of being checked alongside its
+        // siblings.
+        el._propEffects[key] = effect(() => {
+          const own = radioValueOf(el);
+          el.checked = own !== undefined && fieldSig() === own;
+        });
+      };
+    } else if (isCheckbox) {
+      // Checkbox: use checked prop + onchange event
       Object.defineProperty(result, 'checked', {
         get() { return !!fieldSig(); },
         enumerable: true,
@@ -190,6 +367,35 @@ function createFormController(options = {}) {
         enumerable: true,
       });
       result.oninput = handler;
+      result.ref = (el) => {
+        _applyRef(options.ref, el);
+        // An UNTYPED registration spread onto a radio cannot be rescued, and it
+        // fails silently, so say so at mount. The `value` binding above resolves
+        // during the spread and overwrites the input's own value with the FIELD's
+        // value — and for a radio that own value IS this option's contribution to
+        // the group. It is gone for good: `value` on a radio is in the DOM's
+        // "default/on" mode, so writing the property also rewrites the value
+        // CONTENT ATTRIBUTE, which takes defaultValue and getAttribute('value')
+        // down with it. Nothing is left to recover the real value from, so the
+        // registration has to be told it is a radio up front.
+        // Checking el.type HERE, from the ref, is also what keeps the warning
+        // honest: props apply in key order, so with the spread written FIRST
+        // (`{...register('u'), type: 'radio', value: 'two'}`) this ref runs
+        // before `type` and `value` land, the literal value survives, the write
+        // is correct, and el.type is not yet 'radio' — so nothing is warned
+        // about. The warning fires exactly when our binding really did overwrite
+        // a radio's value.
+        if (__DEV__ && !warnedUntypedRadio && el && el.type === 'radio') {
+          warnedUntypedRadio = true;
+          console.warn(
+            `[what] register("${name}") was spread onto <input type="radio"> without a type. ` +
+            'Radios in a group share one field holding the SELECTED option, so the registration ' +
+            `must be told this radio's value: register("${name}", { type: 'radio', value: ... }), ` +
+            'or use <Radio name value register />. As written, the registration overwrote the ' +
+            "input's own value and the group cannot record a choice."
+          );
+        }
+      };
     }
 
     return result;
@@ -254,15 +460,22 @@ function createFormController(options = {}) {
       isSubmitted.set(true);
       submitCount.set(submitCount.peek() + 1);
 
-      const isFormValid = await validate();
-
-      if (isFormValid) {
-        await onValid(getAllValues());
-      } else if (onInvalid) {
-        onInvalid(getAllErrors(false));
+      // try/finally, because anything that throws between here and the release
+      // leaves isSubmitting stuck true forever, which in practice means a submit
+      // button disabled for the rest of the page's life. Throwers include a
+      // rejected onValid handler and a resolver that rethrows a non-validation
+      // failure (see zodResolver/yupResolver: they fail CLOSED by design).
+      try {
+        const isFormValid = await validate();
+
+        if (isFormValid) {
+          await onValid(getAllValues());
+        } else if (onInvalid) {
+          onInvalid(getAllErrors(false));
+        }
+      } finally {
+        isSubmitting.set(false);
       }
-
-      isSubmitting.set(false);
     };
   }
 
@@ -311,34 +524,94 @@ function createFormController(options = {}) {
 
 // --- Validation Resolvers ---
 
+// A resolver that cannot read its library's error shape must never answer "no
+// errors": handleSubmit() reads an empty error map as VALID and submits the
+// form, so a shape mismatch turns validation off silently. Every resolver below
+// therefore fails CLOSED — it reports errors, or it rethrows.
+
+// Zod moved the issue list between majors: v3 exposes it as BOTH `.issues` and
+// the legacy `.errors` alias, v4 dropped `.errors` and keeps only `.issues`.
+// Reading `.errors` alone collected NOTHING under Zod 4, so every invalid form
+// submitted. `.issues` is canonical in both majors, so try it first.
+function _zodIssues(err) {
+  if (!err || typeof err !== 'object') return null;
+  if (Array.isArray(err.issues)) return err.issues;
+  if (Array.isArray(err.errors)) return err.errors;
+  return null;
+}
+
+// Zod types issue paths as PropertyKey[], so a record keyed by a symbol yields a
+// symbol segment — and Array#join would throw on it (ToString of a symbol is a
+// TypeError), losing every issue in the list including the ones we could report.
+// Numbers (array indices) stringify the same in both majors.
+function _issuePath(issue) {
+  const path = issue?.path;
+  if (path == null) return '';
+  if (!Array.isArray(path)) return String(path);
+  let out = '';
+  for (let i = 0; i < path.length; i++) {
+    const segment = path[i];
+    out += (i ? '.' : '') + (typeof segment === 'symbol' ? segment.toString() : String(segment));
+  }
+  return out;
+}
+
 export function zodResolver(schema) {
   return async (values) => {
     try {
       const result = await schema.parseAsync(values);
       return { values: result, errors: {} };
     } catch (e) {
+      const issues = _zodIssues(e);
+      // Not a ZodError at all: a TypeError from a mis-built schema, a fetch that
+      // failed inside an async .refine(), a bug in zod itself. Swallowing it here
+      // reported the form as valid; rethrowing surfaces it, which is what
+      // @hookform/resolvers does for the same case.
+      if (!issues) throw e;
+
       const errors = {};
-      for (const issue of e.errors || []) {
-        const path = issue.path.join('.');
+      for (const issue of issues) {
+        const path = _issuePath(issue);
         if (!errors[path]) {
-          errors[path] = { type: issue.code, message: issue.message };
+          errors[path] = { type: issue.code ?? 'validation', message: issue.message };
         }
       }
+      // parseAsync threw, so the input is NOT valid. An empty map here (an issue
+      // list we could not interpret) would read as valid, so keep the form
+      // blocked with a root-level error instead.
+      if (Object.keys(errors).length === 0) {
+        errors[''] = { type: 'validation', message: e?.message || 'Validation failed' };
+      }
       return { values: {}, errors };
     }
   };
 }
 
+// yup reports the per-field failures on `inner` when abortEarly is false, but a
+// failure raised at the ROOT (a non-object schema, or a test that reported a
+// bare message) arrives with `inner` empty and the path/message on the error
+// itself. Anything without a yup error shape is not a validation failure.
+function _isYupValidationError(err) {
+  if (!err || typeof err !== 'object') return false;
+  return err.name === 'ValidationError' || Array.isArray(err.inner);
+}
+
 export function yupResolver(schema) {
   return async (values) => {
     try {
       const result = await schema.validate(values, { abortEarly: false });
       return { values: result, errors: {} };
     } catch (e) {
+      // Same fail-closed rule as zodResolver: a crash inside a yup test must not
+      // be reported to handleSubmit() as "this form is fine".
+      if (!_isYupValidationError(e)) throw e;
+
       const errors = {};
-      for (const err of e.inner || []) {
-        if (!errors[err.path]) {
-          errors[err.path] = { type: err.type, message: err.message };
+      const inner = Array.isArray(e.inner) && e.inner.length > 0 ? e.inner : [e];
+      for (const err of inner) {
+        const path = err.path ?? '';
+        if (!errors[path]) {
+          errors[path] = { type: err.type ?? 'validation', message: err.message };
         }
       }
       return { values: {}, errors };
@@ -531,19 +804,45 @@ export function Checkbox(props) {
 
 export function Radio(props) {
   const { register, value: radioValue, ...rest } = props;
-  const registered = register ? register(props.name) : {};
 
-  return h('input', {
+  // A radio with no `value` is a programming error, not a default. The group's
+  // field holds the SELECTED option's value, and the DOM reports the default
+  // "on" for every valueless radio, so registering one would write "on" into
+  // form state and then check every radio in the group that reads it back.
+  // Render a plain unregistered input instead: inert, but honest.
+  if (radioValue === undefined) {
+    if (__DEV__) {
+      console.warn(
+        `[what] <Radio name="${props.name}"> is missing a \`value\` prop. Radios in a group share ` +
+        "one field holding the selected option's value, so a valueless radio has nothing to " +
+        'contribute and cannot be checked. Rendering it unregistered.'
+      );
+    }
+    return h('input', { type: 'radio', ...rest });
+  }
+
+  // The registration has to carry THIS radio's value: radios in a group share
+  // one field, so the value is what the change handler writes into form state
+  // and what `checked` compares the field against. register() returns the
+  // handler under its real key (`onchange`) and `checked` as a reactive thunk —
+  // the previous version hand rolled an onChange that called
+  // `registered.onInput`, a key register() has never defined, and compared a
+  // one-shot read of the field for `checked`.
+  // rest.ref is forwarded so register() can compose it with its own ref.
+  const registered = register
+    ? register(props.name, { type: 'radio', value: radioValue, ref: rest.ref })
+    : {};
+
+  // Merged, NOT spread: `{ ...rest, ...registered }` silently dropped whatever
+  // handler the caller passed for an event the registration also handles, and
+  // the registration always carries onBlur/onFocus/onchange. onBlur is the one
+  // that hurts — it is what marks the field touched and drives mode:'onBlur'
+  // validation — and it disappeared without a trace.
+  return h('input', _mergeRegistration({
     type: 'radio',
     value: radioValue,
     ...rest,
-    checked: registered.value === radioValue,
-    onChange: (e) => {
-      if (e.target.checked && registered.onInput) {
-        registered.onInput({ target: { value: radioValue } });
-      }
-    },
-  });
+  }, registered));
 }
 
 // --- Form Error Display ---

package/src/head.js

@@ -130,7 +130,8 @@ function escapeHtml(str) {
 function escapeSelectorValue(key) {
   const s = String(key);
   if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(s);
-  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c.codePointAt(0).toString(16)} `);
+  // `c` is a single matched code unit, so codePointAt(0) is always defined.
+  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${/** @type {number} */ (c.codePointAt(0)).toString(16)} `);
 }
 
 function setHeadTag(tag, key, attrs) {

package/src/hooks.js

@@ -3,9 +3,9 @@
 // Components run ONCE. Hooks return signal accessors (functions) so the
 // fine-grained runtime handles reactive updates automatically via effects.
 
-import { signal, computed, effect, batch, untrack, createRoot, __DEV__ } from './reactive.js';
+import { signal, computed, effect, batch, untrack, __DEV__ } from './reactive.js';
 import { getCurrentComponent } from './dom.js';
-import { getServerContext } from './server-context.js';
+import { getServerContext, isServerRender } from './server-context.js';
 import { getLoaderData as _getLoaderData, getResource as _getResource } from './hydration-data.js';
 
 // --- useLoaderData ---
@@ -14,7 +14,18 @@ import { getLoaderData as _getLoaderData, getResource as _getResource } from './
 // consolidated #__what_data payload). Intentionally NOT a component-scoped hook
 // (no hook slot) so it is safe to call anywhere — components, effects, helpers.
 export function useLoaderData() {
-  if (typeof document === 'undefined') {
+  // The branch is on "is a server render in progress", NOT on "does a document
+  // exist". Those are different questions, and `typeof document === 'undefined'`
+  // answers the wrong one: jsdom and happy-dom are loaded process-wide by a huge
+  // number of test setups, and some SSR runtimes ship a DOM shim outright, so a
+  // REAL server render routinely sees a `document`. It then took the client path
+  // and returned the #__what_data payload left over from a PREVIOUS render
+  // instead of this request's loader result — the page silently served another
+  // request's data, and under concurrency, another user's.
+  //
+  // isServerRender() asks the render scope (see server-context.js), which is the
+  // same correction 0.12.0 applied to renderToString.
+  if (isServerRender()) {
     const ctx = getServerContext();
     return ctx ? ctx.loaderData : undefined;
   }
@@ -127,7 +138,7 @@ export function useEffect(fn, deps) {
       if (ctx.disposed) return;
       hook.dispose = effect(() => {
         if (hook.cleanup) {
-          try { hook.cleanup(); } catch (e) { /* cleanup error */ }
+          try { hook.cleanup(); } catch { /* cleanup error */ }
           hook.cleanup = null;
         }
         const result = fn();
@@ -163,7 +174,7 @@ export function useEffect(fn, deps) {
 
         // Run cleanup from previous execution
         if (hook.cleanup) {
-          try { hook.cleanup(); } catch (e) { /* cleanup error */ }
+          try { hook.cleanup(); } catch { /* cleanup error */ }
           hook.cleanup = null;
         }
 
@@ -184,7 +195,7 @@ export function useEffect(fn, deps) {
 // computed() auto-tracks signal dependencies.
 // Returns a computed signal function (call it to read the value).
 
-export function useMemo(fn, deps) {
+export function useMemo(fn, _deps) {
   const ctx = getCtx('useMemo');
   const { index, exists } = getHook(ctx);
 
@@ -200,7 +211,7 @@ export function useMemo(fn, deps) {
 // executes once, so the callback reference is inherently stable.
 // Simply store and return the function on first call.
 
-export function useCallback(fn, deps) {
+export function useCallback(fn, _deps) {
   const ctx = getCtx('useCallback');
   const { index, exists } = getHook(ctx);
 
@@ -284,7 +295,7 @@ export function createContext(defaultValue) {
   };
   // The context value is only published once the provider body runs, so
   // compiled children must not be built during this call. See createComponent.
-  context.Provider._deferChildren = true;
+  /** @type {any} */ (context.Provider)._deferChildren = true;
   return context;
 }
 
@@ -337,7 +348,13 @@ export function createResource(fetcher, options = {}) {
   // --- Server branch: run the fetcher, cache by key on the render context, and
   // suspend (throw the promise) so the nearest Suspense shows its fallback until
   // the data resolves. On re-render the cached value is returned synchronously.
-  if (typeof document === 'undefined') {
+  //
+  // Gated on the render scope for the same reason as useLoaderData above: under
+  // a DOM shim a server render used to fall into the CLIENT branch, which starts
+  // a browser-style fetch, returns null immediately and never suspends. The
+  // server then emitted the empty state as final HTML and renderToStringAsync
+  // had nothing pending to await, so the resolve loop exited after one pass.
+  if (isServerRender()) {
     const ctx = getServerContext();
     if (ctx) {
       const key = options.key != null ? options.key : `__r${ctx.resourceCounter++}`;
@@ -435,14 +452,7 @@ export function createResource(fetcher, options = {}) {
   return [data, { loading, error, refetch, mutate }];
 }
 
-// --- Dep comparison (kept for potential external use) ---
-
-function depsChanged(oldDeps, newDeps) {
-  if (oldDeps === undefined) return true;
-  if (!oldDeps || !newDeps) return true;
-  if (oldDeps.length !== newDeps.length) return true;
-  for (let i = 0; i < oldDeps.length; i++) {
-    if (!Object.is(oldDeps[i], newDeps[i])) return true;
-  }
-  return false;
-}
+// A local `depsChanged` lived here, commented "kept for potential external
+// use". It was never exported, so there was no external use to keep it for,
+// and nothing in this package called it. react-compat has its own copy, which
+// is the one that is actually used.

package/src/index.js

@@ -178,6 +178,7 @@ export {
 export {
   WhatError,
   ERROR_CODES,
+  getErrorDefinition,
   createWhatError,
   classifyError,
   collectError,