what-core 0.1.1 → 0.3.0

package/dist/helpers.js

@@ -1,98 +1,140 @@
+// What Framework - Helpers & Utilities
+// Commonly needed patterns, zero overhead.
+
 import { signal, effect, computed, batch } from './reactive.js';
+
+// --- show(condition, vnode) ---
+// Conditional rendering. More readable than ternary.
 export function show(condition, vnode, fallback = null) {
-return condition ? vnode : fallback;
+  return condition ? vnode : fallback;
 }
+
+// --- each(list, fn) ---
+// Keyed list rendering. Optimized for reconciliation.
 export function each(list, fn, keyFn) {
-if (!list || list.length === 0) return [];
-return list.map((item, index) => {
-const vnode = fn(item, index);
-if (keyFn && vnode && typeof vnode === 'object') {
-vnode.key = keyFn(item, index);
-}
-return vnode;
-});
-}
+  if (!list || list.length === 0) return [];
+  return list.map((item, index) => {
+    const vnode = fn(item, index);
+    if (keyFn && vnode && typeof vnode === 'object') {
+      vnode.key = keyFn(item, index);
+    }
+    return vnode;
+  });
+}
+
+// --- cls(...args) ---
+// Conditional class names. Like clsx but tiny.
+// cls('base', condition && 'active', { hidden: isHidden, bold: isBold })
 export function cls(...args) {
-const classes = [];
-for (const arg of args) {
-if (!arg) continue;
-if (typeof arg === 'string') {
-classes.push(arg);
-} else if (typeof arg === 'object') {
-for (const [key, val] of Object.entries(arg)) {
-if (val) classes.push(key);
-}
-}
-}
-return classes.join(' ');
-}
+  const classes = [];
+  for (const arg of args) {
+    if (!arg) continue;
+    if (typeof arg === 'string') {
+      classes.push(arg);
+    } else if (typeof arg === 'object') {
+      for (const [key, val] of Object.entries(arg)) {
+        if (val) classes.push(key);
+      }
+    }
+  }
+  return classes.join(' ');
+}
+
+// --- style(obj) ---
+// Convert a style object to a CSS string for SSR.
 export function style(obj) {
-if (typeof obj === 'string') return obj;
-return Object.entries(obj)
-.filter(([, v]) => v != null && v !== '')
-.map(([k, v]) => `${camelToKebab(k)}:${v}`)
-.join(';');
+  if (typeof obj === 'string') return obj;
+  return Object.entries(obj)
+    .filter(([, v]) => v != null && v !== '')
+    .map(([k, v]) => `${camelToKebab(k)}:${v}`)
+    .join(';');
 }
+
 function camelToKebab(str) {
-return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
+
+// --- debounce ---
+// Debounced signal updates.
 export function debounce(fn, ms) {
-let timer;
-return (...args) => {
-clearTimeout(timer);
-timer = setTimeout(() => fn(...args), ms);
-};
-}
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+
+// --- throttle ---
 export function throttle(fn, ms) {
-let last = 0;
-return (...args) => {
-const now = Date.now();
-if (now - last >= ms) {
-last = now;
-fn(...args);
-}
-};
-}
+  let last = 0;
+  return (...args) => {
+    const now = Date.now();
+    if (now - last >= ms) {
+      last = now;
+      fn(...args);
+    }
+  };
+}
+
+// --- useMediaQuery ---
+// Reactive media query. Returns a signal.
 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));
-return s;
-}
+  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));
+  return s;
+}
+
+// --- useLocalStorage ---
+// Signal synced with localStorage.
 export function useLocalStorage(key, initial) {
-let stored;
-try {
-const raw = localStorage.getItem(key);
-stored = raw !== null ? JSON.parse(raw) : initial;
-} catch {
-stored = initial;
-}
-const s = signal(stored);
-effect(() => {
-try {
-localStorage.setItem(key, JSON.stringify(s()));
-} catch {  }
-});
-if (typeof window !== 'undefined') {
-window.addEventListener('storage', (e) => {
-if (e.key === key && e.newValue !== null) {
-try { s.set(JSON.parse(e.newValue)); } catch {}
-}
-});
-}
-return s;
-}
+  let stored;
+  try {
+    const raw = localStorage.getItem(key);
+    stored = raw !== null ? JSON.parse(raw) : initial;
+  } catch {
+    stored = initial;
+  }
+
+  const s = signal(stored);
+
+  // Sync to localStorage on changes
+  effect(() => {
+    try {
+      localStorage.setItem(key, JSON.stringify(s()));
+    } catch { /* quota exceeded, etc */ }
+  });
+
+  // Listen for changes from other tabs
+  if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (e) => {
+      if (e.key === key && e.newValue !== null) {
+        try { s.set(JSON.parse(e.newValue)); } catch {}
+      }
+    });
+  }
+
+  return s;
+}
+
+// --- portal ---
+// Render children into a different DOM container.
 export function Portal({ target, children }) {
-if (typeof document === 'undefined') return null;
-const container = typeof target === 'string'
-? document.querySelector(target)
-: target;
-if (!container) return null;
-return { tag: '__portal', props: { container }, children: Array.isArray(children) ? children : [children], _vnode: true };
-}
+  // In SSR, just return null (portals are client-only)
+  if (typeof document === 'undefined') return null;
+  const container = typeof target === 'string'
+    ? document.querySelector(target)
+    : target;
+  if (!container) return null;
+  // The DOM reconciler will mount children here
+  return { tag: '__portal', props: { container }, children: Array.isArray(children) ? children : [children], _vnode: true };
+}
+
+// --- Transition helper ---
+// Animate elements in/out. Returns props to spread on the element.
 export function transition(name, active) {
-return {
-class: active ? `${name}-enter ${name}-enter-active` : `${name}-leave ${name}-leave-active`,
-};
-}
+  return {
+    class: active ? `${name}-enter ${name}-enter-active` : `${name}-leave ${name}-leave-active`,
+  };
+}

package/dist/hooks.js

@@ -1,156 +1,258 @@
+// 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 { getCurrentComponent } from './dom.js';
+import { getCurrentComponent, getComponentStack as _getComponentStack } from './dom.js';
+
 function getCtx() {
-const ctx = getCurrentComponent();
-if (!ctx) throw new Error('Hooks must be called inside a component');
-return ctx;
+  const ctx = getCurrentComponent();
+  if (!ctx) throw new Error('Hooks must be called inside a component');
+  return ctx;
 }
+
 function getHook(ctx) {
-const index = ctx.hookIndex++;
-return { index, exists: index < ctx.hooks.length };
+  const index = ctx.hookIndex++;
+  return { index, exists: index < ctx.hooks.length };
 }
+
+// --- useState ---
+// Returns [value, setter]. Setter triggers re-render of this component only.
+
 export function useState(initial) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-const s = signal(typeof initial === 'function' ? initial() : initial);
-ctx.hooks[index] = s;
-}
-const s = ctx.hooks[index];
-return [s(), s.set];
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    const s = signal(typeof initial === 'function' ? initial() : initial);
+    ctx.hooks[index] = s;
+  }
+
+  const s = ctx.hooks[index];
+  return [s(), s.set];
 }
+
+// --- useSignal ---
+// Returns the raw signal. More powerful: read with sig(), write with sig.set(v).
+// Avoids array destructuring overhead.
+
 export function useSignal(initial) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-ctx.hooks[index] = signal(typeof initial === 'function' ? initial() : initial);
-}
-return ctx.hooks[index];
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    ctx.hooks[index] = signal(typeof initial === 'function' ? initial() : initial);
+  }
+
+  return ctx.hooks[index];
 }
+
+// --- useComputed ---
+// Derived value. Only recomputes when signal deps change.
+
 export function useComputed(fn) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-ctx.hooks[index] = computed(fn);
-}
-return ctx.hooks[index];
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    ctx.hooks[index] = computed(fn);
+  }
+
+  return ctx.hooks[index];
 }
+
+// --- useEffect ---
+// Side effect that runs after render. Cleanup function returned by fn is called
+// before re-running and on unmount.
+
 export function useEffect(fn, deps) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-ctx.hooks[index] = { deps: undefined, cleanup: null };
-}
-const hook = ctx.hooks[index];
-if (depsChanged(hook.deps, deps)) {
-queueMicrotask(() => {
-if (ctx.disposed) return;
-if (hook.cleanup) hook.cleanup();
-hook.cleanup = fn() || null;
-});
-hook.deps = deps;
-}
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    ctx.hooks[index] = { deps: undefined, cleanup: null };
+  }
+
+  const hook = ctx.hooks[index];
+
+  if (depsChanged(hook.deps, deps)) {
+    // Schedule after current render
+    queueMicrotask(() => {
+      if (ctx.disposed) return;
+      if (hook.cleanup) hook.cleanup();
+      hook.cleanup = fn() || null;
+    });
+    hook.deps = deps;
+  }
 }
+
+// --- useMemo ---
+// Memoized value. Only recomputes when deps change.
+
 export function useMemo(fn, deps) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-ctx.hooks[index] = { value: undefined, deps: undefined };
-}
-const hook = ctx.hooks[index];
-if (depsChanged(hook.deps, deps)) {
-hook.value = fn();
-hook.deps = deps;
-}
-return hook.value;
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    ctx.hooks[index] = { value: undefined, deps: undefined };
+  }
+
+  const hook = ctx.hooks[index];
+
+  if (depsChanged(hook.deps, deps)) {
+    hook.value = fn();
+    hook.deps = deps;
+  }
+
+  return hook.value;
 }
+
+// --- useCallback ---
+// Memoized callback. Identity-stable when deps don't change.
+
 export function useCallback(fn, deps) {
-return useMemo(() => fn, deps);
+  return useMemo(() => fn, deps);
 }
+
+// --- useRef ---
+// Mutable ref object. Does NOT trigger re-renders.
+
 export function useRef(initial) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-ctx.hooks[index] = { current: initial };
-}
-return ctx.hooks[index];
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    ctx.hooks[index] = { current: initial };
+  }
+
+  return ctx.hooks[index];
 }
+
+// --- useContext ---
+// Read from the nearest Provider in the component tree, or the default value.
+
 export function useContext(context) {
-return context._value;
+  // Walk up the component stack to find the nearest provider for this context
+  const stack = _getComponentStack();
+  for (let i = stack.length - 1; i >= 0; i--) {
+    const ctx = stack[i];
+    if (ctx._contextValues && ctx._contextValues.has(context)) {
+      return ctx._contextValues.get(context);
+    }
+  }
+  return context._defaultValue;
 }
+
+// --- createContext ---
+// Tree-scoped context: Provider sets value for its subtree only.
+// Multiple providers can coexist — each subtree sees its own value.
+
 export function createContext(defaultValue) {
-const ctx = {
-_value: defaultValue,
-Provider: ({ value, children }) => {
-ctx._value = value;
-return children;
-},
-};
-return ctx;
+  const context = {
+    _defaultValue: defaultValue,
+    Provider: ({ value, children }) => {
+      // Store context value on the current component's context
+      const ctx = getCtx();
+      if (!ctx._contextValues) ctx._contextValues = new Map();
+      ctx._contextValues.set(context, value);
+      return children;
+    },
+  };
+  return context;
 }
+
+// --- useReducer ---
+// State management with a reducer function (like React).
+
 export function useReducer(reducer, initialState, init) {
-const ctx = getCtx();
-const { index, exists } = getHook(ctx);
-if (!exists) {
-const initial = init ? init(initialState) : initialState;
-const s = signal(initial);
-const dispatch = (action) => {
-s.set(prev => reducer(prev, action));
-};
-ctx.hooks[index] = { signal: s, dispatch };
-}
-const hook = ctx.hooks[index];
-return [hook.signal(), hook.dispatch];
+  const ctx = getCtx();
+  const { index, exists } = getHook(ctx);
+
+  if (!exists) {
+    const initial = init ? init(initialState) : initialState;
+    const s = signal(initial);
+    const dispatch = (action) => {
+      s.set(prev => reducer(prev, action));
+    };
+    ctx.hooks[index] = { signal: s, dispatch };
+  }
+
+  const hook = ctx.hooks[index];
+  return [hook.signal(), hook.dispatch];
 }
+
+// --- onMount ---
+// Run callback once when component mounts. SolidJS-style lifecycle.
+
 export function onMount(fn) {
-const ctx = getCtx();
-if (!ctx._mounted) {
-ctx._mountCallbacks = ctx._mountCallbacks || [];
-ctx._mountCallbacks.push(fn);
-}
+  const ctx = getCtx();
+  if (!ctx.mounted) {
+    ctx._mountCallbacks = ctx._mountCallbacks || [];
+    ctx._mountCallbacks.push(fn);
+  }
 }
+
+// --- onCleanup ---
+// Register cleanup function to run when component unmounts.
+
 export function onCleanup(fn) {
-const ctx = getCtx();
-ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
-ctx._cleanupCallbacks.push(fn);
+  const ctx = getCtx();
+  ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+  ctx._cleanupCallbacks.push(fn);
 }
+
+// --- createResource ---
+// Reactive data fetching primitive (SolidJS-style).
+// Returns [data, { loading, error, refetch, mutate }]
+
 export function createResource(fetcher, options = {}) {
-const data = signal(options.initialValue ?? null);
-const loading = signal(!options.initialValue);
-const error = signal(null);
-let currentFetch = null;
-const refetch = async (source) => {
-loading.set(true);
-error.set(null);
-try {
-const fetchPromise = fetcher(source);
-currentFetch = fetchPromise;
-const result = await fetchPromise;
-if (currentFetch === fetchPromise) {
-data.set(result);
-loading.set(false);
-}
-} catch (e) {
-if (currentFetch === fetcher) {
-error.set(e);
-loading.set(false);
-}
-}
-};
-const mutate = (value) => {
-data.set(typeof value === 'function' ? value(data()) : value);
-};
-if (!options.initialValue) {
-refetch(options.source);
-}
-return [data, { loading, error, refetch, mutate }];
+  const data = signal(options.initialValue ?? null);
+  const loading = signal(!options.initialValue);
+  const error = signal(null);
+
+  let currentFetch = null;
+
+  const refetch = async (source) => {
+    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);
+      }
+    } catch (e) {
+      if (currentFetch === fetchPromise) {
+        error.set(e);
+        loading.set(false);
+      }
+    }
+  };
+
+  const mutate = (value) => {
+    data.set(typeof value === 'function' ? value(data()) : value);
+  };
+
+  // Initial fetch if no initial value
+  if (!options.initialValue) {
+    refetch(options.source);
+  }
+
+  return [data, { loading, error, refetch, mutate }];
 }
+
+// --- Dep comparison ---
+
 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;
-}
+  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;
+}

package/dist/index.js

@@ -28,10 +28,10 @@ export {
 } from './hooks.js';
 
 // Component helpers
-export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match } from './components.js';
+export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match, Island } from './components.js';
 
 // Store
-export { createStore, atom } from './store.js';
+export { createStore, storeComputed, atom } from './store.js';
 
 // Head management
 export { Head, clearHead } from './head.js';