@decocms/start 0.29.1 → 0.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.29.1",
+  "version": "0.29.3",
   "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/hooks/DecoPageRenderer.tsx

@@ -172,21 +172,34 @@ export function SectionRenderer({ section }: { section: Section | null | undefin
     return <Comp {...(section.props ?? {})} />;
   }
 
+  // Sync path: render directly if available — avoids React.lazy SSR streaming issue
+  const options = getSectionOptions(section.Component);
+  const isClientOnly = options?.clientOnly === true;
+  const SyncComp = getSyncComponent(section.Component);
+  if (SyncComp && !isClientOnly) {
+    return createElement(SyncComp, section.props ?? {});
+  }
+
   const Lazy = getLazyComponent(section.Component);
   if (!Lazy) {
     console.warn(`[SectionRenderer] No component registered for: ${section.Component}`);
     return null;
   }
 
-  // Use the section's registered loadingFallback (if available) instead of
-  // the generic NestedSectionFallback. This lets parent sections (e.g.
-  // NotFoundChallenge) show a meaningful skeleton for nested children
-  // (e.g. MountedPDP) while the lazy chunk loads.
-  const options = getSectionOptions(section.Component);
   const fallback = options?.loadingFallback
     ? createElement(options.loadingFallback, section.props ?? {})
     : <NestedSectionFallback />;
 
+  if (isClientOnly) {
+    return (
+      <ClientOnly fallback={fallback}>
+        <Suspense fallback={null}>
+          <Lazy {...(section.props ?? {})} />
+        </Suspense>
+      </ClientOnly>
+    );
+  }
+
   return (
     <Suspense fallback={fallback}>
       <Lazy {...(section.props ?? {})} />
@@ -501,20 +514,39 @@ export function DecoPageRenderer({
                   <Await promise={promise}>
                     {(resolved) => {
                       if (!resolved) return null;
-                      const LazyComponent = getLazyComponent(resolved.component);
-                      if (!LazyComponent) return null;
                       const resolvedOptions = getSectionOptions(resolved.component);
                       const isClientOnly = resolvedOptions?.clientOnly === true;
+                      const SyncComp = getSyncComponent(resolved.component);
                       const sectionId = resolved.key
                         .replace(/\//g, "-")
                         .replace(/\.tsx$/, "")
                         .replace(/^site-sections-/, "");
 
-                      const inner = (
-                        <Suspense fallback={null}>
-                          <LazyComponent {...resolved.props} />
-                        </Suspense>
-                      );
+                      let inner: ReactNode;
+
+                      if (SyncComp && !isClientOnly) {
+                        // Sync path: direct render, no lazy/Suspense.
+                        inner = createElement(SyncComp, resolved.props);
+                      } else {
+                        const LazyComponent = getLazyComponent(resolved.component);
+                        if (!LazyComponent) return null;
+
+                        const fallbackEl = resolvedOptions?.loadingFallback
+                          ? createElement(resolvedOptions.loadingFallback, resolved.props)
+                          : null;
+
+                        inner = isClientOnly ? (
+                          <ClientOnly fallback={fallbackEl}>
+                            <Suspense fallback={null}>
+                              <LazyComponent {...resolved.props} />
+                            </Suspense>
+                          </ClientOnly>
+                        ) : (
+                          <Suspense fallback={null}>
+                            <LazyComponent {...resolved.props} />
+                          </Suspense>
+                        );
+                      }
 
                       return (
                         <section
@@ -522,11 +554,7 @@ export function DecoPageRenderer({
                           data-manifest-key={resolved.key}
                           style={{ animation: "decoFadeIn 0.3s ease-out" }}
                         >
-                          {isClientOnly ? (
-                            <ClientOnly fallback={null}>{inner}</ClientOnly>
-                          ) : (
-                            inner
-                          )}
+                          {inner}
                         </section>
                       );
                     }}
@@ -565,34 +593,36 @@ export function DecoPageRenderer({
           .replace(/\.tsx$/, "")
           .replace(/^site-sections-/, "");
 
-        // Unified render path: always use React.lazy + Suspense.
-        // For sync-registered components, getLazyComponent wraps them in a
-        // pre-fulfilled lazy (via syncThenable) so React renders them
-        // synchronously — same behavior as the old sync path, but with an
-        // identical tree structure on both server and client (always has
-        // <Suspense>). This prevents hydration mismatches when sites remove
-        // registerSectionsSync.
-        const LazyComponent = getLazyComponent(section.component);
-        if (!LazyComponent) return null;
-
-        // ClientOnly sections: render only on client, no SSR, no hydration mismatch.
-        // Used for analytics scripts, GTM, third-party widgets.
         const isClientOnly = options?.clientOnly === true;
-        const fallbackEl = options?.loadingFallback
-          ? createElement(options.loadingFallback, section.props)
-          : null;
-
-        const content = isClientOnly ? (
-          <ClientOnly fallback={fallbackEl}>
+        const SyncComponent = getSyncComponent(section.component);
+
+        let content: ReactNode;
+
+        if (SyncComponent && !isClientOnly) {
+          // Sync path: render directly — no Suspense, no lazy.
+          // React SSR streaming ignores syncThenable's pre-fulfilled status
+          // and creates empty <template> placeholders. Direct createElement avoids this.
+          content = createElement(SyncComponent, section.props);
+        } else {
+          const LazyComponent = getLazyComponent(section.component);
+          if (!LazyComponent) return null;
+
+          const fallbackEl = options?.loadingFallback
+            ? createElement(options.loadingFallback, section.props)
+            : null;
+
+          content = isClientOnly ? (
+            <ClientOnly fallback={fallbackEl}>
+              <Suspense fallback={null}>
+                <LazyComponent {...section.props} />
+              </Suspense>
+            </ClientOnly>
+          ) : (
             <Suspense fallback={null}>
               <LazyComponent {...section.props} />
             </Suspense>
-          </ClientOnly>
-        ) : (
-          <Suspense fallback={null}>
-            <LazyComponent {...section.props} />
-          </Suspense>
-        );
+          );
+        }
 
         // Dev warning: eager section not sync-registered may blank during hydration
         if (isDev && !isClientOnly && !getSyncComponent(section.component)) {