@swoff/cli 0.3.9 → 0.3.11

package/templates/hooks/useCachedFetch.jsx

@@ -1,69 +0,0 @@
-import { useState, useEffect, useCallback, startTransition } from "react";
-import { fetchWithCache } from "../fetch-wrapper.js";
-import { generateTags } from "../invalidation-tags.js";
-
-export function useCachedFetch(url, options = {}) {
-  const [data, setData] = useState(null);
-  const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [refetchCount, setRefetchCount] = useState(0);
-
-  const refetch = useCallback(() => setRefetchCount((c) => c + 1), []);
-
-  const isEnabled = options.enabled !== false && url != null;
-
-  useEffect(() => {
-    if (!isEnabled) {
-      startTransition(() => setLoading(false));
-      return;
-    }
-    let cancelled = false;
-    const controller = new AbortController();
-    startTransition(() => setLoading(true));
-
-    const doFetch = async () => {
-      try {
-        const { response } = await fetchWithCache(url, {
-          ...options,
-          signal: controller.signal,
-        });
-        if (cancelled) return;
-        if (response) {
-          setData(await response.json());
-        } else {
-          setData(null);
-        }
-        if (!cancelled) setError(null);
-      } catch (err) {
-        if (!cancelled && err instanceof DOMException && err.name === "AbortError") return;
-        if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-
-    doFetch();
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [url, refetchCount, isEnabled]);
-
-  // Auto-refetch on cache invalidation
-  useEffect(() => {
-    if (!isEnabled) return;
-    const onInvalidated = (e) => {
-      const detail = e.detail;
-      const tags = detail?.tags;
-      if (!tags || !Array.isArray(tags)) return;
-      const urlTags = generateTags(url);
-      if (tags.some((t) => urlTags.includes(t))) {
-        setRefetchCount((c) => c + 1);
-      }
-    };
-    window.addEventListener("cache-invalidated", onInvalidated);
-    return () => window.removeEventListener("cache-invalidated", onInvalidated);
-  }, [url, isEnabled]);
-
-  return { data, error, loading, refetch };
-}

package/templates/hooks/useCachedFetch.tsx

@@ -1,81 +0,0 @@
-import {
-  useState,
-  useEffect,
-  useCallback,
-  startTransition,
-} from "react";
-import { fetchWithCache } from "../fetch-wrapper.ts";
-import { generateTags } from "../invalidation-tags.ts";
-import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
-
-export function useCachedFetch<T>(
-  url: string | null,
-  options: FetchWithCacheOptions & {
-    enabled?: boolean;
-  } = {},
-) {
-  const [data, setData] = useState<T | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [refetchCount, setRefetchCount] = useState(0);
-
-  const refetch = useCallback(() => setRefetchCount((c) => c + 1), []);
-
-  const isEnabled = options.enabled !== false && url != null;
-
-  useEffect(() => {
-    if (!isEnabled) {
-      startTransition(() => setLoading(false));
-      return;
-    }
-    let cancelled = false;
-    const controller = new AbortController();
-    startTransition(() => setLoading(true));
-
-    const doFetch = async () => {
-      try {
-        const { response } = await fetchWithCache(url, {
-          ...options,
-          signal: controller.signal,
-        });
-        if (cancelled) return;
-        if (response) {
-          setData(await response.json());
-        } else {
-          setData(null);
-        }
-        if (!cancelled) setError(null);
-      } catch (err) {
-        if (!cancelled && err instanceof DOMException && err.name === "AbortError") return;
-        if (!cancelled)
-          setError(err instanceof Error ? err : new Error(String(err)));
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-
-    doFetch();
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [url, refetchCount, isEnabled]);
-
-  // Auto-refetch on cache invalidation
-  useEffect(() => {
-    if (!isEnabled) return;
-    const onInvalidated = (e: Event) => {
-      const detail = (e as CustomEvent).detail;
-      const tags = detail?.tags;
-      if (!tags || !Array.isArray(tags)) return;
-      const urlTags = generateTags(url!);
-      if (tags.some((t: string) => urlTags.includes(t))) {
-        setRefetchCount((c) => c + 1);
-      }
-    };
-    window.addEventListener("cache-invalidated", onInvalidated);
-    return () => window.removeEventListener("cache-invalidated", onInvalidated);
-  }, [url, isEnabled]);
-
-  return { data, error, loading, refetch };
-}

package/templates/hooks/useMutation.jsx

@@ -1,76 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { fetchWithCache } from "../fetch-wrapper.js";
-import {
-  trackMutation,
-  resolveMutation,
-  rejectMutation,
-} from "../mutation-state.js";
-
-export function useMutation(options = {}) {
-  const [state, setState] = useState({
-    data: null,
-    error: null,
-    isLoading: false,
-    isError: false,
-    isSuccess: false,
-  });
-
-  const optionsRef = useRef(options);
-
-  useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
-
-  const mutate = useCallback(async (url, fetchOptions = {}) => {
-    const mutationId = "mut-" + crypto.randomUUID();
-    trackMutation(mutationId, "pending");
-    setState({
-      data: null,
-      error: null,
-      isLoading: true,
-      isError: false,
-      isSuccess: false,
-    });
-
-    try {
-      const { response } = await fetchWithCache(url, fetchOptions);
-      const data = await response.json();
-      resolveMutation(mutationId, data);
-      setState({
-        data,
-        error: null,
-        isLoading: false,
-        isError: false,
-        isSuccess: true,
-      });
-      optionsRef.current.onSuccess?.(data);
-      optionsRef.current.onSettled?.();
-      return data;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      rejectMutation(mutationId, error);
-      setState({
-        data: null,
-        error,
-        isLoading: false,
-        isError: true,
-        isSuccess: false,
-      });
-      optionsRef.current.onError?.(error);
-      optionsRef.current.onSettled?.();
-      return null;
-    }
-  }, []);
-
-  const reset = useCallback(() => {
-    setState({
-      data: null,
-      error: null,
-      isLoading: false,
-      isError: false,
-      isSuccess: false,
-    });
-  }, []);
-
-  return { ...state, mutate, reset };
-}

package/templates/hooks/useMutation.tsx

@@ -1,109 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { fetchWithCache } from "../fetch-wrapper.ts";
-import {
-  trackMutation,
-  resolveMutation,
-  rejectMutation,
-} from "../mutation-state.ts";
-import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
-
-export interface UseMutationOptions<TData> {
-  onSuccess?: (data: TData) => void;
-  onError?: (error: Error) => void;
-  onSettled?: () => void;
-}
-
-export function useMutation<TData = unknown>(
-  options: UseMutationOptions<TData> = {},
-) {
-  const [state, setState] = useState<{
-    data: TData | null;
-    error: Error | null;
-    isLoading: boolean;
-    isError: boolean;
-    isSuccess: boolean;
-  }>({
-    data: null,
-    error: null,
-    isLoading: false,
-    isError: false,
-    isSuccess: false,
-  });
-
-  const optionsRef = useRef(options);
-
-  useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
-
-  const mutate = useCallback(
-    async (
-      url: string,
-      fetchOptions: FetchWithCacheOptions = {},
-    ): Promise<TData | null> => {
-      const mutationId = "mut-" + crypto.randomUUID();
-      trackMutation(mutationId, "pending");
-      setState({
-        data: null,
-        error: null,
-        isLoading: true,
-        isError: false,
-        isSuccess: false,
-      });
-
-      try {
-        const { response, queued } = await fetchWithCache<TData>(url, fetchOptions);
-        if (queued) {
-          resolveMutation(mutationId, null);
-          setState({
-            data: null,
-            error: null,
-            isLoading: false,
-            isError: false,
-            isSuccess: false,
-          });
-          optionsRef.current.onSettled?.();
-          return null;
-        }
-        const data: TData = await response.json();
-        resolveMutation(mutationId, data);
-        setState({
-          data,
-          error: null,
-          isLoading: false,
-          isError: false,
-          isSuccess: true,
-        });
-        optionsRef.current.onSuccess?.(data);
-        optionsRef.current.onSettled?.();
-        return data;
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        rejectMutation(mutationId, error);
-        setState({
-          data: null,
-          error,
-          isLoading: false,
-          isError: true,
-          isSuccess: false,
-        });
-        optionsRef.current.onError?.(error);
-        optionsRef.current.onSettled?.();
-        return null;
-      }
-    },
-    [],
-  );
-
-  const reset = useCallback(() => {
-    setState({
-      data: null,
-      error: null,
-      isLoading: false,
-      isError: false,
-      isSuccess: false,
-    });
-  }, []);
-
-  return { ...state, mutate, reset };
-}

package/templates/hooks/useMutationQueue.jsx

@@ -1,43 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { getPendingCount, getQueueItems } from "../mutation-queue.js";
-
-export function useMutationQueue() {
-  const [state, setState] = useState({
-    pending: 0,
-    items: [],
-    lastSync: null,
-  });
-
-  const refresh = useCallback(async () => {
-    const [count, items] = await Promise.all([
-      getPendingCount(),
-      getQueueItems(),
-    ]);
-    setState((s) => ({ ...s, pending: count, items }));
-  }, []);
-
-  useEffect(() => {
-    // Defer initial data load to avoid cascading render warning
-    queueMicrotask(() => refresh());
-
-    const onSync = (e) => {
-      refresh();
-      setState((s) => ({
-        ...s,
-        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
-      }));
-    };
-    const onChange = () => {
-      refresh();
-    };
-
-    window.addEventListener("mutation-sync-complete", onSync);
-    window.addEventListener("mutation-queue-changed", onChange);
-    return () => {
-      window.removeEventListener("mutation-sync-complete", onSync);
-      window.removeEventListener("mutation-queue-changed", onChange);
-    };
-  }, [refresh]);
-
-  return state;
-}

package/templates/hooks/useMutationQueue.tsx

@@ -1,50 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { getPendingCount, getQueueItems } from "../mutation-queue.ts";
-import type { MutationQueueItem } from "../swoff.d.ts";
-
-export interface MutationQueueState {
-  pending: number;
-  items: MutationQueueItem[];
-  lastSync: { succeeded: number; failed: number } | null;
-}
-
-export function useMutationQueue() {
-  const [state, setState] = useState<MutationQueueState>({
-    pending: 0,
-    items: [],
-    lastSync: null,
-  });
-
-  const refresh = useCallback(async () => {
-    const [count, items] = await Promise.all([
-      getPendingCount(),
-      getQueueItems(),
-    ]);
-    setState((s) => ({ ...s, pending: count, items }));
-  }, []);
-
-  useEffect(() => {
-    // Defer initial data load to avoid cascading render warning
-    queueMicrotask(() => refresh());
-
-    const onSync = (e: CustomEvent) => {
-      refresh();
-      setState((s) => ({
-        ...s,
-        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
-      }));
-    };
-    const onChange = () => {
-      refresh();
-    };
-
-    window.addEventListener("mutation-sync-complete", onSync);
-    window.addEventListener("mutation-queue-changed", onChange);
-    return () => {
-      window.removeEventListener("mutation-sync-complete", onSync);
-      window.removeEventListener("mutation-queue-changed", onChange);
-    };
-  }, [refresh]);
-
-  return state;
-}

package/templates/hooks/useNetworkStatus.jsx

@@ -1,19 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useNetworkStatus() {
-  const [online, setOnline] = useState(navigator.onLine);
-
-  useEffect(() => {
-    const onOnline = () => setOnline(true);
-    const onOffline = () => setOnline(false);
-
-    window.addEventListener("online", onOnline);
-    window.addEventListener("offline", onOffline);
-    return () => {
-      window.removeEventListener("online", onOnline);
-      window.removeEventListener("offline", onOffline);
-    };
-  }, []);
-
-  return online;
-}

package/templates/hooks/useNetworkStatus.tsx

@@ -1,19 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useNetworkStatus() {
-  const [online, setOnline] = useState(navigator.onLine);
-
-  useEffect(() => {
-    const onOnline = () => setOnline(true);
-    const onOffline = () => setOnline(false);
-
-    window.addEventListener("online", onOnline);
-    window.addEventListener("offline", onOffline);
-    return () => {
-      window.removeEventListener("online", onOnline);
-      window.removeEventListener("offline", onOffline);
-    };
-  }, []);
-
-  return online;
-}

package/templates/hooks/usePrefetch.jsx

@@ -1,10 +0,0 @@
-import { useCallback } from "react";
-import { prefetchCache } from "../fetch-wrapper.js";
-
-export function usePrefetch() {
-  const prefetch = useCallback((url, options) => {
-    prefetchCache(url, options);
-  }, []);
-
-  return prefetch;
-}

package/templates/hooks/usePrefetch.tsx

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-import { prefetchCache } from "../fetch-wrapper.ts";
-import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
-
-/**
- * Hook that returns a stable prefetch callback for warming the SW cache.
- * Useful for route-level prefetching, link hover prefetching, etc.
- *
- * Usage:
- *   const prefetch = usePrefetch();
- *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
- */
-export function usePrefetch(): (
-  url: string,
-  options?: FetchWithCacheOptions,
-) => void {
-  const prefetch = useCallback(
-    (url: string, options?: FetchWithCacheOptions) => {
-      prefetchCache(url, options);
-    },
-    [],
-  );
-
-  return prefetch;
-}