what-core 0.2.0 → 0.4.0

package/dist/a11y.js

@@ -3,6 +3,7 @@
 
 import { signal, effect } from './reactive.js';
 import { h } from './h.js';
+import { getCurrentComponent } from './dom.js';
 
 // --- Focus Management ---
 
@@ -105,7 +106,8 @@ export function FocusTrap({ children, active = true }) {
   const containerRef = { current: null };
   const trap = useFocusTrap(containerRef);
 
-  effect(() => {
+  // Scope the effect to the component lifecycle so it disposes on unmount
+  const dispose = effect(() => {
     if (active) {
       const cleanup = trap.activate();
       return () => {
@@ -115,6 +117,13 @@ export function FocusTrap({ children, active = true }) {
     }
   });
 
+  // Register cleanup on component context
+  const ctx = getCurrentComponent?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(dispose);
+  }
+
   return h('div', { ref: containerRef }, children);
 }
 
@@ -269,20 +278,26 @@ export function useAriaChecked(initialChecked = false) {
 // --- Roving Tab Index ---
 // For keyboard navigation in lists, toolbars, etc.
 
-export function useRovingTabIndex(itemCount) {
+export function useRovingTabIndex(itemCountOrSignal) {
+  // Accept either a static number or a signal/getter for dynamic lists
+  const getCount = typeof itemCountOrSignal === 'function'
+    ? itemCountOrSignal
+    : () => itemCountOrSignal;
   const focusIndex = signal(0);
 
   function handleKeyDown(e) {
+    const count = getCount();
+    if (count <= 0) return;
     switch (e.key) {
       case 'ArrowDown':
       case 'ArrowRight':
         e.preventDefault();
-        focusIndex.set((focusIndex.peek() + 1) % itemCount);
+        focusIndex.set((focusIndex.peek() + 1) % count);
         break;
       case 'ArrowUp':
       case 'ArrowLeft':
         e.preventDefault();
-        focusIndex.set((focusIndex.peek() - 1 + itemCount) % itemCount);
+        focusIndex.set((focusIndex.peek() - 1 + count) % count);
         break;
       case 'Home':
         e.preventDefault();
@@ -290,7 +305,7 @@ export function useRovingTabIndex(itemCount) {
         break;
       case 'End':
         e.preventDefault();
-        focusIndex.set(itemCount - 1);
+        focusIndex.set(count - 1);
         break;
     }
   }
@@ -343,8 +358,8 @@ export function LiveRegion({ children, priority = 'polite', atomic = true }) {
 let idCounter = 0;
 
 export function useId(prefix = 'what') {
-  const id = signal(`${prefix}-${++idCounter}`);
-  return () => id();
+  const id = `${prefix}-${++idCounter}`;
+  return () => id;
 }
 
 export function useIds(count, prefix = 'what') {

package/dist/animation.js

@@ -2,8 +2,17 @@
 // Springs, tweens, gestures, and transition helpers
 
 import { signal, effect, untrack, batch } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 import { scheduleRead, scheduleWrite } from './scheduler.js';
 
+// Create an effect scoped to the current component's lifecycle
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- Spring Animation ---
 // Physics-based animation with natural feel
 
@@ -93,6 +102,13 @@ export function spring(initialValue, options = {}) {
     });
   }
 
+  // Register stop() as cleanup if inside a component
+  const ctx = getCurrentComponent?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(stop);
+  }
+
   return {
     current: () => current(),
     target: () => target(),
@@ -234,6 +250,7 @@ export function useGesture(element, handlers = {}) {
     onSwipe,
     onTap,
     onLongPress,
+    preventDefault = false, // Set to true to allow e.preventDefault() in touch handlers
   } = handlers;
 
   const state = {
@@ -388,14 +405,14 @@ export function useGesture(element, handlers = {}) {
   // Attach listeners
   if (typeof element === 'function') {
     // Ref function
-    effect(() => {
+    scopedEffect(() => {
       const el = untrack(element);
       if (!el) return;
       return attachListeners(el);
     });
   } else if (element?.current !== undefined) {
     // Ref object
-    effect(() => {
+    scopedEffect(() => {
       const el = element.current;
       if (!el) return;
       return attachListeners(el);
@@ -406,7 +423,7 @@ export function useGesture(element, handlers = {}) {
 
   function attachListeners(el) {
     el.addEventListener('mousedown', handleStart);
-    el.addEventListener('touchstart', handleStart, { passive: true });
+    el.addEventListener('touchstart', handleStart, { passive: !preventDefault });
     window.addEventListener('mousemove', handleMove);
     window.addEventListener('touchmove', handlePinchMove);
     window.addEventListener('touchmove', handleMove);

package/dist/components.js

@@ -2,32 +2,54 @@
 // memo, lazy, Suspense, ErrorBoundary
 
 import { h } from './h.js';
-import { signal, effect, untrack } from './reactive.js';
+import { signal, effect, untrack, __DEV__ } from './reactive.js';
 
-// Error boundary context - components can register their error handlers here
-export const errorBoundaryStack = [];
+// Legacy errorBoundaryStack removed — tree-based resolution via _parentCtx._errorBoundary
+// is now the only mechanism. See reportError() below.
 
 // --- memo ---
-// Skip re-render if props haven't changed (shallow compare by default).
+// Skip re-render when parent re-renders with unchanged props.
+// Signal-safe: when an internal signal changes, the component always re-renders
+// (memo never blocks signal-triggered updates).
+//
+// How it works:
+// - In our architecture, Component(propsSignal()) is called inside an effect.
+// - When parent re-renders: propsSignal is set to a new object → props is a NEW reference
+// - When an internal signal changes: propsSignal unchanged → props is the SAME reference
+// - memo only skips when: props is a new reference AND structurally equal to previous
 
 export function memo(Component, areEqual) {
   const compare = areEqual || shallowEqual;
-  let prevProps = null;
-  let prevResult = null;
 
   function MemoWrapper(props) {
-    if (prevProps && compare(prevProps, props)) {
-      return prevResult;
+    const ctx = _getCurrentComponent?.();
+    if (ctx && ctx._memoResult !== undefined) {
+      if (props === ctx._memoPropsRef) {
+        // Same reference → signal-triggered re-render → must re-run
+        // to pick up new signal values (do NOT skip)
+      } else if (compare(ctx._memoProps, props)) {
+        // New reference but structurally equal → parent-triggered, safe to skip
+        ctx._memoPropsRef = props;
+        return ctx._memoResult;
+      }
+    }
+    if (ctx) {
+      ctx._memoPropsRef = props;
+      ctx._memoProps = { ...props };
     }
-    prevProps = { ...props };
-    prevResult = Component(props);
-    return prevResult;
+    const result = Component(props);
+    if (ctx) ctx._memoResult = result;
+    return result;
   }
 
   MemoWrapper.displayName = `Memo(${Component.name || 'Anonymous'})`;
   return MemoWrapper;
 }
 
+// Injected by dom.js
+let _getCurrentComponent = null;
+export function _injectGetCurrentComponent(fn) { _getCurrentComponent = fn; }
+
 function shallowEqual(a, b) {
   if (a === b) return true;
   const keysA = Object.keys(a);
@@ -137,21 +159,23 @@ export function ErrorBoundary({ fallback, children, onError }) {
   };
 }
 
-// Helper to get current error boundary
-export function getCurrentErrorBoundary() {
-  return errorBoundaryStack[errorBoundaryStack.length - 1] || null;
-}
-
 // Helper to report error to nearest boundary
-export function reportError(error) {
-  const boundary = getCurrentErrorBoundary();
-  if (boundary) {
-    boundary.handleError(error);
-    return true;
+// Walks the component context tree (not a runtime stack) so async errors are caught
+export function reportError(error, startCtx) {
+  // Walk up the _parentCtx chain to find the nearest _errorBoundary
+  let ctx = startCtx || _getCurrentComponent?.();
+  while (ctx) {
+    if (ctx._errorBoundary) {
+      ctx._errorBoundary(error);
+      return true;
+    }
+    ctx = ctx._parentCtx;
   }
   return false;
 }
 
+// _getCurrentComponent is already declared above and injected via _injectGetCurrentComponent
+
 // --- Show ---
 // Conditional rendering component. Cleaner than ternaries.
 
@@ -171,11 +195,25 @@ export function For({ each, fallback = null, children }) {
   // children should be a function (item, index) => vnode
   const renderFn = Array.isArray(children) ? children[0] : children;
   if (typeof renderFn !== 'function') {
-    console.warn('For: children must be a function');
+    console.warn('[what] For: children must be a render function, e.g. <For each={items}>{(item) => ...}</For>');
     return fallback;
   }
 
-  return list.map((item, index) => renderFn(item, index));
+  return list.map((item, index) => {
+    const vnode = renderFn(item, index);
+    // Auto-detect keys for efficient keyed reconciliation
+    if (vnode && typeof vnode === 'object' && vnode.key == null) {
+      if (item != null && typeof item === 'object') {
+        // Use item.id or item.key if available
+        if (item.id != null) vnode.key = item.id;
+        else if (item.key != null) vnode.key = item.key;
+      } else if (typeof item === 'string' || typeof item === 'number') {
+        // Primitive items can be their own key
+        vnode.key = item;
+      }
+    }
+    return vnode;
+  });
 }
 
 // --- Switch / Match ---