@carlonicora/nextjs-jsonapi 4.2.3 → 5.0.0

package/src/hooks/usePushNotifications.ts

@@ -2,11 +2,8 @@
 
 import { useEffect } from "react";
 import { ENV } from "../core/env";
-import { useCurrentUserContext } from "../contexts";
 import { UserInterface } from "../features/user/data";
 import { PushService } from "../features/push/data/push.service";
-import { getRoleId } from "../roles";
-import { getAppUrl } from "../client/config";
 
 function urlBase64ToUint8Array(base64String: string): Uint8Array {
   const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
@@ -19,23 +16,22 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
   return outputArray;
 }
 
-export default function usePushNotifications(): void {
-  const { currentUser, hasRole } = useCurrentUserContext<UserInterface>();
+export default function usePushNotifications(params: {
+  currentUser: UserInterface | undefined;
+  canSubscribe: boolean;
+}): void {
+  const { currentUser, canSubscribe } = params;
+  const userId = currentUser?.id;
 
   useEffect(() => {
+    if (!userId || !canSubscribe) return;
+
     const register = async () => {
       if ("serviceWorker" in navigator && "PushManager" in window) {
         try {
-          // Check if we've already processed push notifications for this user in this session
-          const sessionKey = `push_registered_${currentUser?.id}`;
-          const lastRegisteredSubscription = sessionStorage.getItem(sessionKey);
+          const sessionKey = `push_registered_${userId}`;
 
-          // Dev uses a push-ONLY worker (public/sw-dev.js) with no fetch handler,
-          // so it can't cache stale Turbopack chunks the way the prod worker
-          // (sw.ts) would. Prod uses the full worker. Both live at scope "/", so
-          // the push subscription is identical either way.
-          const swUrl = ENV.IS_PRODUCTION ? `${getAppUrl()}/sw.js` : `${getAppUrl()}/sw-dev.js`;
-          const registration = await navigator.serviceWorker.register(swUrl);
+          const registration = await navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" });
 
           // Check current permission status first
           let permission = Notification.permission;
@@ -75,8 +71,9 @@ export default function usePushNotifications(): void {
           // Create a simple hash to detect subscription changes
           const subscriptionHash = btoa(JSON.stringify(plainSubscription));
 
-          // Only call the API if subscription has changed or this is the first registration
-          if (lastRegisteredSubscription !== subscriptionHash) {
+          // Read the stored hash right before posting, not at the top: a rotation
+          // that lands while this registration awaits must not be posted twice.
+          if (sessionStorage.getItem(sessionKey) !== subscriptionHash) {
             await PushService.register({ data: plainSubscription });
             // Store the current subscription hash to avoid duplicate registrations
             sessionStorage.setItem(sessionKey, subscriptionHash);
@@ -87,6 +84,33 @@ export default function usePushNotifications(): void {
       }
     };
 
-    if (currentUser && !hasRole(getRoleId().Administrator)) register();
-  }, [currentUser]);
+    register();
+  }, [userId, canSubscribe]);
+
+  // When the worker re-subscribes after the push service rotates the subscription
+  // (pushsubscriptionchange), it cannot call the authenticated API itself: it posts
+  // the new subscription to one window client, and this tab re-registers it under
+  // the user's auth, with the same hash guard as the registration above.
+  useEffect(() => {
+    if (!userId || !canSubscribe) return;
+    if (!("serviceWorker" in navigator)) return;
+
+    const sessionKey = `push_registered_${userId}`;
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== "PUSH_RESUBSCRIBED" || !event.data.subscription) return;
+
+      const subscription = event.data.subscription;
+      const subscriptionHash = btoa(JSON.stringify(subscription));
+      if (sessionStorage.getItem(sessionKey) === subscriptionHash) return;
+
+      void PushService.register({ data: subscription })
+        .then(() => sessionStorage.setItem(sessionKey, subscriptionHash))
+        .catch((error) => console.error("Error re-registering rotated push subscription:", error));
+    };
+
+    const container = navigator.serviceWorker;
+    container.addEventListener("message", onMessage);
+    return () => container.removeEventListener("message", onMessage);
+  }, [userId, canSubscribe]);
 }

package/src/next-config/__tests__/createNextConfig.spec.ts

@@ -147,12 +147,14 @@ describe("createNextConfig: behaviour", () => {
       dangerouslyAllowLocalIP: true,
     });
 
-    const full = createNextConfig({ ...base, mdx: true, serwist: true, imageMinimumCacheTTL: 86400 }) as Record<
-      string,
-      unknown
-    >;
+    const full = createNextConfig({
+      ...base,
+      mdx: true,
+      serwist: true,
+      imageMinimumCacheTTL: 86400,
+    } as never) as Record<string, unknown>;
     expect(full.pageExtensions).toEqual(["ts", "tsx", "mdx"]);
-    expect(full.serverExternalPackages).toEqual(["esbuild", "esbuild-wasm"]);
+    expect(full).not.toHaveProperty("serverExternalPackages");
     expect((full.images as { minimumCacheTTL: number }).minimumCacheTTL).toBe(86400);
   });
 

package/src/next-config/index.ts

@@ -3,7 +3,7 @@
 //
 // next.config.js is loaded at RUNTIME by `next start`, and the production image
 // installs with --prod. This entry may therefore import only Node built-ins at
-// runtime: never next-intl, @next/mdx, serwist or any devDependency. `next` is
+// runtime: never next-intl, @next/mdx or any devDependency. `next` is
 // imported for its types only.
 import type { NextConfig } from "next";
 import { buildCsp, listAppOrigins, type CspDirective, type CspService } from "./csp";
@@ -22,7 +22,6 @@ export interface NjaNextConfigOptions {
   imageMinimumCacheTTL?: number;
   permissionsPolicy?: { camera?: "none" | "self" };
   mdx?: boolean;
-  serwist?: boolean;
   securityHeaders?: boolean;
   authInterrupts?: boolean;
   reactCompiler?: boolean;
@@ -99,12 +98,6 @@ export function createNextConfig(options: NjaNextConfigOptions): NextConfig {
       NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "",
       ...options.env,
     },
-    // Inlined replacement for @serwist/turbopack's withSerwist wrapper, which
-    // does nothing but append these two entries. Requiring the package here
-    // instead CRASHES production: it is a devDependency, next.config.js is loaded
-    // at RUNTIME by `next start`, and the web-production image installs with
-    // --prod. Do not re-add a require of any devDependency to this file.
-    ...(options.serwist ? { serverExternalPackages: ["esbuild", "esbuild-wasm"] } : {}),
     // Next 16 builds AND serves dev with Turbopack, so this is what pins yjs to a
     // single instance in both modes.
     turbopack: {

package/src/pwa/__tests__/offline.template.spec.ts

@@ -0,0 +1,246 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { runInNewContext } from "node:vm";
+import { describe, expect, it } from "vitest";
+
+const TEMPLATE_PATH = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..", "pwa", "offline.template.html");
+
+const PLACEHOLDERS = [
+  "{{APP_NAME}}",
+  "/*{{THEME_CSS}}*/",
+  "{{TITLE}}",
+  "{{DESCRIPTION}}",
+  "{{RETRY}}",
+  "{{OFFLINE_CONFIG}}",
+] as const;
+
+type OfflineStrings = { title: string; description: string; retry: string };
+
+type OfflineConfig = {
+  defaultTheme: string;
+  enableSystem: boolean;
+  themes: string[];
+  defaultLocale: string;
+  locales: string[];
+  rtl: string[];
+  strings: Record<string, OfflineStrings>;
+};
+
+const STRINGS: Record<string, OfflineStrings> = {
+  en: { title: "You're Offline", description: "Check your connection.", retry: "Try Again" },
+  it: { title: "Sei offline", description: "Controlla la connessione.", retry: "Riprova" },
+  ar: { title: "أنت غير متصل", description: "تحقق من اتصالك.", retry: "أعد المحاولة" },
+};
+
+function baseConfig(overrides: Partial<OfflineConfig> = {}): OfflineConfig {
+  return {
+    defaultTheme: "light",
+    enableSystem: true,
+    themes: ["dark", "cozy"],
+    defaultLocale: "en",
+    locales: ["en", "it", "ar"],
+    rtl: ["ar"],
+    strings: STRINGS,
+    ...overrides,
+  };
+}
+
+function readTemplate(): string {
+  return readFileSync(TEMPLATE_PATH, "utf8");
+}
+
+function countOccurrences(haystack: string, needle: string): number {
+  return haystack.split(needle).length - 1;
+}
+
+function fill(config: OfflineConfig): string {
+  return readTemplate()
+    .split("{{APP_NAME}}")
+    .join("Test App")
+    .split("/*{{THEME_CSS}}*/")
+    .join(":root { --background: white; } .dark { --background: black; }")
+    .split("{{TITLE}}")
+    .join(STRINGS.en.title)
+    .split("{{DESCRIPTION}}")
+    .join(STRINGS.en.description)
+    .split("{{RETRY}}")
+    .join(STRINGS.en.retry)
+    .split("{{OFFLINE_CONFIG}}")
+    .join(JSON.stringify(config));
+}
+
+type Env = {
+  stored?: string | null;
+  storageThrows?: boolean;
+  languages?: string[];
+  pathname?: string;
+  cookie?: string;
+  prefersDark?: boolean;
+};
+
+type RunResult = {
+  lang: string;
+  dir: string;
+  classes: string[];
+  text: Record<"title" | "description" | "retry", string>;
+};
+
+function runScript(html: string, env: Env = {}): RunResult {
+  const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)];
+  expect(scripts.length).toBe(1);
+  const body = scripts[0][1];
+
+  // Host-realm containers: the sandbox only writes primitives into them, so
+  // assertions never compare arrays created inside the vm context.
+  const classes: string[] = [];
+  const elements: Record<"title" | "description" | "retry", { textContent: string }> = {
+    title: { textContent: STRINGS.en.title },
+    description: { textContent: STRINGS.en.description },
+    retry: { textContent: STRINGS.en.retry },
+  };
+  const documentElement = {
+    lang: "en",
+    dir: "",
+    className: "",
+    classList: {
+      add: (name: string) => {
+        classes.push(String(name));
+        documentElement.className = classes.join(" ");
+      },
+    },
+  };
+
+  const sandbox: Record<string, unknown> = {
+    document: {
+      documentElement,
+      cookie: env.cookie ?? "",
+      getElementById: (id: string) => elements[id as keyof typeof elements] ?? null,
+    },
+    localStorage: {
+      getItem: (_key: string) => {
+        if (env.storageThrows) throw new Error("SecurityError");
+        return env.stored ?? null;
+      },
+    },
+    navigator: { languages: env.languages ?? [] },
+    location: { pathname: env.pathname ?? "/" },
+    matchMedia: () => ({ matches: env.prefersDark ?? false }),
+  };
+  sandbox.window = sandbox;
+
+  runInNewContext(body, sandbox);
+
+  return {
+    lang: String(documentElement.lang),
+    dir: String(documentElement.dir),
+    classes: classes.slice(),
+    text: {
+      title: String(elements.title.textContent),
+      description: String(elements.description.textContent),
+      retry: String(elements.retry.textContent),
+    },
+  };
+}
+
+describe("pwa/offline.template.html", () => {
+  it("contains no /_next/ reference, external script, stylesheet or font", () => {
+    const raw = readTemplate();
+    expect(raw).not.toContain("/_next/");
+    expect(raw).not.toMatch(/<script[^>]+src=/);
+    expect(raw).not.toMatch(/<link[^>]+href=/);
+    expect(raw).not.toContain("url(http");
+    expect(raw).not.toContain("@import");
+  });
+
+  it("carries every placeholder exactly once", () => {
+    const raw = readTemplate();
+    for (const placeholder of PLACEHOLDERS) {
+      expect(countOccurrences(raw, placeholder), placeholder).toBe(1);
+    }
+  });
+
+  it("applies a stored theme as a class", () => {
+    const result = runScript(fill(baseConfig()), { stored: "dark" });
+    expect(result.classes).toContain("dark");
+  });
+
+  it("uses the default theme when nothing is stored", () => {
+    const light = runScript(fill(baseConfig()), { stored: null });
+    expect(light.classes.length).toBe(0);
+
+    const cozy = runScript(fill(baseConfig({ defaultTheme: "cozy" })), { stored: null });
+    expect(cozy.classes).toContain("cozy");
+  });
+
+  it("follows the OS only for a stored system value with enableSystem", () => {
+    const followsOs = runScript(fill(baseConfig()), { stored: "system", prefersDark: true });
+    expect(followsOs.classes).toContain("dark");
+
+    const noSystem = runScript(fill(baseConfig({ enableSystem: false })), { stored: "system", prefersDark: true });
+    expect(noSystem.classes.length).toBe(0);
+
+    const noSystemCozy = runScript(fill(baseConfig({ enableSystem: false, defaultTheme: "cozy" })), {
+      stored: "system",
+      prefersDark: true,
+    });
+    expect(noSystemCozy.classes.join(" ")).toBe("cozy");
+  });
+
+  it("falls back to the default theme when localStorage throws", () => {
+    const result = runScript(fill(baseConfig({ defaultTheme: "cozy" })), {
+      storageThrows: true,
+      pathname: "/it/sessions",
+    });
+    expect(result.classes.join(" ")).toBe("cozy");
+    expect(result.lang).toBe("it");
+  });
+
+  it("picks the locale from the URL prefix first", () => {
+    const result = runScript(fill(baseConfig()), {
+      pathname: "/it/sessions",
+      cookie: "NEXT_LOCALE=en",
+      languages: ["en-US"],
+    });
+    expect(result.lang).toBe("it");
+  });
+
+  it("then from the NEXT_LOCALE cookie", () => {
+    const result = runScript(fill(baseConfig()), {
+      pathname: "/sessions",
+      cookie: "NEXT_LOCALE=it",
+      languages: ["en-US"],
+    });
+    expect(result.lang).toBe("it");
+  });
+
+  it("then from navigator.languages", () => {
+    const result = runScript(fill(baseConfig()), { pathname: "/sessions", languages: ["it-IT", "en"] });
+    expect(result.lang).toBe("it");
+  });
+
+  it("skips locales the app does not ship", () => {
+    const result = runScript(fill(baseConfig()), {
+      pathname: "/fr/x",
+      cookie: "NEXT_LOCALE=de",
+      languages: ["pt-BR"],
+    });
+    expect(result.lang).toBe("en");
+  });
+
+  it("sets dir=rtl for an RTL locale", () => {
+    const arabic = runScript(fill(baseConfig()), { pathname: "/ar/x" });
+    expect(arabic.lang).toBe("ar");
+    expect(arabic.dir).toBe("rtl");
+
+    const italian = runScript(fill(baseConfig()), { pathname: "/it/x" });
+    expect(italian.dir).toBe("ltr");
+  });
+
+  it("replaces the three strings with the chosen locale's", () => {
+    const result = runScript(fill(baseConfig()), { pathname: "/it/x" });
+    expect(result.text.title).toBe(STRINGS.it.title);
+    expect(result.text.description).toBe(STRINGS.it.description);
+    expect(result.text.retry).toBe(STRINGS.it.retry);
+  });
+});