what-core 0.2.0 → 0.4.0

package/dist/form.js

@@ -15,23 +15,70 @@ export function useForm(options = {}) {
     resolver,
   } = options;
 
-  // Form state
-  const values = signal({ ...defaultValues });
-  const errors = signal({});
-  const touched = signal({});
+  // Per-field signals for granular reactivity (avoids full-form re-renders on each keystroke)
+  const fieldSignals = {};
+  const errorSignals = {};
+  const touchedSignals = {};
+
+  function getFieldSignal(name) {
+    if (!fieldSignals[name]) {
+      fieldSignals[name] = signal(defaultValues[name] ?? '');
+    }
+    return fieldSignals[name];
+  }
+
+  function getErrorSignal(name) {
+    if (!errorSignals[name]) {
+      errorSignals[name] = signal(null);
+    }
+    return errorSignals[name];
+  }
+
+  function getTouchedSignal(name) {
+    if (!touchedSignals[name]) {
+      touchedSignals[name] = signal(false);
+    }
+    return touchedSignals[name];
+  }
+
+  // Aggregate signals for bulk operations
   const isDirty = signal(false);
   const isSubmitting = signal(false);
   const isSubmitted = signal(false);
   const submitCount = signal(0);
 
+  // Helper: get all current values as a plain object
+  function getAllValues() {
+    const result = { ...defaultValues };
+    for (const [name, sig] of Object.entries(fieldSignals)) {
+      result[name] = 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;
+  }
+
   // Computed states
-  const isValid = computed(() => Object.keys(errors()).length === 0);
+  const isValid = computed(() => {
+    for (const sig of Object.values(errorSignals)) {
+      if (sig()) return false;
+    }
+    return true;
+  });
+
   const dirtyFields = computed(() => {
     const dirty = {};
-    const current = values();
-    for (const key in current) {
-      if (current[key] !== defaultValues[key]) {
-        dirty[key] = true;
+    for (const [name, sig] of Object.entries(fieldSignals)) {
+      if (sig() !== (defaultValues[name] ?? '')) {
+        dirty[name] = true;
       }
     }
     return dirty;
@@ -41,31 +88,41 @@ export function useForm(options = {}) {
   async function validate(fieldName) {
     if (!resolver) return true;
 
-    const result = await resolver(values());
+    const result = await resolver(getAllValues());
 
     if (fieldName) {
-      // Validate single field
+      // Validate single field — only update that field's error signal
+      const errSig = getErrorSignal(fieldName);
       if (result.errors[fieldName]) {
-        errors.set({ ...errors.peek(), [fieldName]: result.errors[fieldName] });
+        errSig.set(result.errors[fieldName]);
         return false;
       } else {
-        const newErrors = { ...errors.peek() };
-        delete newErrors[fieldName];
-        errors.set(newErrors);
+        errSig.set(null);
         return true;
       }
     } else {
       // Validate all fields
-      errors.set(result.errors || {});
+      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;
     }
   }
 
-  // Register a field
+  // Register a field — only subscribes to THIS field's signal
   function register(name, options = {}) {
+    const fieldSig = getFieldSignal(name);
     return {
       name,
-      value: values()[name] ?? '',
+      // Use getter so value is always fresh, even if register result is cached
+      get value() { return fieldSig(); },
       onInput: (e) => {
         const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
         setValue(name, value);
@@ -75,7 +132,7 @@ export function useForm(options = {}) {
         }
       },
       onBlur: () => {
-        touched.set({ ...touched.peek(), [name]: true });
+        getTouchedSignal(name).set(true);
 
         if (mode === 'onBlur' || (isSubmitted.peek() && reValidateMode === 'onBlur')) {
           validate(name);
@@ -86,16 +143,12 @@ export function useForm(options = {}) {
     };
   }
 
-  // Set single field value
+  // Set single field value — only triggers re-render for components reading this field
   function setValue(name, value, options = {}) {
     const { shouldValidate = false, shouldDirty = true } = options;
 
-    batch(() => {
-      values.set({ ...values.peek(), [name]: value });
-      if (shouldDirty) {
-        isDirty.set(true);
-      }
-    });
+    getFieldSignal(name).set(value);
+    if (shouldDirty) isDirty.set(true);
 
     if (shouldValidate) {
       validate(name);
@@ -104,32 +157,40 @@ export function useForm(options = {}) {
 
   // Get single field value
   function getValue(name) {
-    return values()[name];
+    return getFieldSignal(name)();
   }
 
   // Set error for a field
   function setError(name, error) {
-    errors.set({ ...errors.peek(), [name]: error });
+    getErrorSignal(name).set(error);
   }
 
   // Clear error for a field
   function clearError(name) {
-    const newErrors = { ...errors.peek() };
-    delete newErrors[name];
-    errors.set(newErrors);
+    getErrorSignal(name).set(null);
   }
 
   // Clear all errors
   function clearErrors() {
-    errors.set({});
+    batch(() => {
+      for (const sig of Object.values(errorSignals)) {
+        sig.set(null);
+      }
+    });
   }
 
   // Reset form
   function reset(newValues = defaultValues) {
     batch(() => {
-      values.set({ ...newValues });
-      errors.set({});
-      touched.set({});
+      for (const [name, sig] of Object.entries(fieldSignals)) {
+        sig.set(newValues[name] ?? '');
+      }
+      for (const sig of Object.values(errorSignals)) {
+        sig.set(null);
+      }
+      for (const sig of Object.values(touchedSignals)) {
+        sig.set(false);
+      }
       isDirty.set(false);
       isSubmitted.set(false);
     });
@@ -147,21 +208,22 @@ export function useForm(options = {}) {
       const isFormValid = await validate();
 
       if (isFormValid) {
-        await onValid(values.peek());
+        await onValid(getAllValues());
       } else if (onInvalid) {
-        onInvalid(errors.peek());
+        onInvalid(getAllErrors());
       }
 
       isSubmitting.set(false);
     };
   }
 
-  // Watch a field
+  // Watch a field — returns a computed that subscribes only to this field
   function watch(name) {
     if (name) {
-      return computed(() => values()[name]);
+      return computed(() => getFieldSignal(name)());
     }
-    return values;
+    // Watch all: return a computed that reads all field signals
+    return computed(() => getAllValues());
   }
 
   return {
@@ -175,11 +237,17 @@ export function useForm(options = {}) {
     reset,
     watch,
     validate,
-    // Form state
+    // Form state — uses getters for errors/touched to enable per-field granularity
     formState: {
-      values: () => values(),
-      errors: () => errors(),
-      touched: () => touched(),
+      get values() { return getAllValues(); },
+      get errors() { return getAllErrors(); },
+      get touched() {
+        const result = {};
+        for (const [name, sig] of Object.entries(touchedSignals)) {
+          if (sig()) result[name] = true;
+        }
+        return result;
+      },
       isDirty: () => isDirty(),
       isValid,
       isSubmitting: () => isSubmitting(),

package/dist/helpers.js

@@ -1,17 +1,27 @@
 // What Framework - Helpers & Utilities
 // Commonly needed patterns, zero overhead.
 
-import { signal, effect, computed, batch } from './reactive.js';
+import { signal, effect, computed, batch, __DEV__ } from './reactive.js';
 
-// --- show(condition, vnode) ---
+// --- 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;
 }
 
-// --- each(list, fn) ---
+// --- each(list, fn) --- [DEPRECATED: use <For> component or .map() instead]
 // Keyed list rendering. Optimized for reconciliation.
+let _eachWarned = false;
 export function each(list, fn, keyFn) {
+  if (!_eachWarned) {
+    _eachWarned = true;
+    console.warn('[what] each() is deprecated. Use the <For> component or Array.map() instead.');
+  }
   if (!list || list.length === 0) return [];
   return list.map((item, index) => {
     const vnode = fn(item, index);
@@ -76,18 +86,31 @@ export function throttle(fn, ms) {
   };
 }
 
+// Component context ref — injected by dom.js to avoid circular imports
+let _getCurrentComponentRef = null;
+export function _setComponentRef(fn) { _getCurrentComponentRef = fn; }
+
 // --- useMediaQuery ---
-// Reactive media query. Returns a signal.
+// Reactive media query. Returns a signal. Cleans up listener on component unmount.
 export function useMediaQuery(query) {
   if (typeof window === 'undefined') return signal(false);
   const mq = window.matchMedia(query);
   const s = signal(mq.matches);
-  mq.addEventListener('change', (e) => s.set(e.matches));
+  const handler = (e) => s.set(e.matches);
+  mq.addEventListener('change', handler);
+
+  // Register cleanup if inside a component context
+  const ctx = _getCurrentComponentRef?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(() => mq.removeEventListener('change', handler));
+  }
+
   return s;
 }
 
 // --- useLocalStorage ---
-// Signal synced with localStorage.
+// Signal synced with localStorage. Cleans up listeners on component unmount.
 export function useLocalStorage(key, initial) {
   let stored;
   try {
@@ -100,18 +123,34 @@ export function useLocalStorage(key, initial) {
   const s = signal(stored);
 
   // Sync to localStorage on changes
-  effect(() => {
+  const dispose = effect(() => {
     try {
       localStorage.setItem(key, JSON.stringify(s()));
-    } catch { /* quota exceeded, etc */ }
+    } catch (e) {
+      if (__DEV__) console.warn('[what] localStorage write failed (quota exceeded?):', e);
+    }
   });
 
   // Listen for changes from other tabs
+  let storageHandler = null;
   if (typeof window !== 'undefined') {
-    window.addEventListener('storage', (e) => {
+    storageHandler = (e) => {
       if (e.key === key && e.newValue !== null) {
-        try { s.set(JSON.parse(e.newValue)); } catch {}
+        try { s.set(JSON.parse(e.newValue)); } catch (err) {
+          if (__DEV__) console.warn('[what] localStorage parse failed:', err);
+        }
       }
+    };
+    window.addEventListener('storage', storageHandler);
+  }
+
+  // Register cleanup if inside a component context
+  const ctx = _getCurrentComponentRef?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(() => {
+      dispose();
+      if (storageHandler) window.removeEventListener('storage', storageHandler);
     });
   }
 
@@ -131,6 +170,30 @@ export function Portal({ target, children }) {
   return { tag: '__portal', props: { container }, children: Array.isArray(children) ? children : [children], _vnode: true };
 }
 
+// --- useClickOutside ---
+// Detect clicks outside a ref'd element. Essential for dropdowns, modals, popovers.
+export function useClickOutside(ref, handler) {
+  if (typeof document === 'undefined') return;
+
+  const listener = (e) => {
+    const el = ref.current || ref;
+    if (!el || el.contains(e.target)) return;
+    handler(e);
+  };
+
+  document.addEventListener('mousedown', listener);
+  document.addEventListener('touchstart', listener);
+
+  const ctx = _getCurrentComponentRef?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(() => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    });
+  }
+}
+
 // --- Transition helper ---
 // Animate elements in/out. Returns props to spread on the element.
 export function transition(name, active) {

package/dist/hooks.js

@@ -1,12 +1,17 @@
 // What Framework - Hooks
 // React-familiar hooks backed by signals. Zero overhead when deps don't change.
 
-import { signal, computed, effect, batch, untrack } from './reactive.js';
+import { signal, computed, effect, batch, untrack, __DEV__ } from './reactive.js';
 import { getCurrentComponent } from './dom.js';
 
 function getCtx() {
   const ctx = getCurrentComponent();
-  if (!ctx) throw new Error('Hooks must be called inside a component');
+  if (!ctx) {
+    throw new Error(
+      '[what] Hooks must be called inside a component function. ' +
+      'If you need reactive state outside a component, use signal() directly.'
+    );
+  }
   return ctx;
 }
 
@@ -128,24 +133,56 @@ export function useRef(initial) {
 }
 
 // --- useContext ---
-// Read from a context created by createContext().
+// Read from the nearest Provider in the component tree, or the default value.
+// Uses _parentCtx chain (persistent tree) instead of componentStack (runtime stack)
+// so context works correctly in re-renders, effects, and event handlers.
 
 export function useContext(context) {
-  return context._value;
+  // Walk up the _parentCtx chain to find the nearest provider
+  let ctx = getCurrentComponent();
+  if (__DEV__ && !ctx) {
+    console.warn(
+      `[what] useContext(${context?.displayName || 'Context'}) called outside of component render. ` +
+      'useContext must be called during component rendering, not inside effects or event handlers. ' +
+      'Store the context value in a variable during render and use that variable in your callback.'
+    );
+  }
+  while (ctx) {
+    if (ctx._contextValues && ctx._contextValues.has(context)) {
+      const val = ctx._contextValues.get(context);
+      // If the stored value is a signal, read it to subscribe
+      return (val && val._signal) ? val() : val;
+    }
+    ctx = ctx._parentCtx;
+  }
+  return context._defaultValue;
 }
 
 // --- createContext ---
-// Simple context: set a default, override with Provider component.
+// Tree-scoped context: Provider sets value for its subtree only.
+// Multiple providers can coexist — each subtree sees its own value.
+// Context values are wrapped in signals so consumers re-render when values change.
 
 export function createContext(defaultValue) {
-  const ctx = {
-    _value: defaultValue,
+  const context = {
+    _defaultValue: defaultValue,
     Provider: ({ value, children }) => {
-      ctx._value = value;
+      const ctx = getCtx();
+      if (!ctx._contextValues) ctx._contextValues = new Map();
+      if (!ctx._contextSignals) ctx._contextSignals = new Map();
+
+      // Create or update the context signal
+      if (!ctx._contextSignals.has(context)) {
+        const s = signal(value);
+        ctx._contextSignals.set(context, s);
+        ctx._contextValues.set(context, s);
+      } else {
+        ctx._contextSignals.get(context).set(value);
+      }
       return children;
     },
   };
-  return ctx;
+  return context;
 }
 
 // --- useReducer ---
@@ -173,7 +210,7 @@ export function useReducer(reducer, initialState, init) {
 
 export function onMount(fn) {
   const ctx = getCtx();
-  if (!ctx._mounted) {
+  if (!ctx.mounted) {
     ctx._mountCallbacks = ctx._mountCallbacks || [];
     ctx._mountCallbacks.push(fn);
   }
@@ -197,26 +234,33 @@ export function createResource(fetcher, options = {}) {
   const loading = signal(!options.initialValue);
   const error = signal(null);
 
-  let currentFetch = null;
+  let controller = null;
 
   const refetch = async (source) => {
+    // Abort previous request
+    if (controller) controller.abort();
+    controller = new AbortController();
+    const { signal: abortSignal } = controller;
+
     loading.set(true);
     error.set(null);
 
     try {
-      const fetchPromise = fetcher(source);
-      currentFetch = fetchPromise;
-      const result = await fetchPromise;
-
-      // Only update if this is still the current fetch
-      if (currentFetch === fetchPromise) {
-        data.set(result);
-        loading.set(false);
+      const result = await fetcher(source, { signal: abortSignal });
+
+      // Only update if not aborted
+      if (!abortSignal.aborted) {
+        batch(() => {
+          data.set(result);
+          loading.set(false);
+        });
       }
     } catch (e) {
-      if (currentFetch === fetcher) {
-        error.set(e);
-        loading.set(false);
+      if (!abortSignal.aborted) {
+        batch(() => {
+          error.set(e);
+          loading.set(false);
+        });
       }
     }
   };
@@ -225,6 +269,15 @@ export function createResource(fetcher, options = {}) {
     data.set(typeof value === 'function' ? value(data()) : value);
   };
 
+  // Register cleanup with component lifecycle: abort on unmount
+  const ctx = getCurrentComponent?.();
+  if (ctx) {
+    ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+    ctx._cleanupCallbacks.push(() => {
+      if (controller) controller.abort();
+    });
+  }
+
   // Initial fetch if no initial value
   if (!options.initialValue) {
     refetch(options.source);

package/dist/index.js

@@ -2,7 +2,10 @@
 // The closest framework to vanilla JS.
 
 // Reactive primitives
-export { signal, computed, effect, batch, untrack } from './reactive.js';
+export { signal, computed, effect, memo as signalMemo, batch, untrack, flushSync, createRoot } from './reactive.js';
+
+// Fine-grained rendering primitives
+export { template, insert, mapArray, spread, delegateEvents, on, classList } from './render.js';
 
 // Virtual DOM
 export { h, Fragment, html } from './h.js';
@@ -31,7 +34,7 @@ export {
 export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match, Island } from './components.js';
 
 // Store
-export { createStore, storeComputed, atom } from './store.js';
+export { createStore, derived, storeComputed, atom } from './store.js';
 
 // Head management
 export { Head, clearHead } from './head.js';
@@ -46,6 +49,7 @@ export {
   throttle,
   useMediaQuery,
   useLocalStorage,
+  useClickOutside,
   Portal,
   transition,
 } from './helpers.js';