@decocms/nextjs 7.5.3 → 7.6.0

package/README.md

@@ -78,7 +78,7 @@ import { ensureSetup } from "../../../deco/setup";
 
 export const dynamic = "force-dynamic";
 
-export const { GET, POST } = createDecoRouteHandlers({ setup: ensureSetup });
+export const { GET, POST, OPTIONS } = createDecoRouteHandlers({ setup: ensureSetup });
 ```
 
 `dynamic = "force-dynamic"` is required — this route must never be

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "7.5.3",
+  "version": "7.6.0",
   "type": "module",
   "description": "Deco framework binding for Next.js App Router",
   "repository": {
@@ -25,8 +25,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.5.3",
-    "@decocms/blocks-admin": "7.5.3"
+    "@decocms/blocks": "7.6.0",
+    "@decocms/blocks-admin": "7.6.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/routeHandlers.test.ts

@@ -17,6 +17,14 @@ const mocks = vi.hoisted(() => ({
   handleMeta: vi.fn(() => new Response("meta")),
   handleRender: vi.fn(async (req: Request) => new Response(new URL(req.url).pathname)),
   setMetaData: vi.fn(),
+  // Real corsHeaders shape (mirrors blocks-admin/src/admin/cors.ts) so the
+  // CORS assertions below test genuine header propagation, not a stub echo.
+  corsHeaders: vi.fn((req: Request) => ({
+    "Access-Control-Allow-Origin": req.headers.get("origin") || "*",
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization, If-None-Match",
+    "Access-Control-Allow-Credentials": "true",
+  })),
 }));
 vi.mock("@decocms/blocks-admin", () => mocks);
 
@@ -151,3 +159,53 @@ describe("createDecoRouteHandlers", () => {
     expect(mocks.handleMeta).not.toHaveBeenCalled();
   });
 });
+
+describe("createDecoRouteHandlers — CORS (Studio is a cross-origin browser client)", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("answers OPTIONS preflight with 204 + CORS headers, without running setup", async () => {
+    const setup = vi.fn(async () => {});
+    const { OPTIONS } = createDecoRouteHandlers({ setup });
+    const res = await OPTIONS(
+      new Request("http://x/live/_meta", {
+        method: "OPTIONS",
+        headers: {
+          origin: "https://decocms.com",
+          "access-control-request-method": "GET",
+          "access-control-request-headers": "if-none-match",
+        },
+      }),
+    );
+    expect(res.status).toBe(204);
+    expect(res.headers.get("Access-Control-Allow-Origin")).toBe("https://decocms.com");
+    expect(res.headers.get("Access-Control-Allow-Headers")).toContain("If-None-Match");
+    expect(setup).not.toHaveBeenCalled();
+  });
+
+  it("stamps CORS headers on successful responses (meta via pre-rewrite URL)", async () => {
+    const { GET } = createDecoRouteHandlers();
+    const res = await GET(
+      new Request("http://x/live/_meta", { headers: { origin: "https://admin.deco.cx" } }),
+    );
+    expect(await res.text()).toBe("meta");
+    expect(res.headers.get("Access-Control-Allow-Origin")).toBe("https://admin.deco.cx");
+  });
+
+  it("stamps CORS headers on method-gate 405s too", async () => {
+    const { GET } = createDecoRouteHandlers();
+    const res = await GET(
+      new Request("http://x/deco/invoke/site/actions/x", {
+        headers: { origin: "https://decocms.com" },
+      }),
+    );
+    expect(res.status).toBe(405);
+    expect(res.headers.get("Access-Control-Allow-Origin")).toBe("https://decocms.com");
+  });
+
+  it("named exports carry CORS as well (metaGET)", async () => {
+    const res = await metaGET(
+      new Request("http://x/live/_meta", { headers: { origin: "https://decocms.com" } }),
+    );
+    expect(res.headers.get("Access-Control-Allow-Origin")).toBe("https://decocms.com");
+  });
+});

package/src/routeHandlers.ts

@@ -16,6 +16,7 @@
  * component code.
  */
 import {
+  corsHeaders,
   handleDecofileRead,
   handleDecofileReload,
   handleInvoke,
@@ -23,34 +24,65 @@ import {
   handleRender,
 } from "@decocms/blocks-admin";
 
+/**
+ * Stamp the admin CORS headers onto a handler response. The Studio is a
+ * cross-origin browser client (decocms.com / admin.deco.cx fetching the
+ * site's /live/_meta, /.decofile, ...), and its ETag flow sends
+ * `If-None-Match` — a non-simple header, so requests preflight. On
+ * TanStack this stamping lives in workerEntry/adminRoutes; on Next.js it
+ * lives HERE, since these handlers/dispatcher are the only admin surface.
+ * Response headers can be immutable (e.g. a cached/replayed body) — fall
+ * back to cloning.
+ */
+function withCors(request: Request, response: Response): Response {
+  const cors = corsHeaders(request);
+  try {
+    for (const [k, v] of Object.entries(cors)) response.headers.set(k, v);
+    return response;
+  } catch {
+    const headers = new Headers(response.headers);
+    for (const [k, v] of Object.entries(cors)) headers.set(k, v);
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  }
+}
+
+/** Answer a CORS preflight for the admin protocol. */
+function preflight(request: Request): Response {
+  return new Response(null, { status: 204, headers: corsHeaders(request) });
+}
+
 /** For app/live/_meta/route.ts: `export { metaGET as GET } from "@decocms/nextjs/routeHandlers"` */
 export async function metaGET(request: Request): Promise<Response> {
-  return handleMeta(request);
+  return withCors(request, handleMeta(request));
 }
 
 /** For app/.decofile/route.ts (or an equivalent rewritten path — Next.js route
  * segments can't literally start with a dot; see Task 9's fixture for the
  * rewrite-rule workaround). */
-export async function decofileGET(): Promise<Response> {
-  return handleDecofileRead();
+export async function decofileGET(request: Request): Promise<Response> {
+  return withCors(request, await handleDecofileRead());
 }
 
 export async function decofilePOST(request: Request): Promise<Response> {
-  return handleDecofileReload(request);
+  return withCors(request, await handleDecofileReload(request));
 }
 
 /** For app/deco/invoke/[...key]/route.ts */
 export async function invokePOST(request: Request): Promise<Response> {
-  return handleInvoke(request);
+  return withCors(request, await handleInvoke(request));
 }
 
 /** For app/live/previews/[...path]/route.ts */
 export async function renderGET(request: Request): Promise<Response> {
-  return handleRender(request);
+  return withCors(request, await handleRender(request));
 }
 
 export async function renderPOST(request: Request): Promise<Response> {
-  return handleRender(request);
+  return withCors(request, await handleRender(request));
 }
 
 export interface DecoRouteHandlersOptions {
@@ -72,7 +104,7 @@ export interface DecoRouteHandlersOptions {
  * import { createDecoRouteHandlers } from "@decocms/nextjs/routeHandlers";
  * import { ensureSetup } from "../../../deco/setup";
  * export const dynamic = "force-dynamic";
- * export const { GET, POST } = createDecoRouteHandlers({ setup: ensureSetup });
+ * export const { GET, POST, OPTIONS } = createDecoRouteHandlers({ setup: ensureSetup });
  * ```
  *
  * `resolveAction` accepts BOTH the rewrite's public source path (e.g.
@@ -104,8 +136,14 @@ function resolveAction(pathname: string): string {
 export function createDecoRouteHandlers(options: DecoRouteHandlersOptions = {}): {
   GET(request: Request): Promise<Response>;
   POST(request: Request): Promise<Response>;
+  OPTIONS(request: Request): Promise<Response>;
 } {
   async function dispatch(request: Request): Promise<Response> {
+    // CORS preflight: Studio fetches cross-origin and its ETag flow sends
+    // If-None-Match (non-simple header), so browsers preflight every meta
+    // request. Answer before setup — preflights carry no work and must not
+    // pay (or fail on) the site bootstrap.
+    if (request.method === "OPTIONS") return preflight(request);
     await options.setup?.();
 
     const url = new URL(request.url);
@@ -170,5 +208,9 @@ export function createDecoRouteHandlers(options: DecoRouteHandlersOptions = {}):
     });
   }
 
-  return { GET: dispatch, POST: dispatch };
+  async function dispatchWithCors(request: Request): Promise<Response> {
+    return withCors(request, await dispatch(request));
+  }
+
+  return { GET: dispatchWithCors, POST: dispatchWithCors, OPTIONS: dispatchWithCors };
 }