@carlonicora/nextjs-jsonapi 4.0.8 → 4.1.1

package/src/features/company/components/details/CompanyContent.tsx

@@ -7,7 +7,7 @@ import { ReactNode } from "react";
 import { AttributeElement } from "../../../../components";
 import { SectionHeader, MicroLabel } from "../../../../components/typography";
 import { FiscalDataDisplay } from "../../../../components/fiscal/FiscalDataDisplay";
-import { cn } from "../../../../utils";
+import { cn, isRemoteImageSrc } from "../../../../utils";
 import { CompanyInterface } from "../../data";
 
 type CompanyContentProps = {
@@ -44,7 +44,14 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
       {/* Hero Section */}
       <div className="flex items-start gap-x-6">
         {company.logo && (
-          <Image src={company.logo} alt={company.name} width={150} height={150} className="rounded-md" />
+          <Image
+            src={company.logo}
+            alt={company.name}
+            width={150}
+            height={150}
+            className="rounded-md"
+            unoptimized={isRemoteImageSrc(company.logo)}
+          />
         )}
         <div className="flex flex-col gap-y-2">
           {company.legal_address && (

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -26,6 +26,7 @@ import { Modules } from "../../../../core";
 import { useI18nRouter } from "../../../../i18n";
 import { getRoleId } from "../../../../roles";
 import { ScrollArea } from "../../../../shadcnui";
+import { isRemoteImageSrc } from "../../../../utils";
 import { FeatureInterface } from "../../../feature";
 import { FeatureService } from "../../../feature/data/feature.service";
 import { S3Interface } from "../../../s3";
@@ -232,6 +233,7 @@ function CompanyEditorInternal({
                       alt="Company Logo"
                       width={200}
                       height={200}
+                      unoptimized={isRemoteImageSrc(file ? undefined : company?.logo)}
                     />
                   ) : (
                     <>

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

@@ -9,12 +9,12 @@ const FIXED_ENV = vi.hoisted(() => {
     NEXT_PUBLIC_API_URL: "https://api.test",
     NEXT_PUBLIC_ADDRESS: "https://app.test",
     IMAGE_SOURCES: "https://img.test",
+    NEXT_PUBLIC_CORPUS_URL: "https://corpus.test",
     APP_URL: "https://app.test",
   };
   for (const key of [
     "NEXT_PUBLIC_VAPID_PUBLIC_KEY",
     "NEXT_PUBLIC_GOOGLE_MAPS_API_KEY",
-    "NEXT_PUBLIC_CORPUS_URL",
     "NEXT_PUBLIC_GTM_ID",
     "E2E_BUILD",
   ])
@@ -139,7 +139,11 @@ describe("createNextConfig: behaviour", () => {
     expect(plain.allowedDevOrigins).toEqual(["example.test"]);
     expect(plain.images).toEqual({
       minimumCacheTTL: 60,
-      remotePatterns: [{ protocol: "https", hostname: "img.test" }],
+      remotePatterns: [
+        { protocol: "https", hostname: "img.test" },
+        { protocol: "https", hostname: "api.test" },
+        { protocol: "https", hostname: "corpus.test" },
+      ],
       dangerouslyAllowLocalIP: true,
     });
 
@@ -166,6 +170,16 @@ describe("createNextConfig: behaviour", () => {
     expect(production.distDir).toBeUndefined();
   });
 
+  it("lets the optimizer fetch from the api and corpus origins, skipping unset and duplicate ones", () => {
+    vi.stubEnv("NEXT_PUBLIC_CORPUS_URL", undefined);
+    vi.stubEnv("IMAGE_SOURCES", "https://img.test,https://api.test");
+    const config = createNextConfig(base) as { images: { remotePatterns: unknown[] } };
+    expect(config.images.remotePatterns).toEqual([
+      { protocol: "https", hostname: "img.test" },
+      { protocol: "https", hostname: "api.test" },
+    ]);
+  });
+
   it("reactCompiler option sets both reactCompiler and turbopackRustReactCompiler", () => {
     const on = createNextConfig({ ...base, reactCompiler: true });
     expect(on.reactCompiler).toBe(true);
@@ -197,7 +211,7 @@ describe("buildCsp", () => {
     expect(csp["script-src"]).toEqual(["'self'", "'unsafe-eval'", "'unsafe-inline'"]);
     expect(csp["style-src"]).toEqual(["'self'", "'unsafe-inline'"]);
     expect(csp["font-src"]).toEqual(["'self'"]);
-    expect(csp["frame-src"]).toEqual(["'self'"]);
+    expect(csp["frame-src"]).toEqual(["'self'", "https://api.test", "https://corpus.test"]);
     expect(csp["worker-src"]).toEqual(["'self'", "blob:"]);
     expect(buildCsp({}, env)).not.toMatch(/stripe|google|cloudflare|discord/);
   });
@@ -246,6 +260,8 @@ describe("buildCsp", () => {
     const csp = parseCsp(buildCsp({ services: ["stripe"], csp: { "frame-src": ["https://docs.google.com/"] } }, env));
     expect(csp["frame-src"]).toEqual([
       "'self'",
+      "https://api.test",
+      "https://corpus.test",
       "https://docs.google.com/",
       "https://hooks.stripe.com",
       "https://js.stripe.com",
@@ -260,6 +276,32 @@ describe("buildCsp", () => {
     expect(csp["img-src"]).toContain("https://img.test");
   });
 
+  it("allows images and frames from the api and corpus origins", () => {
+    const csp = parseCsp(buildCsp({}, env));
+    for (const directive of ["img-src", "frame-src"]) {
+      expect(csp[directive]).toEqual(expect.arrayContaining(["https://api.test", "https://corpus.test"]));
+    }
+  });
+
+  it("lists the api and corpus origins once, and nothing for an unset corpus", () => {
+    const value = buildCsp({}, {
+      NODE_ENV: "production",
+      NEXT_PUBLIC_API_URL: "https://api.test/",
+      IMAGE_SOURCES: "https://api.test",
+    } as unknown as NodeJS.ProcessEnv);
+    for (const directive of ["img-src", "frame-src"]) {
+      const sources = value
+        .split(";")
+        .map((part) => part.trim().split(/\s+/))
+        .find(([name]) => name === directive)!
+        .slice(1);
+      expect(sources.filter((source) => source === "https://api.test")).toHaveLength(1);
+      expect(sources.join(" ")).not.toContain("corpus");
+      expect(sources).not.toContain("");
+    }
+    expect(value).not.toMatch(/\s{2,}/);
+  });
+
   it("drops empty sources when env values are missing", () => {
     const value = buildCsp({ csp: { "img-src": [""] } }, { NODE_ENV: "development" } as unknown as NodeJS.ProcessEnv);
     expect(value).not.toMatch(/\s{2,}/);

package/src/next-config/csp.ts

@@ -52,12 +52,33 @@ function listImageSources(env: NodeJS.ProcessEnv): string[] {
   return env.IMAGE_SOURCES ? env.IMAGE_SOURCES.split(",").map((s) => s.trim()) : [];
 }
 
+/**
+ * Origins of the app's own servers, the API and the corpus, from
+ * `NEXT_PUBLIC_API_URL` and `NEXT_PUBLIC_CORPUS_URL`. They serve every stored
+ * object link, so images and frames must be allowed from them. Unset or invalid
+ * URLs are skipped; the result has no duplicates.
+ */
+export function listAppOrigins(env: NodeJS.ProcessEnv): string[] {
+  const origins: string[] = [];
+  for (const url of [env.NEXT_PUBLIC_API_URL, env.NEXT_PUBLIC_CORPUS_URL]) {
+    if (!url) continue;
+    try {
+      const { origin } = new URL(url.trim());
+      if (origin !== "null" && !origins.includes(origin)) origins.push(origin);
+    } catch {
+      // Not a URL: nothing to allow.
+    }
+  }
+  return origins;
+}
+
 // Build CSP directives
 // Note: 'unsafe-inline' and 'unsafe-eval' needed for Next.js dev mode and some runtime features
 // In production, consider using nonces for stricter CSP
 export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
   const apiUrl = env.NEXT_PUBLIC_API_URL || "";
   const imageSources = listImageSources(env);
+  const appOrigins = listAppOrigins(env);
   const services = options.services ?? [];
 
   // Each fetch directive: what Next itself needs, then the named services, then
@@ -67,8 +88,8 @@ export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
     "script-src": { base: ["'self'", "'unsafe-inline'", "'unsafe-eval'"], fromEnv: [] },
     // Styles: self and unsafe-inline for styled-components/emotion
     "style-src": { base: ["'self'", "'unsafe-inline'"], fromEnv: [] },
-    // Images: self, data URIs, blobs, and configured image sources
-    "img-src": { base: ["'self'", "data:", "blob:"], fromEnv: imageSources },
+    // Images: self, data URIs, blobs, configured image sources, and the api/corpus origins
+    "img-src": { base: ["'self'", "data:", "blob:"], fromEnv: [...imageSources, ...appOrigins] },
     // Fonts: self
     "font-src": { base: ["'self'"], fromEnv: [] },
     // Connect: self, API (http + ws for socket.io), and storage (for uploads)
@@ -82,8 +103,8 @@ export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
         ...imageSources,
       ],
     },
-    // Frames: self
-    "frame-src": { base: ["'self'"], fromEnv: [] },
+    // Frames: self, and the api/corpus origins (inline previews of stored objects)
+    "frame-src": { base: ["'self'"], fromEnv: appOrigins },
     // Worker sources: self and blob (for Web Workers with dynamic imports)
     "worker-src": { base: ["'self'", "blob:"], fromEnv: [] },
   };

package/src/next-config/index.ts

@@ -6,10 +6,10 @@
 // runtime: never next-intl, @next/mdx, serwist or any devDependency. `next` is
 // imported for its types only.
 import type { NextConfig } from "next";
-import { buildCsp, type CspDirective, type CspService } from "./csp";
+import { buildCsp, listAppOrigins, type CspDirective, type CspService } from "./csp";
 import { buildSecurityHeaders } from "./headers";
 
-export { buildCsp };
+export { buildCsp, listAppOrigins };
 export type { CspDirective, CspService };
 
 export interface NjaNextConfigOptions {
@@ -32,17 +32,24 @@ export interface NjaNextConfigOptions {
 
 type RemotePattern = { protocol: "http" | "https"; hostname: string; port?: string };
 
+// IMAGE_SOURCES, then the api and corpus origins (they serve every stored object
+// link), without duplicates.
 function parseImageSources(env: NodeJS.ProcessEnv): RemotePattern[] {
-  return env.IMAGE_SOURCES
-    ? env.IMAGE_SOURCES.split(",").map((url) => {
-        const { hostname, protocol, port } = new URL(url.trim());
-        return {
-          protocol: protocol.replace(":", "") as RemotePattern["protocol"],
-          hostname,
-          port: port || undefined,
-        };
-      })
-    : [];
+  const imageSources = env.IMAGE_SOURCES ? env.IMAGE_SOURCES.split(",").map((url) => url.trim()) : [];
+  const patterns: RemotePattern[] = [];
+  for (const url of [...imageSources, ...listAppOrigins(env)]) {
+    const { hostname, protocol, port } = new URL(url);
+    const pattern: RemotePattern = {
+      protocol: protocol.replace(":", "") as RemotePattern["protocol"],
+      hostname,
+      port: port || undefined,
+    };
+    const seen = patterns.some(
+      (p) => p.protocol === pattern.protocol && p.hostname === pattern.hostname && p.port === pattern.port,
+    );
+    if (!seen) patterns.push(pattern);
+  }
+  return patterns;
 }
 
 export function createNextConfig(options: NjaNextConfigOptions): NextConfig {

package/src/utils/__tests__/use-mobile.test.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { Suspense } from "react";
 import { render, screen, act } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -219,6 +220,116 @@ describe("ViewportProvider with a session promise", () => {
     expect(screen.getByTestId("probe").textContent).toBe("mobile");
   });
 
+  it("calls use() on every render when a pending seed is replaced by a boolean while the reader is suspended", async () => {
+    // The sequence behind the "conditional-use-of-use" console error seen on
+    // /deliveries/<id> and on (admin) not-found pages:
+    // 1. a reader mounts while ViewportProvider's value is still the session
+    //    promise, so useIsMobile() calls use() and suspends;
+    // 2. the provider's mount-time measurement replaces the promise with a
+    //    boolean (setIsMobile) before the session settles;
+    // 3. the reader retries with a plain boolean. Skipping use() on that render
+    //    makes React log "This library called use() to suspend in a previous
+    //    render but did not call use() when it finished".
+    // The provider's state swap is driven by hand here so that step 2 lands
+    // after the suspended mount, as it does when hydration wins the race.
+    const ViewportContext = getViewportContext();
+    let swap!: (value: boolean | Promise<boolean>) => void;
+    function SwappingProvider({ children }: { children: React.ReactNode }) {
+      const [value, setValue] = React.useState<boolean | Promise<boolean>>(() => deferred<boolean>().promise);
+      swap = setValue;
+      return <ViewportContext.Provider value={value}>{children}</ViewportContext.Provider>;
+    }
+
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      await act(async () => {
+        render(
+          <SwappingProvider>
+            <Suspense fallback="waiting">
+              <Probe />
+            </Suspense>
+          </SwappingProvider>,
+        );
+      });
+      expect(screen.queryByText("waiting")).not.toBeNull();
+
+      await act(async () => {
+        swap(true);
+      });
+
+      expect(screen.getByTestId("probe").textContent).toBe("mobile");
+      expect(errorSpy).not.toHaveBeenCalled();
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
+
+  it("lets the provider's measurement win over a session seed that settles later, without console errors", async () => {
+    setWidth(500);
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const pending = deferred<SessionSnapshot>();
+      await act(async () => {
+        render(
+          <ViewportProvider session={pending.promise}>
+            <Suspense fallback="waiting">
+              <Probe />
+            </Suspense>
+          </ViewportProvider>,
+        );
+      });
+      expect(screen.getByTestId("probe").textContent).toBe("mobile");
+
+      await act(async () => {
+        pending.resolve(snapshot(false));
+        await pending.promise;
+      });
+
+      expect(screen.getByTestId("probe").textContent).toBe("mobile");
+      expect(errorSpy).not.toHaveBeenCalled();
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
+
+  it("keeps calling use() when the context value goes from a boolean to a promise", async () => {
+    // The reverse switch: a reader mounted on a boolean still suspends on, and
+    // then reads, a promise that replaces it.
+    setWidth(1280);
+    const ViewportContext = getViewportContext();
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const pending = deferred<boolean>();
+      const { rerender } = render(
+        <ViewportContext.Provider value={false}>
+          <Suspense fallback="waiting">
+            <Probe />
+          </Suspense>
+        </ViewportContext.Provider>,
+      );
+      expect(screen.getByTestId("probe").textContent).toBe("desktop");
+
+      await act(async () => {
+        rerender(
+          <ViewportContext.Provider value={pending.promise}>
+            <Suspense fallback="waiting">
+              <Probe />
+            </Suspense>
+          </ViewportContext.Provider>,
+        );
+      });
+      await act(async () => {
+        pending.resolve(true);
+        await pending.promise;
+      });
+
+      expect(screen.getByTestId("probe").textContent).toBe("mobile");
+      expect(errorSpy).not.toHaveBeenCalled();
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
+
   it("ViewportProvider with initialIsMobile is unchanged", () => {
     setWidth(1280);
     const seen: string[] = [];

package/src/utils/use-mobile.tsx

@@ -70,11 +70,40 @@ export function subscribeViewport(onChange: () => void): () => void {
   return () => mql.removeEventListener("change", onChange);
 }
 
+type SettledThenable<T> = Promise<T> & { status: "fulfilled"; value: T };
+
+/**
+ * A promise React reads synchronously: `use()` sees `status: "fulfilled"` and
+ * returns `value` without suspending. Created lazily, one per value, so the
+ * identity is stable across renders.
+ */
+const settledViewportValues = new Map<boolean | undefined, SettledThenable<boolean | undefined>>();
+
+function settled(value: boolean | undefined): SettledThenable<boolean | undefined> {
+  let thenable = settledViewportValues.get(value);
+  if (thenable === undefined) {
+    thenable = Object.assign(Promise.resolve(value), { status: "fulfilled" as const, value });
+    settledViewportValues.set(value, thenable);
+  }
+  return thenable;
+}
+
+function isThenable(value: ViewportContextValue): value is Promise<boolean> {
+  return typeof value === "object" && value !== null && typeof (value as PromiseLike<boolean>).then === "function";
+}
+
 export function useIsMobile(): boolean {
   const provided = React.useContext(getViewportContext());
   // `React.use` through the namespace import, for the same reason as
   // `createContext` above. Suspends the caller until a session seed settles.
-  const seeded = provided instanceof Promise ? React.use(provided) : provided;
+  //
+  // `use` is called on EVERY render, never only when the value is a promise. A
+  // session-seeded ViewportProvider exposes a promise first and a boolean once
+  // its mount-time measurement lands, which can happen while a reader is
+  // suspended on the promise. Skipping `use` on the retry makes React report
+  // https://react.dev/warnings/conditional-use-of-use. A plain value is wrapped
+  // in an already-settled thenable, which `use` returns without suspending.
+  const seeded = React.use<boolean | undefined>(isThenable(provided) ? provided : settled(provided));
   const [legacy, setLegacy] = React.useState<boolean>(false);
 
   React.useEffect(() => {