@decocms/blocks 7.61.0 → 7.62.1

package/package.json

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

package/src/cms/index.ts

@@ -85,6 +85,7 @@ export type {
   DanglingReferenceHandler,
   DecoPageResult,
   DeferredSection,
+  Deferred,
   MatcherContext,
   PageSeo,
   ResolvedSection,
@@ -97,10 +98,12 @@ export {
   clearCommerceLoaders,
   evaluateMatcher,
   extractSeoFromProps,
+  asResolved,
   extractSeoFromSections,
   getAsyncRenderingConfig,
   getDeferredRawProps,
   isBot,
+  isDeferred,
   isEagerRequest,
   isSeoSection,
   onBeforeResolve,
@@ -113,6 +116,7 @@ export {
   registerNeverDeferSections,
   registerSeoSections,
   resolveDecoPage,
+  resolveDeferred,
   resolveDeferredSection,
   resolveDeferredSectionFull,
   resolvePageSections,

package/src/cms/resolve.test.ts

@@ -25,15 +25,18 @@ import { findPageByPath } from "./loader";
 import { getSection } from "./registry";
 import type { AsyncRenderingConfig, DeferredSection, MatcherContext } from "./resolve";
 import {
+  asResolved,
   clearCommerceLoaders,
   layoutCacheKey,
   DEFAULT_FOLD_THRESHOLD,
   extractSeoFromProps,
   getAsyncRenderingConfig,
+  isDeferred,
   isEagerRequest,
   reExtractRawProps,
   registerCommerceLoader,
   registerMatcher,
+  resolveDeferred,
   registerEagerSections,
   registerAlwaysDeferSections,
   registerNeverDeferSections,
@@ -1222,3 +1225,109 @@ describe("layoutCacheKey — the resolved-layout cache is segmented by device",
     expect(noCtx).toBe(layoutCacheKey(KEY, { userAgent: "" }));
   });
 });
+
+// ---------------------------------------------------------------------------
+// asResolved / deferred props
+// ---------------------------------------------------------------------------
+//
+// The CMS resolver is recursive and resolves EVERY `__resolveType` it finds in a
+// section's props — including branches the section will not render. Measured on
+// a real store, a PDP's `notFoundSections` (the 404 fallback) carried a shelf
+// whose `products` was a full-text search: 1703ms of the eager critical path of
+// every product page, result thrown away. `asResolved(v, true)` is the opt-out.
+
+describe("asResolved — deferred props", () => {
+  const LOADER = "test/loaders/expensive.ts";
+  let calls = 0;
+
+  beforeEach(() => {
+    calls = 0;
+    clearCommerceLoaders();
+    registerCommerceLoader(LOADER, async () => {
+      calls += 1;
+      return { products: ["p1", "p2"] };
+    });
+  });
+
+  afterEach(() => clearCommerceLoaders());
+
+  const expensive = { __resolveType: LOADER };
+
+  it("without asResolved the loader runs during the page pass", async () => {
+    const out = (await resolveValue({ fallback: expensive })) as any;
+    expect(calls).toBe(1);
+    expect(out.fallback).toEqual({ products: ["p1", "p2"] });
+  });
+
+  it("asResolved(v) hands the value back untouched — the loader never runs", async () => {
+    const out = (await resolveValue({ fallback: asResolved(expensive) })) as any;
+    expect(calls).toBe(0);
+    // The raw node comes through, NOT its resolution.
+    expect(out.fallback).toEqual(expensive);
+  });
+
+  it("asResolved(v, true) yields a thunk and does NOT resolve until called", async () => {
+    const out = (await resolveValue({ fallback: asResolved(expensive, true) })) as any;
+
+    expect(calls).toBe(0);
+    expect(isDeferred(out.fallback)).toBe(true);
+
+    expect(await resolveDeferred(out.fallback)).toEqual({ products: ["p1", "p2"] });
+    expect(calls).toBe(1);
+  });
+
+  it("the branch that never calls the thunk pays nothing", async () => {
+    const out = (await resolveValue({
+      shown: expensive,
+      fallback: asResolved(expensive, true),
+    })) as any;
+    // Only the rendered branch resolved. This is the whole point: 1 upstream
+    // call instead of 2 for a page that renders one of the two.
+    expect(calls).toBe(1);
+    expect(out.shown).toEqual({ products: ["p1", "p2"] });
+  });
+
+  it("a thunk is dropped by JSON.stringify — the unused branch leaves the payload too", async () => {
+    const out = (await resolveValue({ fallback: asResolved(expensive, true) })) as any;
+    expect(JSON.parse(JSON.stringify(out))).toEqual({});
+  });
+
+  it("resolveDeferred is tolerant of a plain value (admin preview path)", async () => {
+    // The admin preview does not run `onBeforeResolveProps`, so the prop arrives
+    // already resolved. A section must read the same either way.
+    expect(await resolveDeferred([{ a: 1 }])).toEqual([{ a: 1 }]);
+    expect(await resolveDeferred(undefined)).toBeUndefined();
+  });
+
+  it("the thunk resolves in THIS request's context, not a context-free one", async () => {
+    // The invariant that makes deferring safe: a cookie/UA-gated prop must not
+    // silently resolve against an anonymous request when the section calls it.
+    const PROBE = "test/matchers/deferredProbe.ts";
+    const seen: MatcherContext[] = [];
+    registerMatcher(PROBE, (_rule, ctx) => {
+      seen.push(ctx);
+      return true;
+    });
+    const gated = {
+      __resolveType: WELL_KNOWN_TYPES.MULTIVARIATE,
+      variants: [{ rule: { __resolveType: PROBE }, value: expensive }],
+    };
+    const ctx: MatcherContext = {
+      userAgent: "Mozilla/5.0 (iPhone) Mobile Safari",
+      url: "https://store.com/x/p",
+      cookies: { VtexIdclientAutCookie: "tok" },
+    };
+
+    const out = (await resolveValue({ fallback: asResolved(gated, true) }, undefined, ctx)) as any;
+    expect(seen).toHaveLength(0); // nothing evaluated yet
+
+    await resolveDeferred(out.fallback);
+
+    expect(seen).not.toHaveLength(0);
+    for (const c of seen) {
+      expect(c.cookies).toEqual(ctx.cookies);
+      expect(c.userAgent).toBe(ctx.userAgent);
+      expect(c.url).toBe(ctx.url);
+    }
+  });
+});

package/src/cms/resolve.ts

@@ -869,8 +869,38 @@ async function internalResolve(value: unknown, rctx: ResolveContext): Promise<un
 
   const childCtx: ResolveContext = { ...rctx, depth: rctx.depth + 1 };
 
-  // "resolved" short-circuit
-  if (resolveType === "resolved") return obj.data ?? null;
+  // ── `asResolved` ─────────────────────────────────────────────────────────
+  //
+  // `{ __resolveType: "resolved", data }` hands `data` back untouched — the
+  // caller is telling us it is already resolved.
+  //
+  // With `deferred: true` it instead becomes a THUNK, and `data` is not walked
+  // at all during the page pass. That is the point: the CMS resolver is
+  // recursive and resolves every `__resolveType` it finds in a section's props,
+  // including branches the section will not render. Measured on a real store, a
+  // PDP's `notFoundSections` — the 404 fallback — carried a shelf whose
+  // `products` was a full-text search: 1703ms of the EAGER critical path of
+  // EVERY product page, with the result thrown away. Same shape applies to tab
+  // content, modal content and unmatched A/B branches.
+  //
+  // The thunk closes over `childCtx`, so resolving it later still sees THIS
+  // request: cookies, UA and url reach the matchers, and `rctx.memo` dedupes
+  // named-block references the page already resolved. It does NOT dedupe
+  // commerce loaders — those are keyed by their own cache layer, not the memo
+  // (see the "Named block reference (memoized)" branch), so a deferred prop
+  // pointing at the same loader as a rendered one still calls it twice.
+  //
+  // HAZARD, and it is why this is opt-in per prop: a thunk cannot be
+  // serialized. If a section defers a prop and never calls it, the prop reaches
+  // the client as `undefined` (JSON.stringify drops functions). Defer only what
+  // the section itself resolves, and only on the branch that needs it.
+  if (resolveType === "resolved") {
+    if (obj.deferred === true) {
+      const raw = obj.data;
+      return () => internalResolve(raw, childCtx);
+    }
+    return obj.data ?? null;
+  }
 
   // Lazy section wrapper — unwrap single inner section
   if (resolveType === WELL_KNOWN_TYPES.LAZY) {
@@ -1782,6 +1812,65 @@ export async function resolveSectionsList(
   return [];
 }
 
+// ---------------------------------------------------------------------------
+// Deferred props (`asResolved`)
+// ---------------------------------------------------------------------------
+
+/** A prop deferred with `asResolved(value, true)`: call it to resolve. */
+export type Deferred<T> = () => Promise<T>;
+
+/**
+ * Mark a prop as already-resolved, or defer its resolution to the section.
+ *
+ * Use it from a section's `onBeforeResolveProps`, which runs on the RAW CMS
+ * props before the resolver walks them:
+ *
+ * ```ts
+ * export const onBeforeResolveProps = (props: Props) => ({
+ *   ...props,
+ *   // The 404 fallback: only the branch that renders it should pay for it.
+ *   notFoundSections: asResolved(props.notFoundSections, true),
+ * })
+ *
+ * export const loader = async (props: Props) => {
+ *   if (props.page) return { ...props, notFoundSections: [] }
+ *   return { ...props, notFoundSections: await resolveDeferred(props.notFoundSections) }
+ * }
+ * ```
+ *
+ * - `asResolved(v)` — hand `v` back untouched; the resolver does not walk it.
+ * - `asResolved(v, true)` — the section receives a {@link Deferred} thunk and
+ *   decides whether to pay for it.
+ *
+ * A deferred prop that is never called reaches the client as `undefined`: a
+ * thunk cannot be serialized. That is deliberate — it is what keeps the unused
+ * branch out of the hydration payload too — but it means you must resolve it on
+ * the branch that renders it.
+ */
+export function asResolved<T>(value: T, defer?: boolean): T {
+  return {
+    __resolveType: "resolved",
+    data: value,
+    ...(defer ? { deferred: true } : {}),
+  } as unknown as T;
+}
+
+/** True when a prop came through as a {@link Deferred} thunk. */
+export function isDeferred<T>(value: unknown): value is Deferred<T> {
+  return typeof value === "function";
+}
+
+/**
+ * Resolve a possibly-deferred prop.
+ *
+ * Tolerant of a plain value, so a section reads the same whether the prop was
+ * deferred, marked already-resolved, or left alone — and so the admin preview
+ * (which does not run `onBeforeResolveProps`) keeps working.
+ */
+export async function resolveDeferred<T>(value: Deferred<T> | T): Promise<T> {
+  return isDeferred<T>(value) ? await value() : (value as T);
+}
+
 // ---------------------------------------------------------------------------
 // Page-level SEO — extracted from registered SEO sections after resolution
 // ---------------------------------------------------------------------------

package/src/cms/sectionLoaders.test.ts

@@ -5,6 +5,7 @@ import type { ResolvedSection } from "./resolve";
 import {
   getDegradedSections,
   isLayoutSection,
+  layoutLoaderCacheKey,
   registerCacheableSections,
   registerLayoutSections,
   registerNonCriticalSections,
@@ -531,3 +532,94 @@ describe("runSectionLoaders — batch span", () => {
     expect(perSection).toHaveLength(3);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Layout section cache — device is part of the key
+// ---------------------------------------------------------------------------
+//
+// This cache holds a layout section's LOADER OUTPUT, and that is where
+// `isMobile` is born (`ctx.device`, or a loader composed with `withDevice` /
+// `withMobile`). Keyed by component path alone, the first request decided the
+// variant for everyone for 5 minutes. Measured on a real store's PDP with
+// Header/Footer layout-cached: desktop first and a mobile visitor got the
+// desktop header (`h-[90px]`); mobile first and a desktop visitor got
+// `id="header-mobile-menu"`.
+//
+// NOTE: this is a DIFFERENT cache from `resolvedLayoutCache` in `cms/resolve.ts`.
+// That one holds the CMS prop resolution and never sees `isMobile`, so putting
+// the axis there (which is what decocms/blocks#528 did) does not fix this.
+
+describe("layout section cache — device axis", () => {
+  const MOBILE = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0) Mobile Safari";
+  const TABLET = "Mozilla/5.0 (iPad; CPU OS 17_0) Safari/605";
+  const DESKTOP = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120 Safari/537.36";
+
+  // `layoutCache` is module-global with a 5-minute TTL and no exported reset, so
+  // a shared component key would leak entries between cases.
+  let seq = 0;
+  const req = (ua: string) => new Request("https://store.com/p", { headers: { "user-agent": ua } });
+
+  /** A layout loader that stamps what device it saw — the leak made visible. */
+  const setupDeviceLayout = () => {
+    seq += 1;
+    const key = `site/sections/DeviceLayout${seq}.tsx`;
+    let runs = 0;
+    registerSectionLoader(key, async (props: Record<string, unknown>, request?: Request) => {
+      runs += 1;
+      const ua = request?.headers.get("user-agent") ?? "";
+      return { ...props, isMobile: /iPhone|Mobile/.test(ua), ua };
+    });
+    registerLayoutSections([key]);
+    return { key, runs: () => runs };
+  };
+
+  const load = async (key: string, ua: string) => {
+    const request = req(ua);
+    const out = await RequestContext.run(request, () =>
+      runSingleSectionLoader(makeSection(key), request),
+    );
+    return out.props as { isMobile: boolean; ua: string };
+  };
+
+  it("a mobile visitor does NOT get the variant a desktop visitor cached", async () => {
+    const { key, runs } = setupDeviceLayout();
+
+    const desktop = await load(key, DESKTOP);
+    expect(desktop.isMobile).toBe(false);
+
+    const mobile = await load(key, MOBILE);
+    // Without the axis this came back `false` — the desktop header on a phone.
+    expect(mobile.isMobile).toBe(true);
+    expect(runs()).toBe(2);
+  });
+
+  it("and the reverse: desktop after mobile", async () => {
+    const { key } = setupDeviceLayout();
+    expect((await load(key, MOBILE)).isMobile).toBe(true);
+    expect((await load(key, DESKTOP)).isMobile).toBe(false);
+  });
+
+  it("two visitors on the same device share the entry — the cache still works", async () => {
+    const { key, runs } = setupDeviceLayout();
+    await load(key, DESKTOP);
+    await load(key, DESKTOP);
+    expect(runs()).toBe(1);
+  });
+
+  it("tablet is its own entry", async () => {
+    const { key, runs } = setupDeviceLayout();
+    await load(key, MOBILE);
+    await load(key, TABLET);
+    expect(runs()).toBe(2);
+  });
+
+  it("layoutLoaderCacheKey: three devices, three keys; no request still keys", () => {
+    const keys = [MOBILE, TABLET, DESKTOP].map((ua) => layoutLoaderCacheKey("X", req(ua)));
+    expect(new Set(keys).size).toBe(3);
+    const bare = layoutLoaderCacheKey("X");
+    expect(bare).not.toContain("undefined");
+    // A request with no UA header must land on the same bucket as no request at
+    // all, so a health check does not fragment the desktop entry.
+    expect(bare).toBe(layoutLoaderCacheKey("X", new Request("https://store.com/p")));
+  });
+});

package/src/cms/sectionLoaders.ts

@@ -11,6 +11,7 @@
 
 import { RequestContext } from "@decocms/blocks/sdk/requestContext";
 import { getCacheProfile } from "../sdk/cacheHeaders";
+import { detectDevice } from "../sdk/detectDevice";
 import { djb2 } from "../sdk/djb2";
 import { withInflightTimeout } from "../sdk/inflightTimeout";
 import { withTracing } from "../sdk/observability";
@@ -212,10 +213,15 @@ export function registerSectionLoader(sectionKey: string, loader: SectionLoaderF
  *
  * Dev-only diagnostic: when a request-dependent loader (one built from
  * `withDevice`/`withMobile`/`withSearchParam`, possibly through `compose`)
- * is registered for a section that's also in `layoutSections`, the layout
- * cache will serve the first visitor's variant to every viewer for
- * `LAYOUT_CACHE_TTL` (5 min). We log a loud warning explaining the
- * remediation options. See #206.
+ * is registered for a section that's also in `layoutSections`, the layout cache
+ * may serve the first visitor's variant to every viewer for
+ * `LAYOUT_CACHE_TTL` (5 min). See #206.
+ *
+ * DEVICE is now segmented in the key ({@link layoutLoaderCacheKey}), so
+ * `withDevice`/`withMobile` are safe. The warning stays because
+ * `__requestDependent` is a single boolean and does not say WHICH signal the
+ * loader reads — a `withSearchParam` layout loader still contaminates, and we
+ * would rather warn on a safe case than stay silent on an unsafe one.
  */
 export function registerSectionLoaders(loaders: Record<string, SectionLoaderFn>): void {
   for (const [key, loader] of Object.entries(loaders)) {
@@ -228,9 +234,11 @@ export function registerSectionLoaders(loaders: Record<string, SectionLoaderFn>)
       if (requestDependent && layoutSections.has(key)) {
         console.warn(
           `[SectionLoaders] "${key}" is registered as a layout section ` +
-            `(cached for 5min by component path) but its loader is request-` +
-            `dependent (withDevice/withMobile/withSearchParam). The first ` +
-            `visitor's variant will be served to all users for 5min. Fix: ` +
+            `(cached for 5min by component path + device) but its loader is ` +
+            `request-dependent (withDevice/withMobile/withSearchParam). ` +
+            `withDevice/withMobile are safe — device is in the key. If it ` +
+            `reads a search param, cookie or geo, the first visitor's variant ` +
+            `will be served to all users for 5min. Fix: ` +
             `(1) remove "export const layout = true" from the section, ` +
             `(2) call unregisterLayoutSections(["${key}"]) in setup.ts ` +
             `after applySectionConventions, or (3) move the request-` +
@@ -267,10 +275,11 @@ const layoutInflight = new Map<string, Promise<ResolvedSection>>();
  * Layout sections (Header, Footer, etc.) are cached server-side
  * for LAYOUT_CACHE_TTL to avoid redundant enrichment on every navigation.
  *
- * The cache key is the component path only — it does NOT include UA,
- * cookies, or geo. Sections whose loader depends on those signals must
- * not be layout-cached: see {@link unregisterLayoutSections} to opt a
- * section out of the auto-discovery done by `applySectionConventions`.
+ * The cache key is the component path plus the DEVICE (see
+ * {@link layoutLoaderCacheKey}) — it does NOT include cookies, geo or search
+ * params. A section whose loader depends on THOSE must not be layout-cached:
+ * see {@link unregisterLayoutSections} to opt a section out of the
+ * auto-discovery done by `applySectionConventions`.
  */
 export function registerLayoutSections(keys: string[]): void {
   for (const key of keys) {
@@ -299,18 +308,46 @@ export function isLayoutSection(key: string): boolean {
   return layoutSections.has(key);
 }
 
-function getCachedLayout(component: string): ResolvedSection | null {
-  const entry = layoutCache.get(component);
+/**
+ * Cache key for a layout section's LOADER OUTPUT, segmented by device.
+ *
+ * This is the cache that actually carried the device leak, and it is a
+ * different one from `resolvedLayoutCache` in `cms/resolve.ts` — that one holds
+ * the CMS prop resolution, which never sees `isMobile`. `isMobile` is produced
+ * HERE, by the section's own loader (`ctx.device`, or a loader composed with
+ * `withDevice`/`withMobile`), and this cache stored it under the component path
+ * alone. Measured on a real store's PDP with Header/Footer layout-cached: the
+ * first request decided the variant for everyone — desktop first and a mobile
+ * visitor got `h-[90px]`; mobile first and a desktop visitor got
+ * `id="header-mobile-menu"`.
+ *
+ * Device is the right default axis because it is the one signal the framework
+ * itself injects into every section loader, so a layout section can depend on it
+ * without the site opting into anything. A layout whose output does not vary by
+ * device just gets up to 3 identical entries.
+ *
+ * Still NOT covered, and still the reason the `registerSectionLoaders` warning
+ * below exists: a layout loader that varies on a search param, a cookie or geo.
+ * Those are site-specific; such a section belongs outside `layoutSections`.
+ *
+ * Exported for unit testing.
+ */
+export function layoutLoaderCacheKey(component: string, request?: Request): string {
+  return `${component}::${detectDevice(request?.headers?.get?.("user-agent") ?? "")}`;
+}
+
+function getCachedLayout(cacheKey: string): ResolvedSection | null {
+  const entry = layoutCache.get(cacheKey);
   if (!entry) return null;
   if (Date.now() > entry.expiresAt) {
-    layoutCache.delete(component);
+    layoutCache.delete(cacheKey);
     return null;
   }
   return entry.section;
 }
 
-function setCachedLayout(component: string, section: ResolvedSection): void {
-  layoutCache.set(component, {
+function setCachedLayout(cacheKey: string, section: ResolvedSection): void {
+  layoutCache.set(cacheKey, {
     section,
     expiresAt: Date.now() + LAYOUT_CACHE_TTL,
   });
@@ -324,7 +361,7 @@ function resolveLayoutSection(
   loader: SectionLoaderFn,
   request: Request,
 ): Promise<ResolvedSection> {
-  const key = section.component;
+  const key = layoutLoaderCacheKey(section.component, request);
   const { index } = section;
 
   // Re-apply the caller's page-specific index onto a fresh object so the