what-core 0.1.1 → 0.3.0

package/dist/data.js

@@ -0,0 +1,444 @@
+// What Framework - Data Fetching
+// SWR-like data fetching with caching, revalidation, and optimistic updates
+
+import { signal, effect, batch, computed } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
+
+// Global cache for requests
+const cache = new Map();
+const inFlightRequests = new Map();
+
+// 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
+
+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
+  scopedEffect(() => {
+    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
+  scopedEffect(() => {
+    revalidate().catch(() => {});
+  });
+
+  // Revalidate on focus
+  if (revalidateOnFocus && typeof window !== 'undefined') {
+    scopedEffect(() => {
+      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') {
+    scopedEffect(() => {
+      const handler = () => revalidate().catch(() => {});
+      window.addEventListener('online', handler);
+      return () => window.removeEventListener('online', handler);
+    });
+  }
+
+  // Polling
+  if (refreshInterval > 0) {
+    scopedEffect(() => {
+      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
+  scopedEffect(() => {
+    if (enabled) {
+      fetch().catch(() => {});
+    }
+  });
+
+  // Refetch on focus
+  if (refetchOnWindowFocus && typeof window !== 'undefined') {
+    scopedEffect(() => {
+      const handler = () => {
+        if (document.visibilityState === 'visible') {
+          fetch().catch(() => {});
+        }
+      };
+      document.addEventListener('visibilitychange', handler);
+      return () => document.removeEventListener('visibilitychange', handler);
+    });
+  }
+
+  // Polling
+  if (refetchInterval) {
+    scopedEffect(() => {
+      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
+  scopedEffect(() => {
+    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();
+}