@decocms/tanstack 7.7.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/tanstack",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "type": "module",
   "description": "Deco framework binding for TanStack Start + Cloudflare Workers",
   "repository": {
@@ -14,7 +14,8 @@
     "./vite": "./src/vite/plugin.js",
     "./daemon": "./src/daemon/index.ts",
     "./sdk/createInvoke": "./src/sdk/createInvoke.ts",
-    "./sdk/cookiePassthrough": "./src/sdk/cookiePassthrough.ts"
+    "./sdk/cookiePassthrough": "./src/sdk/cookiePassthrough.ts",
+    "./sdk/deferredSectionLoader": "./src/sdk/deferredSectionLoader.ts"
   },
   "scripts": {
     "build": "tsc",
@@ -23,9 +24,9 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.7.0",
-    "@decocms/blocks-admin": "7.7.0",
-    "@decocms/blocks-cli": "7.7.0",
+    "@decocms/blocks": "7.8.0",
+    "@decocms/blocks-admin": "7.8.0",
+    "@decocms/blocks-cli": "7.8.0",
     "@deco-cx/warp-node": "^0.3.16",
     "fast-json-patch": "^3.1.0",
     "ws": "^8.18.0"

package/src/routes/cmsRoute.ts

@@ -340,35 +340,6 @@ 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,
-  index,
-}: {
-  component: string;
-  rawProps?: Record<string, unknown>;
-  pagePath: string;
-  pageUrl?: string;
-  index?: number;
-}): Promise<ResolvedSection | null> => {
-  return loadDeferredSection({
-    data: { component, rawProps, pagePath, pageUrl, index },
-  });
-};
-
 // ---------------------------------------------------------------------------
 // Default pending component — shown during SPA navigation while loader runs
 // ---------------------------------------------------------------------------

package/src/routes/index.ts

@@ -10,12 +10,12 @@ export {
   type CmsRouteOptions,
   cmsHomeRouteConfig,
   cmsRouteConfig,
-  deferredSectionLoader,
   loadCmsHomePage,
   loadCmsPage,
   loadDeferredSection,
   setSectionChunkMap,
 } from "./cmsRoute";
+export { deferredSectionLoader } from "../sdk/deferredSectionLoader";
 export { CmsPage, NotFoundPage } from "./components";
 export {
   resolveSiteGlobals,

package/src/sdk/deferredSectionLoader.test.ts

@@ -0,0 +1,94 @@
+/**
+ * Contract test for the public `deferredSectionLoader` wrapper
+ * (`@decocms/tanstack/sdk/deferredSectionLoader`).
+ *
+ * Before 7.7 this wrapper was unreachable from any public subpath, so
+ * migrated sites (lebiscuit, miess, granadobr, casaevideo) each carried a
+ * byte-identical local shim wrapping the public `loadDeferredSection`
+ * export. The cases below are derived from how those sites call it: it is
+ * passed verbatim as `<DecoPageRenderer loadDeferredSectionFn={...} />`,
+ * so it must (a) accept the renderer's flat argument object, (b) wrap it
+ * into the server function's `{ data }` envelope, and (c) pass the result
+ * (section or null) straight through.
+ */
+import type { ComponentProps } from "react";
+import { beforeEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+
+vi.mock("../routes/cmsRoute", () => ({
+  loadDeferredSection: vi.fn(),
+}));
+
+import type { DecoPageRenderer } from "../hooks/DecoPageRenderer";
+import { loadDeferredSection } from "../routes/cmsRoute";
+import { deferredSectionLoader } from "./deferredSectionLoader";
+
+const mockedLoad = loadDeferredSection as unknown as ReturnType<typeof vi.fn>;
+
+describe("deferredSectionLoader", () => {
+  beforeEach(() => {
+    mockedLoad.mockReset();
+  });
+
+  it("wraps the flat argument object into the server function's { data } envelope", async () => {
+    const section = { component: "site/sections/Newsletter.tsx", props: {} };
+    mockedLoad.mockResolvedValue(section);
+
+    const result = await deferredSectionLoader({
+      component: "site/sections/Newsletter.tsx",
+      rawProps: { title: "Hi" },
+      pagePath: "/",
+      pageUrl: "https://example.com/?utm=x",
+      index: 4,
+    });
+
+    expect(mockedLoad).toHaveBeenCalledTimes(1);
+    expect(mockedLoad).toHaveBeenCalledWith({
+      data: {
+        component: "site/sections/Newsletter.tsx",
+        rawProps: { title: "Hi" },
+        pagePath: "/",
+        pageUrl: "https://example.com/?utm=x",
+        index: 4,
+      },
+    });
+    expect(result).toBe(section);
+  });
+
+  it("accepts the minimal call shape (component + pagePath only)", async () => {
+    mockedLoad.mockResolvedValue(null);
+
+    await deferredSectionLoader({
+      component: "site/sections/Footer.tsx",
+      pagePath: "/collections/sale",
+    });
+
+    expect(mockedLoad).toHaveBeenCalledWith({
+      data: {
+        component: "site/sections/Footer.tsx",
+        rawProps: undefined,
+        pagePath: "/collections/sale",
+        pageUrl: undefined,
+        index: undefined,
+      },
+    });
+  });
+
+  it("passes a null resolution (cache miss / unresolvable section) straight through", async () => {
+    mockedLoad.mockResolvedValue(null);
+
+    const result = await deferredSectionLoader({
+      component: "site/sections/Missing.tsx",
+      pagePath: "/",
+      index: 0,
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("matches DecoPageRenderer's loadDeferredSectionFn prop signature", () => {
+    // The whole point of the export: sites pass it verbatim as
+    // `<DecoPageRenderer loadDeferredSectionFn={deferredSectionLoader} />`.
+    type LoadFn = NonNullable<ComponentProps<typeof DecoPageRenderer>["loadDeferredSectionFn"]>;
+    expectTypeOf(deferredSectionLoader).toExtend<LoadFn>();
+  });
+});

package/src/sdk/deferredSectionLoader.ts

@@ -0,0 +1,46 @@
+/**
+ * Pre-wrapped deferred section loader for IntersectionObserver-based
+ * rendering.
+ *
+ * Convenience wrapper around `loadDeferredSection` (the POST server
+ * function defined in `../routes/cmsRoute.ts`) that matches the
+ * `loadDeferredSectionFn` prop signature of `DecoPageRenderer`.
+ *
+ * Pass this directly to
+ * `<DecoPageRenderer loadDeferredSectionFn={deferredSectionLoader} />`
+ * to enable IntersectionObserver-based lazy loading of deferred sections.
+ *
+ * Publicly exported at `@decocms/tanstack/sdk/deferredSectionLoader`.
+ * Before 7.7 this wrapper existed only inside the package (exported from
+ * the internal `./routes` barrel but reachable from no public subpath), so
+ * migrated sites each carried a byte-identical local shim re-implementing
+ * it against the public `loadDeferredSection` export. Those shims can be
+ * deleted in favor of this subpath.
+ *
+ * @example Site's `src/routes/$.tsx`:
+ * ```tsx
+ * import { deferredSectionLoader } from "@decocms/tanstack/sdk/deferredSectionLoader";
+ *
+ * <DecoPageRenderer loadDeferredSectionFn={deferredSectionLoader} />
+ * ```
+ */
+import type { ResolvedSection } from "@decocms/blocks/cms";
+import { loadDeferredSection } from "../routes/cmsRoute";
+
+export const deferredSectionLoader = async ({
+  component,
+  rawProps,
+  pagePath,
+  pageUrl,
+  index,
+}: {
+  component: string;
+  rawProps?: Record<string, unknown>;
+  pagePath: string;
+  pageUrl?: string;
+  index?: number;
+}): Promise<ResolvedSection | null> => {
+  return loadDeferredSection({
+    data: { component, rawProps, pagePath, pageUrl, index },
+  });
+};