@swoff/cli 0.3.6 → 0.3.8

package/templates/hooks/useMutation.jsx

@@ -0,0 +1,76 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import { fetchWithCache } from "../fetch-wrapper.js";
+import {
+  trackMutation,
+  resolveMutation,
+  rejectMutation,
+} from "../mutation-state.js";
+
+export function useMutation(options = {}) {
+  const [state, setState] = useState({
+    data: null,
+    error: null,
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+  });
+
+  const optionsRef = useRef(options);
+
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const mutate = useCallback(async (url, fetchOptions = {}) => {
+    const mutationId = "mut-" + crypto.randomUUID();
+    trackMutation(mutationId, "pending");
+    setState({
+      data: null,
+      error: null,
+      isLoading: true,
+      isError: false,
+      isSuccess: false,
+    });
+
+    try {
+      const { response } = await fetchWithCache(url, fetchOptions);
+      const data = await response.json();
+      resolveMutation(mutationId, data);
+      setState({
+        data,
+        error: null,
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+      });
+      optionsRef.current.onSuccess?.(data);
+      optionsRef.current.onSettled?.();
+      return data;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      rejectMutation(mutationId, error);
+      setState({
+        data: null,
+        error,
+        isLoading: false,
+        isError: true,
+        isSuccess: false,
+      });
+      optionsRef.current.onError?.(error);
+      optionsRef.current.onSettled?.();
+      return null;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return { ...state, mutate, reset };
+}

package/templates/hooks/useMutation.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import { fetchWithCache } from "../fetch-wrapper.ts";
+import {
+  trackMutation,
+  resolveMutation,
+  rejectMutation,
+} from "../mutation-state.ts";
+import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
+
+export interface UseMutationOptions<TData> {
+  onSuccess?: (data: TData) => void;
+  onError?: (error: Error) => void;
+  onSettled?: () => void;
+}
+
+export function useMutation<TData = unknown>(
+  options: UseMutationOptions<TData> = {},
+) {
+  const [state, setState] = useState<{
+    data: TData | null;
+    error: Error | null;
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+  }>({
+    data: null,
+    error: null,
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+  });
+
+  const optionsRef = useRef(options);
+
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const mutate = useCallback(
+    async (
+      url: string,
+      fetchOptions: FetchWithCacheOptions = {},
+    ): Promise<TData | null> => {
+      const mutationId = "mut-" + crypto.randomUUID();
+      trackMutation(mutationId, "pending");
+      setState({
+        data: null,
+        error: null,
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+      });
+
+      try {
+        const { response } = await fetchWithCache<TData>(url, fetchOptions);
+        const data: TData = await response.json();
+        resolveMutation(mutationId, data);
+        setState({
+          data,
+          error: null,
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+        });
+        optionsRef.current.onSuccess?.(data);
+        optionsRef.current.onSettled?.();
+        return data;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        rejectMutation(mutationId, error);
+        setState({
+          data: null,
+          error,
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+        });
+        optionsRef.current.onError?.(error);
+        optionsRef.current.onSettled?.();
+        return null;
+      }
+    },
+    [],
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return { ...state, mutate, reset };
+}

package/templates/hooks/useMutationQueue.jsx

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from "react";
+import { getPendingCount, getQueueItems } from "../mutation-queue.js";
+
+export function useMutationQueue() {
+  const [state, setState] = useState({
+    pending: 0,
+    items: [],
+    lastSync: null,
+  });
+
+  const refresh = useCallback(async () => {
+    const [count, items] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    setState((s) => ({ ...s, pending: count, items }));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+
+    const onSync = (e) => {
+      refresh();
+      setState((s) => ({
+        ...s,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
+    };
+    const onChange = () => {
+      refresh();
+    };
+
+    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);
+    };
+  }, [refresh]);
+
+  return state;
+}

package/templates/hooks/useMutationQueue.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback } from "react";
+import { getPendingCount, getQueueItems } from "../mutation-queue.ts";
+import type { MutationQueueItem } from "../swoff.d.ts";
+
+export interface MutationQueueState {
+  pending: number;
+  items: MutationQueueItem[];
+  lastSync: { succeeded: number; failed: number } | null;
+}
+
+export function useMutationQueue() {
+  const [state, setState] = useState<MutationQueueState>({
+    pending: 0,
+    items: [],
+    lastSync: null,
+  });
+
+  const refresh = useCallback(async () => {
+    const [count, items] = await Promise.all([
+      getPendingCount(),
+      getQueueItems(),
+    ]);
+    setState((s) => ({ ...s, pending: count, items }));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+
+    const onSync = (e: CustomEvent) => {
+      refresh();
+      setState((s) => ({
+        ...s,
+        lastSync: { succeeded: e.detail.succeeded, failed: e.detail.failed },
+      }));
+    };
+    const onChange = () => {
+      refresh();
+    };
+
+    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);
+    };
+  }, [refresh]);
+
+  return state;
+}

package/templates/hooks/useMutationState.jsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { getMutationState, onMutationStateChange } from "../mutation-state.js";
+
+export function useMutationState(id) {
+  const [state, setState] = useState(() =>
+    id ? getMutationState(id) ?? null : null,
+  );
+
+  useEffect(() => {
+    if (!id) {
+      setState(null);
+      return;
+    }
+
+    setState(getMutationState(id) ?? null);
+
+    const unsub = onMutationStateChange((updated) => {
+      if (updated.id === id) {
+        setState(updated);
+      }
+    });
+
+    return unsub;
+  }, [id]);
+
+  return state;
+}

package/templates/hooks/useMutationState.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import {
+  getMutationState,
+  onMutationStateChange,
+} from "../mutation-state.ts";
+import type { MutationState } from "../mutation-state.ts";
+
+/**
+ * Hook that subscribes to a specific mutation's state changes.
+ * Useful for showing per-mutation loading spinners, error states, etc.
+ *
+ * Usage:
+ *   const mutation = useMutationState(mutationId);
+ *   if (mutation?.status === "error") { ... }
+ */
+export function useMutationState(id: string | null): MutationState | null {
+  const [state, setState] = useState<MutationState | null>(() =>
+    id ? getMutationState(id) ?? null : null,
+  );
+
+  useEffect(() => {
+    if (!id) {
+      setState(null);
+      return;
+    }
+
+    // Initial state
+    setState(getMutationState(id) ?? null);
+
+    // Subscribe to changes
+    const unsub = onMutationStateChange((updated) => {
+      if (updated.id === id) {
+        setState(updated);
+      }
+    });
+
+    return unsub;
+  }, [id]);
+
+  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/usePrefetch.jsx

@@ -0,0 +1,10 @@
+import { useCallback } from "react";
+import { prefetchCache } from "../fetch-wrapper.js";
+
+export function usePrefetch() {
+  const prefetch = useCallback((url, options) => {
+    prefetchCache(url, options);
+  }, []);
+
+  return prefetch;
+}

package/templates/hooks/usePrefetch.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import { prefetchCache } from "../fetch-wrapper.ts";
+import type { FetchWithCacheOptions } from "../fetch-wrapper.ts";
+
+/**
+ * Hook that returns a stable prefetch callback for warming the SW cache.
+ * Useful for route-level prefetching, link hover prefetching, etc.
+ *
+ * Usage:
+ *   const prefetch = usePrefetch();
+ *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
+ */
+export function usePrefetch(): (
+  url: string,
+  options?: FetchWithCacheOptions,
+) => void {
+  const prefetch = useCallback(
+    (url: string, options?: FetchWithCacheOptions) => {
+      prefetchCache(url, options);
+    },
+    [],
+  );
+
+  return prefetch;
+}

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