@swoff/cli 0.4.3 → 0.4.5

package/templates/svelte/useSwoffNetwork.ts

@@ -0,0 +1,75 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import {
+  CONNECTIVITY_EVENT,
+  forceRetry,
+  getCurrentOnlineStatus,
+} from "../connectivity";
+
+export function useSwoffNetwork() {
+  const online = writable(true);
+  const wasOffline = writable(false);
+  const lastChangedAt = writable<number | null>(null);
+  const effectiveType = writable<string | null>(null);
+  const downlink = writable<number | null>(null);
+  const isRetrying = writable(false);
+
+  let wasOfflineFlag = false;
+
+  onMount(() => {
+    if (!getCurrentOnlineStatus()) {
+      wasOfflineFlag = true;
+      online.set(false);
+      wasOffline.set(true);
+      lastChangedAt.set(Date.now());
+    }
+
+    const connection = navigator.connection;
+
+    function handleConnectivityChange(e: Event) {
+      const isTrulyOnline = (e as CustomEvent).detail.online;
+      if (!isTrulyOnline) {
+        wasOfflineFlag = true;
+      } else {
+        wasOfflineFlag = false;
+      }
+      online.set(isTrulyOnline);
+      wasOffline.set(wasOfflineFlag);
+      lastChangedAt.set(Date.now());
+    }
+
+    function onTypeChange() {
+      if (!connection) return;
+      effectiveType.set(connection.effectiveType);
+      downlink.set(connection.downlink);
+    }
+
+    window.addEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+    if (connection) {
+      connection.addEventListener("change", onTypeChange);
+    }
+
+    return () => {
+      window.removeEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+      if (connection) {
+        connection.removeEventListener("change", onTypeChange);
+      }
+    };
+  });
+
+  async function retry() {
+    isRetrying.set(true);
+    await forceRetry();
+    isRetrying.set(false);
+  }
+
+  return {
+    online,
+    wasOffline,
+    lastChangedAt,
+    effectiveType,
+    downlink,
+    isRetrying,
+    retry,
+  };
+}

package/templates/svelte/useSwoffPrecache.js

@@ -0,0 +1,19 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export function useSwoffPrecache() {
+  const progress = writable(0);
+
+  function onProgress(e) {
+    progress.set(e.detail.percent);
+  }
+
+  onMount(() => {
+    window.addEventListener("sw-progress", onProgress);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+    };
+  });
+
+  return { progress };
+}

package/templates/svelte/useSwoffPrecache.ts

@@ -0,0 +1,19 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export function useSwoffPrecache() {
+  const progress = writable(0);
+
+  function onProgress(e: WindowEventMap["sw-progress"]) {
+    progress.set(e.detail.percent);
+  }
+
+  onMount(() => {
+    window.addEventListener("sw-progress", onProgress);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+    };
+  });
+
+  return { progress };
+}

package/templates/svelte/useSwoffPrefetch.js

@@ -0,0 +1,19 @@
+import { writable } from "svelte/store";
+import { prefetchCache } from "../fetch/core.js";
+
+export function useSwoffPrefetch() {
+  const prefetchList = writable([]);
+
+  function prefetch(url, options) {
+    prefetchCache(url, options);
+    prefetchList.update((list) =>
+      list.includes(url) ? list : [...list, url],
+    );
+  }
+
+  function clear() {
+    prefetchList.set([]);
+  }
+
+  return { prefetch, prefetchList, clear };
+}

package/templates/svelte/useSwoffPrefetch.ts

@@ -0,0 +1,20 @@
+import { writable } from "svelte/store";
+import { prefetchCache } from "../fetch/core";
+import type { FetchWithCacheOptions } from "../fetch/core";
+
+export function useSwoffPrefetch() {
+  const prefetchList = writable<string[]>([]);
+
+  function prefetch(url: string, options?: FetchWithCacheOptions) {
+    prefetchCache(url, options);
+    prefetchList.update((list) =>
+      list.includes(url) ? list : [...list, url],
+    );
+  }
+
+  function clear() {
+    prefetchList.set([]);
+  }
+
+  return { prefetch, prefetchList, clear };
+}

package/templates/svelte/useSwoffPush.js

@@ -0,0 +1,82 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../realtime/notifications.js";
+
+export function useSwoffPush() {
+  const subscribed = writable(false);
+  const subscription = writable(null);
+  const permission = writable(
+    typeof Notification !== "undefined" ? Notification.permission : "denied",
+  );
+  const loading = writable(true);
+
+  onMount(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subd) => {
+      if (cancelled) return;
+      if (subd) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.set(true);
+          subscription.set(sub);
+          permission.set(Notification.permission);
+          loading.set(false);
+        });
+      } else {
+        subscribed.set(false);
+        subscription.set(null);
+        permission.set(Notification.permission);
+        loading.set(false);
+      }
+    });
+
+    function onSubChanged(e) {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        subscribed.set(false);
+        subscription.set(null);
+        permission.set(Notification.permission);
+        loading.set(false);
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.set(true);
+          subscription.set(sub);
+          permission.set(Notification.permission);
+          loading.set(false);
+        });
+      }
+    }
+
+    function onPermissionChanged(e) {
+      if (cancelled) return;
+      permission.set(e.detail.permission);
+    }
+
+    window.addEventListener("push-subscription-changed", onSubChanged);
+    window.addEventListener("push-permission-changed", onPermissionChanged);
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener("push-subscription-changed", onSubChanged);
+      window.removeEventListener("push-permission-changed", onPermissionChanged);
+    };
+  });
+
+  async function subscribe() {
+    const sub = await subscribeToPush();
+    return sub !== null;
+  }
+
+  async function unsubscribe() {
+    await unsubscribeFromPush();
+  }
+
+  return { subscribed, subscription, permission, loading, subscribe, unsubscribe };
+}

package/templates/svelte/useSwoffPush.ts

@@ -0,0 +1,82 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../realtime/notifications";
+
+export function useSwoffPush() {
+  const subscribed = writable(false);
+  const subscription = writable<PushSubscription | null>(null);
+  const permission = writable(
+    typeof Notification !== "undefined" ? Notification.permission : "denied",
+  );
+  const loading = writable(true);
+
+  onMount(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subd) => {
+      if (cancelled) return;
+      if (subd) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.set(true);
+          subscription.set(sub);
+          permission.set(Notification.permission);
+          loading.set(false);
+        });
+      } else {
+        subscribed.set(false);
+        subscription.set(null);
+        permission.set(Notification.permission);
+        loading.set(false);
+      }
+    });
+
+    function onSubChanged(e: CustomEvent) {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        subscribed.set(false);
+        subscription.set(null);
+        permission.set(Notification.permission);
+        loading.set(false);
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.set(true);
+          subscription.set(sub);
+          permission.set(Notification.permission);
+          loading.set(false);
+        });
+      }
+    }
+
+    function onPermissionChanged(e: CustomEvent) {
+      if (cancelled) return;
+      permission.set(e.detail.permission);
+    }
+
+    window.addEventListener("push-subscription-changed", onSubChanged);
+    window.addEventListener("push-permission-changed", onPermissionChanged);
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener("push-subscription-changed", onSubChanged);
+      window.removeEventListener("push-permission-changed", onPermissionChanged);
+    };
+  });
+
+  async function subscribe() {
+    const sub = await subscribeToPush();
+    return sub !== null;
+  }
+
+  async function unsubscribe() {
+    await unsubscribeFromPush();
+  }
+
+  return { subscribed, subscription, permission, loading, subscribe, unsubscribe };
+}

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 };
+}