what-core 0.1.0

package/src/components.js

@@ -0,0 +1,204 @@
+// 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;
+}
+
+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;
+}
+
+// --- 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;
+          // 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();
+
+  // 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);
+
+  // 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;
+}
+
+// Helper to report error to nearest boundary
+export function reportError(error) {
+  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 }) {
+  // 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;
+
+  // 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;
+      }
+    }
+  }
+
+  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 };
+}

package/src/data.js

@@ -0,0 +1,434 @@
+// What Framework - Data Fetching
+// SWR-like data fetching with caching, revalidation, and optimistic updates
+
+import { signal, effect, batch, computed } from './reactive.js';
+
+// Global cache for requests
+const cache = new Map();
+const inFlightRequests = new Map();
+
+// --- useFetch Hook ---
+// Simple fetch with automatic JSON parsing and error handling
+
+export function useFetch(url, options = {}) {
+  const {
+    method = 'GET',
+    body,
+    headers = {},
+    transform = (data) => data,
+    initialData = null,
+  } = options;
+
+  const data = signal(initialData);
+  const error = signal(null);
+  const isLoading = signal(true);
+
+  async function fetchData() {
+    isLoading.set(true);
+    error.set(null);
+
+    try {
+      const response = await fetch(url, {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...headers,
+        },
+        body: body ? JSON.stringify(body) : undefined,
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const json = await response.json();
+      data.set(transform(json));
+    } catch (e) {
+      error.set(e);
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  // Fetch on mount
+  effect(() => {
+    fetchData();
+  });
+
+  return {
+    data: () => data(),
+    error: () => error(),
+    isLoading: () => isLoading(),
+    refetch: fetchData,
+    mutate: (newData) => data.set(newData),
+  };
+}
+
+// --- useSWR Hook ---
+// Stale-while-revalidate pattern with caching
+
+export function useSWR(key, fetcher, options = {}) {
+  const {
+    revalidateOnFocus = true,
+    revalidateOnReconnect = true,
+    refreshInterval = 0,
+    dedupingInterval = 2000,
+    fallbackData,
+    onSuccess,
+    onError,
+    suspense = false,
+  } = options;
+
+  // Reactive state
+  const data = signal(cache.get(key) || fallbackData || null);
+  const error = signal(null);
+  const isValidating = signal(false);
+  const isLoading = computed(() => !data() && isValidating());
+
+  async function revalidate() {
+    // Deduplication: if there's already a request in flight, wait for it
+    if (inFlightRequests.has(key)) {
+      const existingPromise = inFlightRequests.get(key);
+      const now = Date.now();
+      if (now - existingPromise.timestamp < dedupingInterval) {
+        return existingPromise.promise;
+      }
+    }
+
+    isValidating.set(true);
+
+    const promise = fetcher(key);
+    inFlightRequests.set(key, { promise, timestamp: Date.now() });
+
+    try {
+      const result = await promise;
+      batch(() => {
+        data.set(result);
+        error.set(null);
+        cache.set(key, result);
+      });
+      if (onSuccess) onSuccess(result, key);
+      return result;
+    } catch (e) {
+      error.set(e);
+      if (onError) onError(e, key);
+      throw e;
+    } finally {
+      isValidating.set(false);
+      inFlightRequests.delete(key);
+    }
+  }
+
+  // Initial fetch
+  effect(() => {
+    revalidate().catch(() => {});
+  });
+
+  // Revalidate on focus
+  if (revalidateOnFocus && typeof window !== 'undefined') {
+    effect(() => {
+      const handler = () => {
+        if (document.visibilityState === 'visible') {
+          revalidate().catch(() => {});
+        }
+      };
+      document.addEventListener('visibilitychange', handler);
+      return () => document.removeEventListener('visibilitychange', handler);
+    });
+  }
+
+  // Revalidate on reconnect
+  if (revalidateOnReconnect && typeof window !== 'undefined') {
+    effect(() => {
+      const handler = () => revalidate().catch(() => {});
+      window.addEventListener('online', handler);
+      return () => window.removeEventListener('online', handler);
+    });
+  }
+
+  // Polling
+  if (refreshInterval > 0) {
+    effect(() => {
+      const interval = setInterval(() => {
+        revalidate().catch(() => {});
+      }, refreshInterval);
+      return () => clearInterval(interval);
+    });
+  }
+
+  return {
+    data: () => data(),
+    error: () => error(),
+    isLoading,
+    isValidating: () => isValidating(),
+    mutate: (newData, shouldRevalidate = true) => {
+      data.set(typeof newData === 'function' ? newData(data()) : newData);
+      cache.set(key, data());
+      if (shouldRevalidate) {
+        revalidate().catch(() => {});
+      }
+    },
+    revalidate,
+  };
+}
+
+// --- useQuery Hook ---
+// TanStack Query-like API
+
+export function useQuery(options) {
+  const {
+    queryKey,
+    queryFn,
+    enabled = true,
+    staleTime = 0,
+    cacheTime = 5 * 60 * 1000,
+    refetchOnWindowFocus = true,
+    refetchInterval = false,
+    retry = 3,
+    retryDelay = (attempt) => Math.min(1000 * 2 ** attempt, 30000),
+    onSuccess,
+    onError,
+    onSettled,
+    select,
+    placeholderData,
+  } = options;
+
+  const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
+
+  const rawData = signal(cache.get(key) || null);
+  const data = computed(() => {
+    const d = rawData();
+    return select && d !== null ? select(d) : d;
+  });
+  const error = signal(null);
+  const status = signal(cache.has(key) ? 'success' : 'loading');
+  const fetchStatus = signal('idle');
+
+  let lastFetchTime = 0;
+
+  async function fetch() {
+    if (!enabled) return;
+
+    // Check if data is still fresh
+    const now = Date.now();
+    if (cache.has(key) && now - lastFetchTime < staleTime) {
+      return cache.get(key);
+    }
+
+    fetchStatus.set('fetching');
+    if (!cache.has(key)) {
+      status.set('loading');
+    }
+
+    let attempts = 0;
+
+    async function attemptFetch() {
+      try {
+        const result = await queryFn({ queryKey: Array.isArray(queryKey) ? queryKey : [queryKey] });
+        batch(() => {
+          rawData.set(result);
+          error.set(null);
+          status.set('success');
+          fetchStatus.set('idle');
+        });
+        cache.set(key, result);
+        lastFetchTime = Date.now();
+
+        if (onSuccess) onSuccess(result);
+        if (onSettled) onSettled(result, null);
+
+        // Schedule cache cleanup
+        setTimeout(() => {
+          if (Date.now() - lastFetchTime >= cacheTime) {
+            cache.delete(key);
+          }
+        }, cacheTime);
+
+        return result;
+      } catch (e) {
+        attempts++;
+        if (attempts < retry) {
+          await new Promise(r => setTimeout(r, retryDelay(attempts)));
+          return attemptFetch();
+        }
+
+        batch(() => {
+          error.set(e);
+          status.set('error');
+          fetchStatus.set('idle');
+        });
+
+        if (onError) onError(e);
+        if (onSettled) onSettled(null, e);
+
+        throw e;
+      }
+    }
+
+    return attemptFetch();
+  }
+
+  // Initial fetch
+  effect(() => {
+    if (enabled) {
+      fetch().catch(() => {});
+    }
+  });
+
+  // Refetch on focus
+  if (refetchOnWindowFocus && typeof window !== 'undefined') {
+    effect(() => {
+      const handler = () => {
+        if (document.visibilityState === 'visible') {
+          fetch().catch(() => {});
+        }
+      };
+      document.addEventListener('visibilitychange', handler);
+      return () => document.removeEventListener('visibilitychange', handler);
+    });
+  }
+
+  // Polling
+  if (refetchInterval) {
+    effect(() => {
+      const interval = setInterval(() => {
+        fetch().catch(() => {});
+      }, refetchInterval);
+      return () => clearInterval(interval);
+    });
+  }
+
+  return {
+    data: () => data() ?? placeholderData,
+    error: () => error(),
+    status: () => status(),
+    fetchStatus: () => fetchStatus(),
+    isLoading: () => status() === 'loading',
+    isError: () => status() === 'error',
+    isSuccess: () => status() === 'success',
+    isFetching: () => fetchStatus() === 'fetching',
+    refetch: fetch,
+  };
+}
+
+// --- useInfiniteQuery Hook ---
+// For paginated/infinite scroll data
+
+export function useInfiniteQuery(options) {
+  const {
+    queryKey,
+    queryFn,
+    getNextPageParam,
+    getPreviousPageParam,
+    initialPageParam,
+    ...rest
+  } = options;
+
+  const pages = signal([]);
+  const pageParams = signal([initialPageParam]);
+  const hasNextPage = signal(true);
+  const hasPreviousPage = signal(false);
+  const isFetchingNextPage = signal(false);
+  const isFetchingPreviousPage = signal(false);
+
+  const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
+
+  async function fetchPage(pageParam, direction = 'next') {
+    const loading = direction === 'next' ? isFetchingNextPage : isFetchingPreviousPage;
+    loading.set(true);
+
+    try {
+      const result = await queryFn({
+        queryKey: Array.isArray(queryKey) ? queryKey : [queryKey],
+        pageParam,
+      });
+
+      batch(() => {
+        if (direction === 'next') {
+          pages.set([...pages.peek(), result]);
+          pageParams.set([...pageParams.peek(), pageParam]);
+        } else {
+          pages.set([result, ...pages.peek()]);
+          pageParams.set([pageParam, ...pageParams.peek()]);
+        }
+
+        const nextParam = getNextPageParam?.(result, pages.peek());
+        hasNextPage.set(nextParam !== undefined);
+
+        if (getPreviousPageParam) {
+          const prevParam = getPreviousPageParam(result, pages.peek());
+          hasPreviousPage.set(prevParam !== undefined);
+        }
+      });
+
+      return result;
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  // Initial fetch
+  effect(() => {
+    fetchPage(initialPageParam).catch(() => {});
+  });
+
+  return {
+    data: () => ({ pages: pages(), pageParams: pageParams() }),
+    hasNextPage: () => hasNextPage(),
+    hasPreviousPage: () => hasPreviousPage(),
+    isFetchingNextPage: () => isFetchingNextPage(),
+    isFetchingPreviousPage: () => isFetchingPreviousPage(),
+    fetchNextPage: async () => {
+      const lastPage = pages.peek()[pages.peek().length - 1];
+      const nextParam = getNextPageParam?.(lastPage, pages.peek());
+      if (nextParam !== undefined) {
+        return fetchPage(nextParam, 'next');
+      }
+    },
+    fetchPreviousPage: async () => {
+      const firstPage = pages.peek()[0];
+      const prevParam = getPreviousPageParam?.(firstPage, pages.peek());
+      if (prevParam !== undefined) {
+        return fetchPage(prevParam, 'previous');
+      }
+    },
+    refetch: async () => {
+      pages.set([]);
+      pageParams.set([initialPageParam]);
+      return fetchPage(initialPageParam);
+    },
+  };
+}
+
+// --- Cache Management ---
+
+export function invalidateQueries(keyOrPredicate) {
+  if (typeof keyOrPredicate === 'function') {
+    for (const [key] of cache) {
+      if (keyOrPredicate(key)) {
+        cache.delete(key);
+      }
+    }
+  } else {
+    cache.delete(keyOrPredicate);
+  }
+}
+
+export function prefetchQuery(key, fetcher) {
+  return fetcher(key).then(result => {
+    cache.set(key, result);
+    return result;
+  });
+}
+
+export function setQueryData(key, data) {
+  cache.set(key, typeof data === 'function' ? data(cache.get(key)) : data);
+}
+
+export function getQueryData(key) {
+  return cache.get(key);
+}
+
+export function clearCache() {
+  cache.clear();
+}