@decocms/start 1.3.7 → 1.4.1

package/package.json

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

package/src/cms/applySectionConventions.ts

@@ -15,6 +15,7 @@ import {
   registerLayoutSections,
 } from "./sectionLoaders";
 import {
+  registerEagerSections,
   registerSeoSections,
   setAsyncRenderingConfig,
   getAsyncRenderingConfig,
@@ -77,6 +78,9 @@ export function applySectionConventions(input: ApplySectionConventionsInput): vo
   }
 
   if (eagerSections.length > 0) {
+    // Permanent registry — survives subsequent setAsyncRenderingConfig() calls
+    registerEagerSections(eagerSections);
+    // Also add to alwaysEager for backward compat with code that reads the config
     const existing = getAsyncRenderingConfig() ?? {};
     setAsyncRenderingConfig({
       ...existing,

package/src/cms/index.ts

@@ -41,13 +41,16 @@ export {
   evaluateMatcher,
   extractSeoFromProps,
   extractSeoFromSections,
+  cacheDeferredRawProps,
   getAsyncRenderingConfig,
+  getDeferredRawProps,
   isSeoSection,
   onBeforeResolve,
   registerBotPattern,
   registerCommerceLoader,
   registerCommerceLoaders,
   registerMatcher,
+  registerEagerSections,
   registerSeoSections,
   resolveDecoPage,
   resolvePageSections,

package/src/cms/resolve.test.ts

@@ -30,6 +30,7 @@ describe("resolveDeferredSectionFull", () => {
       component: "site/sections/ProductShelf.tsx",
       key: "site/sections/ProductShelf.tsx",
       index: 5,
+      propsHash: "test",
       rawProps: { title: "Best Sellers" },
     };
 

package/src/cms/resolve.ts

@@ -2,12 +2,14 @@ import { findPageByPath, loadBlocks } from "./loader";
 import { getOnBeforeResolveProps, getSection, registerOnBeforeResolveProps } from "./registry";
 import { isLayoutSection, runSingleSectionLoader } from "./sectionLoaders";
 import { normalizeUrlsInObject } from "../sdk/normalizeUrls";
+import { djb2Hex } from "../sdk/djb2";
 
 // globalThis-backed: share state across Vite server function split modules
 const G = globalThis as any;
 if (!G.__deco) G.__deco = {};
 if (!G.__deco.commerceLoaders) G.__deco.commerceLoaders = {};
 if (!G.__deco.customMatchers) G.__deco.customMatchers = {};
+if (!G.__deco.eagerSectionKeys) G.__deco.eagerSectionKeys = new Set<string>();
 
 // ---------------------------------------------------------------------------
 // onBeforeResolveProps helper — eagerly loads the section module if needed
@@ -69,9 +71,19 @@ export interface DeferredSection {
   key: string;
   /** Position in the original page section list. */
   index: number;
-  /** CMS-resolved props without section-loader enrichment. */
+  /**
+   * Short hash of rawProps for client-side cache busting.
+   * Keeps the serialized payload small — full rawProps are resolved
+   * server-side from the deferred props cache or page re-resolution.
+   */
+  propsHash: string;
+  /**
+   * CMS-resolved props without section-loader enrichment.
+   * @deprecated Stripped before serialization to reduce HTML payload.
+   * Only present server-side in the rawProps cache.
+   */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rawProps: Record<string, any>;
+  rawProps?: Record<string, any>;
 }
 
 // ---------------------------------------------------------------------------
@@ -120,10 +132,15 @@ export function setAsyncRenderingConfig(config?: {
   alwaysEager?: string[];
   respectCmsLazy?: boolean;
 }): void {
+  const existing = getAsyncConfig();
+  const merged = new Set([
+    ...(existing?.alwaysEager ?? []),
+    ...(config?.alwaysEager ?? []),
+  ]);
   G.__deco.asyncConfig = {
-    respectCmsLazy: config?.respectCmsLazy ?? true,
-    foldThreshold: config?.foldThreshold ?? Infinity,
-    alwaysEager: new Set(config?.alwaysEager ?? []),
+    respectCmsLazy: config?.respectCmsLazy ?? existing?.respectCmsLazy ?? true,
+    foldThreshold: config?.foldThreshold ?? existing?.foldThreshold ?? Infinity,
+    alwaysEager: merged,
   };
 }
 
@@ -132,6 +149,64 @@ export function getAsyncRenderingConfig(): AsyncRenderingConfig | null {
   return getAsyncConfig();
 }
 
+// ---------------------------------------------------------------------------
+// Permanent eager section registry — survives setAsyncRenderingConfig() calls
+// ---------------------------------------------------------------------------
+
+/**
+ * Register sections that declared `export const eager = true`.
+ * This is a permanent registry that cannot be overwritten by
+ * subsequent calls to `setAsyncRenderingConfig()`.
+ */
+export function registerEagerSections(keys: string[]): void {
+  const set: Set<string> = G.__deco.eagerSectionKeys;
+  for (const k of keys) set.add(k);
+}
+
+function isEagerSection(key: string): boolean {
+  return (G.__deco.eagerSectionKeys as Set<string>).has(key);
+}
+
+// ---------------------------------------------------------------------------
+// Deferred rawProps cache — keeps rawProps server-side to trim HTML payload
+// ---------------------------------------------------------------------------
+
+const DEFERRED_PROPS_TTL = 120_000; // 2 minutes
+const deferredRawPropsCache = new Map<string, { rawProps: Record<string, unknown>; ts: number }>();
+
+function deferredPropsCacheKey(pagePath: string, component: string, index: number): string {
+  return `${pagePath}::${component}::${index}`;
+}
+
+export function cacheDeferredRawProps(
+  pagePath: string,
+  component: string,
+  index: number,
+  rawProps: Record<string, unknown>,
+): void {
+  const key = deferredPropsCacheKey(pagePath, component, index);
+  deferredRawPropsCache.set(key, { rawProps, ts: Date.now() });
+
+  // Lazy eviction: remove expired entries when cache grows
+  if (deferredRawPropsCache.size > 500) {
+    const now = Date.now();
+    for (const [k, v] of deferredRawPropsCache) {
+      if (now - v.ts > DEFERRED_PROPS_TTL) deferredRawPropsCache.delete(k);
+    }
+  }
+}
+
+export function getDeferredRawProps(
+  pagePath: string,
+  component: string,
+  index: number,
+): Record<string, unknown> | null {
+  const key = deferredPropsCacheKey(pagePath, component, index);
+  const entry = deferredRawPropsCache.get(key);
+  if (!entry || Date.now() - entry.ts > DEFERRED_PROPS_TTL) return null;
+  return entry.rawProps;
+}
+
 // ---------------------------------------------------------------------------
 // Bot detection — bots always receive fully eager pages for SEO
 // ---------------------------------------------------------------------------
@@ -932,6 +1007,8 @@ function shouldDeferSection(
   const finalKey = resolveFinalSectionKey(section, matcherCtx);
   if (!finalKey) return false;
 
+  // Permanent registry — `export const eager = true` cannot be clobbered
+  if (isEagerSection(finalKey)) return false;
   if (cfg.alwaysEager.has(finalKey)) return false;
   if (isLayoutSection(finalKey)) return false;
 
@@ -1024,6 +1101,7 @@ function resolveSectionShallow(
         component: rt,
         key: rt,
         index: -1,
+        propsHash: djb2Hex(JSON.stringify(rawProps)),
         rawProps: rawProps as Record<string, unknown>,
       };
     }
@@ -1241,6 +1319,14 @@ export async function resolveDecoPage(
         const deferred = resolveSectionShallow(section, ctx);
         if (deferred) {
           deferred.index = currentFlatIndex;
+
+          // Cache rawProps server-side and strip from the deferred object
+          // so they are NOT serialized into the HTML payload.
+          if (deferred.rawProps) {
+            cacheDeferredRawProps(targetPath, deferred.component, currentFlatIndex, deferred.rawProps);
+            delete deferred.rawProps;
+          }
+
           deferredSections.push(deferred);
           deferredOk = true;
         }
@@ -1441,9 +1527,16 @@ export async function resolveDeferredSectionFull(
   request: Request,
   matcherCtx?: MatcherContext,
 ): Promise<ResolvedSection | null> {
+  // rawProps may be stripped from the client payload — resolve from cache or page
+  const rawProps = ds.rawProps
+    ?? getDeferredRawProps(pagePath, ds.component, ds.index)
+    ?? await reExtractRawProps(pagePath, ds.component, ds.index, matcherCtx);
+
+  if (!rawProps) return null;
+
   const section = await resolveDeferredSection(
     ds.component,
-    ds.rawProps,
+    rawProps,
     pagePath,
     matcherCtx,
   );
@@ -1452,3 +1545,44 @@ export async function resolveDeferredSectionFull(
   const enriched = await runSingleSectionLoader(section, request);
   return normalizeUrlsInObject(enriched);
 }
+
+/**
+ * Fallback for deferred rawProps cache miss: re-resolve the page and extract
+ * rawProps for the section at the given index. Expensive but ensures correctness
+ * when the in-memory cache has been evicted (different isolate, TTL expired).
+ */
+export async function reExtractRawProps(
+  pagePath: string,
+  component: string,
+  sectionIndex: number,
+  matcherCtx?: MatcherContext,
+): Promise<Record<string, unknown> | null> {
+  ensureInitialized();
+
+  const match = findPageByPath(pagePath);
+  if (!match) return null;
+
+  const { page } = match;
+  const ctx: MatcherContext = { ...matcherCtx, path: pagePath };
+
+  let rawSections: unknown[];
+  if (Array.isArray(page.sections)) {
+    rawSections = page.sections;
+  } else {
+    const rctx: ResolveContext = { matcherCtx: ctx, memo: new Map(), depth: 0 };
+    rawSections = await resolveSectionsList(page.sections, rctx);
+  }
+
+  if (sectionIndex < 0 || sectionIndex >= rawSections.length) return null;
+
+  const section = rawSections[sectionIndex];
+  const shallow = resolveSectionShallow(section, ctx);
+  if (!shallow || shallow.component !== component) return null;
+
+  // Cache for subsequent requests
+  if (shallow.rawProps) {
+    cacheDeferredRawProps(pagePath, component, sectionIndex, shallow.rawProps);
+  }
+
+  return shallow.rawProps ?? null;
+}

package/src/hooks/DecoPageRenderer.tsx

@@ -19,7 +19,7 @@ import {
   setResolvedComponent,
 } from "../cms/registry";
 import type { DeferredSection, ResolvedSection } from "../cms/resolve";
-import { djb2Hex } from "../sdk/djb2";
+
 import { SectionErrorBoundary } from "./SectionErrorFallback";
 
 type LazyComponent = ReturnType<typeof lazy>;
@@ -235,9 +235,10 @@ interface DeferredSectionWrapperProps {
   errorFallback?: ReactNode;
   loadFn: (data: {
     component: string;
-    rawProps: Record<string, unknown>;
+    rawProps?: Record<string, unknown>;
     pagePath: string;
     pageUrl?: string;
+    index?: number;
   }) => Promise<ResolvedSection | null>;
 }
 
@@ -249,8 +250,7 @@ function DeferredSectionWrapper({
   errorFallback,
   loadFn,
 }: DeferredSectionWrapperProps) {
-  const propsHash = djb2Hex(JSON.stringify(deferred.rawProps));
-  const stableKey = `${pagePath}::${deferred.component}::${deferred.index}::${propsHash}`;
+  const stableKey = `${pagePath}::${deferred.component}::${deferred.index}::${deferred.propsHash ?? ""}`;
   const [section, setSection] = useState<ResolvedSection | null>(() =>
     typeof document === "undefined" ? null : getCachedDeferredSection(stableKey),
   );
@@ -308,9 +308,9 @@ function DeferredSectionWrapper({
       const key0 = stableKey;
       loadFn({
         component: deferred.component,
-        rawProps: deferred.rawProps,
         pagePath,
         pageUrl,
+        index: deferred.index,
       })
         .then((result) => {
           if (result) deferredSectionCache.set(key0, { section: result, ts: Date.now() });
@@ -328,9 +328,9 @@ function DeferredSectionWrapper({
           const key1 = stableKey;
           loadFn({
             component: deferred.component,
-            rawProps: deferred.rawProps,
             pagePath,
             pageUrl,
+            index: deferred.index,
           })
             .then((result) => {
               if (result) deferredSectionCache.set(key1, { section: result, ts: Date.now() });
@@ -344,7 +344,7 @@ function DeferredSectionWrapper({
 
     observer.observe(el);
     return () => observer.disconnect();
-  }, [deferred.component, deferred.rawProps, pagePath, pageUrl, section, loadFn]);
+  }, [deferred.component, deferred.index, deferred.propsHash, pagePath, pageUrl, section, loadFn]);
 
   if (error) {
     const errFallback = loadedOptions?.errorFallback
@@ -402,7 +402,9 @@ function DeferredSectionSkeleton({
 }) {
   const options = getSectionOptions(deferred.component);
   if (options?.loadingFallback) {
-    return createElement(options.loadingFallback, deferred.rawProps);
+    // rawProps are no longer serialized to the client — pass empty object.
+    // LoadingFallback components should be pure layout skeletons.
+    return createElement(options.loadingFallback, deferred.rawProps ?? {});
   }
   if (fallback) return <>{fallback}</>;
   if (isDev) return <DevMissingFallbackWarning component={deferred.component} />;
@@ -466,9 +468,10 @@ interface Props {
   /** @deprecated Use deferredPromises instead (TanStack native streaming). */
   loadDeferredSectionFn?: (data: {
     component: string;
-    rawProps: Record<string, unknown>;
+    rawProps?: Record<string, unknown>;
     pagePath: string;
     pageUrl?: string;
+    index?: number;
   }) => Promise<ResolvedSection | null>;
 }
 

package/src/routes/cmsRoute.ts

@@ -35,6 +35,8 @@ import type { DeferredSection, MatcherContext, PageSeo, ResolvedSection } from "
 import {
   extractSeoFromProps,
   extractSeoFromSections,
+  getDeferredRawProps,
+  reExtractRawProps,
   resolveDecoPage,
   resolveDeferredSection,
   resolveDeferredSectionFull,
@@ -198,7 +200,8 @@ export const loadDeferredSection = createServerFn({ method: "POST" })
     (data: unknown) =>
       data as {
         component: string;
-        rawProps: Record<string, any>;
+        /** @deprecated rawProps are now resolved server-side from the deferred props cache. */
+        rawProps?: Record<string, any>;
         pagePath: string;
         pageUrl?: string;
         /** Original position in the page section list — preserved for correct SPA ordering. */
@@ -206,7 +209,7 @@ export const loadDeferredSection = createServerFn({ method: "POST" })
       },
   )
   .handler(async (ctx) => {
-    const { component, rawProps, pagePath, pageUrl, index } = ctx.data;
+    const { component, rawProps: clientRawProps, pagePath, pageUrl, index } = ctx.data;
 
     const originRequest = getRequest();
     const serverUrl = getRequestUrl().toString();
@@ -218,6 +221,20 @@ export const loadDeferredSection = createServerFn({ method: "POST" })
       request: originRequest,
     };
 
+    // Resolve rawProps: prefer client-provided (backward compat), then server cache,
+    // then re-extract from the page as a last resort (handles cross-isolate cache miss
+    // on Cloudflare Workers and TTL expiry for slow-scrolling users).
+    const rawProps = clientRawProps
+      ?? (index !== undefined ? getDeferredRawProps(pagePath, component, index) : null)
+      ?? (index !== undefined
+        ? await reExtractRawProps(pagePath, component, index, matcherCtx)
+        : null);
+
+    if (!rawProps) {
+      console.warn(`[CMS] Deferred section cache miss: ${component} at index ${index} on ${pagePath}`);
+      return null;
+    }
+
     const section = await resolveDeferredSection(component, rawProps, pagePath, matcherCtx);
     if (!section) return null;
 
@@ -253,14 +270,16 @@ export const deferredSectionLoader = async ({
   rawProps,
   pagePath,
   pageUrl,
+  index,
 }: {
   component: string;
-  rawProps: Record<string, unknown>;
+  rawProps?: Record<string, unknown>;
   pagePath: string;
   pageUrl?: string;
+  index?: number;
 }): Promise<ResolvedSection | null> => {
   return loadDeferredSection({
-    data: { component, rawProps, pagePath, pageUrl },
+    data: { component, rawProps, pagePath, pageUrl, index },
   });
 };
 

package/src/vite/plugin.js

@@ -131,12 +131,40 @@ export function decoVitePlugin() {
                 ) {
                   return "vendor-react";
                 }
+
+                // TanStack Router — client-side router (always needed)
                 if (
                   id.includes("@tanstack/react-router") ||
-                  id.includes("@tanstack/start")
+                  id.includes("@tanstack/router-core")
+                ) {
+                  return "vendor-router";
+                }
+
+                // TanStack Start — specific checks before broad catch-all
+                // (react-start-client includes "react-start" so must come first)
+                if (
+                  id.includes("@tanstack/react-start-client") ||
+                  id.includes("@tanstack/start-client-core")
+                ) {
+                  return "vendor-router";
+                }
+                // Server-only TanStack packages — let Rollup tree-shake
+                if (
+                  id.includes("@tanstack/react-start-server") ||
+                  id.includes("@tanstack/start-server-core")
                 ) {
+                  return undefined;
+                }
+                // Remaining @tanstack/start (storage-context, plugin-core, etc.)
+                if (id.includes("@tanstack/start")) {
                   return "vendor-router";
                 }
+
+                // isbot — server-only (bot detection in resolve.ts)
+                if (id.includes("node_modules/isbot")) {
+                  return undefined;
+                }
+
                 if (id.includes("@tanstack/react-query")) {
                   return "vendor-query";
                 }