@swoff/cli 0.4.3 → 0.4.5

package/templates/vue/useSwoffPush.js

@@ -0,0 +1,81 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../realtime/notifications.js";
+
+export function useSwoffPush() {
+  const subscribed = ref(false);
+  const subscription = ref(null);
+  const permission = ref(
+    typeof Notification !== "undefined" ? Notification.permission : "denied",
+  );
+  const loading = ref(true);
+
+  onMounted(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subd) => {
+      if (cancelled) return;
+      if (subd) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.value = true;
+          subscription.value = sub;
+          permission.value = Notification.permission;
+          loading.value = false;
+        });
+      } else {
+        subscribed.value = false;
+        subscription.value = null;
+        permission.value = Notification.permission;
+        loading.value = false;
+      }
+    });
+
+    function onSubChanged(e) {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        subscribed.value = false;
+        subscription.value = null;
+        permission.value = Notification.permission;
+        loading.value = false;
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.value = true;
+          subscription.value = sub;
+          permission.value = Notification.permission;
+          loading.value = false;
+        });
+      }
+    }
+
+    function onPermissionChanged(e) {
+      if (cancelled) return;
+      permission.value = e.detail.permission;
+    }
+
+    window.addEventListener("push-subscription-changed", onSubChanged);
+    window.addEventListener("push-permission-changed", onPermissionChanged);
+
+    onUnmounted(() => {
+      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/vue/useSwoffPush.ts

@@ -0,0 +1,81 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../realtime/notifications";
+
+export function useSwoffPush() {
+  const subscribed = ref(false);
+  const subscription = ref<PushSubscription | null>(null);
+  const permission = ref(
+    typeof Notification !== "undefined" ? Notification.permission : "denied",
+  );
+  const loading = ref(true);
+
+  onMounted(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subd) => {
+      if (cancelled) return;
+      if (subd) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.value = true;
+          subscription.value = sub;
+          permission.value = Notification.permission;
+          loading.value = false;
+        });
+      } else {
+        subscribed.value = false;
+        subscription.value = null;
+        permission.value = Notification.permission;
+        loading.value = false;
+      }
+    });
+
+    function onSubChanged(e: CustomEvent) {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        subscribed.value = false;
+        subscription.value = null;
+        permission.value = Notification.permission;
+        loading.value = false;
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          subscribed.value = true;
+          subscription.value = sub;
+          permission.value = Notification.permission;
+          loading.value = false;
+        });
+      }
+    }
+
+    function onPermissionChanged(e: CustomEvent) {
+      if (cancelled) return;
+      permission.value = e.detail.permission;
+    }
+
+    window.addEventListener("push-subscription-changed", onSubChanged);
+    window.addEventListener("push-permission-changed", onPermissionChanged);
+
+    onUnmounted(() => {
+      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/vue/useSwoffPwa.js

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { promptInstall } from "../pwa/prompt.js";
+
+export function useSwoffPwa() {
+  const canInstall = ref(false);
+
+  function onReady() { canInstall.value = true; }
+  function onDone() { canInstall.value = false; }
+
+  onMounted(() => {
+    window.addEventListener("pwa-installable", onReady);
+    window.addEventListener("pwa-installed", onDone);
+    window.addEventListener("pwa-dismissed", onDone);
+  });
+
+  onUnmounted(() => {
+    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/vue/useSwoffPwa.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { promptInstall } from "../pwa/prompt";
+
+export function useSwoffPwa() {
+  const canInstall = ref(false);
+
+  function onReady() { canInstall.value = true; }
+  function onDone() { canInstall.value = false; }
+
+  onMounted(() => {
+    window.addEventListener("pwa-installable", onReady);
+    window.addEventListener("pwa-installed", onDone);
+    window.addEventListener("pwa-dismissed", onDone);
+  });
+
+  onUnmounted(() => {
+    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/vue/useSwoffQueue.js

@@ -0,0 +1,70 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  getPendingCount,
+  getQueueItems,
+  processMutationQueue,
+} from "../mutation/queue.js";
+
+/**
+ * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
+ *
+ * Usage:
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
+ *
+ *   // Show pending badge:
+ *   <span v-if="pending > 0">{{ pending }} pending</span>
+ *
+ *   // Retry all queued mutations:
+ *   <button @click="retryAll" :disabled="isProcessing">
+ *     {{ isProcessing ? "Syncing..." : "Retry All" }}
+ *   </button>
+ */
+export function useSwoffQueue() {
+  const pending = ref(0);
+  const items = ref([]);
+  const lastSync = ref(null);
+  const isProcessing = ref(false);
+
+  async function refresh() {
+    const [count, queueItems] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    pending.value = count;
+    items.value = queueItems;
+  }
+
+  onMounted(() => {
+    queueMicrotask(() => refresh());
+
+    function onSync(e) {
+      isProcessing.value = false;
+      lastSync.value = { succeeded: e.detail.succeeded, failed: e.detail.failed };
+      refresh();
+    }
+    function onChange() { refresh(); }
+    function onProgress() { isProcessing.value = true; }
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    window.addEventListener("mutation-sync-progress", onProgress);
+
+    onUnmounted(() => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+      window.removeEventListener("mutation-sync-progress", onProgress);
+    });
+  });
+
+  async function retryAll() {
+    isProcessing.value = true;
+    try {
+      await processMutationQueue();
+    } finally {
+      await refresh();
+      isProcessing.value = false;
+    }
+  }
+
+  return { pending, items, lastSync, isProcessing, retryAll };
+}

package/templates/vue/useSwoffQueue.ts

@@ -0,0 +1,82 @@
+import { ref, onMounted, onUnmounted } from "vue";
+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;
+}
+
+/**
+ * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
+ *
+ * Usage:
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
+ *
+ *   // Show pending badge:
+ *   <span v-if="pending > 0">{{ pending }} pending</span>
+ *
+ *   // Retry all queued mutations:
+ *   <button @click="retryAll" :disabled="isProcessing">
+ *     {{ isProcessing ? "Syncing..." : "Retry All" }}
+ *   </button>
+ *
+ * @returns {{ pending, items, lastSync, isProcessing, retryAll }}
+ */
+export function useSwoffQueue(): MutationQueueState & {
+  retryAll: () => Promise<void>;
+} {
+  const pending = ref(0);
+  const items = ref<MutationQueueItem[]>([]);
+  const lastSync = ref<{ succeeded: number; failed: number } | null>(null);
+  const isProcessing = ref(false);
+
+  async function refresh() {
+    const [count, queueItems] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    pending.value = count;
+    items.value = queueItems;
+  }
+
+  onMounted(() => {
+    queueMicrotask(() => refresh());
+
+    function onSync(e: CustomEvent) {
+      isProcessing.value = false;
+      lastSync.value = { succeeded: e.detail.succeeded, failed: e.detail.failed };
+      refresh();
+    }
+    function onChange() { refresh(); }
+    function onProgress() { isProcessing.value = true; }
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    window.addEventListener("mutation-sync-progress", onProgress);
+
+    onUnmounted(() => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+      window.removeEventListener("mutation-sync-progress", onProgress);
+    });
+  });
+
+  async function retryAll() {
+    isProcessing.value = true;
+    try {
+      await processMutationQueue();
+    } finally {
+      await refresh();
+      isProcessing.value = false;
+    }
+  }
+
+  return { pending, items, lastSync, isProcessing, retryAll };
+}

package/templates/vue/useSwoffReset.js

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import { resetSwoff } from "../reset.js";
+
+/**
+ * Composable exposing swoff's nuclear reset with reactive state.
+ *
+ * Usage:
+ *   const { reset, isResetting, error } = useSwoffReset();
+ *
+ *   <button @click="reset()" :disabled="isResetting">
+ *     {{ isResetting ? "Resetting..." : "Reset Swoff" }}
+ *   </button>
+ *   <p v-if="error" style="color: red">{{ error.message }}</p>
+ */
+export function useSwoffReset() {
+  const isResetting = ref(false);
+  const error = ref(null);
+
+  async function reset(options) {
+    isResetting.value = true;
+    error.value = null;
+    try {
+      await resetSwoff(options);
+    } catch (e) {
+      error.value = e instanceof Error ? e : new Error(String(e));
+    } finally {
+      isResetting.value = false;
+    }
+  }
+
+  return { reset, isResetting: isResetting.value, error: error.value };
+}

package/templates/vue/useSwoffReset.ts

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

package/templates/vue/useSwoffStorage.js

@@ -0,0 +1,56 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { getStorageEstimate, formatBytes } from "../storage.js";
+
+/**
+ * Reactive storage estimate. Shows available quota and usage.
+ *
+ * Usage:
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
+ *
+ *   <div v-if="!loading && percentUsed > 80">Storage almost full</div>
+ *
+ * @param autoRefresh - Re-check on visibility change (default true)
+ */
+export function useSwoffStorage(autoRefresh = true) {
+  const usage = ref(0);
+  const quota = ref(0);
+  const percentUsed = ref(0);
+  const formattedUsage = ref("0 B");
+  const formattedQuota = ref("0 B");
+  const loading = ref(true);
+  const error = ref(null);
+
+  async function check() {
+    try {
+      const result = await getStorageEstimate();
+      usage.value = result.usage;
+      quota.value = result.quota;
+      percentUsed.value = result.percentUsed;
+      formattedUsage.value = formatBytes(result.usage);
+      formattedQuota.value = formatBytes(result.quota);
+      loading.value = false;
+      error.value = null;
+    } catch (err) {
+      loading.value = false;
+      error.value = String(err);
+    }
+  }
+
+  onMounted(() => {
+    check();
+  });
+
+  if (autoRefresh) {
+    onMounted(() => {
+      function onVisible() {
+        if (document.visibilityState === "visible") check();
+      }
+      document.addEventListener("visibilitychange", onVisible);
+      onUnmounted(() => {
+        document.removeEventListener("visibilitychange", onVisible);
+      });
+    });
+  }
+
+  return { usage, quota, percentUsed, formattedUsage, formattedQuota, loading, error };
+}

package/templates/vue/useSwoffStorage.ts

@@ -0,0 +1,57 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { getStorageEstimate, formatBytes } from "../storage";
+
+/**
+ * Reactive storage estimate. Shows available quota and usage.
+ *
+ * Usage:
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
+ *
+ *   <div v-if="!loading && percentUsed > 80">Storage almost full</div>
+ *
+ * @param autoRefresh - Re-check on visibility change (default true)
+ * @returns {{ usage: Ref<number>, quota: Ref<number>, percentUsed: Ref<number>, formattedUsage: Ref<string>, formattedQuota: Ref<string>, loading: Ref<boolean>, error: Ref<string | null> }}
+ */
+export function useSwoffStorage(autoRefresh = true) {
+  const usage = ref(0);
+  const quota = ref(0);
+  const percentUsed = ref(0);
+  const formattedUsage = ref("0 B");
+  const formattedQuota = ref("0 B");
+  const loading = ref(true);
+  const error = ref<string | null>(null);
+
+  async function check() {
+    try {
+      const result = await getStorageEstimate();
+      usage.value = result.usage;
+      quota.value = result.quota;
+      percentUsed.value = result.percentUsed;
+      formattedUsage.value = formatBytes(result.usage);
+      formattedQuota.value = formatBytes(result.quota);
+      loading.value = false;
+      error.value = null;
+    } catch (err) {
+      loading.value = false;
+      error.value = String(err);
+    }
+  }
+
+  onMounted(() => {
+    check();
+  });
+
+  if (autoRefresh) {
+    onMounted(() => {
+      function onVisible() {
+        if (document.visibilityState === "visible") check();
+      }
+      document.addEventListener("visibilitychange", onVisible);
+      onUnmounted(() => {
+        document.removeEventListener("visibilitychange", onVisible);
+      });
+    });
+  }
+
+  return { usage, quota, percentUsed, formattedUsage, formattedQuota, loading, error };
+}

package/templates/vue/useSwoffSync.js

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

package/templates/vue/useSwoffSync.ts

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