what-core 0.4.1 → 0.5.0

package/render.d.ts

@@ -0,0 +1,11 @@
+export {
+  template,
+  insert,
+  mapArray,
+  spread,
+  delegateEvents,
+  on,
+  classList,
+  effect,
+  untrack,
+} from './index';

package/src/a11y.js

@@ -24,6 +24,30 @@ export function useFocus() {
   };
 }
 
+// Capture/restore focus around transient UI (dialogs, popovers, drawers).
+// Parent components can call capture() before opening and restore() on close.
+export function useFocusRestore() {
+  const previousFocusRef = { current: null };
+
+  function capture(target) {
+    if (typeof document === 'undefined') return;
+    previousFocusRef.current = target || document.activeElement || null;
+  }
+
+  function restore(fallbackTarget) {
+    const target = previousFocusRef.current || fallbackTarget;
+    if (target && typeof target.focus === 'function') {
+      target.focus();
+    }
+  }
+
+  return {
+    capture,
+    restore,
+    previous: () => previousFocusRef.current,
+  };
+}
+
 // --- Focus Trap ---
 // Keep focus within a container (for modals, dialogs, etc.)
 
@@ -36,7 +60,7 @@ export function useFocusTrap(containerRef) {
     previousFocus = document.activeElement;
     const container = containerRef.current || containerRef;
 
-    if (!container) return;
+    if (!container || typeof container.querySelectorAll !== 'function') return;
 
     // Find all focusable elements
     const focusables = getFocusableElements(container);
@@ -104,14 +128,31 @@ function getFocusableElements(container) {
 
 export function FocusTrap({ children, active = true }) {
   const containerRef = { current: null };
+  const refVersion = signal(0);
   const trap = useFocusTrap(containerRef);
+  let trapCleanup = null;
+
+  const setRef = (el) => {
+    containerRef.current = el;
+    refVersion.set(v => v + 1);
+  };
 
   // Scope the effect to the component lifecycle so it disposes on unmount
   const dispose = effect(() => {
-    if (active) {
-      const cleanup = trap.activate();
+    // Re-run activation after the ref element is attached/updated.
+    refVersion();
+
+    if (trapCleanup) {
+      trapCleanup();
+      trapCleanup = null;
+      trap.deactivate();
+    }
+
+    if (active && containerRef.current) {
+      trapCleanup = trap.activate();
       return () => {
-        cleanup?.();
+        trapCleanup?.();
+        trapCleanup = null;
         trap.deactivate();
       };
     }
@@ -121,10 +162,15 @@ export function FocusTrap({ children, active = true }) {
   const ctx = getCurrentComponent?.();
   if (ctx) {
     ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
-    ctx._cleanupCallbacks.push(dispose);
+    ctx._cleanupCallbacks.push(() => {
+      dispose();
+      trapCleanup?.();
+      trapCleanup = null;
+      trap.deactivate();
+    });
   }
 
-  return h('div', { ref: containerRef }, children);
+  return h('div', { ref: setRef }, children);
 }
 
 // --- Screen Reader Announcements ---

package/src/dom.js

@@ -33,6 +33,16 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
 // Track all mounted component contexts for disposal
 const mountedComponents = new Set();
 
+function isDomNode(value) {
+  if (!value || typeof value !== 'object') return false;
+  if (typeof Node !== 'undefined' && value instanceof Node) return true;
+  return typeof value.nodeType === 'number' && typeof value.nodeName === 'string';
+}
+
+function isVNode(value) {
+  return !!value && typeof value === 'object' && (value._vnode === true || 'tag' in value);
+}
+
 // Dispose a component: run effect cleanups, hook cleanups, onCleanup callbacks
 function disposeComponent(ctx) {
   if (ctx.disposed) return;
@@ -60,12 +70,16 @@ function disposeComponent(ctx) {
   mountedComponents.delete(ctx);
 }
 
-// Dispose all components attached to a DOM subtree
-function disposeTree(node) {
+// Dispose all components and reactive effects attached to a DOM subtree
+export function disposeTree(node) {
   if (!node) return;
   if (node._componentCtx) {
     disposeComponent(node._componentCtx);
   }
+  // Dispose reactive function child effects ({() => ...} wrappers)
+  if (node._dispose) {
+    try { node._dispose(); } catch (e) { /* already disposed */ }
+  }
   if (node.childNodes) {
     for (const child of node.childNodes) {
       disposeTree(child);
@@ -90,7 +104,7 @@ export function mount(vnode, container) {
 
 // --- Create DOM from VNode ---
 
-function createDOM(vnode, parent, isSvg) {
+export function createDOM(vnode, parent, isSvg) {
   // Null/false/true → placeholder comment (preserves child indices for reconciliation)
   if (vnode == null || vnode === false || vnode === true) {
     return document.createComment('');
@@ -101,16 +115,34 @@ function createDOM(vnode, parent, isSvg) {
     return document.createTextNode(String(vnode));
   }
 
-  // Reactive function child — creates a text node that updates fine-grained
+  // DOM node passthrough (compiler-first components can return real nodes)
+  if (isDomNode(vnode)) {
+    return vnode;
+  }
+
+  // Reactive function child — creates a wrapper that updates fine-grained
+  // Handles both primitives ({() => count()}) and vnodes ({() => items().map(...)})
   if (typeof vnode === 'function') {
-    const textNode = document.createTextNode('');
-    effect(() => {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
       const val = vnode();
-      // If the function returns a vnode, we can't upgrade a text node to an element.
-      // For now, stringify the result. Component-level re-render handles complex cases.
-      textNode.textContent = (val == null || val === false || val === true) ? '' : String(val);
+      // Normalize: null/false/true → empty, primitives and vnodes → array
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper, parent?._isSvg);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
     });
-    return textNode;
+    wrapper._dispose = dispose;
+    return wrapper;
   }
 
   // Array (fragment)
@@ -123,6 +155,11 @@ function createDOM(vnode, parent, isSvg) {
     return frag;
   }
 
+  // Unknown object child fallback
+  if (!isVNode(vnode)) {
+    return document.createTextNode(String(vnode));
+  }
+
   // Component
   if (typeof vnode.tag === 'function') {
     return createComponent(vnode, parent, isSvg);
@@ -137,9 +174,16 @@ function createDOM(vnode, parent, isSvg) {
     : document.createElement(vnode.tag);
 
   applyProps(el, vnode.props, {}, svgContext);
-  for (const child of vnode.children) {
-    const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
-    if (node) el.appendChild(node);
+  const hasRawHtml = vnode.props && (
+    Object.prototype.hasOwnProperty.call(vnode.props, 'dangerouslySetInnerHTML') ||
+    Object.prototype.hasOwnProperty.call(vnode.props, 'innerHTML')
+  );
+
+  if (!hasRawHtml) {
+    for (const child of vnode.children) {
+      const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
+      if (node) el.appendChild(node);
+    }
   }
 
   // Store vnode on element for diffing
@@ -265,6 +309,7 @@ function createComponent(vnode, parent, isSvg) {
   });
 
   ctx.effects.push(dispose);
+  wrapper._vnode = vnode; // Store vnode for keyed reconciliation
   return wrapper;
 }
 
@@ -627,18 +672,41 @@ function patchNode(parent, domNode, vnode) {
     return placeholder;
   }
 
-  // Reactive function child — replace whatever's there with a reactive text node
+  // Reactive function child — replace whatever's there with a reactive wrapper
   if (typeof vnode === 'function') {
-    const textNode = document.createTextNode('');
-    effect(() => {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
       const val = vnode();
-      textNode.textContent = (val == null || val === false || val === true) ? '' : String(val);
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
     });
+    wrapper._dispose = dispose;
     if (domNode && domNode.parentNode) {
       disposeTree(domNode);
-      parent.replaceChild(textNode, domNode);
+      parent.replaceChild(wrapper, domNode);
     }
-    return textNode;
+    return wrapper;
+  }
+
+  // DOM node passthrough
+  if (isDomNode(vnode)) {
+    if (domNode === vnode) return domNode;
+    if (domNode && domNode.parentNode) {
+      disposeTree(domNode);
+      parent.replaceChild(vnode, domNode);
+    }
+    return vnode;
   }
 
   // Text
@@ -707,6 +775,19 @@ function patchNode(parent, domNode, vnode) {
     return startMarker;
   }
 
+  // Unknown object child fallback
+  if (!isVNode(vnode)) {
+    const text = String(vnode);
+    if (domNode.nodeType === 3) {
+      if (domNode.textContent !== text) domNode.textContent = text;
+      return domNode;
+    }
+    const newNode = document.createTextNode(text);
+    disposeTree(domNode);
+    parent.replaceChild(newNode, domNode);
+    return newNode;
+  }
+
   // Component
   if (typeof vnode.tag === 'function') {
     // Check if old node is a component wrapper for the same component
@@ -714,6 +795,7 @@ function patchNode(parent, domNode, vnode) {
         && domNode._componentCtx.Component === vnode.tag) {
       // Same component — update props reactively, let its effect re-render
       domNode._componentCtx._propsSignal.set({ ...vnode.props, children: vnode.children });
+      domNode._vnode = vnode; // Keep vnode current for keyed reconciliation
       return domNode;
     }
     // Different component or not a component — dispose old, create new
@@ -726,8 +808,26 @@ function patchNode(parent, domNode, vnode) {
   // Element: same tag? Patch props + children
   if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag) {
     const oldProps = domNode._vnode?.props || {};
-    applyProps(domNode, vnode.props, oldProps);
-    reconcileChildren(domNode, vnode.children);
+    const nextProps = vnode.props || {};
+    const hadRawHtml = Object.prototype.hasOwnProperty.call(oldProps, 'dangerouslySetInnerHTML')
+      || Object.prototype.hasOwnProperty.call(oldProps, 'innerHTML');
+    const hasRawHtml = Object.prototype.hasOwnProperty.call(nextProps, 'dangerouslySetInnerHTML')
+      || Object.prototype.hasOwnProperty.call(nextProps, 'innerHTML');
+
+    // If switching from normal children to raw HTML, dispose existing child effects first.
+    if (hasRawHtml && !hadRawHtml) {
+      for (const child of Array.from(domNode.childNodes)) {
+        disposeTree(child);
+      }
+    }
+
+    applyProps(domNode, nextProps, oldProps);
+
+    // Raw HTML props own the element's children. Skip vnode child reconciliation.
+    if (!hasRawHtml) {
+      reconcileChildren(domNode, vnode.children);
+    }
+
     domNode._vnode = vnode;
     return domNode;
   }
@@ -856,7 +956,17 @@ function setProp(el, key, value, isSvg) {
 
   // dangerouslySetInnerHTML
   if (key === 'dangerouslySetInnerHTML') {
-    el.innerHTML = value.__html;
+    el.innerHTML = value?.__html ?? '';
+    return;
+  }
+
+  // innerHTML convenience alias
+  if (key === 'innerHTML') {
+    if (value && typeof value === 'object' && '__html' in value) {
+      el.innerHTML = value.__html ?? '';
+    } else {
+      el.innerHTML = value ?? '';
+    }
     return;
   }
 
@@ -912,5 +1022,10 @@ function removeProp(el, key, oldValue) {
     return;
   }
 
+  if (key === 'dangerouslySetInnerHTML' || key === 'innerHTML') {
+    el.innerHTML = '';
+    return;
+  }
+
   el.removeAttribute(key);
 }

package/src/form.js

@@ -1,13 +1,29 @@
 // What Framework - Form Utilities
 // Controlled inputs, validation, and form state management
 
-import { signal, computed, batch, effect } from './reactive.js';
+import { signal, computed, batch } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 import { h } from './h.js';
 
 // --- useForm Hook ---
 // Complete form state management with validation
 
 export function useForm(options = {}) {
+  // Hook-stable behavior inside components
+  const ctx = getCurrentComponent?.();
+  if (ctx) {
+    const index = ctx.hookIndex++;
+    if (!ctx.hooks[index]) {
+      ctx.hooks[index] = createFormController(options);
+    }
+    return ctx.hooks[index];
+  }
+
+  // Standalone usage outside component scope
+  return createFormController(options);
+}
+
+function createFormController(options = {}) {
   const {
     defaultValues = {},
     mode = 'onSubmit', // 'onSubmit' | 'onChange' | 'onBlur'
@@ -19,6 +35,7 @@ export function useForm(options = {}) {
   const fieldSignals = {};
   const errorSignals = {};
   const touchedSignals = {};
+  const errorsState = signal({});
 
   function getFieldSignal(name) {
     if (!fieldSignals[name]) {
@@ -47,32 +64,55 @@ export function useForm(options = {}) {
   const isSubmitted = signal(false);
   const submitCount = signal(0);
 
-  // Helper: get all current values as a plain object
-  function getAllValues() {
+  // Helper: get all current values as a plain object.
+  // tracked=true subscribes to all known fields; tracked=false is snapshot-only.
+  function getAllValues(tracked = false) {
     const result = { ...defaultValues };
     for (const [name, sig] of Object.entries(fieldSignals)) {
-      result[name] = sig.peek();
+      result[name] = tracked ? sig() : sig.peek();
     }
     return result;
   }
 
-  // Helper: get all current errors as a plain object
-  function getAllErrors() {
-    const result = {};
-    for (const [name, sig] of Object.entries(errorSignals)) {
-      const err = sig.peek();
-      if (err) result[name] = err;
-    }
-    return result;
+  // Helper: get all current errors as a plain object.
+  // tracked=true subscribes to all known field errors; tracked=false is snapshot-only.
+  function getAllErrors(tracked = false) {
+    return tracked ? errorsState() : errorsState.peek();
+  }
+
+  function setFieldError(name, error) {
+    const nextError = error ?? null;
+    getErrorSignal(name).set(nextError);
+    errorsState.set((prev) => {
+      const prevError = prev[name];
+      if (prevError === nextError) return prev;
+      if (nextError == null) {
+        if (!Object.prototype.hasOwnProperty.call(prev, name)) return prev;
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      }
+      return { ...prev, [name]: nextError };
+    });
+  }
+
+  function replaceAllErrors(nextErrors = {}) {
+    const normalized = nextErrors || {};
+    batch(() => {
+      for (const [name, sig] of Object.entries(errorSignals)) {
+        if (!Object.prototype.hasOwnProperty.call(normalized, name)) {
+          sig.set(null);
+        }
+      }
+      for (const [name, err] of Object.entries(normalized)) {
+        getErrorSignal(name).set(err ?? null);
+      }
+      errorsState.set({ ...normalized });
+    });
   }
 
   // Computed states
-  const isValid = computed(() => {
-    for (const sig of Object.values(errorSignals)) {
-      if (sig()) return false;
-    }
-    return true;
-  });
+  const isValid = computed(() => Object.keys(getAllErrors(true)).length === 0);
 
   const dirtyFields = computed(() => {
     const dirty = {};
@@ -88,31 +128,16 @@ export function useForm(options = {}) {
   async function validate(fieldName) {
     if (!resolver) return true;
 
-    const result = await resolver(getAllValues());
+    const result = await resolver(getAllValues(false));
+    const nextErrors = result?.errors || {};
 
     if (fieldName) {
-      // Validate single field — only update that field's error signal
-      const errSig = getErrorSignal(fieldName);
-      if (result.errors[fieldName]) {
-        errSig.set(result.errors[fieldName]);
-        return false;
-      } else {
-        errSig.set(null);
-        return true;
-      }
+      const nextError = nextErrors[fieldName] ?? null;
+      setFieldError(fieldName, nextError);
+      return !nextError;
     } else {
-      // Validate all fields
-      batch(() => {
-        // Clear existing errors
-        for (const sig of Object.values(errorSignals)) {
-          sig.set(null);
-        }
-        // Set new errors
-        for (const [name, err] of Object.entries(result.errors || {})) {
-          getErrorSignal(name).set(err);
-        }
-      });
-      return Object.keys(result.errors || {}).length === 0;
+      replaceAllErrors(nextErrors);
+      return Object.keys(nextErrors).length === 0;
     }
   }
 
@@ -162,21 +187,17 @@ export function useForm(options = {}) {
 
   // Set error for a field
   function setError(name, error) {
-    getErrorSignal(name).set(error);
+    setFieldError(name, error);
   }
 
   // Clear error for a field
   function clearError(name) {
-    getErrorSignal(name).set(null);
+    setFieldError(name, null);
   }
 
   // Clear all errors
   function clearErrors() {
-    batch(() => {
-      for (const sig of Object.values(errorSignals)) {
-        sig.set(null);
-      }
-    });
+    replaceAllErrors({});
   }
 
   // Reset form
@@ -188,6 +209,7 @@ export function useForm(options = {}) {
       for (const sig of Object.values(errorSignals)) {
         sig.set(null);
       }
+      errorsState.set({});
       for (const sig of Object.values(touchedSignals)) {
         sig.set(false);
       }
@@ -210,7 +232,7 @@ export function useForm(options = {}) {
       if (isFormValid) {
         await onValid(getAllValues());
       } else if (onInvalid) {
-        onInvalid(getAllErrors());
+        onInvalid(getAllErrors(false));
       }
 
       isSubmitting.set(false);
@@ -223,7 +245,7 @@ export function useForm(options = {}) {
       return computed(() => getFieldSignal(name)());
     }
     // Watch all: return a computed that reads all field signals
-    return computed(() => getAllValues());
+    return computed(() => getAllValues(true));
   }
 
   return {
@@ -237,10 +259,11 @@ export function useForm(options = {}) {
     reset,
     watch,
     validate,
-    // Form state — uses getters for errors/touched to enable per-field granularity
+    // Form state
     formState: {
-      get values() { return getAllValues(); },
-      get errors() { return getAllErrors(); },
+      get values() { return getAllValues(true); },
+      get errors() { return getAllErrors(true); },
+      error: (name) => getErrorSignal(name)(),
       get touched() {
         const result = {};
         for (const [name, sig] of Object.entries(touchedSignals)) {
@@ -497,8 +520,16 @@ export function Radio(props) {
 
 // --- Form Error Display ---
 
-export function ErrorMessage({ name, errors, render }) {
-  const error = errors ? errors()[name] : null;
+export function ErrorMessage({ name, formState, errors, render }) {
+  const error = formState && typeof formState.error === 'function'
+    ? formState.error(name)
+    : (
+      (
+        formState?.errors != null
+          ? formState.errors
+          : (typeof errors === 'function' ? errors() : errors)
+      )?.[name] || null
+    );
   if (!error) return null;
 
   if (render) {

package/src/helpers.js

@@ -1,18 +1,7 @@
 // What Framework - Helpers & Utilities
 // Commonly needed patterns, zero overhead.
 
-import { signal, effect, computed, batch, __DEV__ } from './reactive.js';
-
-// --- show(condition, vnode) --- [DEPRECATED: use <Show> component instead]
-// Conditional rendering. More readable than ternary.
-let _showWarned = false;
-export function show(condition, vnode, fallback = null) {
-  if (!_showWarned) {
-    _showWarned = true;
-    console.warn('[what] show() is deprecated. Use the <Show> component or ternary expressions instead.');
-  }
-  return condition ? vnode : fallback;
-}
+import { signal, effect, __DEV__ } from './reactive.js';
 
 // --- each(list, fn) --- [DEPRECATED: use <For> component or .map() instead]
 // Keyed list rendering. Optimized for reconciliation.

package/src/hooks.js

@@ -20,6 +20,8 @@ function getHook(ctx) {
   return { index, exists: index < ctx.hooks.length };
 }
 
+let _useMemoNoDepsWarned = false;
+
 // --- useState ---
 // Returns [value, setter]. Setter triggers re-render of this component only.
 
@@ -97,6 +99,15 @@ export function useMemo(fn, deps) {
   const ctx = getCtx();
   const { index, exists } = getHook(ctx);
 
+  if (__DEV__ && deps === undefined && !_useMemoNoDepsWarned) {
+    _useMemoNoDepsWarned = true;
+    console.warn(
+      '[what] useMemo() called without a deps array. ' +
+      'This recomputes every render. Use useComputed() for signal-derived values, ' +
+      'or pass deps to useMemo().'
+    );
+  }
+
   if (!exists) {
     ctx.hooks[index] = { value: undefined, deps: undefined };
   }

package/src/index.js

@@ -41,7 +41,6 @@ export { Head, clearHead } from './head.js';
 
 // Utilities
 export {
-  show,
   each,
   cls,
   style,
@@ -87,6 +86,7 @@ export {
 // Accessibility utilities
 export {
   useFocus,
+  useFocusRestore,
   useFocusTrap,
   FocusTrap,
   announce,