@decocms/blocks 7.50.1 → 7.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks",
-  "version": "7.50.1",
+  "version": "7.52.0",
   "type": "module",
   "engines": {
     "node": ">=24"

package/src/cms/draftSource.test.ts

@@ -10,6 +10,7 @@ import {
   previewApiOriginForHost,
   resolveDraftDecofile,
   resolveDraftForRequest,
+  setDecoSiteHost,
   setDraftPreviewHosts,
 } from "./draftSource";
 
@@ -323,6 +324,91 @@ describe("site-block preview hosts", () => {
   });
 });
 
+describe("deco-hosted preview domains (setDecoSiteHost)", () => {
+  it("infers <site>.deco.site and enables the feature", () => {
+    setDecoSiteHost("als-storefront");
+    try {
+      expect(isDraftPreviewEnabled({})).toBe(true);
+      expect(isDraftHostAllowed("als-storefront.deco.site", {})).toBe(true);
+      expect(isDraftHostAllowed("other.deco.site", {})).toBe(false);
+      // A custom production domain is never inferred.
+      expect(isDraftHostAllowed("www.als-storefront.com", {})).toBe(false);
+    } finally {
+      setDecoSiteHost(null);
+    }
+  });
+
+  it("infers the <site>.deco-cx.workers.dev deploy host", () => {
+    setDecoSiteHost("casaevideo-tanstack");
+    try {
+      expect(isDraftHostAllowed("casaevideo-tanstack.deco-cx.workers.dev", {})).toBe(true);
+      // Exact match only — another worker on the same account is not admitted.
+      expect(isDraftHostAllowed("other-site.deco-cx.workers.dev", {})).toBe(false);
+      // No nested subdomain widens the match.
+      expect(
+        isDraftHostAllowed("casaevideo-tanstack.evil.deco-cx.workers.dev", {}),
+      ).toBe(false);
+      // Wrong apex.
+      expect(isDraftHostAllowed("casaevideo-tanstack.deco-cx.workers.example", {})).toBe(false);
+    } finally {
+      setDecoSiteHost(null);
+    }
+  });
+
+  it("is merged ON TOP of the site block, not replacing it", () => {
+    setDraftPreviewHosts(["fila.vtex.app"]);
+    setDecoSiteHost("als-storefront");
+    try {
+      expect(isDraftHostAllowed("fila.vtex.app", {})).toBe(true);
+      expect(isDraftHostAllowed("als-storefront.deco.site", {})).toBe(true);
+    } finally {
+      setDraftPreviewHosts([]);
+      setDecoSiteHost(null);
+    }
+  });
+
+  it("is merged ON TOP of the env escape hatch too", () => {
+    setDecoSiteHost("als-storefront");
+    try {
+      const env = { DECO_ALLOWED_PREVIEW_HOSTS: "other.example" };
+      expect(isDraftHostAllowed("other.example", env)).toBe(true);
+      expect(isDraftHostAllowed("als-storefront.deco.site", env)).toBe(true);
+    } finally {
+      setDecoSiteHost(null);
+    }
+  });
+
+  it("a blank/null/undefined site name registers no host", () => {
+    // The binding passes DECO_SITE_NAME straight through — an unnamed site
+    // (unset binding, blank value) is not armed.
+    for (const site of ["   ", null, undefined]) {
+      setDecoSiteHost(site);
+      try {
+        expect(isDraftPreviewEnabled({})).toBe(false);
+      } finally {
+        setDecoSiteHost(null);
+      }
+    }
+  });
+
+  it("DECO_ALLOWED_PREVIEW_HOSTS=none kills the inferred hosts too", () => {
+    setDraftPreviewHosts(["fila.vtex.app"]);
+    setDecoSiteHost("als-storefront");
+    try {
+      // The kill switch wins over the inferred hosts AND the site block, so a
+      // bad rollout can be stopped without a deploy.
+      const env = { DECO_ALLOWED_PREVIEW_HOSTS: "none" };
+      expect(isDraftPreviewEnabled(env)).toBe(false);
+      expect(isDraftHostAllowed("als-storefront.deco.site", env)).toBe(false);
+      expect(isDraftHostAllowed("als-storefront.deco-cx.workers.dev", env)).toBe(false);
+      expect(isDraftHostAllowed("fila.vtex.app", env)).toBe(false);
+    } finally {
+      setDraftPreviewHosts([]);
+      setDecoSiteHost(null);
+    }
+  });
+});
+
 describe("draftPointerFromRequest", () => {
   it("reads the pointer from the __deco_draft cookie (in-preview navigation)", () => {
     const req = new Request(

package/src/cms/draftSource.ts

@@ -162,7 +162,7 @@ export function previewApiOriginForHost(
 // is invisible to the others. (The MIDDLEWARE runtime is a separate world
 // even so — which is why the page-side gate is the authoritative one and the
 // middleware only hard-gates when the env override is present.)
-const G = globalThis as { __decoDraftHosts?: string[] };
+const G = globalThis as { __decoDraftHosts?: string[]; __decoSite?: string };
 
 /** Install the site-declared preview hosts. Called by the framework binding at setup. */
 export function setDraftPreviewHosts(hosts: readonly unknown[]): void {
@@ -172,6 +172,32 @@ export function setDraftPreviewHosts(hosts: readonly unknown[]): void {
     .filter(Boolean);
 }
 
+/**
+ * Register the resolved site name (`DECO_SITE_NAME` / an explicit setup
+ * option, resolved by the framework binding at setup). deco-operated preview
+ * hosts are derived from it, both exact:
+ *
+ *   - `<site>.deco.site` — the stable deco-hosted domain.
+ *   - `<site>.deco-cx.workers.dev` — the workers.dev deploy URL
+ *     (e.g. `casaevideo-tanstack.deco-cx.workers.dev`).
+ *
+ * Both are MERGED with the site-block/env list rather than replacing it: they
+ * are deco-operated infra, so a signed draft grant can preview there out of the
+ * box, while a custom production domain — never inferred here — stays inert.
+ * Fed from the trusted setup-time site name, never from the request or a draft.
+ *
+ * Threat model, now that a named site is no longer inert by default: the
+ * request host is spoofable on a direct-to-origin request (the edge is trusted
+ * to set `x-forwarded-host`), so for a named site the SIGNED `?__draft=` grant
+ * is the sole remaining gate — host-scoping only bounds blast radius. Set
+ * `DECO_ALLOWED_PREVIEW_HOSTS=none` to kill preview entirely, including these
+ * inferred hosts, without a deploy.
+ */
+export function setDecoSiteHost(site: string | null | undefined): void {
+  const s = (site ?? "").trim().toLowerCase();
+  G.__decoSite = s || undefined;
+}
+
 /**
  * Hosts allowed to render drafts.
  *
@@ -179,20 +205,35 @@ export function setDraftPreviewHosts(hosts: readonly unknown[]): void {
  * reviewed in a PR, versioned with branches. `DECO_ALLOWED_PREVIEW_HOSTS`
  * REPLACES it when set: an operational escape hatch (kill a bad value without
  * a deploy, add a machine-specific port) — not the primary configuration.
+ *
+ * The deco-hosted domains inferred from the site name (via `setDecoSiteHost`)
+ * are always ADDED on top, so a signed draft grant can preview on
+ * deco-operated infra without any per-site config.
+ *
+ * The sentinel `DECO_ALLOWED_PREVIEW_HOSTS=none` is a KILL SWITCH: it disables
+ * preview entirely — the inferred hosts and the site block included — so a bad
+ * rollout can be stopped without a deploy. It must win over every other source.
  */
 function readAllowedHosts(env: Record<string, string | undefined>): string[] {
   const fromEnv = (env.DECO_ALLOWED_PREVIEW_HOSTS ?? "")
     .split(",")
     .map((s) => s.trim().toLowerCase())
     .filter(Boolean);
-  return fromEnv.length > 0 ? fromEnv : (G.__decoDraftHosts ?? []);
+  if (fromEnv.includes("none")) return [];
+  const configured = fromEnv.length > 0 ? fromEnv : (G.__decoDraftHosts ?? []);
+  const site = G.__decoSite;
+  if (!site) return configured;
+  const inferred = [`${site}.deco.site`, `${site}.deco-cx.workers.dev`].filter(
+    (h) => !configured.includes(h),
+  );
+  return inferred.length > 0 ? [...configured, ...inferred] : configured;
 }
 
 /**
  * Whether `host` (as seen on the request) may render drafts.
  *
- * Compared against `DECO_ALLOWED_PREVIEW_HOSTS` verbatim, port included —
- * local dev is `localhost:3100`, not `localhost`. The header is spoofable by a
+ * Compared against the allowlist verbatim, port included — local dev is
+ * `localhost:3100`, not `localhost`. The header is spoofable by a
  * direct-to-origin request, but the draft id is the actual capability;
  * host-scoping bounds blast radius (production domains stay inert), it is not
  * a secret.
@@ -210,8 +251,11 @@ export function isDraftHostAllowed(
 /**
  * True when any host is allowed to preview. A plain env read — callers use it
  * to gate BEFORE touching dynamic APIs (`cookies()`/`headers()`), so an
- * unconfigured site never loses static/ISR rendering. The per-request host
- * match happens later, in `isDraftHostAllowed`.
+ * unconfigured site never loses static/ISR rendering. A site with no config
+ * but a resolved name is now enabled here (its inferred `<site>.deco.site` /
+ * `<site>.deco-cx.workers.dev` hosts); `DECO_ALLOWED_PREVIEW_HOSTS=none`
+ * forces it back to fully inert. The per-request host match happens later, in
+ * `isDraftHostAllowed`.
  */
 export function isDraftPreviewEnabled(
   env?: Record<string, string | undefined>,
@@ -273,7 +317,7 @@ export async function resolveDraftDecofile(
   options: ResolveDraftOptions,
 ): Promise<Record<string, unknown> | null> {
   const env = envOrProcess(options.env);
-  if (readAllowedHosts(env).length === 0) return null;
+  if (!isDraftPreviewEnabled(env)) return null;
 
   const parsed = parseDraftPointer(options.pointer);
   if (!parsed) return null;
@@ -389,7 +433,7 @@ export async function resolveDraftForRequest(
   options: ResolveDraftForRequestOptions = {},
 ): Promise<Record<string, unknown> | null> {
   const env = envOrProcess(options.env);
-  if (readAllowedHosts(env).length === 0) return null;
+  if (!isDraftPreviewEnabled(env)) return null;
   const pointer = draftPointerFromRequest(request);
   if (!pointer) return null;
   const host =

package/src/cms/index.ts

@@ -33,6 +33,7 @@ export {
   previewApiOriginForHost,
   resolveDraftDecofile,
   resolveDraftForRequest,
+  setDecoSiteHost,
   setDraftOverrideGetter,
   setDraftPreviewHosts,
 } from "./draftSource";

package/src/hooks/Image.test.ts

@@ -1,5 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { getOptimizedMediaUrl, getSrcSet } from "./Image";
+import {
+	getImageQuality,
+	getOptimizedMediaUrl,
+	getSrcSet,
+	type ImageQuality,
+	registerImageQuality,
+} from "./Image";
 
 describe("getOptimizedMediaUrl", () => {
 	let warnSpy: ReturnType<typeof vi.spyOn>;
@@ -98,3 +104,82 @@ describe("getSrcSet", () => {
 		expect(result).toContain("foo.jpg");
 	});
 });
+
+describe("registerImageQuality", () => {
+	// Module-level setter, so every test has to put it back or it leaks into
+	// the rest of the file.
+	afterEach(() => {
+		registerImageQuality(undefined);
+	});
+
+	it("emits no quality param by default", () => {
+		// The guarantee that makes this safe to land: every site that does not
+		// opt in keeps byte-identical URLs, so no CDN cache is invalidated.
+		expect(getImageQuality()).toBeUndefined();
+		const result = getOptimizedMediaUrl({
+			originalSrc: "https://cdn.example.com/foo.jpg",
+			width: 200,
+			fit: "cover",
+		});
+		expect(result).not.toContain("quality");
+	});
+
+	it("emits the registered quality for CDN-routed images", () => {
+		registerImageQuality("high");
+		const result = getOptimizedMediaUrl({
+			originalSrc: "https://cdn.example.com/foo.jpg",
+			width: 200,
+			fit: "cover",
+		});
+		expect(result).toContain("quality=high");
+	});
+	it("pins the exact URL, param order included", () => {
+		// Param ORDER is part of the CDN cache key, and `toContain` cannot see
+		// it: reordering the params would keep every other assertion here green
+		// while cold-caching every image on every site. It is also the property
+		// that lets a site swap its node_modules patch for this setter without a
+		// cache flush, so it needs a real equality check.
+		registerImageQuality("high");
+		expect(
+			getOptimizedMediaUrl({
+				originalSrc: "https://cdn.example.com/foo.jpg",
+				width: 200,
+				height: 300,
+				fit: "cover",
+			}),
+		).toBe(
+			"https://decoims.com/image?fit=cover&width=200&height=300&quality=high&src=https://cdn.example.com/foo.jpg",
+		);
+	});
+
+	it("carries the quality into every srcset entry", () => {
+		registerImageQuality("high");
+		const result = getSrcSet("https://cdn.example.com/foo.jpg", 100);
+		const entries = result?.split(", ") ?? [];
+		expect(entries.length).toBeGreaterThan(1);
+		for (const entry of entries) {
+			expect(entry).toContain("quality=high");
+		}
+	});
+
+	it("leaves VTEX sources alone — they resize via their own path syntax", () => {
+		registerImageQuality("high");
+		const result = getOptimizedMediaUrl({
+			originalSrc:
+				"https://acme.vtexassets.com/arquivos/ids/123456/product.jpg?v=1",
+			width: 200,
+			height: 300,
+			fit: "cover",
+		});
+		expect(result).toContain("/arquivos/ids/123456-200-300/");
+		expect(result).not.toContain("quality");
+	});
+
+	it("treats an empty string as unset, for untyped callers", () => {
+		// Unreachable from TypeScript now that the parameter is a union, but a
+		// value read from env or CMS config arrives as a plain string, so the
+		// runtime guard still earns its keep.
+		registerImageQuality("" as unknown as ImageQuality);
+		expect(getImageQuality()).toBeUndefined();
+	});
+});

package/src/hooks/Image.tsx

@@ -31,6 +31,61 @@ export function getImageCdnDomain(): string {
 	return imageCdnDomain;
 }
 
+// -------------------------------------------------------------------------
+// Configurable image quality
+// -------------------------------------------------------------------------
+
+/**
+ * Quality levels the Deco image CDN accepts as a site-wide default.
+ *
+ * The CDN maps these to 60% / 70% / 80%. It also accepts `original` (100%),
+ * deliberately excluded here: a global 100% default hurts performance on
+ * every page, which is the same call `DefaultQualityOptions` makes in the
+ * Fresh implementation this file was ported from (deco-cx/apps,
+ * website/components/Image.tsx).
+ *
+ * A union rather than `string` because the CDN **fails silently** on
+ * anything else: it answers 200 and serves its 60% default. So the obvious
+ * `registerImageQuality("80")` — quality means 1-100 in Cloudflare Images,
+ * next/image and imgix — would quietly serve the LOWEST quality while
+ * changing the cache key on every image. Measured against production
+ * decoims.com on one asset: no param 2911 B, `low` 2911, `medium` 3235,
+ * `high` 5189, and `"80"` / `"HIGH"` / garbage all 2911.
+ */
+export type ImageQuality = "low" | "medium" | "high";
+
+let imageQuality: ImageQuality | undefined;
+
+/**
+ * Register the quality level `getOptimizedMediaUrl` asks the image CDN for.
+ *
+ * Call once at module scope in your site's setup, NOT from a loader, action or
+ * anything else on the request path. This is module-level state shared by every
+ * request in a Worker isolate: setting it per-request would leak across
+ * concurrent requests, and setting it on only one of the SSR/hydration paths
+ * would produce mismatched `src`/`srcSet` and re-download every image.
+ *
+ * Unset by default, which emits no `quality` param and leaves the CDN on its
+ * 60% default — so existing sites are byte-for-byte unaffected and no CDN
+ * cache is invalidated. Set it when a site's art direction needs fidelity over
+ * bytes: on fashion/editorial catalogues the default compression visibly
+ * softens fabric texture and print detail.
+ *
+ * Applies to every URL built by `getOptimizedMediaUrl` — `Image`, `getSrcSet`
+ * and also `Video` when it is given `forceOptimizedSrc`. It does NOT apply to
+ * VTEX- or Shopify-hosted sources: those are resized through their own native
+ * URL syntax (`optimizeVTEX` / `optimizeShopify`), which returns before the
+ * query-param block. On a VTEX storefront that means product imagery is
+ * untouched and only CMS/banner assets are affected.
+ */
+export function registerImageQuality(quality: ImageQuality | undefined) {
+	imageQuality = quality || undefined;
+}
+
+export function getImageQuality(): ImageQuality | undefined {
+	return imageQuality;
+}
+
 // -------------------------------------------------------------------------
 // Fit options & optimization types
 // -------------------------------------------------------------------------
@@ -126,6 +181,7 @@ export function getOptimizedMediaUrl(opts: OptimizationOptions): string {
 	params.set("fit", fit);
 	params.set("width", `${width}`);
 	if (height) params.set("height", `${height}`);
+	if (imageQuality) params.set("quality", imageQuality);
 
 	return `https://${imageCdnDomain}/image?${params}&src=${imageSource}`;
 }

package/src/hooks/index.ts

@@ -8,10 +8,13 @@ export {
 	default as Image,
 	registerImageCdnDomain,
 	getImageCdnDomain,
+	registerImageQuality,
+	getImageQuality,
 	getOptimizedMediaUrl,
 	getSrcSet,
 	FACTORS,
 	type ImageProps,
+	type ImageQuality,
 	type FitOptions,
 } from "./Image";
 export { Picture, Source, type PictureProps, type SourceProps } from "./Picture";