@swoff/cli 0.3.8 → 0.3.10

package/templates/react/usePrefetch.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState } from "react";
+import { prefetchCache } from "../fetch/core.ts";
+import type { FetchWithCacheOptions } from "../fetch/core.ts";
+
+/**
+ * Hook that returns a stable prefetch callback, observable prefetch list, and clear function.
+ *
+ * Usage:
+ *   const { prefetch, prefetchList, clear } = usePrefetch();
+ *
+ *   // Prefetch when user hovers a link:
+ *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
+ *
+ *   // Show how many URLs are prefetched:
+ *   <span>{prefetchList.length} routes cached</span>
+ *
+ *   // Clear prefetched data:
+ *   <button onClick={clear}>Clear prefetch</button>
+ *
+ * @returns {{ prefetch: (url: string, options?: FetchWithCacheOptions) => void, prefetchList: string[], clear: () => void }}
+ */
+export function usePrefetch(): {
+  prefetch: (url: string, options?: FetchWithCacheOptions) => void;
+  prefetchList: string[];
+  clear: () => void;
+} {
+  const [prefetchList, setPrefetchList] = useState<string[]>([]);
+
+  const prefetch = useCallback(
+    (url: string, options?: FetchWithCacheOptions) => {
+      prefetchCache(url, options);
+      setPrefetchList((list) => list.includes(url) ? list : [...list, url]);
+    },
+    [],
+  );
+
+  const clear = useCallback(() => {
+    setPrefetchList([]);
+  }, []);
+
+  return { prefetch, prefetchList, clear };
+}

package/templates/{hooks → react}/usePushSubscription.jsx

@@ -4,15 +4,15 @@ import {
   unsubscribeFromPush,
   isSubscribed,
   getPushSubscription,
-} from "../push.js";
+} from "../realtime/notifications.js";
 
-export function usePushSubscription(vapidPublicKey) {
-  const [state, setState] = useState({
+export function usePushSubscription() {
+  const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null,
-    permission: Notification.permission,
+    permission: typeof Notification !== "undefined" ? Notification.permission : "denied",
     loading: true,
-  });
+  }));
 
   useEffect(() => {
     let cancelled = false;
@@ -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 → react}/usePushSubscription.tsx

@@ -4,15 +4,15 @@ import {
   unsubscribeFromPush,
   isSubscribed,
   getPushSubscription,
-} from "../push.ts";
+} from "../realtime/notifications.ts";
 
-export function usePushSubscription(vapidPublicKey: string) {
-  const [state, setState] = useState({
+export function usePushSubscription() {
+  const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null as PushSubscription | null,
-    permission: Notification.permission,
+    permission: typeof Notification !== "undefined" ? Notification.permission : "denied",
     loading: true,
-  });
+  }));
 
   useEffect(() => {
     let cancelled = false;
@@ -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();

package/templates/{hooks → react}/useSWUpdate.jsx

@@ -2,14 +2,14 @@ import { useState, useEffect, useCallback } from "react";
 import { handleUpdateApproved } from "../sw/injector.js";
 
 export function useSWUpdate() {
-  const [state, setState] = useState({
+  const [state, setState] = useState(() => ({
     updateStatus: "idle",
-    currentVersion: window.currentSWVersion || null,
+    currentVersion: typeof window !== "undefined" ? window.currentSWVersion || null : null,
     availableVersion: null,
     progress: 0,
     forceUpdate: false,
     error: null,
-  });
+  }));
 
   useEffect(() => {
     if (sessionStorage.getItem("sw-dismissed-update") === "true") return;

package/templates/{hooks → react}/useSWUpdate.tsx

@@ -1,15 +1,15 @@
 import { useState, useEffect, useCallback } from "react";
-import { handleUpdateApproved } from "../sw/injector.ts";
+import { handleUpdateApproved } from "../sw/injector";
 
 export function useSWUpdate() {
-  const [state, setState] = useState({
+  const [state, setState] = useState(() => ({
     updateStatus: "idle" as "idle" | "available" | "downloading" | "ready",
-    currentVersion: (window.currentSWVersion as string | undefined) || null,
+    currentVersion: typeof window !== "undefined" ? (window.currentSWVersion as string | undefined) || null : null,
     availableVersion: null as string | null,
     progress: 0 as number,
     forceUpdate: false,
     error: null as string | null,
-  });
+  }));
 
   useEffect(() => {
     if (sessionStorage.getItem("sw-dismissed-update") === "true") return;

package/templates/react/useSwoffReset.jsx

@@ -0,0 +1,32 @@
+import { useState, useCallback } from "react";
+import { resetSwoff } from "../reset";
+
+/**
+ * Hook exposing swoff's nuclear reset with reactive state.
+ *
+ * Usage:
+ *   const { reset, isResetting, error } = useSwoffReset();
+ *
+ *   <button onClick={() => reset()} disabled={isResetting}>
+ *     {isResetting ? "Resetting..." : "Reset Swoff"}
+ *   </button>
+ *   {error && <p style={{ color: "red" }}>{error.message}</p>}
+ */
+export function useSwoffReset() {
+  const [isResetting, setIsResetting] = useState(false);
+  const [error, setError] = useState(null);
+
+  const reset = useCallback(async (options) => {
+    setIsResetting(true);
+    setError(null);
+    try {
+      await resetSwoff(options);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setIsResetting(false);
+    }
+  }, []);
+
+  return { reset, isResetting, error };
+}

package/templates/react/useSwoffReset.tsx

@@ -0,0 +1,39 @@
+import { useState, useCallback } from "react";
+import { resetSwoff } from "../reset";
+import type { ResetSwoffOptions } from "../reset";
+
+interface UseSwoffResetResult {
+  reset: (options?: ResetSwoffOptions) => Promise<void>;
+  isResetting: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook exposing swoff's nuclear reset with reactive state.
+ *
+ * Usage:
+ *   const { reset, isResetting, error } = useSwoffReset();
+ *
+ *   <button onClick={() => reset()} disabled={isResetting}>
+ *     {isResetting ? "Resetting..." : "Reset Swoff"}
+ *   </button>
+ *   {error && <p style={{ color: "red" }}>{error.message}</p>}
+ */
+export function useSwoffReset(): UseSwoffResetResult {
+  const [isResetting, setIsResetting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const reset = useCallback(async (options?: ResetSwoffOptions) => {
+    setIsResetting(true);
+    setError(null);
+    try {
+      await resetSwoff(options);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setIsResetting(false);
+    }
+  }, []);
+
+  return { reset, isResetting, error };
+}

package/templates/hooks/useAuth.jsx

@@ -1,30 +0,0 @@
-import { useState, useEffect } from "react";
-import { getAuthState } from "../auth/state.js";
-
-export function useAuth() {
-  const [state, setState] = useState({
-    authenticated: false,
-    user: null,
-    online: navigator.onLine,
-  });
-
-  useEffect(() => {
-    getAuthState().then(setState);
-
-    const onOnline = () => setState((s) => ({ ...s, online: true }));
-    const onOffline = () => setState((s) => ({ ...s, online: false }));
-    const onAuthChange = () => getAuthState().then(setState);
-
-    window.addEventListener("online", onOnline);
-    window.addEventListener("offline", onOffline);
-    window.addEventListener("sw-auth-state-change", onAuthChange);
-
-    return () => {
-      window.removeEventListener("online", onOnline);
-      window.removeEventListener("offline", onOffline);
-      window.removeEventListener("sw-auth-state-change", onAuthChange);
-    };
-  }, []);
-
-  return state;
-}

package/templates/hooks/useAuth.tsx

@@ -1,30 +0,0 @@
-import { useState, useEffect } from "react";
-import { getAuthState } from "../auth/state.ts";
-
-export function useAuth() {
-  const [state, setState] = useState({
-    authenticated: false,
-    user: null as Record<string, unknown> | null,
-    online: navigator.onLine,
-  });
-
-  useEffect(() => {
-    getAuthState().then(setState);
-
-    const onOnline = () => setState((s) => ({ ...s, online: true }));
-    const onOffline = () => setState((s) => ({ ...s, online: false }));
-    const onAuthChange = () => getAuthState().then(setState);
-
-    window.addEventListener("online", onOnline);
-    window.addEventListener("offline", onOffline);
-    window.addEventListener("sw-auth-state-change", onAuthChange);
-
-    return () => {
-      window.removeEventListener("online", onOnline);
-      window.removeEventListener("offline", onOffline);
-      window.removeEventListener("sw-auth-state-change", onAuthChange);
-    };
-  }, []);
-
-  return state;
-}

package/templates/hooks/useCacheInvalidation.tsx

@@ -1,19 +0,0 @@
-import { useCallback } from "react";
-import { invalidateByTag, invalidateByTags } from "../cache.ts";
-import { invalidateUrl } from "../invalidation-tags.ts";
-
-export function useCacheInvalidation() {
-  const invalidateTag = useCallback(async (tag: string) => {
-    await invalidateByTag(tag);
-  }, []);
-
-  const invalidateTags = useCallback(async (tags: string[]) => {
-    await invalidateByTags(tags);
-  }, []);
-
-  const invalidateCacheUrl = useCallback(async (url: string) => {
-    await invalidateUrl(url);
-  }, []);
-
-  return { invalidateByTag: invalidateTag, invalidateByTags: invalidateTags, invalidateUrl: invalidateCacheUrl };
-}

package/templates/hooks/useCachedFetch.jsx

@@ -1,94 +0,0 @@
-import { useState, useEffect, useCallback, useRef, 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 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) {
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    const controller = new AbortController();
-    startTransition(() => setLoading(true));
-
-    const doFetch = async () => {
-      try {
-        const { response } = await fetchWithCache(url, {
-          ...optionsRef.current,
-          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]);
-
-  // 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/useCachedFetch.tsx

@@ -1,112 +0,0 @@
-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 | null,
-  options: FetchWithCacheOptions & {
-    refetchOnWindowFocus?: boolean;
-    refetchOnReconnect?: boolean;
-    refetchInterval?: number;
-    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) {
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    const controller = new AbortController();
-    startTransition(() => setLoading(true));
-
-    const doFetch = async () => {
-      try {
-        const { response } = await fetchWithCache(url, {
-          ...optionsRef.current,
-          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]);
-
-  // 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.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,97 +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 } = await fetchWithCache<TData>(url, fetchOptions);
-        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 };
-}