what-core 0.1.0 → 0.2.0

package/dist/components.js

@@ -1,140 +1,297 @@
+// What Framework - Component Utilities
+// memo, lazy, Suspense, ErrorBoundary
+
 import { h } from './h.js';
 import { signal, effect, untrack } from './reactive.js';
+
+// Error boundary context - components can register their error handlers here
 export const errorBoundaryStack = [];
+
+// --- memo ---
+// Skip re-render if props haven't changed (shallow compare by default).
+
 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;
-}
-prevProps = { ...props };
-prevResult = Component(props);
-return prevResult;
-}
-MemoWrapper.displayName = `Memo(${Component.name || 'Anonymous'})`;
-return MemoWrapper;
+  const compare = areEqual || shallowEqual;
+  let prevProps = null;
+  let prevResult = null;
+
+  function MemoWrapper(props) {
+    if (prevProps && compare(prevProps, props)) {
+      return prevResult;
+    }
+    prevProps = { ...props };
+    prevResult = Component(props);
+    return prevResult;
+  }
+
+  MemoWrapper.displayName = `Memo(${Component.name || 'Anonymous'})`;
+  return MemoWrapper;
 }
+
 function shallowEqual(a, b) {
-if (a === b) return true;
-const keysA = Object.keys(a);
-const keysB = Object.keys(b);
-if (keysA.length !== keysB.length) return false;
-for (const key of keysA) {
-if (!Object.is(a[key], b[key])) return false;
-}
-return true;
+  if (a === b) return true;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.is(a[key], b[key])) return false;
+  }
+  return true;
 }
+
+// --- lazy ---
+// Code-split a component. Returns a wrapper that loads on first render.
+
 export function lazy(loader) {
-let Component = null;
-let loadPromise = null;
-let loadError = null;
-const listeners = new Set();
-function LazyWrapper(props) {
-if (loadError) throw loadError;
-if (Component) return h(Component, props);
-if (!loadPromise) {
-loadPromise = loader()
-.then(mod => {
-Component = mod.default || mod;
-listeners.forEach(fn => fn());
-listeners.clear();
-})
-.catch(err => { loadError = err; });
-}
-throw loadPromise;
-}
-LazyWrapper.displayName = 'Lazy';
-LazyWrapper._lazy = true;
-LazyWrapper._onLoad = (fn) => {
-if (Component) fn();
-else listeners.add(fn);
-};
-return LazyWrapper;
+  let Component = null;
+  let loadPromise = null;
+  let loadError = null;
+  const listeners = new Set();
+
+  function LazyWrapper(props) {
+    if (loadError) throw loadError;
+    if (Component) return h(Component, props);
+
+    if (!loadPromise) {
+      loadPromise = loader()
+        .then(mod => {
+          Component = mod.default || mod;
+          // Notify all waiting instances
+          listeners.forEach(fn => fn());
+          listeners.clear();
+        })
+        .catch(err => { loadError = err; });
+    }
+
+    // Throw promise for Suspense to catch
+    throw loadPromise;
+  }
+
+  LazyWrapper.displayName = 'Lazy';
+  LazyWrapper._lazy = true;
+  LazyWrapper._onLoad = (fn) => {
+    if (Component) fn();
+    else listeners.add(fn);
+  };
+  return LazyWrapper;
 }
+
+// --- Suspense ---
+// Show fallback while children are loading (lazy components).
+// Works with lazy() and async components.
+
 export function Suspense({ fallback, children }) {
-const loading = signal(false);
-const pendingPromises = new Set();
-const boundary = {
-_suspense: true,
-onSuspend(promise) {
-loading.set(true);
-pendingPromises.add(promise);
-promise.finally(() => {
-pendingPromises.delete(promise);
-if (pendingPromises.size === 0) {
-loading.set(false);
-}
-});
-},
-};
-return {
-tag: '__suspense',
-props: { boundary, fallback, loading },
-children: Array.isArray(children) ? children : [children],
-_vnode: true,
-};
+  const loading = signal(false);
+  const pendingPromises = new Set();
+
+  // Suspense boundary marker
+  const boundary = {
+    _suspense: true,
+    onSuspend(promise) {
+      loading.set(true);
+      pendingPromises.add(promise);
+      promise.finally(() => {
+        pendingPromises.delete(promise);
+        if (pendingPromises.size === 0) {
+          loading.set(false);
+        }
+      });
+    },
+  };
+
+  return {
+    tag: '__suspense',
+    props: { boundary, fallback, loading },
+    children: Array.isArray(children) ? children : [children],
+    _vnode: true,
+  };
 }
+
+// --- ErrorBoundary ---
+// Catch errors in children and show fallback.
+// Uses a signal to track error state so it works with reactive rendering.
+
 export function ErrorBoundary({ fallback, children, onError }) {
-const errorState = signal(null);
-const handleError = (error) => {
-errorState.set(error);
-if (onError) {
-try {
-onError(error);
-} catch (e) {
-console.error('Error in onError handler:', e);
-}
-}
-};
-const reset = () => errorState.set(null);
-return {
-tag: '__errorBoundary',
-props: { errorState, handleError, fallback, reset },
-children: Array.isArray(children) ? children : [children],
-_vnode: true,
-};
+  const errorState = signal(null);
+
+  // Error handler that will be registered with the component tree
+  const handleError = (error) => {
+    errorState.set(error);
+    if (onError) {
+      try {
+        onError(error);
+      } catch (e) {
+        console.error('Error in onError handler:', e);
+      }
+    }
+  };
+
+  // Reset function to recover from error
+  const reset = () => errorState.set(null);
+
+  return {
+    tag: '__errorBoundary',
+    props: { errorState, handleError, fallback, reset },
+    children: Array.isArray(children) ? children : [children],
+    _vnode: true,
+  };
 }
+
+// Helper to get current error boundary
 export function getCurrentErrorBoundary() {
-return errorBoundaryStack[errorBoundaryStack.length - 1] || null;
+  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;
-}
-return false;
+  const boundary = getCurrentErrorBoundary();
+  if (boundary) {
+    boundary.handleError(error);
+    return true;
+  }
+  return false;
 }
+
+// --- Show ---
+// Conditional rendering component. Cleaner than ternaries.
+
 export function Show({ when, fallback = null, children }) {
-const condition = typeof when === 'function' ? when() : when;
-return condition ? children : fallback;
+  // when can be a signal or a value
+  const condition = typeof when === 'function' ? when() : when;
+  return condition ? children : fallback;
 }
+
+// --- For ---
+// Efficient list rendering with keyed reconciliation.
+
 export function For({ each, fallback = null, children }) {
-const list = typeof each === 'function' ? each() : each;
-if (!list || list.length === 0) return fallback;
-const renderFn = Array.isArray(children) ? children[0] : children;
-if (typeof renderFn !== 'function') {
-console.warn('For: children must be a function');
-return fallback;
-}
-return list.map((item, index) => renderFn(item, index));
+  const list = typeof each === 'function' ? each() : each;
+  if (!list || list.length === 0) return fallback;
+
+  // 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');
+    return fallback;
+  }
+
+  return list.map((item, index) => renderFn(item, index));
 }
+
+// --- Switch / Match ---
+// Multi-condition rendering (like switch statement).
+
 export function Switch({ fallback = null, children }) {
-const kids = Array.isArray(children) ? children : [children];
-for (const child of kids) {
-if (child && child.tag === Match) {
-const condition = typeof child.props.when === 'function'
-? child.props.when()
-: child.props.when;
-if (condition) {
-return child.children;
-}
+  const kids = Array.isArray(children) ? children : [children];
+
+  for (const child of kids) {
+    if (child && child.tag === Match) {
+      const condition = typeof child.props.when === 'function'
+        ? child.props.when()
+        : child.props.when;
+      if (condition) {
+        return child.children;
+      }
+    }
+  }
+
+  return fallback;
 }
+
+export function Match({ when, children }) {
+  // Match is just a marker component, Switch handles the logic
+  return { tag: Match, props: { when }, children, _vnode: true };
 }
-return fallback;
+
+// --- Island ---
+// Deferred hydration component for islands architecture.
+// Usage: h(Island, { component: Counter, mode: 'idle' })
+// The babel plugin compiles <Counter client:idle /> into this.
+
+export function Island({ component: Component, mode, mediaQuery, ...props }) {
+  const placeholder = h('div', { 'data-island': Component.name || 'Island', 'data-hydrate': mode });
+
+  // We need to return a vnode that the reconciler can handle.
+  // The actual hydration scheduling happens after mount via an effect.
+  const wrapper = signal(null);
+  const hydrated = signal(false);
+
+  function doHydrate() {
+    if (hydrated()) return;
+    hydrated.set(true);
+    // Render the actual component
+    wrapper.set(h(Component, props));
+  }
+
+  // Schedule hydration based on mode
+  function scheduleHydration(el) {
+    switch (mode) {
+      case 'load':
+        queueMicrotask(doHydrate);
+        break;
+
+      case 'idle':
+        if (typeof requestIdleCallback !== 'undefined') {
+          requestIdleCallback(doHydrate);
+        } else {
+          setTimeout(doHydrate, 200);
+        }
+        break;
+
+      case 'visible': {
+        const observer = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            observer.disconnect();
+            doHydrate();
+          }
+        });
+        observer.observe(el);
+        break;
+      }
+
+      case 'interaction': {
+        const hydrate = () => {
+          el.removeEventListener('click', hydrate);
+          el.removeEventListener('focus', hydrate);
+          el.removeEventListener('mouseenter', hydrate);
+          doHydrate();
+        };
+        el.addEventListener('click', hydrate, { once: true });
+        el.addEventListener('focus', hydrate, { once: true });
+        el.addEventListener('mouseenter', hydrate, { once: true });
+        break;
+      }
+
+      case 'media': {
+        if (!mediaQuery) { doHydrate(); break; }
+        const mq = window.matchMedia(mediaQuery);
+        if (mq.matches) {
+          queueMicrotask(doHydrate);
+        } else {
+          const checkMedia = () => {
+            if (mq.matches) {
+              mq.removeEventListener('change', checkMedia);
+              doHydrate();
+            }
+          };
+          mq.addEventListener('change', checkMedia);
+        }
+        break;
+      }
+
+      default:
+        // Unknown mode, hydrate immediately
+        queueMicrotask(doHydrate);
+    }
+  }
+
+  // Use ref callback to get the DOM element and schedule hydration
+  const refCallback = (el) => {
+    if (el) scheduleHydration(el);
+  };
+
+  // Return: show placeholder until hydrated, then show the real component
+  return h('div', { 'data-island': Component.name || 'Island', 'data-hydrate': mode, ref: refCallback },
+    hydrated() ? wrapper() : null
+  );
 }
-export function Match({ when, children }) {
-return { tag: Match, props: { when }, children, _vnode: true };
-}