@swoff/cli 0.3.6 → 0.3.7

package/templates/hooks/useBackgroundSync.jsx

@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from "react";
+import { retrySync } from "../background-sync.js";
+
+export function useBackgroundSync() {
+  const [state, setState] = useState({
+    supported: "serviceWorker" in navigator && "SyncManager" in window,
+    registered: false,
+    lastSync: null,
+  });
+
+  useEffect(() => {
+    const onSyncComplete = (e) => {
+      setState((s) => ({
+        ...s,
+        registered: true,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
+    };
+
+    window.addEventListener("background-sync-complete", onSyncComplete);
+    return () => {
+      window.removeEventListener("background-sync-complete", onSyncComplete);
+    };
+  }, []);
+
+  const triggerSync = useCallback(async () => {
+    await retrySync();
+  }, []);
+
+  return { ...state, triggerSync };
+}

package/templates/hooks/useBackgroundSync.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from "react";
+import { retrySync } from "../background-sync.ts";
+
+export function useBackgroundSync() {
+  const [state, setState] = useState({
+    supported: "serviceWorker" in navigator && "SyncManager" in window,
+    registered: false,
+    lastSync: null as { succeeded: number; failed: number } | null,
+  });
+
+  useEffect(() => {
+    const onSyncComplete = (e: CustomEvent) => {
+      setState((s) => ({
+        ...s,
+        registered: true,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
+    };
+
+    window.addEventListener("background-sync-complete", onSyncComplete);
+    return () => {
+      window.removeEventListener("background-sync-complete", onSyncComplete);
+    };
+  }, []);
+
+  const triggerSync = useCallback(async () => {
+    await retrySync();
+  }, []);
+
+  return { ...state, triggerSync };
+}

package/templates/hooks/useCacheInvalidation.jsx

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { invalidateByTag, invalidateByTags } from "../cache.js";
+import { invalidateUrl } from "../invalidation-tags.js";
+
+export function useCacheInvalidation() {
+  const invalidateTag = useCallback(async (tag) => {
+    await invalidateByTag(tag);
+  }, []);
+
+  const invalidateTags = useCallback(async (tags) => {
+    await invalidateByTags(tags);
+  }, []);
+
+  const invalidateCacheUrl = useCallback(async (url) => {
+    await invalidateUrl(url);
+  }, []);
+
+  return { invalidateByTag: invalidateTag, invalidateByTags: invalidateTags, invalidateUrl: invalidateCacheUrl };
+}

package/templates/hooks/useCacheInvalidation.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { invalidateByTag, invalidateByTags } from "../cache.ts";
+import { invalidateUrl } from "../invalidation-tags.ts";
+
+export function useCacheInvalidation() {
+  const invalidateTag = useCallback(async (tag: string) => {
+    await invalidateByTag(tag);
+  }, []);
+
+  const invalidateTags = useCallback(async (tags: string[]) => {
+    await invalidateByTags(tags);
+  }, []);
+
+  const invalidateCacheUrl = useCallback(async (url: string) => {
+    await invalidateUrl(url);
+  }, []);
+
+  return { invalidateByTag: invalidateTag, invalidateByTags: invalidateTags, invalidateUrl: invalidateCacheUrl };
+}

package/templates/hooks/useCachedFetch.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback, useRef, startTransition } from "react";
+import { fetchWithCache } from "../fetch-wrapper.js";
+import { generateTags } from "../invalidation-tags.js";
+
+export function useCachedFetch(url, options = {}) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [refetchCount, setRefetchCount] = useState(0);
+  const optionsRef = useRef(options);
+  useEffect(() => { optionsRef.current = options; }, [options]);
+
+  const refetch = useCallback(() => setRefetchCount((c) => c + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    startTransition(() => setLoading(true));
+
+    const doFetch = async () => {
+      try {
+        const { response } = await fetchWithCache(url, optionsRef.current);
+        if (cancelled) return;
+        if (response) {
+          setData(await response.json());
+        } else {
+          setData(null);
+        }
+        if (!cancelled) setError(null);
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    doFetch();
+    return () => { cancelled = true; };
+  }, [url, refetchCount]);
+
+  useEffect(() => {
+    const onInvalidated = (e) => {
+      const detail = e.detail;
+      const tags = detail?.tags;
+      if (!tags || !Array.isArray(tags)) return;
+      const urlTags = generateTags(url);
+      if (tags.some((t) => urlTags.includes(t))) {
+        setRefetchCount((c) => c + 1);
+      }
+    };
+    window.addEventListener("cache-invalidated", onInvalidated);
+    return () => window.removeEventListener("cache-invalidated", onInvalidated);
+  }, [url]);
+
+  return { data, error, loading, refetch };
+}

package/templates/hooks/useCachedFetch.tsx

@@ -0,0 +1,69 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  startTransition,
+} from "react";
+import { fetchWithCache } from "../fetch-wrapper.ts";
+import { generateTags } from "../invalidation-tags.ts";
+
+export function useCachedFetch<T>(
+  url: string,
+  options: Parameters<typeof fetchWithCache>[1] = {},
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refetchCount, setRefetchCount] = useState(0);
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const refetch = useCallback(() => setRefetchCount((c) => c + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    startTransition(() => setLoading(true));
+
+    const doFetch = async () => {
+      try {
+        const { response } = await fetchWithCache(url, optionsRef.current);
+        if (cancelled) return;
+        if (response) {
+          setData(await response.json());
+        } else {
+          setData(null);
+        }
+        if (!cancelled) setError(null);
+      } catch (err) {
+        if (!cancelled)
+          setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    doFetch();
+    return () => {
+      cancelled = true;
+    };
+  }, [url, refetchCount]);
+
+  useEffect(() => {
+    const onInvalidated = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      const tags = detail?.tags;
+      if (!tags || !Array.isArray(tags)) return;
+      const urlTags = generateTags(url);
+      if (tags.some((t: string) => urlTags.includes(t))) {
+        setRefetchCount((c) => c + 1);
+      }
+    };
+    window.addEventListener("cache-invalidated", onInvalidated);
+    return () => window.removeEventListener("cache-invalidated", onInvalidated);
+  }, [url]);
+
+  return { data, error, loading, refetch };
+}

package/templates/hooks/useMutationQueue.jsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { getPendingCount } from "../mutation-queue.js";
+
+export function useMutationQueue() {
+  const [state, setState] = useState({
+    pending: 0,
+    lastSync: null,
+  });
+
+  useEffect(() => {
+    getPendingCount().then((count) => setState((s) => ({ ...s, pending: count })));
+
+    const onSync = (e) => {
+      getPendingCount().then((count) => {
+        setState({
+          pending: count,
+          lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+        });
+      });
+    };
+    const onChange = () => {
+      getPendingCount().then((count) => setState((s) => ({ ...s, pending: count })));
+    };
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    return () => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+    };
+  }, []);
+
+  return state;
+}

package/templates/hooks/useMutationQueue.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { getPendingCount } from "../mutation-queue.ts";
+
+export function useMutationQueue() {
+  const [state, setState] = useState<{
+    pending: number;
+    lastSync: { succeeded: number; failed: number } | null;
+  }>({ pending: 0, lastSync: null });
+
+  useEffect(() => {
+    getPendingCount().then((count: number) => setState((s) => ({ ...s, pending: count })));
+
+    const onSync = (e: CustomEvent) => {
+      getPendingCount().then((count: number) => {
+        setState({
+          pending: count,
+          lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+        });
+      });
+    };
+    const onChange = () => {
+      getPendingCount().then((count: number) => setState((s) => ({ ...s, pending: count })));
+    };
+
+    window.addEventListener("mutation-sync-complete", onSync);
+    window.addEventListener("mutation-queue-changed", onChange);
+    return () => {
+      window.removeEventListener("mutation-sync-complete", onSync);
+      window.removeEventListener("mutation-queue-changed", onChange);
+    };
+  }, []);
+
+  return state;
+}

package/templates/hooks/useNetworkStatus.jsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+export function useNetworkStatus() {
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const onOnline = () => setOnline(true);
+    const onOffline = () => setOnline(false);
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+    };
+  }, []);
+
+  return online;
+}

package/templates/hooks/useNetworkStatus.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+export function useNetworkStatus() {
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const onOnline = () => setOnline(true);
+    const onOffline = () => setOnline(false);
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+    };
+  }, []);
+
+  return online;
+}

package/templates/hooks/usePushSubscription.jsx

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../push.js";
+
+export function usePushSubscription(vapidPublicKey) {
+  const [state, setState] = useState({
+    subscribed: false,
+    subscription: null,
+    permission: Notification.permission,
+    loading: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subscribed) => {
+      if (cancelled) return;
+      if (subscribed) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      } else {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      }
+    });
+
+    const onSubChanged = (e) => {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      }
+    };
+    const onPermissionChanged = (e) => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, permission: 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);
+    };
+  }, []);
+
+  const subscribe = useCallback(async () => {
+    const sub = await subscribeToPush(vapidPublicKey);
+    return sub !== null;
+  }, [vapidPublicKey]);
+
+  const unsubscribe = useCallback(async () => {
+    await unsubscribeFromPush();
+  }, []);
+
+  return { ...state, subscribe, unsubscribe };
+}

package/templates/hooks/usePushSubscription.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../push.ts";
+
+export function usePushSubscription(vapidPublicKey: string) {
+  const [state, setState] = useState({
+    subscribed: false,
+    subscription: null as PushSubscription | null,
+    permission: Notification.permission,
+    loading: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subscribed) => {
+      if (cancelled) return;
+      if (subscribed) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      } else {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      }
+    });
+
+    const onSubChanged = (e: CustomEvent) => {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      }
+    };
+    const onPermissionChanged = (e: CustomEvent) => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, permission: 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);
+    };
+  }, []);
+
+  const subscribe = useCallback(async () => {
+    const sub = await subscribeToPush(vapidPublicKey);
+    return sub !== null;
+  }, [vapidPublicKey]);
+
+  const unsubscribe = useCallback(async () => {
+    await unsubscribeFromPush();
+  }, []);
+
+  return { ...state, subscribe, unsubscribe };
+}

package/templates/hooks/useSWUpdate.jsx

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import { handleUpdateApproved } from "../sw/injector.js";
+
+export function useSWUpdate() {
+  const [state, setState] = useState({
+    updateStatus: "idle",
+    currentVersion: window.currentSWVersion || null,
+    availableVersion: null,
+    progress: 0,
+    forceUpdate: false,
+    error: null,
+  });
+
+  useEffect(() => {
+    if (sessionStorage.getItem("sw-dismissed-update") === "true") return;
+
+    const onAvailable = (e) =>
+      setState((s) => ({
+        ...s,
+        updateStatus: "available",
+        availableVersion: e.detail.version,
+        forceUpdate: window.swUpdateRequired || false,
+      }));
+    const onProgress = (e) =>
+      setState((s) => ({ ...s, updateStatus: "downloading", progress: e.detail.percent }));
+    const onReady = () =>
+      setState((s) => ({ ...s, updateStatus: "idle", progress: 0 }));
+    const onError = () =>
+      setState((s) => ({ ...s, error: "SW registration failed" }));
+
+    window.addEventListener("sw-update-available", onAvailable);
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    window.addEventListener("sw-error", onError);
+    return () => {
+      window.removeEventListener("sw-update-available", onAvailable);
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+      window.removeEventListener("sw-error", onError);
+    };
+  }, []);
+
+  const acceptUpdate = useCallback(async () => {
+    if (!state.availableVersion) return;
+    await handleUpdateApproved(state.availableVersion);
+  }, [state.availableVersion]);
+
+  const dismissUpdate = useCallback(() => {
+    sessionStorage.setItem("sw-dismissed-update", "true");
+    setState((s) => ({ ...s, updateStatus: "idle" }));
+  }, []);
+
+  return { ...state, acceptUpdate, dismissUpdate };
+}
+
+export function useSWProgress() {
+  const [state, setState] = useState({
+    status: "idle",
+    progress: 0,
+  });
+
+  useEffect(() => {
+    const onProgress = (e) =>
+      setState({ status: "installing", progress: e.detail.percent });
+    const onReady = () => setState({ status: "idle", progress: 0 });
+
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+    };
+  }, []);
+
+  return state;
+}

package/templates/hooks/useSWUpdate.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import { handleUpdateApproved } from "../sw/injector.ts";
+
+export function useSWUpdate() {
+  const [state, setState] = useState({
+    updateStatus: "idle" as "idle" | "available" | "downloading" | "ready",
+    currentVersion: (window.currentSWVersion as string | undefined) || null,
+    availableVersion: null as string | null,
+    progress: 0 as number,
+    forceUpdate: false,
+    error: null as string | null,
+  });
+
+  useEffect(() => {
+    if (sessionStorage.getItem("sw-dismissed-update") === "true") return;
+
+    const onAvailable = (e: WindowEventMap["sw-update-available"]) =>
+      setState((s) => ({
+        ...s,
+        updateStatus: "available",
+        availableVersion: e.detail.version,
+        forceUpdate: window.swUpdateRequired || false,
+      }));
+    const onProgress = (e: WindowEventMap["sw-progress"]) =>
+      setState((s) => ({ ...s, updateStatus: "downloading", progress: e.detail.percent }));
+    const onReady = () =>
+      setState((s) => ({ ...s, updateStatus: "idle", progress: 0 }));
+    const onError = () =>
+      setState((s) => ({ ...s, error: "SW registration failed" }));
+
+    window.addEventListener("sw-update-available", onAvailable);
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    window.addEventListener("sw-error", onError);
+    return () => {
+      window.removeEventListener("sw-update-available", onAvailable);
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+      window.removeEventListener("sw-error", onError);
+    };
+  }, []);
+
+  const acceptUpdate = useCallback(async () => {
+    if (!state.availableVersion) return;
+    await handleUpdateApproved(state.availableVersion);
+  }, [state.availableVersion]);
+
+  const dismissUpdate = useCallback(() => {
+    sessionStorage.setItem("sw-dismissed-update", "true");
+    setState((s) => ({ ...s, updateStatus: "idle" }));
+  }, []);
+
+  return { ...state, acceptUpdate, dismissUpdate };
+}
+
+export function useSWProgress() {
+  const [state, setState] = useState({
+    status: "idle" as "idle" | "installing",
+    progress: 0 as number,
+  });
+
+  useEffect(() => {
+    const onProgress = (e: WindowEventMap["sw-progress"]) =>
+      setState({ status: "installing", progress: e.detail.percent });
+    const onReady = () => setState({ status: "idle", progress: 0 });
+
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+    };
+  }, []);
+
+  return state;
+}