@swoff/cli 0.3.7 → 0.3.9

package/templates/hooks/useCachedFetch.tsx

@@ -2,34 +2,42 @@ import {
   useState,
   useEffect,
   useCallback,
-  useRef,
   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,
-  options: Parameters<typeof fetchWithCache>[1] = {},
+  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 optionsRef = useRef(options);
-  useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
 
   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, optionsRef.current);
+        const { response } = await fetchWithCache(url, {
+          ...options,
+          signal: controller.signal,
+        });
         if (cancelled) return;
         if (response) {
           setData(await response.json());
@@ -38,6 +46,7 @@ export function useCachedFetch<T>(
         }
         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 {
@@ -48,22 +57,25 @@ export function useCachedFetch<T>(
     doFetch();
     return () => {
       cancelled = true;
+      controller.abort();
     };
-  }, [url, refetchCount]);
+  }, [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);
+      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]);
+  }, [url, isEnabled]);
 
   return { data, error, loading, refetch };
 }

package/templates/hooks/useMutation.jsx

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,109 @@
+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,25 +1,34 @@
-import { useState, useEffect } from "react";
-import { getPendingCount } from "../mutation-queue.js";
+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(() => {
-    getPendingCount().then((count) => setState((s) => ({ ...s, pending: count })));
+    // Defer initial data load to avoid cascading render warning
+    queueMicrotask(() => refresh());
 
     const onSync = (e) => {
-      getPendingCount().then((count) => {
-        setState({
-          pending: count,
-          lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
-        });
-      });
+      refresh();
+      setState((s) => ({
+        ...s,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
     };
     const onChange = () => {
-      getPendingCount().then((count) => setState((s) => ({ ...s, pending: count })));
+      refresh();
     };
 
     window.addEventListener("mutation-sync-complete", onSync);
@@ -28,7 +37,7 @@ export function useMutationQueue() {
       window.removeEventListener("mutation-sync-complete", onSync);
       window.removeEventListener("mutation-queue-changed", onChange);
     };
-  }, []);
+  }, [refresh]);
 
   return state;
 }

package/templates/hooks/useMutationQueue.tsx

@@ -1,25 +1,41 @@
-import { useState, useEffect } from "react";
-import { getPendingCount } from "../mutation-queue.ts";
+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<{
-    pending: number;
-    lastSync: { succeeded: number; failed: number } | null;
-  }>({ pending: 0, lastSync: null });
+  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(() => {
-    getPendingCount().then((count: number) => setState((s) => ({ ...s, pending: count })));
+    // Defer initial data load to avoid cascading render warning
+    queueMicrotask(() => refresh());
 
     const onSync = (e: CustomEvent) => {
-      getPendingCount().then((count: number) => {
-        setState({
-          pending: count,
-          lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
-        });
-      });
+      refresh();
+      setState((s) => ({
+        ...s,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
     };
     const onChange = () => {
-      getPendingCount().then((count: number) => setState((s) => ({ ...s, pending: count })));
+      refresh();
     };
 
     window.addEventListener("mutation-sync-complete", onSync);
@@ -28,7 +44,7 @@ export function useMutationQueue() {
       window.removeEventListener("mutation-sync-complete", onSync);
       window.removeEventListener("mutation-queue-changed", onChange);
     };
-  }, []);
+  }, [refresh]);
 
   return state;
 }

package/templates/hooks/useMutationState.jsx

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from "react";
+import { getMutationState, onMutationStateChange } from "../mutation-state.js";
+
+function subscribeToMutations(cb) {
+  return onMutationStateChange(() => cb());
+}
+
+export function useMutationState(id) {
+  return useSyncExternalStore(
+    subscribeToMutations,
+    () => (id ? getMutationState(id) ?? null : null),
+  );
+}

package/templates/hooks/useMutationState.tsx

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from "react";
+import {
+  getMutationState,
+  onMutationStateChange,
+} from "../mutation-state.ts";
+import type { MutationState } from "../mutation-state.ts";
+
+function subscribeToMutations(cb: () => void) {
+  return onMutationStateChange(() => cb());
+}
+
+/**
+ * Hook that subscribes to a specific mutation's state changes.
+ * Useful for showing per-mutation loading spinners, error states, etc.
+ *
+ * Usage:
+ *   const mutation = useMutationState(mutationId);
+ *   if (mutation?.status === "error") { ... }
+ */
+export function useMutationState(id: string | null): MutationState | null {
+  return useSyncExternalStore(
+    subscribeToMutations,
+    () => (id ? getMutationState(id) ?? null : null),
+  );
+}

package/templates/hooks/usePrefetch.jsx

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,25 @@
+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;
+}

package/templates/hooks/usePushSubscription.jsx

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../push.js";
 
-export function usePushSubscription(vapidPublicKey) {
+export function usePushSubscription() {
   const [state, setState] = useState({
     subscribed: false,
     subscription: null,
@@ -55,9 +55,9 @@ export function usePushSubscription(vapidPublicKey) {
   }, []);
 
   const subscribe = useCallback(async () => {
-    const sub = await subscribeToPush(vapidPublicKey);
+    const sub = await subscribeToPush();
     return sub !== null;
-  }, [vapidPublicKey]);
+  }, []);
 
   const unsubscribe = useCallback(async () => {
     await unsubscribeFromPush();

package/templates/hooks/usePushSubscription.tsx

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../push.ts";
 
-export function usePushSubscription(vapidPublicKey: string) {
+export function usePushSubscription() {
   const [state, setState] = useState({
     subscribed: false,
     subscription: null as PushSubscription | null,
@@ -55,9 +55,9 @@ export function usePushSubscription(vapidPublicKey: string) {
   }, []);
 
   const subscribe = useCallback(async () => {
-    const sub = await subscribeToPush(vapidPublicKey);
+    const sub = await subscribeToPush();
     return sub !== null;
-  }, [vapidPublicKey]);
+  }, []);
 
   const unsubscribe = useCallback(async () => {
     await unsubscribeFromPush();