@decocms/tanstack 7.21.1 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/tanstack",
-  "version": "7.21.1",
+  "version": "7.22.0",
   "type": "module",
   "description": "Deco framework binding for TanStack Start + Cloudflare Workers",
   "repository": {
@@ -24,9 +24,9 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.21.1",
-    "@decocms/blocks-admin": "7.21.1",
-    "@decocms/blocks-cli": "7.21.1",
+    "@decocms/blocks": "7.22.0",
+    "@decocms/blocks-admin": "7.22.0",
+    "@decocms/blocks-cli": "7.22.0",
     "@deco-cx/warp-node": "^0.3.16",
     "fast-json-patch": "^3.1.0",
     "ws": "^8.18.0"

package/src/routes/cmsRoute.test.ts

@@ -0,0 +1,63 @@
+import { registerCacheableSections, registerSectionLoader } from "@decocms/blocks/cms";
+import type { ResolvedSection } from "@decocms/blocks/cms";
+import { describe, expect, it } from "vitest";
+import { runSectionLoadersWithSeo } from "./cmsRoute";
+
+/**
+ * Regression guard for #355: body sections and the SEO section used to be
+ * resolved sequentially (`runSectionLoaders` for the body, then a separate
+ * `runSingleSectionLoader` call for the SEO section inside `buildPageSeo`).
+ * On a PDP, both commonly resolve the SAME product via the SAME commerce
+ * loader — sequential calls always missed the fetch-cache layer's in-flight
+ * dedup (the body call had already completed by the time the SEO call
+ * started). Batching them into one `runSectionLoaders` call (this file's
+ * `runSectionLoadersWithSeo`) lets identical concurrent requests share one
+ * origin round-trip.
+ *
+ * This test proves the batching by registering a *cacheable* section loader
+ * (the same SWR + in-flight-dedup mechanism real commerce loaders use) and
+ * asserting it's invoked only once when the body section and SEO section
+ * share the same component + props.
+ */
+describe("runSectionLoadersWithSeo (#355)", () => {
+  it("dedupes a same-component/same-props SEO section against a body section via the cacheable-section in-flight cache", async () => {
+    const component = `test/sections/DedupCheck-${Date.now()}.tsx`;
+    let calls = 0;
+
+    registerCacheableSections({ [component]: { maxAge: 60_000 } });
+    registerSectionLoader(component, async (props) => {
+      calls++;
+      await new Promise((r) => setTimeout(r, 5));
+      return { ...props, loaded: true };
+    });
+
+    const bodySection: ResolvedSection = { component, props: { sku: "123" }, key: component, index: 0 };
+    const seoSection: ResolvedSection = { component, props: { sku: "123" }, key: `${component}-seo`, index: -1 };
+
+    const request = new Request("https://store.com/produto/123");
+    const { enrichedSections, enrichedSeoSection } = await runSectionLoadersWithSeo(
+      [bodySection],
+      seoSection,
+      request,
+    );
+
+    expect(calls).toBe(1);
+    expect((enrichedSections[0].props as any).loaded).toBe(true);
+    expect((enrichedSeoSection?.props as any).loaded).toBe(true);
+  });
+
+  it("runs plain runSectionLoaders when there is no SEO section", async () => {
+    const component = `test/sections/NoSeo-${Date.now()}.tsx`;
+    registerSectionLoader(component, async (props) => ({ ...props, loaded: true }));
+
+    const bodySection: ResolvedSection = { component, props: {}, key: component, index: 0 };
+    const { enrichedSections, enrichedSeoSection } = await runSectionLoadersWithSeo(
+      [bodySection],
+      null,
+      new Request("https://store.com/"),
+    );
+
+    expect((enrichedSections[0].props as any).loaded).toBe(true);
+    expect(enrichedSeoSection).toBeNull();
+  });
+});

package/src/routes/cmsRoute.ts

@@ -124,6 +124,36 @@ function persistFlags(matcherCtx: MatcherContext): StoredFlag[] {
   return recorded;
 }
 
+/**
+ * Run the body sections' loaders and the SEO section's loader in the SAME
+ * batch (`Promise.all` via `runSectionLoaders`), instead of sequentially
+ * (body first, then `buildPageSeo` separately awaiting the SEO section).
+ *
+ * On a PDP, the SEO section (e.g. SeoPDP) commonly resolves the same
+ * product as a body section via the same commerce loader. Running them
+ * sequentially meant the SEO fetch always missed any in-flight request
+ * dedup at the fetch-cache layer (apps-vtex's fetchWithCache) — the body
+ * fetch had already completed and left the in-flight map by the time the
+ * SEO fetch started, so the origin got hit twice per navigation (#355).
+ * Batching them gives concurrent identical requests a chance to share one
+ * origin round-trip.
+ */
+/** @internal exported for tests */
+export async function runSectionLoadersWithSeo(
+  resolvedSections: ResolvedSection[],
+  seoSection: ResolvedSection | null | undefined,
+  request: Request,
+): Promise<{ enrichedSections: ResolvedSection[]; enrichedSeoSection: ResolvedSection | null | undefined }> {
+  if (!seoSection) {
+    return { enrichedSections: await runSectionLoaders(resolvedSections, request), enrichedSeoSection: seoSection };
+  }
+  const enrichedAll = await runSectionLoaders([...resolvedSections, seoSection], request);
+  return {
+    enrichedSections: enrichedAll.slice(0, -1),
+    enrichedSeoSection: enrichedAll[enrichedAll.length - 1],
+  };
+}
+
 async function loadCmsPageInternal(fullPath: string) {
   const [basePath] = fullPath.split("?");
   // On client-side navigation getRequestUrl() is the /_serverFn/... endpoint,
@@ -150,13 +180,14 @@ async function loadCmsPageInternal(fullPath: string) {
     headers: originRequest.headers,
   });
 
-  // Resolve page sections and site globals in parallel. Globals are merged
-  // into the same `resolvedSections` array so the path through this server
-  // function is identical for SSR (F5) and SPA (<Link>) navigations — see
-  // #233 for the previous SPA-breakage when `withSiteGlobals` ran client-side
-  // and saw an empty client-bundled `blocks.gen.ts`.
-  const [enrichedSections, globals] = await Promise.all([
-    runSectionLoaders(page.resolvedSections, request),
+  // Resolve page sections (+ the SEO section, batched together — see #355)
+  // and site globals in parallel. Globals are merged into the same
+  // `resolvedSections` array so the path through this server function is
+  // identical for SSR (F5) and SPA (<Link>) navigations — see #233 for the
+  // previous SPA-breakage when `withSiteGlobals` ran client-side and saw an
+  // empty client-bundled `blocks.gen.ts`.
+  const [{ enrichedSections, enrichedSeoSection }, globals] = await Promise.all([
+    runSectionLoadersWithSeo(page.resolvedSections, page.seoSection, request),
     resolveSiteGlobals(),
   ]);
 
@@ -178,7 +209,7 @@ async function loadCmsPageInternal(fullPath: string) {
   const device = detectDevice(ua);
 
   // Build SEO: merge page-level seo block (primary) with section-contributed SEO (secondary)
-  const seo = await buildPageSeo(page.seoSection, mergedSections, request);
+  const seo = buildPageSeo(page.seoSection, enrichedSeoSection, mergedSections);
 
   // Destructure seoSection out — it's an internal artifact, not serialized to client
   const { seoSection: _seo, ...pageData } = page;
@@ -241,8 +272,8 @@ export const loadCmsHomePage = createServerFn({ method: "GET" }).handler(async (
   const page = await resolveDecoPage("/", matcherCtx);
   if (!page) return null;
   const flags = persistFlags(matcherCtx);
-  const [enrichedSections, globals] = await Promise.all([
-    runSectionLoaders(page.resolvedSections, request),
+  const [{ enrichedSections, enrichedSeoSection }, globals] = await Promise.all([
+    runSectionLoadersWithSeo(page.resolvedSections, page.seoSection, request),
     resolveSiteGlobals(),
   ]);
 
@@ -255,7 +286,7 @@ export const loadCmsHomePage = createServerFn({ method: "GET" }).handler(async (
   await preloadSectionComponents(eagerKeys);
 
   const device = detectDevice(ua);
-  const seo = await buildPageSeo(page.seoSection, mergedSections, request);
+  const seo = buildPageSeo(page.seoSection, enrichedSeoSection, mergedSections);
 
   const { seoSection: _seo, ...pageData } = page;
 
@@ -432,15 +463,26 @@ type CmsPageLoaderData = {
 // ---------------------------------------------------------------------------
 
 /**
- * Process the resolved SEO section from page.seo, run its section loader
- * if registered, apply title/description templates, and merge with
- * section-contributed SEO.
+ * Process the resolved SEO section from page.seo, apply title/description
+ * templates, and merge with section-contributed SEO.
+ *
+ * `seoSection` is the raw (pre-loader) resolved section — its `props` are
+ * used for the CMS-configured `titleTemplate`/`descriptionTemplate` fields,
+ * which a loader transforming `{jsonLD} → {title, description}` may not
+ * pass through unchanged. `enrichedSeoSection` must already have gone
+ * through that registered section loader (e.g., SEOPDP transforms
+ * {jsonLD: ProductDetailsPage} → {title, description, ...}) — batched
+ * together with the body sections in `runSectionLoadersWithSeo` so a
+ * commerce loader shared by both (the same product fetched by both the PDP
+ * body section and the SeoPDP section) gets a chance to dedupe at the
+ * fetch-cache layer instead of resolving the page twice (#355). This
+ * function itself no longer runs any loader.
  */
-async function buildPageSeo(
+function buildPageSeo(
   seoSection: ResolvedSection | null | undefined,
+  enrichedSeoSection: ResolvedSection | null | undefined,
   enrichedSections: ResolvedSection[],
-  request: Request,
-): Promise<PageSeo> {
+): PageSeo {
   // Secondary source: SEO sections embedded in the sections array
   const sectionSeo = extractSeoFromSections(enrichedSections);
 
@@ -472,16 +514,11 @@ async function buildPageSeo(
     return merged;
   }
 
-  // Run the section loader on the seo section if one is registered
-  // (e.g., SEOPDP loader transforms {jsonLD: ProductDetailsPage} → {title, description, ...})
-  let enrichedProps = seoSection.props;
-  try {
-    const enriched = await runSingleSectionLoader(seoSection, request);
-    if (enriched) enrichedProps = enriched.props;
-  } catch {
-    // Section loader failed — use the raw resolved props
-  }
-
+  // enrichedSeoSection should always be present once seoSection is, but
+  // fall back to the raw section's props (pre-loader) if the loader batch
+  // somehow dropped it — same "use the raw resolved props" resilience the
+  // old inline try/catch had around the loader call.
+  const enrichedProps = (enrichedSeoSection ?? seoSection).props;
   const pageSeo = extractSeoFromProps(enrichedProps);
 
   // Replicate original SeoV2 loader logic: `_title ?? appTitle`

package/src/vite/plugin-scaffold-gen.test.js

@@ -0,0 +1,106 @@
+import { EventEmitter } from "node:events";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const execCalls = [];
+const execFileSyncCalls = [];
+
+vi.mock("node:child_process", () => {
+  const exec = (cmd, _opts, cb) => {
+    execCalls.push(cmd);
+    cb(null, "", "");
+  };
+  const execFileSync = (cmd, args) => {
+    execFileSyncCalls.push([cmd, args]);
+    return "";
+  };
+  return { exec, execFileSync, default: { exec, execFileSync } };
+});
+
+/**
+ * Regression guard for #371: `vite dev` never re-ran the sections/loaders/
+ * invoke generators, only `npm run build` did (via the full `generate`
+ * orchestrator) — so editing a section/loader's TS interface left the
+ * `.gen` files silently stale until a manual `generate` run. This test
+ * exercises `configureServer`'s scaffold-gen hook against a real
+ * (empty) tmp dir + a real EventEmitter as `server.watcher`, with
+ * `node:child_process` mocked so no real subprocess is spawned.
+ */
+describe("decoVitePlugin — sections/loaders/invoke dev regeneration (#371)", () => {
+  let tmp;
+  let cwdSpy;
+  let plugin;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    execCalls.length = 0;
+    execFileSyncCalls.length = 0;
+    tmp = fs.mkdtempSync(path.join(os.tmpdir(), "plugin-scaffold-gen-"));
+    cwdSpy = vi.spyOn(process, "cwd").mockReturnValue(tmp);
+    vi.useFakeTimers();
+    ({ decoVitePlugin: plugin } = await import("./plugin.js"));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    cwdSpy.mockRestore();
+    fs.rmSync(tmp, { recursive: true, force: true });
+    vi.restoreAllMocks();
+  });
+
+  function makeServer() {
+    return {
+      watcher: new EventEmitter(),
+      config: { define: {} },
+      environments: undefined,
+      httpServer: { once: () => {} },
+    };
+  }
+
+  it("runs the sections/loaders/invoke generator on dev startup (debounced)", async () => {
+    const p = Array.isArray(plugin()) ? plugin()[0] : plugin();
+    const server = makeServer();
+    p.configureServer(server);
+
+    await vi.advanceTimersByTimeAsync(600);
+
+    const scaffoldCalls = execCalls.filter((c) => c.includes("--only sections,loaders,invoke"));
+    expect(scaffoldCalls).toHaveLength(1);
+    expect(scaffoldCalls[0]).toContain("generate.ts");
+  });
+
+  it("debounces multiple src/ file-watcher events into a single regen call", async () => {
+    const p = Array.isArray(plugin()) ? plugin()[0] : plugin();
+    const server = makeServer();
+    p.configureServer(server);
+
+    // Consume the cold-start call first.
+    await vi.advanceTimersByTimeAsync(600);
+    execCalls.length = 0;
+
+    const srcFile = path.join(tmp, "src", "sections", "Foo.tsx");
+    server.watcher.emit("change", srcFile);
+    server.watcher.emit("change", srcFile);
+    server.watcher.emit("add", srcFile);
+
+    await vi.advanceTimersByTimeAsync(600);
+
+    const scaffoldCalls = execCalls.filter((c) => c.includes("--only sections,loaders,invoke"));
+    expect(scaffoldCalls).toHaveLength(1);
+  });
+
+  it("does not trigger for a file outside src/", async () => {
+    const p = Array.isArray(plugin()) ? plugin()[0] : plugin();
+    const server = makeServer();
+    p.configureServer(server);
+    await vi.advanceTimersByTimeAsync(600);
+    execCalls.length = 0;
+
+    server.watcher.emit("change", path.join(tmp, "README.md"));
+    await vi.advanceTimersByTimeAsync(600);
+
+    expect(execCalls.filter((c) => c.includes("--only sections,loaders,invoke"))).toHaveLength(0);
+  });
+});

package/src/vite/plugin.js

@@ -552,6 +552,71 @@ export function decoVitePlugin() {
         if (isSchemaSource(file)) scheduleSchemaGen();
       });
 
+      // --- sections.gen.ts / loaders.gen.ts / invoke.gen.ts regeneration (#371) ---
+      // Unlike meta.gen.json (regenerated above via generate-schema.ts
+      // directly), these three were never re-run in dev — only `npm run build`
+      // (which chains the full `generate` orchestrator) touched them. Editing
+      // a section/loader's TS interface (new prop, new @title) updated the TS
+      // source but left the `.gen` files stale until a manual `generate` run:
+      // typecheck passed and the runtime worked, but the studio/admin form
+      // silently kept showing the old schema.
+      //
+      // Reuses the SAME `generate.ts` orchestrator sites already run for
+      // `build`, restricted to --only sections,loaders,invoke so the schema
+      // regen above isn't duplicated. The orchestrator's own two-tier digest
+      // cache (.deco/generate.digests.json + .deco/.cache/stat-memo.json)
+      // makes a steady-state run (nothing changed) a cheap no-op — a cache
+      // miss only pays the cost for the generator(s) whose actual inputs
+      // changed. Best-effort: a failure here only warns (matches the schema
+      // regen's own error handling above) — dev keeps running off whatever
+      // was last generated, same as before this feature existed.
+      let scaffoldTimer = null;
+      let scaffoldInFlight = false;
+      let scaffoldQueued = false;
+      const runScaffoldGen = () => {
+        if (scaffoldInFlight) {
+          scaffoldQueued = true;
+          return;
+        }
+        scaffoldInFlight = true;
+        const start = Date.now();
+        const scriptPath = path.resolve(cwd, "node_modules/@decocms/blocks-cli/scripts/generate.ts");
+        const cmd = `npx tsx ${JSON.stringify(scriptPath)} --only sections,loaders,invoke --site ${schemaSiteName}`;
+        exec(cmd, { cwd }, (err) => {
+          scaffoldInFlight = false;
+          if (err) {
+            console.warn("[deco] sections/loaders/invoke generation failed:", err.message);
+          } else {
+            console.log(`[deco] sections/loaders/invoke checked (${Date.now() - start}ms)`);
+          }
+          if (scaffoldQueued) {
+            scaffoldQueued = false;
+            scheduleScaffoldGen();
+          }
+        });
+      };
+      const scheduleScaffoldGen = () => {
+        if (scaffoldTimer) clearTimeout(scaffoldTimer);
+        scaffoldTimer = setTimeout(() => {
+          scaffoldTimer = null;
+          runScaffoldGen();
+        }, 500);
+      };
+
+      // Cold-start: run once on dev startup. The digest cache makes this a
+      // fast no-op when nothing changed since the last `generate` run (e.g.
+      // right after a `build`) — fire-and-forget, doesn't block the first request.
+      scheduleScaffoldGen();
+
+      // Reuse the same src/**/*.{ts,tsx} watch predicate as the schema regen
+      // above — sections/loaders/actions all live under the same tree.
+      server.watcher.on("change", (file) => {
+        if (isSchemaSource(file)) scheduleScaffoldGen();
+      });
+      server.watcher.on("add", (file) => {
+        if (isSchemaSource(file)) scheduleScaffoldGen();
+      });
+
       // Tunnel + daemon: connect local dev to admin.deco.cx
       // Activated only when both DECO_SITE_NAME and DECO_ENV_NAME are set.
       // Omitting DECO_ENV_NAME runs Vite fully local (no tunnel registration),