@decocms/blocks-cli 7.39.0 → 7.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks-cli",
-  "version": "7.39.0",
+  "version": "7.40.0",
   "type": "module",
   "description": "Deco codegen (generate-blocks, generate-schema, generate-invoke) and Fresh-to-TanStack migration tooling",
   "repository": {
@@ -31,7 +31,7 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.39.0",
+    "@decocms/blocks": "7.40.0",
     "ts-morph": "^27.0.0",
     "tsx": "^4.22.5"
   },

package/scripts/generate-sections.test.ts

@@ -336,6 +336,89 @@ describe("generate-sections neverDefer convention", () => {
   }, 60_000);
 });
 
+describe("generate-sections renderJson convention", () => {
+  let tmpDir: string;
+  let sectionsDir: string;
+  let outFile: string;
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "generate-sections-renderjson-"));
+    sectionsDir = path.join(tmpDir, "sections");
+    outFile = path.join(tmpDir, "out", "sections.gen.ts");
+    fs.mkdirSync(sectionsDir, { recursive: true });
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  });
+
+  it("emits `renderJson: false` into sectionMeta and a `renderJsons` map for projection fns; the output typechecks + imports", () => {
+    // `= false` opt-out: web-only section dropped from ?renderJson.
+    fs.writeFileSync(
+      path.join(sectionsDir, "Theme.tsx"),
+      "export const renderJson = false;\nexport default function Theme() { return null; }\n",
+    );
+    // projection function: trims props for the mobile app.
+    fs.writeFileSync(
+      path.join(sectionsDir, "ProductDetails.tsx"),
+      [
+        "export const renderJson = (props: Record<string, unknown>) => {",
+        "  const { storeConfig: _s, ...rest } = props;",
+        "  return rest;",
+        "};",
+        "export default function ProductDetails() { return null; }",
+        "",
+      ].join("\n"),
+    );
+
+    const { code } = runGenerator(["--sections-dir", sectionsDir, "--out-file", outFile]);
+    expect(code).toBe(0);
+
+    const generated = fs.readFileSync(outFile, "utf-8");
+
+    // The `= false` section carries the literal false flag; the fn section
+    // carries hasRenderJson (its actual fn lives in the renderJsons map).
+    expect(generated).toMatch(/"site\/sections\/Theme\.tsx":\s*\{[^}]*renderJson:\s*false/);
+    expect(generated).toMatch(/"site\/sections\/ProductDetails\.tsx":\s*\{[^}]*hasRenderJson:\s*true/);
+    // The emitted interface declares both (excess-property guard, cf. neverDefer).
+    expect(generated).toContain("renderJson?: false;");
+    expect(generated).toContain("hasRenderJson?: boolean;");
+    // The fn is imported and wired into renderJsons; the `= false` one is NOT.
+    expect(generated).toContain("import { renderJson as _rj0 }");
+    expect(generated).toMatch(/export const renderJsons: Record<string, any> = \{[\s\S]*ProductDetails\.tsx": _rj0/);
+    expect(generated).not.toMatch(/renderJsons: Record<string, any> = \{[\s\S]*Theme\.tsx/);
+
+    // Typecheck the output (the real failure mode for a bad emit is TS2353, not
+    // a runtime error) and confirm it imports with a working projection fn.
+    // --jsx: the generated file imports a projection fn from a `.tsx` section,
+    // so tsc needs jsx set (a real site's tsconfig always does; the standalone
+    // invocation must too, or it fails with TS6142).
+    const tscResult = cp.spawnSync(
+      "npx",
+      ["tsc", "--noEmit", "--strict", "--skipLibCheck", "--jsx", "react-jsx", outFile],
+      { encoding: "utf8" },
+    );
+    expect(tscResult.status, tscResult.stdout + tscResult.stderr).toBe(0);
+
+    const checkerFile = path.join(tmpDir, "check-import.mjs");
+    fs.writeFileSync(
+      checkerFile,
+      [
+        `const m = await import(${JSON.stringify(pathToFileURL(outFile).href)});`,
+        `if (m.sectionMeta?.["site/sections/Theme.tsx"]?.renderJson !== false) {`,
+        `  throw new Error("Theme renderJson:false missing from sectionMeta");`,
+        `}`,
+        `const fn = m.renderJsons?.["site/sections/ProductDetails.tsx"];`,
+        `if (typeof fn !== "function") throw new Error("ProductDetails renderJson fn missing");`,
+        `const out = fn({ storeConfig: 1, page: 2 });`,
+        `if (out.storeConfig !== undefined || out.page !== 2) throw new Error("projection fn wrong");`,
+      ].join("\n"),
+    );
+    const importResult = cp.spawnSync("npx", ["tsx", checkerFile], { encoding: "utf8" });
+    expect(importResult.status, importResult.stderr).toBe(0);
+  }, 60_000);
+});
+
 describe("generate-sections output hygiene (non-registry)", () => {
   let tmpDir: string;
   let sectionsDir: string;

package/scripts/generate-sections.ts

@@ -54,9 +54,19 @@ interface SectionMeta {
   clientOnly?: boolean;
   seo?: boolean;
   hasLoadingFallback?: boolean;
+  renderJson?: false;
+  hasRenderJson?: boolean;
 }
 
 const EXPORT_CONST_RE = /export\s+const\s+(eager|neverDefer|deferred|cache|layout|sync|clientOnly|seo)\s*=\s*(.+?)(?:;|\n)/g;
+// renderJson (?renderJson mobile path). `= false` drops the section; a function
+// (`export const renderJson = (props) => ...` / `export function renderJson`)
+// projects its props. Kept separate from EXPORT_CONST_RE because the value is a
+// literal `false` OR a function, not the `= true` booleans that regex handles.
+const RENDER_JSON_FALSE_RE = /export\s+const\s+renderJson\s*=\s*false\b/;
+const RENDER_JSON_FN_INLINE_RE =
+  /export\s+(?:function\s+renderJson\b|const\s+renderJson\s*=\s*(?!false\b)\S)/;
+const RENDER_JSON_REEXPORT_RE = /export\s*\{[^}]*\brenderJson\b[^}]*\}/;
 // Detects `export function LoadingFallback(...)`, `export const LoadingFallback = ...`, etc.
 const LOADING_FALLBACK_INLINE_RE = /export\s+(?:function|const|let|var)\s+LoadingFallback\b/;
 // Detects re-exports like:
@@ -96,6 +106,14 @@ function extractMeta(content: string): SectionMeta | null {
     found = true;
   }
 
+  if (RENDER_JSON_FALSE_RE.test(content)) {
+    meta.renderJson = false;
+    found = true;
+  } else if (RENDER_JSON_FN_INLINE_RE.test(content) || RENDER_JSON_REEXPORT_RE.test(content)) {
+    meta.hasRenderJson = true;
+    found = true;
+  }
+
   return found ? meta : null;
 }
 
@@ -168,6 +186,8 @@ const lines: string[] = [
   "//   export const clientOnly = true  → skip SSR (client-only rendering)",
   "//   export const seo = true         → SEO section (provides page head data)",
   "//   export function LoadingFallback → skeleton shown while section loads",
+  "//   export const renderJson = false → drop section from ?renderJson (mobile)",
+  "//   export const renderJson = (p)=> → project props for ?renderJson (mobile)",
   "",
 ];
 
@@ -187,6 +207,16 @@ for (let i = 0; i < nonSyncFallbacks.length; i++) {
   lines.push(`import { LoadingFallback as _fb${i} } from "${importPath}";`);
 }
 
+// renderJson projection-function imports — sections whose renderJson is a
+// function (not `= false`) and aren't sync-imported.
+const renderJsonEntries = entries.filter((e) => e.meta.hasRenderJson);
+const nonSyncRenderJsons = renderJsonEntries.filter((e) => !e.meta.sync);
+for (let i = 0; i < nonSyncRenderJsons.length; i++) {
+  const e = nonSyncRenderJsons[i];
+  const importPath = relativeImportPath(outFile, e.filePath);
+  lines.push(`import { renderJson as _rj${i} } from "${importPath}";`);
+}
+
 lines.push("");
 
 // Metadata map
@@ -205,6 +235,8 @@ lines.push("  sync?: boolean;");
 lines.push("  clientOnly?: boolean;");
 lines.push("  seo?: boolean;");
 lines.push("  hasLoadingFallback?: boolean;");
+lines.push("  renderJson?: false;");
+lines.push("  hasRenderJson?: boolean;");
 lines.push("}");
 lines.push("");
 lines.push("export const sectionMeta: Record<string, SectionMetaEntry> = {");
@@ -248,6 +280,28 @@ if (allFallbacks.length > 0) {
 }
 lines.push("");
 
+// renderJson projection-functions map (?renderJson mobile path). `= false`
+// sections are NOT here — they carry `renderJson: false` in sectionMeta, which
+// applySectionConventions reads directly. Only projection functions need a live
+// reference. Typed `any` (like syncComponents) to avoid importing the RenderJson
+// type into the generated file.
+if (renderJsonEntries.length > 0) {
+  lines.push("export const renderJsons: Record<string, any> = {");
+  for (const e of renderJsonEntries) {
+    if (e.meta.sync) {
+      const syncIdx = syncEntries.indexOf(e);
+      lines.push(`  "${e.key}": _sync${syncIdx}.renderJson,`);
+    } else {
+      const rjIdx = nonSyncRenderJsons.indexOf(e);
+      lines.push(`  "${e.key}": _rj${rjIdx},`);
+    }
+  }
+  lines.push("};");
+} else {
+  lines.push("export const renderJsons: Record<string, any> = {};");
+}
+lines.push("");
+
 // Lazy section-import registry — opt-in via --registry, built from every
 // scanned section file (not just convention-carrying `entries`).
 if (EMIT_REGISTRY) {

package/scripts/migrate/templates/setup.ts

@@ -103,7 +103,7 @@ import { createInstrumentedFetch } from "@decocms/blocks/sdk/instrumentedFetch";
 import { initVtexFromBlocks, setVtexFetch } from "@decocms/apps-vtex";` : ""}${hasLocationMatcher ? `
 import { registerLocationMatcher } from "./matchers/location";` : ""}
 import { blocks as generatedBlocks } from "../.deco/blocks.gen";
-import { sectionMeta, syncComponents, loadingFallbacks } from "../.deco/sections.gen";
+import { sectionMeta, syncComponents, loadingFallbacks, renderJsons } from "../.deco/sections.gen";
 import { PreviewProviders } from "@decocms/tanstack";
 // @ts-ignore Vite ?url import
 import appCss from "./styles/app.css?url";
@@ -140,6 +140,7 @@ applySectionConventions({
   meta: sectionMeta,
   syncComponents,
   loadingFallbacks,
+  renderJsons,
   sectionGlob: import.meta.glob("./sections/**/*.tsx") as Record<string, () => Promise<any>>,
 });