@swoff/cli 0.4.1 → 0.4.4

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