@decocms/start 0.29.2 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.29.2",
+  "version": "0.30.0",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",

package/src/cms/resolve.test.ts

@@ -19,7 +19,7 @@ vi.mock("./registry", () => ({
   getSection: vi.fn(),
 }));
 
-import { resolveDeferredSectionFull } from "./resolve";
+import { resolveDeferredSectionFull, resolveSectionsList } from "./resolve";
 import { runSingleSectionLoader } from "./sectionLoaders";
 import { normalizeUrlsInObject } from "../sdk/normalizeUrls";
 import type { DeferredSection } from "./resolve";
@@ -65,3 +65,104 @@ describe("resolveDeferredSectionFull", () => {
     expect(result).toEqual(input); // mock passes through
   });
 });
+
+// ---------------------------------------------------------------------------
+// resolveSectionsList — page-level variant wrapper support
+// ---------------------------------------------------------------------------
+
+describe("resolveSectionsList", () => {
+  const makeRctx = (matcherCtx = {}) => ({
+    routeParams: {},
+    matcherCtx,
+    memo: new Map(),
+    depth: 0,
+  });
+
+  it("returns array as-is when value is already an array", async () => {
+    const sections = [{ __resolveType: "section-A" }, { __resolveType: "section-B" }];
+    const result = await resolveSectionsList(sections, makeRctx());
+    expect(result).toEqual(sections);
+  });
+
+  it("returns empty array for null/undefined/non-object", async () => {
+    expect(await resolveSectionsList(null, makeRctx())).toEqual([]);
+    expect(await resolveSectionsList(undefined, makeRctx())).toEqual([]);
+    expect(await resolveSectionsList("string", makeRctx())).toEqual([]);
+    expect(await resolveSectionsList(42, makeRctx())).toEqual([]);
+  });
+
+  it("resolves page-level variant wrapper without __resolveType", async () => {
+    // Simulates CMS admin wrapping all sections in a device variant
+    // Rule has no __resolveType → evaluateMatcher returns true (match-all)
+    const sectionsArray = [
+      { __resolveType: "Header - 01" },
+      { __resolveType: "site/sections/Account/PersonalData.tsx" },
+      { __resolveType: "Footer - 01" },
+    ];
+
+    const variantWrapper = {
+      variants: [
+        {
+          rule: { mobile: true, tablet: true, desktop: true },
+          value: sectionsArray,
+        },
+      ],
+    };
+
+    const result = await resolveSectionsList(variantWrapper, makeRctx());
+    expect(result).toEqual(sectionsArray);
+  });
+
+  it("returns empty when no variant matches in page-level wrapper", async () => {
+    // All variants have __resolveType in rule → evaluateMatcher returns false
+    // (unregistered matcher defaults to false)
+    const variantWrapper = {
+      variants: [
+        {
+          rule: { __resolveType: "website/matchers/device.ts", mobile: true },
+          value: [{ __resolveType: "MobileOnly" }],
+        },
+      ],
+    };
+
+    const result = await resolveSectionsList(variantWrapper, makeRctx());
+    expect(result).toEqual([]);
+  });
+
+  it("picks first matching variant in page-level wrapper", async () => {
+    const desktopSections = [{ __resolveType: "DesktopLayout" }];
+    const mobileSections = [{ __resolveType: "MobileLayout" }];
+
+    const variantWrapper = {
+      variants: [
+        {
+          // No __resolveType → evaluateMatcher returns true (first match wins)
+          rule: { desktop: true },
+          value: desktopSections,
+        },
+        {
+          rule: { mobile: true },
+          value: mobileSections,
+        },
+      ],
+    };
+
+    const result = await resolveSectionsList(variantWrapper, makeRctx());
+    expect(result).toEqual(desktopSections);
+  });
+
+  it("returns empty for object without __resolveType and without variants", async () => {
+    const result = await resolveSectionsList({ someKey: "value" }, makeRctx());
+    expect(result).toEqual([]);
+  });
+
+  it("respects max depth limit (20)", async () => {
+    // Build 21 levels of nested variant wrappers to exceed MAX_RESOLVE_DEPTH=20
+    let wrapper: any = [{ __resolveType: "deep" }];
+    for (let i = 0; i < 21; i++) {
+      wrapper = { variants: [{ rule: {}, value: wrapper }] };
+    }
+    const result = await resolveSectionsList(wrapper, makeRctx());
+    expect(result).toEqual([]);
+  });
+});

package/src/cms/resolve.ts

@@ -1015,7 +1015,7 @@ function resolveSectionShallow(
  * to get the raw section array without resolving each individual section.
  * This allows the eager/deferred split to happen before section resolution.
  */
-async function resolveSectionsList(
+export async function resolveSectionsList(
   value: unknown,
   rctx: ResolveContext,
   depth = 0,
@@ -1026,6 +1026,20 @@ async function resolveSectionsList(
 
   const obj = value as Record<string, unknown>;
   const rt = obj.__resolveType as string | undefined;
+
+  // Page-level variant wrapper without __resolveType
+  // (CMS admin wraps ALL sections in a variant object with { variants: [...] })
+  if (!rt && Array.isArray(obj.variants)) {
+    const variants = obj.variants as Array<{ value: unknown; rule?: unknown }>;
+    for (const variant of variants) {
+      const rule = variant.rule as Record<string, unknown> | undefined;
+      if (evaluateMatcher(rule, rctx.matcherCtx)) {
+        return resolveSectionsList(variant.value, rctx, depth + 1);
+      }
+    }
+    return [];
+  }
+
   if (!rt) return [];
 
   // Multivariate flags — evaluate matchers and recurse into matched variant

package/src/routes/cmsRoute.ts

@@ -228,6 +228,33 @@ export const loadDeferredSection = createServerFn({ method: "POST" })
     return normalizeUrlsInObject(enriched);
   });
 
+// ---------------------------------------------------------------------------
+// Pre-wrapped deferred section loader for IntersectionObserver-based rendering
+// ---------------------------------------------------------------------------
+
+/**
+ * Convenience wrapper around `loadDeferredSection` that matches the
+ * `loadDeferredSectionFn` prop signature of `DecoPageRenderer`.
+ *
+ * Pass this directly to `<DecoPageRenderer loadDeferredSectionFn={deferredSectionLoader} />`
+ * to enable IntersectionObserver-based lazy loading of deferred sections.
+ */
+export const deferredSectionLoader = async ({
+  component,
+  rawProps,
+  pagePath,
+  pageUrl,
+}: {
+  component: string;
+  rawProps: Record<string, unknown>;
+  pagePath: string;
+  pageUrl?: string;
+}): Promise<ResolvedSection | null> => {
+  return loadDeferredSection({
+    data: { component, rawProps, pagePath, pageUrl },
+  });
+};
+
 // ---------------------------------------------------------------------------
 // Default pending component — shown during SPA navigation while loader runs
 // ---------------------------------------------------------------------------

package/src/routes/index.ts

@@ -8,6 +8,7 @@ export {
   type CmsRouteOptions,
   cmsHomeRouteConfig,
   cmsRouteConfig,
+  deferredSectionLoader,
   loadCmsHomePage,
   loadCmsPage,
   loadDeferredSection,