@swoff/cli 0.4.1 → 0.4.4

package/templates/vue/useSwoffMutationState.ts

@@ -0,0 +1,36 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { getMutationState, onMutationStateChange } from "../mutation/state";
+import type { MutationState } from "../mutation/state";
+
+/**
+ * Composable that subscribes to a specific mutation's state changes.
+ * Useful for showing per-mutation loading spinners, error states, etc.
+ *
+ * Usage:
+ *   const mutation = useSwoffMutationState(mutationId);
+ *   <div v-if="mutation?.status === 'error'">{{ mutation?.error?.message }}</div>
+ */
+export function useSwoffMutationState(id: string | null) {
+  const state = ref<MutationState | null>(null);
+
+  function update() {
+    state.value = id ? (getMutationState(id) ?? null) : null;
+  }
+
+  onMounted(update);
+
+  let cleanup: (() => void) | undefined;
+
+  onMounted(() => {
+    const unsub = onMutationStateChange(update);
+    if (typeof unsub === "function") {
+      cleanup = unsub;
+    }
+
+    onUnmounted(() => {
+      cleanup?.();
+    });
+  });
+
+  return state;
+}

package/templates/vue/useSwoffNetwork.js

@@ -0,0 +1,86 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  CONNECTIVITY_EVENT,
+  forceRetry,
+  getCurrentOnlineStatus,
+} from "../connectivity.js";
+
+/**
+ * Reactive network information: online status, connection type, and bandwidth.
+ *
+ * Usage:
+ *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useSwoffNetwork();
+ *
+ *   // Show offline indicator:
+ *   <div v-if="!online">You are offline</div>
+ *
+ *   // Warn on slow connection:
+ *   <div v-if="online && effectiveType === '2g'">Slow connection detected</div>
+ */
+export function useSwoffNetwork() {
+  const online = ref(true);
+  const wasOffline = ref(false);
+  const lastChangedAt = ref(null);
+  const effectiveType = ref(null);
+  const downlink = ref(null);
+  const isRetrying = ref(false);
+
+  let wasOfflineFlag = false;
+
+  onMounted(() => {
+    if (!getCurrentOnlineStatus()) {
+      wasOfflineFlag = true;
+      online.value = false;
+      wasOffline.value = true;
+      lastChangedAt.value = Date.now();
+    }
+
+    const connection = navigator.connection;
+
+    function handleConnectivityChange(e) {
+      const isTrulyOnline = e.detail.online;
+      if (!isTrulyOnline) {
+        wasOfflineFlag = true;
+      } else {
+        wasOfflineFlag = false;
+      }
+      online.value = isTrulyOnline;
+      wasOffline.value = wasOfflineFlag;
+      lastChangedAt.value = Date.now();
+    }
+
+    function onTypeChange() {
+      if (!connection) return;
+      effectiveType.value = connection.effectiveType;
+      downlink.value = connection.downlink;
+    }
+
+    window.addEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+    if (connection) {
+      connection.addEventListener("change", onTypeChange);
+    }
+
+    onUnmounted(() => {
+      window.removeEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+      if (connection) {
+        connection.removeEventListener("change", onTypeChange);
+      }
+    });
+  });
+
+  async function retry() {
+    isRetrying.value = true;
+    await forceRetry();
+    isRetrying.value = false;
+  }
+
+  return {
+    online,
+    wasOffline,
+    lastChangedAt,
+    effectiveType,
+    downlink,
+    isRetrying,
+    retry,
+  };
+}

package/templates/vue/useSwoffNetwork.ts

@@ -0,0 +1,89 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  CONNECTIVITY_EVENT,
+  forceRetry,
+  getCurrentOnlineStatus,
+} from "../connectivity";
+
+/**
+ * Reactive network information: online status, connection type, and bandwidth.
+ *
+ * Usage:
+ *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useSwoffNetwork();
+ *
+ *   // Show offline indicator:
+ *   <div v-if="!online">You are offline</div>
+ *
+ *   // Warn on slow connection:
+ *   <div v-if="online && effectiveType === '2g'">Slow connection detected</div>
+ *
+ * @returns {{ online: Ref<boolean>, wasOffline: Ref<boolean>, lastChangedAt: Ref<number | null>, effectiveType: Ref<string | null>, downlink: Ref<number | null>, isRetrying: Ref<boolean>, retry: () => Promise<void> }}
+ */
+export function useSwoffNetwork() {
+  const online = ref(true);
+  const wasOffline = ref(false);
+  const lastChangedAt = ref<number | null>(null);
+  const effectiveType = ref<string | null>(null);
+  const downlink = ref<number | null>(null);
+  const isRetrying = ref(false);
+
+  let wasOfflineFlag = false;
+
+  onMounted(() => {
+    // Sync with actual status after mount — prevents SSR hydration mismatch
+    if (!getCurrentOnlineStatus()) {
+      wasOfflineFlag = true;
+      online.value = false;
+      wasOffline.value = true;
+      lastChangedAt.value = 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.value = isTrulyOnline;
+      wasOffline.value = wasOfflineFlag;
+      lastChangedAt.value = Date.now();
+    }
+
+    function onTypeChange() {
+      if (!connection) return;
+      effectiveType.value = connection.effectiveType;
+      downlink.value = connection.downlink;
+    }
+
+    window.addEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+    if (connection) {
+      connection.addEventListener("change", onTypeChange);
+    }
+
+    onUnmounted(() => {
+      window.removeEventListener(CONNECTIVITY_EVENT, handleConnectivityChange);
+      if (connection) {
+        connection.removeEventListener("change", onTypeChange);
+      }
+    });
+  });
+
+  async function retry() {
+    isRetrying.value = true;
+    await forceRetry();
+    isRetrying.value = false;
+  }
+
+  return {
+    online,
+    wasOffline,
+    lastChangedAt,
+    effectiveType,
+    downlink,
+    isRetrying,
+    retry,
+  };
+}

package/templates/vue/useSwoffPrecache.js

@@ -0,0 +1,19 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useSwoffPrecache() {
+  const progress = ref(0);
+
+  function onProgress(e) {
+    progress.value = e.detail.percent;
+  }
+
+  onMounted(() => {
+    window.addEventListener("sw-progress", onProgress);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("sw-progress", onProgress);
+  });
+
+  return { progress };
+}

package/templates/vue/useSwoffPrecache.ts

@@ -0,0 +1,19 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useSwoffPrecache() {
+  const progress = ref(0);
+
+  function onProgress(e: WindowEventMap["sw-progress"]) {
+    progress.value = e.detail.percent;
+  }
+
+  onMounted(() => {
+    window.addEventListener("sw-progress", onProgress);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("sw-progress", onProgress);
+  });
+
+  return { progress };
+}

package/templates/vue/useSwoffPrefetch.js

@@ -0,0 +1,33 @@
+import { ref } from "vue";
+import { prefetchCache } from "../fetch/core.js";
+/**
+ * Composable that returns a stable prefetch callback, observable prefetch list, and clear function.
+ *
+ * Usage:
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
+ *
+ *   // Prefetch when user hovers a link:
+ *   <button @mouseenter="prefetch('/api/todos')">Load</button>
+ *
+ *   // Show how many URLs are prefetched:
+ *   <span>{{ prefetchList.length }} routes cached</span>
+ *
+ *   // Clear prefetched data:
+ *   <button @click="clear">Clear prefetch</button>
+ */
+export function useSwoffPrefetch() {
+  const prefetchList = ref([]);
+
+  function prefetch(url, options) {
+    prefetchCache(url, options);
+    if (!prefetchList.value.includes(url)) {
+      prefetchList.value = [...prefetchList.value, url];
+    }
+  }
+
+  function clear() {
+    prefetchList.value = [];
+  }
+
+  return { prefetch, prefetchList: prefetchList.value, clear };
+}

package/templates/vue/useSwoffPrefetch.ts

@@ -0,0 +1,41 @@
+import { ref } from "vue";
+import { prefetchCache } from "../fetch/core";
+import type { FetchWithCacheOptions } from "../fetch/core";
+
+/**
+ * Composable that returns a stable prefetch callback, observable prefetch list, and clear function.
+ *
+ * Usage:
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
+ *
+ *   // Prefetch when user hovers a link:
+ *   <button @mouseenter="prefetch('/api/todos')">Load</button>
+ *
+ *   // Show how many URLs are prefetched:
+ *   <span>{{ prefetchList.length }} routes cached</span>
+ *
+ *   // Clear prefetched data:
+ *   <button @click="clear">Clear prefetch</button>
+ *
+ * @returns {{ prefetch: (url: string, options?: FetchWithCacheOptions) => void, prefetchList: string[], clear: () => void }}
+ */
+export function useSwoffPrefetch(): {
+  prefetch: (url: string, options?: FetchWithCacheOptions) => void;
+  prefetchList: string[];
+  clear: () => void;
+} {
+  const prefetchList = ref<string[]>([]);
+
+  function prefetch(url: string, options?: FetchWithCacheOptions) {
+    prefetchCache(url, options);
+    if (!prefetchList.value.includes(url)) {
+      prefetchList.value = [...prefetchList.value, url];
+    }
+  }
+
+  function clear() {
+    prefetchList.value = [];
+  }
+
+  return { prefetch, prefetchList: prefetchList.value, clear };
+}

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