@decocms/blocks 7.61.0 → 7.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks",
-  "version": "7.61.0",
+  "version": "7.62.0",
   "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
 // ---------------------------------------------------------------------------