@decocms/blocks 7.60.0 → 7.61.0

package/package.json

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

package/src/cms/resolve.test.ts

@@ -26,6 +26,7 @@ import { getSection } from "./registry";
 import type { AsyncRenderingConfig, DeferredSection, MatcherContext } from "./resolve";
 import {
   clearCommerceLoaders,
+  layoutCacheKey,
   DEFAULT_FOLD_THRESHOLD,
   extractSeoFromProps,
   getAsyncRenderingConfig,
@@ -1170,3 +1171,54 @@ describe("hidden array items (never matcher)", () => {
     expect(result.items).toEqual([null, { label: "kept" }]);
   });
 });
+
+// ---------------------------------------------------------------------------
+// resolved-layout cache — device is part of the key
+// ---------------------------------------------------------------------------
+//
+// The key used to be the component path alone, so the first visitor's variant
+// was served to everyone for the whole TTL. A real store had to leave Header
+// and Footer OUT of registerLayoutSections because of it, and then re-resolved
+// both on every page and every navigation. These cases pin the axis; without
+// them a refactor could silently collapse the key again and the symptom (a
+// mobile header on desktop) only shows up in production, minutes later.
+
+describe("layoutCacheKey — the resolved-layout cache is segmented by device", () => {
+  const MOBILE_UA = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0) Mobile Safari";
+  const TABLET_UA = "Mozilla/5.0 (iPad; CPU OS 17_0) Safari/605";
+  const DESKTOP_UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120 Safari/537.36";
+  const KEY = "site/sections/Header.tsx";
+
+  // The key used to be the component path alone. A site whose Header takes a
+  // per-request device prop therefore served the first visitor's variant to
+  // everyone for the whole 5-minute TTL — a mobile header on desktop. The only
+  // escape was leaving Header/Footer out of `registerLayoutSections`, which is
+  // what a real store did, and it then re-resolved both on every page and every
+  // navigation.
+
+  it("mobile, tablet and desktop are three distinct keys", () => {
+    const keys = [MOBILE_UA, TABLET_UA, DESKTOP_UA].map((ua) => layoutCacheKey(KEY, { userAgent: ua }));
+    expect(new Set(keys).size).toBe(3);
+  });
+
+  it("the same device yields the same key — the cache still works", () => {
+    expect(layoutCacheKey(KEY, { userAgent: DESKTOP_UA })).toBe(
+      layoutCacheKey(KEY, { userAgent: DESKTOP_UA }),
+    );
+  });
+
+  it("different components never share a key on the same device", () => {
+    expect(layoutCacheKey("site/sections/Header.tsx", { userAgent: MOBILE_UA })).not.toBe(
+      layoutCacheKey("site/sections/Footer.tsx", { userAgent: MOBILE_UA }),
+    );
+  });
+
+  it("a missing userAgent still produces a key (no crash, no undefined axis)", () => {
+    const noCtx = layoutCacheKey(KEY);
+    expect(noCtx).toContain(KEY);
+    expect(noCtx).not.toContain("undefined");
+    // An absent UA must land on the SAME bucket as a request whose UA is empty,
+    // so a health check and a real desktop hit do not fragment the cache twice.
+    expect(noCtx).toBe(layoutCacheKey(KEY, { userAgent: "" }));
+  });
+});

package/src/cms/resolve.ts

@@ -14,6 +14,7 @@ import {
   registerActionSchemas,
   registerLoaderSchemas,
 } from "./schema";
+import { detectDevice } from "../sdk/detectDevice";
 import { isLayoutSection, markSectionDegraded, runSingleSectionLoader } from "./sectionLoaders";
 
 // globalThis-backed: share state across Vite server function split modules
@@ -1105,6 +1106,33 @@ interface ResolvedSectionsCache {
 const resolvedLayoutCache = new Map<string, ResolvedSectionsCache>();
 const resolvedLayoutInflight = new Map<string, Promise<ResolvedSection[]>>();
 
+/**
+ * Cache key for a resolved layout block, segmented by DEVICE.
+ *
+ * The key used to be the component path alone, and that made the cache unusable
+ * for any site whose Header/Footer takes a per-request device prop: the first
+ * visitor's variant was served to everyone for the whole TTL (mobile header on
+ * desktop and vice-versa). The only escape was to leave those sections out of
+ * `registerLayoutSections` entirely — which is what a real store did, and it
+ * then re-resolved Header and Footer on every single page and navigation.
+ *
+ * Device is the right default axis because it is the one thing the framework
+ * itself injects into every section (`sectionLoaderContext` → `detectDevice`),
+ * so a layout section can depend on it WITHOUT the site opting into anything.
+ * A layout that does not vary by device just gets up to 3 identical entries —
+ * a bounded, negligible cost against silently serving the wrong markup.
+ *
+ * Anything else a layout varies on (region, sales channel, locale) is
+ * site-specific and NOT covered here: those sections should stay out of
+ * `registerLayoutSections` until there is a demonstrated need for a `vary`
+ * hook. Adding axes nobody asked for only shrinks the hit rate.
+ *
+ * Exported for unit testing.
+ */
+export function layoutCacheKey(blockKey: string, matcherCtx?: MatcherContext): string {
+  return `${blockKey}::${detectDevice(matcherCtx?.userAgent ?? "")}`;
+}
+
 function getCachedResolvedLayout(blockKey: string): ResolvedSection[] | null {
   const entry = resolvedLayoutCache.get(blockKey);
   if (!entry) return null;
@@ -2127,20 +2155,21 @@ async function resolveDecoPageImpl(
           const layoutKey = isRawSectionLayout(section);
 
           if (layoutKey) {
-            const cached = getCachedResolvedLayout(layoutKey);
+            const cacheKey = layoutCacheKey(layoutKey, rctx.matcherCtx);
+            const cached = getCachedResolvedLayout(cacheKey);
             if (cached) return cached;
 
-            const inflight = resolvedLayoutInflight.get(layoutKey);
+            const inflight = resolvedLayoutInflight.get(cacheKey);
             if (inflight) return inflight;
 
             const p = withInflightTimeout(
               resolveRawSection(section, rctx).then((results) => {
-                setCachedResolvedLayout(layoutKey, results);
+                setCachedResolvedLayout(cacheKey, results);
                 return results;
               }),
-              `resolvedLayout ${layoutKey}`,
-            ).finally(() => resolvedLayoutInflight.delete(layoutKey));
-            resolvedLayoutInflight.set(layoutKey, p);
+              `resolvedLayout ${cacheKey}`,
+            ).finally(() => resolvedLayoutInflight.delete(cacheKey));
+            resolvedLayoutInflight.set(cacheKey, p);
             return p;
           }
 
@@ -2224,20 +2253,21 @@ export async function resolvePageSections(
         const layoutKey = isRawSectionLayout(section);
 
         if (layoutKey) {
-          const cached = getCachedResolvedLayout(layoutKey);
+          const cacheKey = layoutCacheKey(layoutKey, rctx.matcherCtx);
+          const cached = getCachedResolvedLayout(cacheKey);
           if (cached) return cached;
 
-          const inflight = resolvedLayoutInflight.get(layoutKey);
+          const inflight = resolvedLayoutInflight.get(cacheKey);
           if (inflight) return inflight;
 
           const p = withInflightTimeout(
             resolveRawSection(section, rctx).then((results) => {
-              setCachedResolvedLayout(layoutKey, results);
+              setCachedResolvedLayout(cacheKey, results);
               return results;
             }),
-            `resolvedLayout ${layoutKey}`,
-          ).finally(() => resolvedLayoutInflight.delete(layoutKey));
-          resolvedLayoutInflight.set(layoutKey, p);
+            `resolvedLayout ${cacheKey}`,
+          ).finally(() => resolvedLayoutInflight.delete(cacheKey));
+          resolvedLayoutInflight.set(cacheKey, p);
           return p;
         }