@swoff/cli 0.4.1 → 0.4.4

package/templates/react/{usePrecacheProgress.tsx → useSwoffPrecache.tsx}

@@ -1,14 +1,11 @@
 import { useState, useEffect } from "react";
 
-export function usePrecacheProgress() {
-  const [state, setState] = useState(() => ({
-    status: "idle" as "idle" | "installing",
-    progress: 0,
-  }));
+export function useSwoffPrecache() {
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
     const onProgress = (e: WindowEventMap["sw-progress"]) =>
-      setState({ status: "installing", progress: e.detail.percent });
+      setProgress(e.detail.percent);
 
     window.addEventListener("sw-progress", onProgress);
     return () => {
@@ -16,5 +13,5 @@ export function usePrecacheProgress() {
     };
   }, []);
 
-  return state;
+  return { progress };
 }

package/templates/react/{usePrefetch.jsx → useSwoffPrefetch.jsx}

@@ -5,7 +5,7 @@ import { prefetchCache } from "../fetch/core.js";
  * Hook that returns a stable prefetch callback, observable prefetch list, and clear function.
  *
  * Usage:
- *   const { prefetch, prefetchList, clear } = usePrefetch();
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
  *
  *   // Prefetch when user hovers a link:
  *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
@@ -16,7 +16,7 @@ import { prefetchCache } from "../fetch/core.js";
  *   // Clear prefetched data:
  *   <button onClick={clear}>Clear prefetch</button>
  */
-export function usePrefetch() {
+export function useSwoffPrefetch() {
   const [prefetchList, setPrefetchList] = useState([]);
 
   const prefetch = useCallback((url, options) => {

package/templates/react/{usePrefetch.tsx → useSwoffPrefetch.tsx}

@@ -6,7 +6,7 @@ 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();
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
  *
  *   // Prefetch when user hovers a link:
  *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
@@ -19,7 +19,7 @@ import type { FetchWithCacheOptions } from "../fetch/core.ts";
  *
  * @returns {{ prefetch: (url: string, options?: FetchWithCacheOptions) => void, prefetchList: string[], clear: () => void }}
  */
-export function usePrefetch(): {
+export function useSwoffPrefetch(): {
   prefetch: (url: string, options?: FetchWithCacheOptions) => void;
   prefetchList: string[];
   clear: () => void;

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

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../realtime/notifications.js";
 
-export function usePushSubscription() {
+export function useSwoffPush() {
   const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null,

package/templates/react/{usePushSubscription.tsx → useSwoffPush.tsx}

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../realtime/notifications.ts";
 
-export function usePushSubscription() {
+export function useSwoffPush() {
   const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null as PushSubscription | null,

package/templates/react/{usePwaInstall.jsx → useSwoffPwa.jsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { isInstallable, promptInstall } from "../pwa/prompt.js";
 
-export function usePwaInstall() {
+export function useSwoffPwa() {
   const [canInstall, setCanInstall] = useState(false);
 
   useEffect(() => {

package/templates/react/{usePwaInstall.tsx → useSwoffPwa.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { isInstallable, promptInstall } from "../pwa/prompt.ts";
 
-export function usePwaInstall() {
+export function useSwoffPwa() {
   const [canInstall, setCanInstall] = useState(false);
 
   useEffect(() => {

package/templates/react/{useMutationQueue.jsx → useSwoffQueue.jsx}

@@ -9,7 +9,7 @@ import {
  * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
  *
  * Usage:
- *   const { pending, items, lastSync, isProcessing, retryAll } = useMutationQueue();
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
  *
  *   // Show pending badge:
  *   {pending > 0 && <Badge>{pending}</Badge>}
@@ -19,7 +19,7 @@ import {
  *     {isProcessing ? "Syncing..." : "Retry All"}
  *   </button>
  */
-export function useMutationQueue() {
+export function useSwoffQueue() {
   const [state, setState] = useState({
     pending: 0,
     items: [],

package/templates/react/{useMutationQueue.tsx → useSwoffQueue.tsx}

@@ -17,7 +17,7 @@ export interface MutationQueueState {
  * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
  *
  * Usage:
- *   const { pending, items, lastSync, isProcessing, retryAll } = useMutationQueue();
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
  *
  *   // Show pending badge:
  *   {pending > 0 && <Badge>{pending}</Badge>}
@@ -29,7 +29,7 @@ export interface MutationQueueState {
  *
  * @returns {{ pending, items, lastSync, isProcessing, retryAll }}
  */
-export function useMutationQueue(): MutationQueueState & {
+export function useSwoffQueue(): MutationQueueState & {
   retryAll: () => Promise<void>;
 } {
   const [state, setState] = useState<MutationQueueState>({

package/templates/react/{useStorageEstimate.jsx → useSwoffStorage.jsx}

@@ -5,13 +5,13 @@ import { getStorageEstimate, formatBytes } from "../storage";
  * Reactive storage estimate. Shows available quota and usage.
  *
  * Usage:
- *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useStorageEstimate();
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
  *
  *   if (!loading && percentUsed > 80) return <StorageWarning />;
  *
  * @param autoRefresh - Re-check on visibility change (default true)
  */
-export function useStorageEstimate(autoRefresh = true) {
+export function useSwoffStorage(autoRefresh = true) {
   const [state, setState] = useState({
     usage: 0,
     quota: 0,

package/templates/react/{useStorageEstimate.tsx → useSwoffStorage.tsx}

@@ -15,14 +15,14 @@ interface StorageEstimateState {
  * Reactive storage estimate. Shows available quota and usage.
  *
  * Usage:
- *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useStorageEstimate();
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
  *
  *   if (!loading && percentUsed > 80) return <StorageWarning />;
  *
  * @param autoRefresh - Re-check on visibility change (default true)
  * @returns {{ usage: number, quota: number, percentUsed: number, formattedUsage: string, formattedQuota: string, loading: boolean, error: string | null }}
  */
-export function useStorageEstimate(autoRefresh = true): StorageEstimateState {
+export function useSwoffStorage(autoRefresh = true): StorageEstimateState {
   const [state, setState] = useState<StorageEstimateState>({
     usage: 0,
     quota: 0,

package/templates/react/{useBackgroundSync.jsx → useSwoffSync.jsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { retrySync } from "../mutation/sync.js";
 
-export function useBackgroundSync() {
+export function useSwoffSync() {
   const [state, setState] = useState(() => ({
     supported:
       typeof window !== "undefined" && typeof navigator !== "undefined"

package/templates/react/{useBackgroundSync.tsx → useSwoffSync.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { retrySync } from "../mutation/sync.ts";
 
-export function useBackgroundSync() {
+export function useSwoffSync() {
   const [state, setState] = useState(() => ({
     supported:
       typeof window !== "undefined" && typeof navigator !== "undefined"

package/templates/svelte/useSwoffAnalytics.js

@@ -0,0 +1,31 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export function useSwoffAnalytics(callback) {
+  const events = writable([]);
+  const lastEvent = writable(null);
+
+  function handler(e) {
+    if (e.data?.type === "OFFLINE_FALLBACK_ACTIVATED" && e.data?.detail) {
+      const detail = e.data.detail;
+      events.update((prev) => [...prev, detail]);
+      lastEvent.set(detail);
+      callback?.(detail);
+    }
+  }
+
+  onMount(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handler);
+    };
+  });
+
+  function clear() {
+    events.set([]);
+    lastEvent.set(null);
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/svelte/useSwoffAnalytics.ts

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export interface OfflineFallbackEvent {
+  route: string;
+  fallbackLevel: "route-fallback" | "offline-page" | "spa-shell" | "inline-503";
+  timestamp: number;
+}
+
+export function useSwoffAnalytics(callback?: (event: OfflineFallbackEvent) => void) {
+  const events = writable<OfflineFallbackEvent[]>([]);
+  const lastEvent = writable<OfflineFallbackEvent | null>(null);
+
+  function handler(e: MessageEvent) {
+    if (e.data?.type === "OFFLINE_FALLBACK_ACTIVATED" && e.data?.detail) {
+      const detail = e.data.detail as OfflineFallbackEvent;
+      events.update((prev) => [...prev, detail]);
+      lastEvent.set(detail);
+      callback?.(detail);
+    }
+  }
+
+  onMount(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handler);
+    };
+  });
+
+  function clear() {
+    events.set([]);
+    lastEvent.set(null);
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/svelte/useSwoffAuth.js

@@ -0,0 +1,95 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { getAuthState } from "../auth/state.js";
+import { setAuth, clearAuth, ensureValidAuth } from "../auth/store.js";
+
+export function useSwoffAuth() {
+  const authenticated = writable(false);
+  const auth = writable(null);
+  const online = writable(
+    typeof navigator !== "undefined" ? navigator.onLine : true,
+  );
+  const isLoading = writable(false);
+  const error = writable(null);
+
+  async function refreshState() {
+    try {
+      const authState = await getAuthState();
+      authenticated.set(authState.authenticated);
+      auth.set(authState.auth);
+      error.set(null);
+    } catch {
+      // ignore — auth not initialized
+    }
+  }
+
+  onMount(() => {
+    refreshState();
+
+    function onOnline() { online.set(true); }
+    function onOffline() { online.set(false); }
+    function onAuthChange() { refreshState(); }
+
+    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);
+    };
+  });
+
+  async function doSetAuth(authData) {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await setAuth(authData);
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doClearAuth() {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await clearAuth();
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doEnsureValid() {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      const result = await ensureValidAuth();
+      await refreshState();
+      return result;
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+      return null;
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  return {
+    authenticated,
+    auth,
+    online,
+    isLoading,
+    error,
+    setAuth: doSetAuth,
+    clearAuth: doClearAuth,
+    ensureValid: doEnsureValid,
+  };
+}

package/templates/svelte/useSwoffAuth.ts

@@ -0,0 +1,96 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { getAuthState } from "../auth/state";
+import { setAuth, clearAuth, ensureValidAuth } from "../auth/store";
+import type { AuthData } from "../auth/adapter";
+
+export function useSwoffAuth() {
+  const authenticated = writable(false);
+  const auth = writable<AuthData | null>(null);
+  const online = writable(
+    typeof navigator !== "undefined" ? navigator.onLine : true,
+  );
+  const isLoading = writable(false);
+  const error = writable<Error | null>(null);
+
+  async function refreshState() {
+    try {
+      const authState = await getAuthState();
+      authenticated.set(authState.authenticated);
+      auth.set(authState.auth);
+      error.set(null);
+    } catch {
+      // ignore — auth not initialized
+    }
+  }
+
+  onMount(() => {
+    refreshState();
+
+    function onOnline() { online.set(true); }
+    function onOffline() { online.set(false); }
+    function onAuthChange() { refreshState(); }
+
+    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);
+    };
+  });
+
+  async function doSetAuth(authData: AuthData) {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await setAuth(authData);
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doClearAuth() {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await clearAuth();
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doEnsureValid(): Promise<AuthData | null> {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      const result = await ensureValidAuth();
+      await refreshState();
+      return result;
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+      return null;
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  return {
+    authenticated,
+    auth,
+    online,
+    isLoading,
+    error,
+    setAuth: doSetAuth,
+    clearAuth: doClearAuth,
+    ensureValid: doEnsureValid,
+  };
+}

package/templates/svelte/useSwoffFetch.js

@@ -0,0 +1,97 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { fetchWithCache } from "../fetch/core.js";
+import { generateTags } from "../cache/tags.js";
+
+export function useSwoffFetch(url, options = {}) {
+  const {
+    select,
+    retry: retryOpt,
+    placeholderData,
+    onSuccess,
+    onError,
+    ...fetchOptions
+  } = options;
+
+  const data = writable(placeholderData ?? null);
+  const error = writable(null);
+  const loading = writable(url != null && options.enabled !== false);
+
+  const isEnabled = options.enabled !== false && url != null;
+  let refetchCount = 0;
+
+  function refetch() {
+    refetchCount++;
+    doFetch();
+  }
+
+  async function doFetch() {
+    if (!isEnabled) return;
+    const currentFetchId = refetchCount;
+
+    let retriesLeft =
+      retryOpt === true
+        ? Infinity
+        : typeof retryOpt === "number"
+          ? retryOpt
+          : 0;
+
+    loading.set(true);
+    try {
+      const { response } = await fetchWithCache(url, fetchOptions);
+      if (currentFetchId !== refetchCount) return;
+      if (response) {
+        if (!response.ok) {
+          let errorMessage = `HTTP ${response.status}`;
+          try {
+            const errBody = await response.json();
+            errorMessage = errBody?.message || errBody?.error || errorMessage;
+          } catch {}
+          throw new Error(errorMessage);
+        }
+        const raw = await response.json();
+        const selected = select ? select(raw) : raw;
+        data.set(selected);
+        error.set(null);
+        onSuccess?.(selected);
+      } else {
+        data.set(null);
+      }
+    } catch (err) {
+      if (currentFetchId !== refetchCount) return;
+      if (retriesLeft > 0) {
+        retriesLeft--;
+        await new Promise((r) => setTimeout(r, 1000));
+        return doFetch();
+      }
+      const e = err instanceof Error ? err : new Error(String(err));
+      error.set(e);
+      onError?.(e);
+    } finally {
+      if (currentFetchId === refetchCount) {
+        loading.set(false);
+      }
+    }
+  }
+
+  onMount(() => {
+    if (isEnabled) doFetch();
+
+    function 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))) {
+        refetch();
+      }
+    }
+
+    window.addEventListener("cache-invalidated", onInvalidated);
+    return () => {
+      window.removeEventListener("cache-invalidated", onInvalidated);
+    };
+  });
+
+  return { data, error, loading, refetch };
+}

package/templates/svelte/useSwoffFetch.ts

@@ -0,0 +1,112 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { fetchWithCache } from "../fetch/core";
+import { generateTags } from "../cache/tags";
+import type { FetchWithCacheOptions } from "../fetch/core";
+
+export function useSwoffFetch<T = unknown, R = T>(
+  url: string | null,
+  options: FetchWithCacheOptions & {
+    enabled?: boolean;
+    select?: (data: T) => R;
+    keepPreviousData?: boolean;
+    retry?: number | boolean;
+    placeholderData?: R;
+    onSuccess?: (data: R) => void;
+    onError?: (error: Error) => void;
+  } = {},
+) {
+  const {
+    select,
+    retry: retryOpt,
+    placeholderData,
+    onSuccess,
+    onError,
+    ...fetchOptions
+  } = options;
+
+  const data = writable<R | null>(placeholderData ?? null);
+  const error = writable<Error | null>(null);
+  const loading = writable(url != null && options.enabled !== false);
+
+  const isEnabled = options.enabled !== false && url != null;
+  let refetchCount = 0;
+
+  function refetch() {
+    refetchCount++;
+    doFetch();
+  }
+
+  let cancelled = false;
+
+  async function doFetch() {
+    if (!isEnabled) return;
+    const currentFetchId = refetchCount;
+
+    let retriesLeft: number =
+      retryOpt === true
+        ? Infinity
+        : typeof retryOpt === "number"
+          ? retryOpt
+          : 0;
+
+    loading.set(true);
+    try {
+      const { response } = await fetchWithCache(url, fetchOptions);
+      if (currentFetchId !== refetchCount) return;
+      if (response) {
+        if (!response.ok) {
+          let errorMessage = `HTTP ${response.status}`;
+          try {
+            const errBody = await response.json();
+            errorMessage = errBody?.message || errBody?.error || errorMessage;
+          } catch {}
+          throw new Error(errorMessage);
+        }
+        const raw: T = await response.json();
+        const selected = select ? select(raw) : (raw as unknown as R);
+        data.set(selected);
+        error.set(null);
+        onSuccess?.(selected);
+      } else {
+        data.set(null);
+      }
+    } catch (err) {
+      if (currentFetchId !== refetchCount) return;
+      if (retriesLeft > 0) {
+        retriesLeft--;
+        await new Promise((r) => setTimeout(r, 1000));
+        return doFetch();
+      }
+      const e = err instanceof Error ? err : new Error(String(err));
+      error.set(e);
+      onError?.(e);
+    } finally {
+      if (currentFetchId === refetchCount) {
+        loading.set(false);
+      }
+    }
+  }
+
+  onMount(() => {
+    if (isEnabled) doFetch();
+
+    function 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))) {
+        refetch();
+      }
+    }
+
+    window.addEventListener("cache-invalidated", onInvalidated);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("cache-invalidated", onInvalidated);
+    };
+  });
+
+  return { data, error, loading, refetch };
+}