@swoff/cli 0.3.5 → 0.3.7

package/dist/lib/shared/config-types.js

@@ -4,9 +4,9 @@ export const KNOWN_FEATURES = [
     "auth",
     "crossTabSync",
     "tagInvalidation",
-    "clientRegistration",
+    "pushNotifications",
 ];
-export const OBJECT_FEATURES = ["pwa", "serviceWorker", "auth"];
+export const OBJECT_FEATURES = ["pwa", "serviceWorker", "auth", "pushNotifications"];
 export const VALID_STRATEGIES = [
     "cache-first",
     "network-first",
@@ -22,6 +22,11 @@ function normalizeAuth(auth) {
         return { ...defaultAuth, ...auth };
     return defaultAuth;
 }
+function normalizeSwVersion(ver) {
+    if (ver && typeof ver === "object")
+        return { ...defaultVersionConfig, ...ver };
+    return defaultVersionConfig;
+}
 export function mergeConfigs(base, override) {
     return {
         ...base,
@@ -30,7 +35,11 @@ export function mergeConfigs(base, override) {
             ...base.features,
             ...override.features,
             pwa: { ...base.features.pwa, ...override.features?.pwa },
-            serviceWorker: { ...base.features.serviceWorker, ...override.features?.serviceWorker },
+            serviceWorker: {
+                ...base.features.serviceWorker,
+                ...override.features?.serviceWorker,
+                version: normalizeSwVersion(override.features?.serviceWorker?.version),
+            },
             auth: normalizeAuth(override.features?.auth),
         },
         build: { ...base.build, ...override.build },
@@ -42,22 +51,27 @@ export const defaultAuth = {
     refreshPath: "/api/refresh",
     userEndpoint: "/api/me",
 };
-export const defaultConfig = {
+export const defaultVersionConfig = {
     enabled: true,
-    version: "from-package",
+    source: "from-package",
     minSupportedVersion: "0.0.0",
+};
+export const defaultConfig = {
+    enabled: true,
     features: {
         pwa: {
             enabled: true,
             preventDefaultInstall: false,
         },
         serviceWorker: {
-            versionedSw: true,
-            autoRegister: true,
+            version: { ...defaultVersionConfig },
+            autoUpdate: true,
             autoActivate: false,
             defaultStrategy: "cache-first",
             strategies: {},
+            cacheStrategy: "all",
             clearRuntimeOnUpdate: false,
+            navigationPreload: true,
             navigationMode: "spa",
             spaEntry: "/index.html",
         },
@@ -66,7 +80,7 @@ export const defaultConfig = {
         auth: { ...defaultAuth },
         crossTabSync: true,
         tagInvalidation: true,
-        clientRegistration: true,
+        pushNotifications: { enabled: false },
     },
     build: {
         outputDir: "dist",
@@ -76,11 +90,14 @@ export const defaultConfig = {
 export const defaultInitConfig = {
     ...defaultConfig,
     $schema: "https://swoff.netlify.app/schema/v1.json",
-    minSupportedVersion: "1.0.0",
     features: {
         ...defaultConfig.features,
         serviceWorker: {
             ...defaultConfig.features.serviceWorker,
+            version: {
+                ...defaultVersionConfig,
+                minSupportedVersion: "1.0.0",
+            },
             strategies: {
                 "/api/*": "network-first",
                 "/static/*": "cache-first",

package/dist/lib/shared/config-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"config-types.js","sourceRoot":"","sources":["../../../src/lib/shared/config-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config-types.js","sourceRoot":"","sources":["../../../src/lib/shared/config-types.ts"],"names":[],"mappings":"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"}

package/dist/lib/utils/build-script.js

@@ -0,0 +1,35 @@
+/**
+ * Utilities for managing the SW generator step in package.json build scripts.
+ */
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { join } from "path";
+const SW_GENERATOR_STEP = " && node swoff/sw/generator.js";
+export function appendGeneratorToBuildScript(projectRoot) {
+    const pkgPath = join(projectRoot, "package.json");
+    if (!existsSync(pkgPath))
+        return false;
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    const build = pkg.scripts?.build;
+    if (!build || typeof build !== "string")
+        return false;
+    if (build.includes(SW_GENERATOR_STEP))
+        return false;
+    pkg.scripts.build = build + SW_GENERATOR_STEP;
+    writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+    return true;
+}
+export function removeGeneratorFromBuildScript(projectRoot) {
+    const pkgPath = join(projectRoot, "package.json");
+    if (!existsSync(pkgPath))
+        return false;
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    const build = pkg.scripts?.build;
+    if (!build || typeof build !== "string")
+        return false;
+    if (!build.includes(SW_GENERATOR_STEP))
+        return false;
+    pkg.scripts.build = build.replace(SW_GENERATOR_STEP, "");
+    writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+    return true;
+}
+//# sourceMappingURL=build-script.js.map

package/dist/lib/utils/build-script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-script.js","sourceRoot":"","sources":["../../../src/lib/utils/build-script.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,MAAM,iBAAiB,GAAG,gCAAgC,CAAC;AAE3D,MAAM,UAAU,4BAA4B,CAAC,WAAmB;IAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IAEvC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC;IAEjC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAAE,OAAO,KAAK,CAAC;IAEpD,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,GAAG,iBAAiB,CAAC;IAC9C,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC5D,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,8BAA8B,CAAC,WAAmB;IAChE,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IAEvC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC;IAEjC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IACtD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAAE,OAAO,KAAK,CAAC;IAErD,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IACzD,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC5D,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swoff/cli",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "description": "CLI for Swoff - Offline-first web apps made easy",
   "bin": {
@@ -18,7 +18,8 @@
   },
   "files": [
     "bin/",
-    "dist/"
+    "dist/",
+    "templates/"
   ],
   "keywords": [
     "service-worker",

package/templates/hooks/useAuth.jsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+import { getAuthState } from "../auth/state.js";
+
+export function useAuth() {
+  const [state, setState] = useState({
+    authenticated: false,
+    user: null,
+    online: navigator.onLine,
+  });
+
+  useEffect(() => {
+    getAuthState().then(setState);
+
+    const onOnline = () => setState((s) => ({ ...s, online: true }));
+    const onOffline = () => setState((s) => ({ ...s, online: false }));
+    const onAuthChange = () => getAuthState().then(setState);
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    window.addEventListener("sw-auth-state-change", onAuthChange);
+
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("sw-auth-state-change", onAuthChange);
+    };
+  }, []);
+
+  return state;
+}

package/templates/hooks/useAuth.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+import { getAuthState } from "../auth/state.ts";
+
+export function useAuth() {
+  const [state, setState] = useState({
+    authenticated: false,
+    user: null as Record<string, unknown> | null,
+    online: navigator.onLine,
+  });
+
+  useEffect(() => {
+    getAuthState().then(setState);
+
+    const onOnline = () => setState((s) => ({ ...s, online: true }));
+    const onOffline = () => setState((s) => ({ ...s, online: false }));
+    const onAuthChange = () => getAuthState().then(setState);
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    window.addEventListener("sw-auth-state-change", onAuthChange);
+
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("sw-auth-state-change", onAuthChange);
+    };
+  }, []);
+
+  return state;
+}

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