@swoff/cli 0.4.1 → 0.4.4

package/templates/svelte/useSwoffPwa.js

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { promptInstall } from "../pwa/prompt.js";
+
+export function useSwoffPwa() {
+  const canInstall = writable(false);
+
+  function onReady() { canInstall.set(true); }
+  function onDone() { canInstall.set(false); }
+
+  onMount(() => {
+    window.addEventListener("pwa-installable", onReady);
+    window.addEventListener("pwa-installed", onDone);
+    window.addEventListener("pwa-dismissed", onDone);
+    return () => {
+      window.removeEventListener("pwa-installable", onReady);
+      window.removeEventListener("pwa-installed", onDone);
+      window.removeEventListener("pwa-dismissed", onDone);
+    };
+  });
+
+  async function install() {
+    await promptInstall();
+  }
+
+  return { canInstall, install };
+}

package/templates/svelte/useSwoffPwa.ts

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { promptInstall } from "../pwa/prompt";
+
+export function useSwoffPwa() {
+  const canInstall = writable(false);
+
+  function onReady() { canInstall.set(true); }
+  function onDone() { canInstall.set(false); }
+
+  onMount(() => {
+    window.addEventListener("pwa-installable", onReady);
+    window.addEventListener("pwa-installed", onDone);
+    window.addEventListener("pwa-dismissed", onDone);
+    return () => {
+      window.removeEventListener("pwa-installable", onReady);
+      window.removeEventListener("pwa-installed", onDone);
+      window.removeEventListener("pwa-dismissed", onDone);
+    };
+  });
+
+  async function install() {
+    await promptInstall();
+  }
+
+  return { canInstall, install };
+}

package/templates/svelte/useSwoffQueue.js

@@ -0,0 +1,57 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import {
+  getPendingCount,
+  getQueueItems,
+  processMutationQueue,
+} from "../mutation/queue.js";
+
+export function useSwoffQueue() {
+  const pending = writable(0);
+  const items = writable([]);
+  const lastSync = writable(null);
+  const isProcessing = writable(false);
+
+  async function refresh() {
+    const [count, queueItems] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    pending.set(count);
+    items.set(queueItems);
+  }
+
+  onMount(() => {
+    queueMicrotask(() => refresh());
+
+    function onSync(e) {
+      isProcessing.set(false);
+      lastSync.set({ succeeded: e.detail.succeeded, failed: e.detail.failed });
+      refresh();
+    }
+    function onChange() { refresh(); }
+    function onProgress() { isProcessing.set(true); }
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    window.addEventListener("mutation-sync-progress", onProgress);
+
+    return () => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+      window.removeEventListener("mutation-sync-progress", onProgress);
+    };
+  });
+
+  async function retryAll() {
+    isProcessing.set(true);
+    try {
+      await processMutationQueue();
+    } finally {
+      await refresh();
+      isProcessing.set(false);
+    }
+  }
+
+  return { pending, items, lastSync, isProcessing, retryAll };
+}

package/templates/svelte/useSwoffQueue.ts

@@ -0,0 +1,67 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import {
+  getPendingCount,
+  getQueueItems,
+  processMutationQueue,
+} from "../mutation/queue";
+import type { MutationQueueItem } from "../swoff.d";
+
+export interface MutationQueueState {
+  pending: number;
+  items: MutationQueueItem[];
+  lastSync: { succeeded: number; failed: number } | null;
+  isProcessing: boolean;
+}
+
+export function useSwoffQueue(): MutationQueueState & {
+  retryAll: () => Promise<void>;
+} {
+  const pending = writable(0);
+  const items = writable<MutationQueueItem[]>([]);
+  const lastSync = writable<{ succeeded: number; failed: number } | null>(null);
+  const isProcessing = writable(false);
+
+  async function refresh() {
+    const [count, queueItems] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    pending.set(count);
+    items.set(queueItems);
+  }
+
+  onMount(() => {
+    queueMicrotask(() => refresh());
+
+    function onSync(e: CustomEvent) {
+      isProcessing.set(false);
+      lastSync.set({ succeeded: e.detail.succeeded, failed: e.detail.failed });
+      refresh();
+    }
+    function onChange() { refresh(); }
+    function onProgress() { isProcessing.set(true); }
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    window.addEventListener("mutation-sync-progress", onProgress);
+
+    return () => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+      window.removeEventListener("mutation-sync-progress", onProgress);
+    };
+  });
+
+  async function retryAll() {
+    isProcessing.set(true);
+    try {
+      await processMutationQueue();
+    } finally {
+      await refresh();
+      isProcessing.set(false);
+    }
+  }
+
+  return { pending, items, lastSync, isProcessing, retryAll };
+}

package/templates/svelte/useSwoffReset.js

@@ -0,0 +1,21 @@
+import { writable } from "svelte/store";
+import { resetSwoff } from "../reset.js";
+
+export function useSwoffReset() {
+  const isResetting = writable(false);
+  const error = writable(null);
+
+  async function reset(options) {
+    isResetting.set(true);
+    error.set(null);
+    try {
+      await resetSwoff(options);
+    } catch (e) {
+      error.set(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      isResetting.set(false);
+    }
+  }
+
+  return { reset, isResetting, error };
+}

package/templates/svelte/useSwoffReset.ts

@@ -0,0 +1,32 @@
+import { writable } from "svelte/store";
+import { resetSwoff } from "../reset";
+import type { ResetSwoffOptions } from "../reset";
+
+interface UseSwoffResetResult {
+  reset: (options?: ResetSwoffOptions) => Promise<void>;
+  isResetting: boolean;
+  error: Error | null;
+}
+
+export function useSwoffReset(): UseSwoffResetResult {
+  const isResetting = writable(false);
+  const error = writable<Error | null>(null);
+
+  async function reset(options?: ResetSwoffOptions) {
+    isResetting.set(true);
+    error.set(null);
+    try {
+      await resetSwoff(options);
+    } catch (e) {
+      error.set(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      isResetting.set(false);
+    }
+  }
+
+  return {
+    reset,
+    isResetting: isResetting,
+    error: error,
+  };
+}

package/templates/svelte/useSwoffStorage.js

@@ -0,0 +1,47 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { getStorageEstimate, formatBytes } from "../storage.js";
+
+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(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/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,
+  };
+}