what-core 0.2.0 → 0.4.0

package/dist/data.js

@@ -1,11 +1,84 @@
 // What Framework - Data Fetching
 // SWR-like data fetching with caching, revalidation, and optimistic updates
 
-import { signal, effect, batch, computed } from './reactive.js';
+import { signal, effect, batch, computed, __DEV__ } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
+
+// --- Reactive Cache ---
+// Each cache key maps to shared signals so all components reading the same key
+// see updates when ANY component mutates/revalidates that key.
+// Shared per key: data signal, error signal, isValidating signal.
+const cacheSignals = new Map();  // key -> signal(value)
+const errorSignals = new Map();  // key -> signal(error)
+const validatingSignals = new Map(); // key -> signal(boolean)
+const cacheTimestamps = new Map(); // key -> last access time (for LRU)
+const MAX_CACHE_SIZE = 200;
+
+function getCacheSignal(key) {
+  cacheTimestamps.set(key, Date.now());
+  if (!cacheSignals.has(key)) {
+    cacheSignals.set(key, signal(null));
+    // Evict oldest entries if cache exceeds limit
+    if (cacheSignals.size > MAX_CACHE_SIZE) {
+      evictOldest();
+    }
+  }
+  return cacheSignals.get(key);
+}
+
+function getErrorSignal(key) {
+  if (!errorSignals.has(key)) errorSignals.set(key, signal(null));
+  return errorSignals.get(key);
+}
+
+function getValidatingSignal(key) {
+  if (!validatingSignals.has(key)) validatingSignals.set(key, signal(false));
+  return validatingSignals.get(key);
+}
+
+function evictOldest() {
+  // Remove the 20% oldest entries
+  const entries = [...cacheTimestamps.entries()].sort((a, b) => a[1] - b[1]);
+  const toRemove = Math.floor(MAX_CACHE_SIZE * 0.2);
+  for (let i = 0; i < toRemove && i < entries.length; i++) {
+    const key = entries[i][0];
+    // Don't evict keys with active subscribers
+    if (revalidationSubscribers.has(key) && revalidationSubscribers.get(key).size > 0) continue;
+    cacheSignals.delete(key);
+    errorSignals.delete(key);
+    validatingSignals.delete(key);
+    cacheTimestamps.delete(key);
+    lastFetchTimestamps.delete(key);
+  }
+}
+
+// Subscribers for invalidation: key -> Set<revalidateFn>
+// When invalidateQueries is called, all subscribers re-fetch
+const revalidationSubscribers = new Map();
+
+function subscribeToKey(key, revalidateFn) {
+  if (!revalidationSubscribers.has(key)) revalidationSubscribers.set(key, new Set());
+  revalidationSubscribers.get(key).add(revalidateFn);
+  return () => {
+    const subs = revalidationSubscribers.get(key);
+    if (subs) {
+      subs.delete(revalidateFn);
+      if (subs.size === 0) revalidationSubscribers.delete(key);
+    }
+  };
+}
 
-// Global cache for requests
-const cache = new Map();
 const inFlightRequests = new Map();
+const lastFetchTimestamps = new Map(); // key -> timestamp of last completed fetch
+
+// Create an effect scoped to the current component's lifecycle.
+// When the component unmounts, the effect is automatically disposed.
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
 
 // --- useFetch Hook ---
 // Simple fetch with automatic JSON parsing and error handling
@@ -22,8 +95,14 @@ export function useFetch(url, options = {}) {
   const data = signal(initialData);
   const error = signal(null);
   const isLoading = signal(true);
+  let abortController = null;
 
   async function fetchData() {
+    // Abort previous request
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal: abortSignal } = abortController;
+
     isLoading.set(true);
     error.set(null);
 
@@ -35,6 +114,7 @@ export function useFetch(url, options = {}) {
           ...headers,
         },
         body: body ? JSON.stringify(body) : undefined,
+        signal: abortSignal,
       });
 
       if (!response.ok) {
@@ -42,17 +122,26 @@ export function useFetch(url, options = {}) {
       }
 
       const json = await response.json();
-      data.set(transform(json));
+      if (!abortSignal.aborted) {
+        data.set(transform(json));
+      }
     } catch (e) {
-      error.set(e);
+      if (!abortSignal.aborted) {
+        error.set(e);
+      }
     } finally {
-      isLoading.set(false);
+      if (!abortSignal.aborted) {
+        isLoading.set(false);
+      }
     }
   }
 
-  // Fetch on mount
-  effect(() => {
+  // Fetch on mount, abort on unmount
+  scopedEffect(() => {
     fetchData();
+    return () => {
+      if (abortController) abortController.abort();
+    };
   });
 
   return {
@@ -79,54 +168,96 @@ export function useSWR(key, fetcher, options = {}) {
     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());
+  // Support null/undefined/false key for conditional/dependent fetching
+  // When key is falsy, don't fetch — return idle state
+  if (key == null || key === false) {
+    const data = signal(fallbackData || null);
+    const error = signal(null);
+    return {
+      data: () => data(),
+      error: () => error(),
+      isLoading: () => false,
+      isValidating: () => false,
+      mutate: (newData) => data.set(typeof newData === 'function' ? newData(data()) : newData),
+      revalidate: () => Promise.resolve(),
+    };
+  }
+
+  // Shared reactive cache signals — all useSWR instances with the same key
+  // read from these signals, so mutating from one component updates all others.
+  const cacheS = getCacheSignal(key);
+  const error = getErrorSignal(key);
+  const isValidating = getValidatingSignal(key);
+  const data = computed(() => cacheS() ?? fallbackData ?? null);
+  const isLoading = computed(() => cacheS() == null && isValidating());
+
+  let abortController = null;
 
   async function revalidate() {
-    // Deduplication: if there's already a request in flight, wait for it
+    const now = Date.now();
+
+    // Deduplication: if there's already a request in flight, reuse it
     if (inFlightRequests.has(key)) {
-      const existingPromise = inFlightRequests.get(key);
-      const now = Date.now();
-      if (now - existingPromise.timestamp < dedupingInterval) {
-        return existingPromise.promise;
+      const existing = inFlightRequests.get(key);
+      if (now - existing.timestamp < dedupingInterval) {
+        return existing.promise;
       }
     }
 
+    // Also deduplicate against recently completed fetches
+    const lastFetch = lastFetchTimestamps.get(key);
+    if (lastFetch && now - lastFetch < dedupingInterval && cacheS.peek() != null) {
+      return cacheS.peek();
+    }
+
+    // Abort previous request
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal: abortSignal } = abortController;
+
     isValidating.set(true);
 
-    const promise = fetcher(key);
-    inFlightRequests.set(key, { promise, timestamp: Date.now() });
+    const promise = fetcher(key, { signal: abortSignal });
+    inFlightRequests.set(key, { promise, timestamp: now });
 
     try {
       const result = await promise;
+      if (abortSignal.aborted) return;
       batch(() => {
-        data.set(result);
+        cacheS.set(result); // Updates ALL components reading this key
         error.set(null);
-        cache.set(key, result);
       });
+      cacheTimestamps.set(key, Date.now());
+      lastFetchTimestamps.set(key, Date.now());
       if (onSuccess) onSuccess(result, key);
       return result;
     } catch (e) {
+      if (abortSignal.aborted) return;
       error.set(e);
       if (onError) onError(e, key);
       throw e;
     } finally {
-      isValidating.set(false);
+      if (!abortSignal.aborted) isValidating.set(false);
       inFlightRequests.delete(key);
     }
   }
 
+  // Subscribe to invalidation events for this key
+  const unsubscribe = subscribeToKey(key, () => revalidate().catch(() => {}));
+
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     revalidate().catch(() => {});
+    // Cleanup: abort and unsubscribe on unmount
+    return () => {
+      if (abortController) abortController.abort();
+      unsubscribe();
+    };
   });
 
   // Revalidate on focus
   if (revalidateOnFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           revalidate().catch(() => {});
@@ -139,7 +270,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Revalidate on reconnect
   if (revalidateOnReconnect && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => revalidate().catch(() => {});
       window.addEventListener('online', handler);
       return () => window.removeEventListener('online', handler);
@@ -148,7 +279,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Polling
   if (refreshInterval > 0) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         revalidate().catch(() => {});
       }, refreshInterval);
@@ -159,11 +290,12 @@ export function useSWR(key, fetcher, options = {}) {
   return {
     data: () => data(),
     error: () => error(),
-    isLoading,
+    isLoading: () => isLoading(),
     isValidating: () => isValidating(),
     mutate: (newData, shouldRevalidate = true) => {
-      data.set(typeof newData === 'function' ? newData(data()) : newData);
-      cache.set(key, data());
+      const resolved = typeof newData === 'function' ? newData(cacheS.peek()) : newData;
+      cacheS.set(resolved); // Updates ALL components reading this key
+      cacheTimestamps.set(key, Date.now());
       if (shouldRevalidate) {
         revalidate().catch(() => {});
       }
@@ -195,28 +327,34 @@ export function useQuery(options) {
 
   const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
 
-  const rawData = signal(cache.get(key) || null);
+  const cacheS = getCacheSignal(key);
   const data = computed(() => {
-    const d = rawData();
+    const d = cacheS();
     return select && d !== null ? select(d) : d;
   });
-  const error = signal(null);
-  const status = signal(cache.has(key) ? 'success' : 'loading');
+  const error = getErrorSignal(key);
+  const status = signal(cacheS.peek() != null ? 'success' : 'loading');
   const fetchStatus = signal('idle');
 
   let lastFetchTime = 0;
+  let abortController = null;
 
-  async function fetch() {
+  async function fetchQuery() {
     if (!enabled) return;
 
     // Check if data is still fresh
     const now = Date.now();
-    if (cache.has(key) && now - lastFetchTime < staleTime) {
-      return cache.get(key);
+    if (cacheS.peek() != null && now - lastFetchTime < staleTime) {
+      return cacheS.peek();
     }
 
+    // Abort previous request
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal: abortSignal } = abortController;
+
     fetchStatus.set('fetching');
-    if (!cache.has(key)) {
+    if (cacheS.peek() == null) {
       status.set('loading');
     }
 
@@ -224,31 +362,48 @@ export function useQuery(options) {
 
     async function attemptFetch() {
       try {
-        const result = await queryFn({ queryKey: Array.isArray(queryKey) ? queryKey : [queryKey] });
+        const result = await queryFn({ queryKey: Array.isArray(queryKey) ? queryKey : [queryKey], signal: abortSignal });
+        if (abortSignal.aborted) return;
         batch(() => {
-          rawData.set(result);
+          cacheS.set(result); // Updates all components reading this key
           error.set(null);
           status.set('success');
           fetchStatus.set('idle');
         });
-        cache.set(key, result);
         lastFetchTime = Date.now();
+        cacheTimestamps.set(key, Date.now());
 
         if (onSuccess) onSuccess(result);
         if (onSettled) onSettled(result, null);
 
-        // Schedule cache cleanup
+        // Schedule cache cleanup (only if no active subscribers)
         setTimeout(() => {
           if (Date.now() - lastFetchTime >= cacheTime) {
-            cache.delete(key);
+            const subs = revalidationSubscribers.get(key);
+            if (!subs || subs.size === 0) {
+              cacheSignals.delete(key);
+              errorSignals.delete(key);
+              validatingSignals.delete(key);
+              cacheTimestamps.delete(key);
+              lastFetchTimestamps.delete(key);
+            }
           }
         }, cacheTime);
 
         return result;
       } catch (e) {
+        if (abortSignal.aborted) return;
         attempts++;
         if (attempts < retry) {
-          await new Promise(r => setTimeout(r, retryDelay(attempts)));
+          // Abort-aware retry delay: cancel the wait if the component unmounts
+          await new Promise((resolve, reject) => {
+            const id = setTimeout(resolve, retryDelay(attempts));
+            abortSignal.addEventListener('abort', () => {
+              clearTimeout(id);
+              reject(new DOMException('Aborted', 'AbortError'));
+            }, { once: true });
+          }).catch(e => { if (e.name === 'AbortError') return; throw e; });
+          if (abortSignal.aborted) return;
           return attemptFetch();
         }
 
@@ -268,19 +423,26 @@ export function useQuery(options) {
     return attemptFetch();
   }
 
+  // Subscribe to invalidation events for this key
+  const unsubscribe = subscribeToKey(key, () => fetchQuery().catch(() => {}));
+
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     if (enabled) {
-      fetch().catch(() => {});
+      fetchQuery().catch(() => {});
     }
+    return () => {
+      if (abortController) abortController.abort();
+      unsubscribe();
+    };
   });
 
   // Refetch on focus
   if (refetchOnWindowFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
-          fetch().catch(() => {});
+          fetchQuery().catch(() => {});
         }
       };
       document.addEventListener('visibilitychange', handler);
@@ -290,9 +452,9 @@ export function useQuery(options) {
 
   // Polling
   if (refetchInterval) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
-        fetch().catch(() => {});
+        fetchQuery().catch(() => {});
       }, refetchInterval);
       return () => clearInterval(interval);
     });
@@ -307,7 +469,7 @@ export function useQuery(options) {
     isError: () => status() === 'error',
     isSuccess: () => status() === 'success',
     isFetching: () => fetchStatus() === 'fetching',
-    refetch: fetch,
+    refetch: fetchQuery,
   };
 }
 
@@ -332,8 +494,16 @@ export function useInfiniteQuery(options) {
   const isFetchingPreviousPage = signal(false);
 
   const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
+  let abortController = null;
+
+  let isRefetching = false;
 
   async function fetchPage(pageParam, direction = 'next') {
+    // Abort previous page fetch
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal: abortSignal } = abortController;
+
     const loading = direction === 'next' ? isFetchingNextPage : isFetchingPreviousPage;
     loading.set(true);
 
@@ -341,10 +511,19 @@ export function useInfiniteQuery(options) {
       const result = await queryFn({
         queryKey: Array.isArray(queryKey) ? queryKey : [queryKey],
         pageParam,
+        signal: abortSignal,
       });
 
+      if (abortSignal.aborted) return;
+
       batch(() => {
-        if (direction === 'next') {
+        if (isRefetching) {
+          // Refetch: replace all pages with fresh first page (SWR pattern —
+          // old pages stayed visible during fetch, now swap atomically)
+          pages.set([result]);
+          pageParams.set([pageParam]);
+          isRefetching = false;
+        } else if (direction === 'next') {
           pages.set([...pages.peek(), result]);
           pageParams.set([...pageParams.peek(), pageParam]);
         } else {
@@ -363,13 +542,16 @@ export function useInfiniteQuery(options) {
 
       return result;
     } finally {
-      loading.set(false);
+      if (!abortSignal.aborted) loading.set(false);
     }
   }
 
-  // Initial fetch
-  effect(() => {
+  // Initial fetch, abort on unmount
+  scopedEffect(() => {
     fetchPage(initialPageParam).catch(() => {});
+    return () => {
+      if (abortController) abortController.abort();
+    };
   });
 
   return {
@@ -393,8 +575,9 @@ export function useInfiniteQuery(options) {
       }
     },
     refetch: async () => {
-      pages.set([]);
-      pageParams.set([initialPageParam]);
+      // Keep old pages visible during refetch (SWR pattern).
+      // The fetchPage callback swaps them atomically when data arrives.
+      isRefetching = true;
       return fetchPage(initialPageParam);
     },
   };
@@ -402,33 +585,54 @@ export function useInfiniteQuery(options) {
 
 // --- Cache Management ---
 
-export function invalidateQueries(keyOrPredicate) {
+export function invalidateQueries(keyOrPredicate, options = {}) {
+  const { hard = false } = options;
+  const keysToInvalidate = [];
   if (typeof keyOrPredicate === 'function') {
-    for (const [key] of cache) {
-      if (keyOrPredicate(key)) {
-        cache.delete(key);
-      }
+    for (const [key] of cacheSignals) {
+      if (keyOrPredicate(key)) keysToInvalidate.push(key);
     }
   } else {
-    cache.delete(keyOrPredicate);
+    keysToInvalidate.push(keyOrPredicate);
+  }
+
+  for (const key of keysToInvalidate) {
+    // Hard invalidation clears data immediately (shows loading state)
+    // Soft invalidation (default) keeps stale data visible during re-fetch (SWR pattern)
+    if (hard && cacheSignals.has(key)) cacheSignals.get(key).set(null);
+    // Trigger all subscribers to re-fetch
+    const subs = revalidationSubscribers.get(key);
+    if (subs) {
+      for (const revalidate of subs) revalidate();
+    }
   }
 }
 
 export function prefetchQuery(key, fetcher) {
+  const cacheS = getCacheSignal(key);
   return fetcher(key).then(result => {
-    cache.set(key, result);
+    cacheS.set(result);
+    cacheTimestamps.set(key, Date.now());
     return result;
   });
 }
 
-export function setQueryData(key, data) {
-  cache.set(key, typeof data === 'function' ? data(cache.get(key)) : data);
+export function setQueryData(key, updater) {
+  const cacheS = getCacheSignal(key);
+  const current = cacheS.peek();
+  cacheS.set(typeof updater === 'function' ? updater(current) : updater);
+  cacheTimestamps.set(key, Date.now());
 }
 
 export function getQueryData(key) {
-  return cache.get(key);
+  return cacheSignals.has(key) ? cacheSignals.get(key).peek() : undefined;
 }
 
 export function clearCache() {
-  cache.clear();
+  cacheSignals.clear();
+  errorSignals.clear();
+  validatingSignals.clear();
+  cacheTimestamps.clear();
+  lastFetchTimestamps.clear();
+  inFlightRequests.clear();
 }