@swoff/cli 0.4.3 → 0.4.4

package/templates/svelte/useSwoffStorage.ts

@@ -0,0 +1,47 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { getStorageEstimate, formatBytes } from "../storage";
+
+export function useSwoffStorage(autoRefresh = true) {
+  const usage = writable(0);
+  const quota = writable(0);
+  const percentUsed = writable(0);
+  const formattedUsage = writable("0 B");
+  const formattedQuota = writable("0 B");
+  const loading = writable(true);
+  const error = writable<string | null>(null);
+
+  async function check() {
+    try {
+      const result = await getStorageEstimate();
+      usage.set(result.usage);
+      quota.set(result.quota);
+      percentUsed.set(result.percentUsed);
+      formattedUsage.set(formatBytes(result.usage));
+      formattedQuota.set(formatBytes(result.quota));
+      loading.set(false);
+      error.set(null);
+    } catch (err) {
+      loading.set(false);
+      error.set(String(err));
+    }
+  }
+
+  onMount(() => {
+    check();
+  });
+
+  if (autoRefresh) {
+    onMount(() => {
+      function onVisible() {
+        if (document.visibilityState === "visible") check();
+      }
+      document.addEventListener("visibilitychange", onVisible);
+      return () => {
+        document.removeEventListener("visibilitychange", onVisible);
+      };
+    });
+  }
+
+  return { usage, quota, percentUsed, formattedUsage, formattedQuota, loading, error };
+}

package/templates/svelte/useSwoffSync.js

@@ -0,0 +1,31 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { retrySync } from "../mutation/sync.js";
+
+export function useSwoffSync() {
+  const supported = writable(
+    typeof window !== "undefined" && typeof navigator !== "undefined"
+      ? "serviceWorker" in navigator && "SyncManager" in window
+      : false,
+  );
+  const registered = writable(false);
+  const lastSync = writable(null);
+
+  onMount(() => {
+    function onSyncComplete(e) {
+      registered.set(true);
+      lastSync.set({ succeeded: e.detail.succeeded, failed: e.detail.failed });
+    }
+
+    window.addEventListener("background-sync-complete", onSyncComplete);
+    return () => {
+      window.removeEventListener("background-sync-complete", onSyncComplete);
+    };
+  });
+
+  async function triggerSync() {
+    await retrySync();
+  }
+
+  return { supported, registered, lastSync, triggerSync };
+}

package/templates/svelte/useSwoffSync.ts

@@ -0,0 +1,31 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { retrySync } from "../mutation/sync";
+
+export function useSwoffSync() {
+  const supported = writable(
+    typeof window !== "undefined" && typeof navigator !== "undefined"
+      ? "serviceWorker" in navigator && "SyncManager" in window
+      : false,
+  );
+  const registered = writable(false);
+  const lastSync = writable<{ succeeded: number; failed: number } | null>(null);
+
+  onMount(() => {
+    function onSyncComplete(e: CustomEvent) {
+      registered.set(true);
+      lastSync.set({ succeeded: e.detail.succeeded, failed: e.detail.failed });
+    }
+
+    window.addEventListener("background-sync-complete", onSyncComplete);
+    return () => {
+      window.removeEventListener("background-sync-complete", onSyncComplete);
+    };
+  });
+
+  async function triggerSync() {
+    await retrySync();
+  }
+
+  return { supported, registered, lastSync, triggerSync };
+}

package/templates/vue/useSwoffAnalytics.js

@@ -0,0 +1,46 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+/**
+ * Tracks offline navigation fallback events dispatched by the Service Worker.
+ *
+ * Usage:
+ *   const { lastEvent, events } = useSwoffAnalytics();
+ *
+ *   // Render an offline indicator when a fallback was served:
+ *   <div v-if="lastEvent">
+ *     Offline: served {{ lastEvent.fallbackLevel }} for {{ lastEvent.route }}
+ *   </div>
+ *
+ *   // Or pass a callback:
+ *   useSwoffAnalytics((event) => console.log("Fallback:", event));
+ */
+export function useSwoffAnalytics(callback) {
+  const events = ref([]);
+  const lastEvent = ref(null);
+
+  function handler(e) {
+    if (e.data?.type === "OFFLINE_FALLBACK_ACTIVATED" && e.data?.detail) {
+      const detail = e.data.detail;
+      events.value = [...events.value, detail];
+      lastEvent.value = detail;
+      callback?.(detail);
+    }
+  }
+
+  onMounted(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+  });
+
+  onUnmounted(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.removeEventListener("message", handler);
+  });
+
+  function clear() {
+    events.value = [];
+    lastEvent.value = null;
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/vue/useSwoffAnalytics.ts

@@ -0,0 +1,54 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export interface OfflineFallbackEvent {
+  route: string;
+  fallbackLevel: "route-fallback" | "offline-page" | "spa-shell" | "inline-503";
+  timestamp: number;
+}
+
+/**
+ * Tracks offline navigation fallback events dispatched by the Service Worker.
+ *
+ * Usage:
+ *   const { lastEvent, events } = useSwoffAnalytics();
+ *
+ *   // Render an offline indicator when a fallback was served:
+ *   <div v-if="lastEvent">
+ *     Offline: served {{ lastEvent.fallbackLevel }} for {{ lastEvent.route }}
+ *   </div>
+ *
+ *   // Or pass a callback:
+ *   useSwoffAnalytics((event) => console.log("Fallback:", event));
+ *
+ * @returns {{ lastEvent: Ref<OfflineFallbackEvent | null>, events: Ref<OfflineFallbackEvent[]>, clear: () => void }}
+ */
+export function useSwoffAnalytics(callback?: (event: OfflineFallbackEvent) => void) {
+  const events = ref<OfflineFallbackEvent[]>([]);
+  const lastEvent = ref<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.value = [...events.value, detail];
+      lastEvent.value = detail;
+      callback?.(detail);
+    }
+  }
+
+  onMounted(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+  });
+
+  onUnmounted(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.removeEventListener("message", handler);
+  });
+
+  function clear() {
+    events.value = [];
+    lastEvent.value = null;
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/vue/useSwoffAuth.js

@@ -0,0 +1,106 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { getAuthState } from "../auth/state.js";
+import { setAuth, clearAuth, ensureValidAuth } from "../auth/store.js";
+
+/**
+ * Reactive auth state with actions: setAuth, clearAuth, ensureValid.
+ *
+ * Usage:
+ *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useSwoffAuth();
+ *
+ *   // Login:
+ *   const res = await fetch("/api/login", { method: "POST" });
+ *   const data = await res.json();
+ *   await setAuth({ token: data.token, user: data.user, expiresAt: data.expiresAt });
+ *
+ *   // Logout:
+ *   await clearAuth();
+ */
+export function useSwoffAuth() {
+  const authenticated = ref(false);
+  const auth = ref(null);
+  const online = ref(typeof navigator !== "undefined" ? navigator.onLine : true);
+  const isLoading = ref(false);
+  const error = ref(null);
+
+  async function refreshState() {
+    try {
+      const authState = await getAuthState();
+      authenticated.value = authState.authenticated;
+      auth.value = authState.auth;
+      error.value = null;
+    } catch {
+      // ignore — auth not initialized
+    }
+  }
+
+  onMounted(() => {
+    refreshState();
+
+    function onOnline() { online.value = true; }
+    function onOffline() { online.value = false; }
+    function onAuthChange() { refreshState(); }
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    window.addEventListener("sw-auth-state-change", onAuthChange);
+
+    onUnmounted(() => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("sw-auth-state-change", onAuthChange);
+    });
+  });
+
+  async function doSetAuth(authData) {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await setAuth(authData);
+      await refreshState();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function doClearAuth() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await clearAuth();
+      await refreshState();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function doEnsureValid() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const result = await ensureValidAuth();
+      await refreshState();
+      return result;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      return null;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  return {
+    authenticated,
+    auth,
+    online,
+    isLoading,
+    error,
+    setAuth: doSetAuth,
+    clearAuth: doClearAuth,
+    ensureValid: doEnsureValid,
+  };
+}

package/templates/vue/useSwoffAuth.ts

@@ -0,0 +1,118 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { getAuthState } from "../auth/state";
+import { setAuth, clearAuth, ensureValidAuth } from "../auth/store";
+import type { AuthData } from "../auth/adapter";
+
+/**
+ * Reactive auth state with actions: setAuth, clearAuth, ensureValid.
+ *
+ * Listens for sw-auth-state-change events (dispatched by clearAuth(),
+ * setAuth(), or the SW's AUTH_CLEARED broadcast).
+ *
+ * Usage:
+ *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useSwoffAuth();
+ *
+ *   // Login:
+ *   const res = await fetch("/api/login", { method: "POST" });
+ *   const data = await res.json();
+ *   await setAuth({ token: data.token, user: data.user, expiresAt: data.expiresAt });
+ *
+ *   // Access user data (typed via AuthData):
+ *   const userName = auth?.user?.name;
+ *
+ *   // Logout — clears tokens from memory and user cache from IndexedDB:
+ *   await clearAuth();
+ *
+ *   // Silently refresh the session (page restore):
+ *   const authData = await ensureValid();
+ *
+ * @returns {{ authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid }}
+ */
+export function useSwoffAuth() {
+  const authenticated = ref(false);
+  const auth = ref<AuthData | null>(null);
+  const online = ref(typeof navigator !== "undefined" ? navigator.onLine : true);
+  const isLoading = ref(false);
+  const error = ref<Error | null>(null);
+
+  async function refreshState() {
+    try {
+      const authState = await getAuthState();
+      authenticated.value = authState.authenticated;
+      auth.value = authState.auth;
+      error.value = null;
+    } catch {
+      // ignore — auth not initialized
+    }
+  }
+
+  onMounted(() => {
+    refreshState();
+
+    function onOnline() { online.value = true; }
+    function onOffline() { online.value = false; }
+    function onAuthChange() { refreshState(); }
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    window.addEventListener("sw-auth-state-change", onAuthChange);
+
+    onUnmounted(() => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("sw-auth-state-change", onAuthChange);
+    });
+  });
+
+  async function doSetAuth(authData: AuthData) {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await setAuth(authData);
+      await refreshState();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function doClearAuth() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await clearAuth();
+      await refreshState();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function doEnsureValid(): Promise<AuthData | null> {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const result = await ensureValidAuth();
+      await refreshState();
+      return result;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      return null;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  return {
+    authenticated,
+    auth,
+    online,
+    isLoading,
+    error,
+    setAuth: doSetAuth,
+    clearAuth: doClearAuth,
+    ensureValid: doEnsureValid,
+  };
+}

package/templates/vue/useSwoffFetch.js

@@ -0,0 +1,127 @@
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { fetchWithCache } from "../fetch/core.js";
+import { generateTags } from "../cache/tags.js";
+
+/**
+ * Fetch and cache data with automatic invalidation, revalidation, and offline support.
+ *
+ * Usage:
+ *   const { data, error, loading, refetch } = useSwoffFetch("/api/todos");
+ *
+ *   // Select/transform data
+ *   const { data: names } = useSwoffFetch("/api/users", {
+ *     select: (users) => users.map(u => u.name),
+ *   });
+ *
+ *   // Keep previous data while fetching the next page
+ *   const { data } = useSwoffFetch(`/api/items?page=${page}`, {
+ *     keepPreviousData: true,
+ *   });
+ */
+export function useSwoffFetch(url, options = {}) {
+  const {
+    select,
+    retry: retryOpt,
+    placeholderData,
+    onSuccess,
+    onError,
+    ...fetchOptions
+  } = options;
+
+  const data = ref(placeholderData ?? null);
+  const error = ref(null);
+  const loading = ref(url != null && options.enabled !== false);
+  const refetchCount = ref(0);
+
+  let cachedData = placeholderData ?? null;
+
+  const isEnabled = options.enabled !== false && url != null;
+
+  function refetch() {
+    refetchCount.value++;
+  }
+
+  watch(
+    () => url,
+    () => {
+      if (isEnabled) refetch();
+    },
+  );
+
+  watch(
+    [() => url, () => refetchCount.value],
+    () => {
+      if (!isEnabled) return;
+
+      let cancelled = false;
+      let retriesLeft =
+        retryOpt === true
+          ? Infinity
+          : typeof retryOpt === "number"
+            ? retryOpt
+            : 0;
+
+      const doFetch = async () => {
+        loading.value = true;
+        try {
+          const { response } = await fetchWithCache(url, fetchOptions);
+          if (cancelled) 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.value = selected;
+            cachedData = selected;
+            if (!cancelled) onSuccess?.(selected);
+          } else {
+            data.value = null;
+            cachedData = null;
+          }
+          if (!cancelled) error.value = null;
+        } catch (err) {
+          if (!cancelled && retriesLeft > 0) {
+            retriesLeft--;
+            await new Promise((r) => setTimeout(r, 1000));
+            return doFetch();
+          }
+          if (!cancelled) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            error.value = e;
+            onError?.(e);
+          }
+        } finally {
+          if (!cancelled) loading.value = false;
+        }
+      };
+
+      doFetch();
+    },
+  );
+
+  if (isEnabled && url) {
+    onMounted(() => {
+      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);
+      onUnmounted(() => {
+        window.removeEventListener("cache-invalidated", onInvalidated);
+      });
+    });
+  }
+
+  return { data, error, loading, refetch };
+}

package/templates/vue/useSwoffFetch.ts

@@ -0,0 +1,143 @@
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { fetchWithCache } from "../fetch/core";
+import { generateTags } from "../cache/tags";
+import type { FetchWithCacheOptions } from "../fetch/core";
+
+/**
+ * Fetch and cache data with automatic invalidation, revalidation, and offline support.
+ *
+ * Usage:
+ *   const { data, error, loading, refetch } = useSwoffFetch("/api/todos");
+ *
+ *   // Select/transform data
+ *   const { data: names } = useSwoffFetch("/api/users", {
+ *     select: (users) => users.map(u => u.name),
+ *   });
+ *
+ *   // Keep previous data while fetching the next page
+ *   const { data } = useSwoffFetch(`/api/items?page=${page}`, {
+ *     keepPreviousData: true,
+ *   });
+ *
+ *   @param url - URL to fetch. Pass null to skip fetching.
+ *   @param options - Fetch options plus: select, keepPreviousData, retry, placeholderData, onSuccess, onError
+ */
+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 = ref<R | null>(placeholderData ?? null);
+  const error = ref<Error | null>(null);
+  const loading = ref(url != null && options.enabled !== false);
+  const refetchCount = ref(0);
+
+  let cachedData: R | null = placeholderData ?? null;
+
+  const isEnabled = options.enabled !== false && url != null;
+
+  function refetch() {
+    refetchCount.value++;
+  }
+
+  watch(
+    () => url,
+    () => {
+      if (isEnabled) refetch();
+    },
+  );
+
+  watch(
+    [() => url, () => refetchCount.value],
+    () => {
+      if (!isEnabled) return;
+
+      let cancelled = false;
+      let retriesLeft: number =
+        retryOpt === true
+          ? Infinity
+          : typeof retryOpt === "number"
+            ? retryOpt
+            : 0;
+
+      const doFetch = async () => {
+        loading.value = true;
+        try {
+          const { response } = await fetchWithCache(url, fetchOptions);
+          if (cancelled) 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.value = selected;
+            cachedData = selected;
+            if (!cancelled) onSuccess?.(selected);
+          } else {
+            data.value = null;
+            cachedData = null;
+          }
+          if (!cancelled) error.value = null;
+        } catch (err) {
+          if (!cancelled && retriesLeft > 0) {
+            retriesLeft--;
+            await new Promise((r) => setTimeout(r, 1000));
+            return doFetch();
+          }
+          if (!cancelled) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            error.value = e;
+            onError?.(e);
+          }
+        } finally {
+          if (!cancelled) loading.value = false;
+        }
+      };
+
+      doFetch();
+    },
+  );
+
+  // Auto-refetch on cache invalidation
+  if (isEnabled && url) {
+    onMounted(() => {
+      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);
+      onUnmounted(() => {
+        window.removeEventListener("cache-invalidated", onInvalidated);
+      });
+    });
+  }
+
+  return { data, error, loading, refetch };
+}