@swoff/cli 0.3.8 → 0.3.9

package/templates/hooks/useCachedFetch.tsx

@@ -2,7 +2,6 @@ import {
   useState,
   useEffect,
   useCallback,
-  useRef,
   startTransition,
 } from "react";
 import { fetchWithCache } from "../fetch-wrapper.ts";
@@ -12,9 +11,6 @@ import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
 export function useCachedFetch<T>(
   url: string | null,
   options: FetchWithCacheOptions & {
-    refetchOnWindowFocus?: boolean;
-    refetchOnReconnect?: boolean;
-    refetchInterval?: number;
     enabled?: boolean;
   } = {},
 ) {
@@ -22,10 +18,6 @@ export function useCachedFetch<T>(
   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), []);
 
@@ -33,7 +25,7 @@ export function useCachedFetch<T>(
 
   useEffect(() => {
     if (!isEnabled) {
-      setLoading(false);
+      startTransition(() => setLoading(false));
       return;
     }
     let cancelled = false;
@@ -43,7 +35,7 @@ export function useCachedFetch<T>(
     const doFetch = async () => {
       try {
         const { response } = await fetchWithCache(url, {
-          ...optionsRef.current,
+          ...options,
           signal: controller.signal,
         });
         if (cancelled) return;
@@ -85,28 +77,5 @@ export function useCachedFetch<T>(
     return () => window.removeEventListener("cache-invalidated", onInvalidated);
   }, [url, isEnabled]);
 
-  // Auto-refetch on window focus
-  useEffect(() => {
-    if (!options.refetchOnWindowFocus || !isEnabled) return;
-    const onFocus = () => refetch();
-    window.addEventListener("focus", onFocus);
-    return () => window.removeEventListener("focus", onFocus);
-  }, [options.refetchOnWindowFocus, refetch, isEnabled]);
-
-  // Auto-refetch on reconnect
-  useEffect(() => {
-    if (!options.refetchOnReconnect || !isEnabled) return;
-    const onOnline = () => refetch();
-    window.addEventListener("online", onOnline);
-    return () => window.removeEventListener("online", onOnline);
-  }, [options.refetchOnReconnect, refetch, isEnabled]);
-
-  // Auto-refetch on interval
-  useEffect(() => {
-    if (!options.refetchInterval || options.refetchInterval <= 0 || !isEnabled) return;
-    const id = setInterval(refetch, options.refetchInterval * 1000);
-    return () => clearInterval(id);
-  }, [options.refetchInterval, refetch, isEnabled]);
-
   return { data, error, loading, refetch };
 }

package/templates/hooks/useMutation.tsx

@@ -52,7 +52,19 @@ export function useMutation<TData = unknown>(
       });
 
       try {
-        const { response } = await fetchWithCache<TData>(url, fetchOptions);
+        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({

package/templates/hooks/useMutationQueue.jsx

@@ -17,7 +17,8 @@ export function useMutationQueue() {
   }, []);
 
   useEffect(() => {
-    refresh();
+    // Defer initial data load to avoid cascading render warning
+    queueMicrotask(() => refresh());
 
     const onSync = (e) => {
       refresh();

package/templates/hooks/useMutationQueue.tsx

@@ -24,7 +24,8 @@ export function useMutationQueue() {
   }, []);
 
   useEffect(() => {
-    refresh();
+    // Defer initial data load to avoid cascading render warning
+    queueMicrotask(() => refresh());
 
     const onSync = (e: CustomEvent) => {
       refresh();

package/templates/hooks/useMutationState.jsx

@@ -1,27 +1,13 @@
-import { useState, useEffect } from "react";
+import { useSyncExternalStore } from "react";
 import { getMutationState, onMutationStateChange } from "../mutation-state.js";
 
+function subscribeToMutations(cb) {
+  return onMutationStateChange(() => cb());
+}
+
 export function useMutationState(id) {
-  const [state, setState] = useState(() =>
-    id ? getMutationState(id) ?? null : null,
+  return useSyncExternalStore(
+    subscribeToMutations,
+    () => (id ? getMutationState(id) ?? null : null),
   );
-
-  useEffect(() => {
-    if (!id) {
-      setState(null);
-      return;
-    }
-
-    setState(getMutationState(id) ?? null);
-
-    const unsub = onMutationStateChange((updated) => {
-      if (updated.id === id) {
-        setState(updated);
-      }
-    });
-
-    return unsub;
-  }, [id]);
-
-  return state;
 }

package/templates/hooks/useMutationState.tsx

@@ -1,10 +1,14 @@
-import { useState, useEffect } from "react";
+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.
@@ -14,28 +18,8 @@ import type { MutationState } from "../mutation-state.ts";
  *   if (mutation?.status === "error") { ... }
  */
 export function useMutationState(id: string | null): MutationState | null {
-  const [state, setState] = useState<MutationState | null>(() =>
-    id ? getMutationState(id) ?? null : null,
+  return useSyncExternalStore(
+    subscribeToMutations,
+    () => (id ? getMutationState(id) ?? null : null),
   );
-
-  useEffect(() => {
-    if (!id) {
-      setState(null);
-      return;
-    }
-
-    // Initial state
-    setState(getMutationState(id) ?? null);
-
-    // Subscribe to changes
-    const unsub = onMutationStateChange((updated) => {
-      if (updated.id === id) {
-        setState(updated);
-      }
-    });
-
-    return unsub;
-  }, [id]);
-
-  return state;
 }

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();