@decocms/start 0.29.3 → 0.30.1

package/package.json

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

package/scripts/generate-blocks.ts

@@ -1,6 +1,13 @@
 #!/usr/bin/env tsx
 /**
- * Reads .deco/blocks/*.json and emits a TypeScript barrel.
+ * Reads .deco/blocks/*.json and emits:
+ *   1. blocks.gen.json  — compact JSON data (the source of truth)
+ *   2. blocks.gen.ts    — thin TypeScript re-export for editor tooling
+ *
+ * At runtime the Vite plugin (src/vite/plugin.js) intercepts `blocks.gen.ts`
+ * imports and replaces them with `JSON.parse(...)` of the .json file. This
+ * avoids Vite's SSR module runner hanging on large (13MB+) JS object literals
+ * and lets V8 use its fast JSON parser instead of the full JS parser.
  *
  * Usage (from site root):
  *   npx tsx node_modules/@decocms/start/scripts/generate-blocks.ts
@@ -20,6 +27,7 @@ function arg(name: string, fallback: string): string {
 
 const blocksDir = path.resolve(process.cwd(), arg("blocks-dir", ".deco/blocks"));
 const outFile = path.resolve(process.cwd(), arg("out-file", "src/server/cms/blocks.gen.ts"));
+const jsonFile = outFile.replace(/\.ts$/, ".json");
 
 function decodeBlockName(filename: string): string {
   let name = filename.replace(/\.json$/, "");
@@ -35,13 +43,20 @@ function decodeBlockName(filename: string): string {
   return name;
 }
 
+const TS_STUB = [
+  "// Auto-generated — thin wrapper around blocks.gen.json.",
+  "// The Vite plugin replaces this at load time with JSON.parse(...).",
+  "// Do not edit manually.",
+  "",
+  "export const blocks: Record<string, any> = {};",
+  "",
+].join("\n");
+
 if (!fs.existsSync(blocksDir)) {
   console.warn(`Blocks directory not found: ${blocksDir} — generating empty barrel.`);
   fs.mkdirSync(path.dirname(outFile), { recursive: true });
-  fs.writeFileSync(
-    outFile,
-    `// Auto-generated — no blocks found\nexport const blocks: Record<string, any> = {};\n`,
-  );
+  fs.writeFileSync(jsonFile, "{}");
+  fs.writeFileSync(outFile, TS_STUB);
   process.exit(0);
 }
 
@@ -70,10 +85,16 @@ for (const [name, file] of Object.entries(blockFiles)) {
   }
 }
 
-const output = `// Auto-generated from .deco/blocks/*.json\n// Do not edit manually.\n\nexport const blocks: Record<string, any> = ${JSON.stringify(blocks, null, 2)};\n`;
-
 fs.mkdirSync(path.dirname(outFile), { recursive: true });
-fs.writeFileSync(outFile, output);
+
+// 1. Compact JSON — the real data (no pretty-printing to save ~40% size)
+const jsonStr = JSON.stringify(blocks);
+fs.writeFileSync(jsonFile, jsonStr);
+
+// 2. Thin TS wrapper — just for TypeScript tooling and as a Vite load target
+fs.writeFileSync(outFile, TS_STUB);
+
+const jsonSizeMB = (Buffer.byteLength(jsonStr) / 1_048_576).toFixed(1);
 console.log(
-  `Generated ${Object.keys(blocks).length} blocks → ${path.relative(process.cwd(), outFile)}`,
+  `Generated ${Object.keys(blocks).length} blocks → ${path.relative(process.cwd(), jsonFile)} (${jsonSizeMB} MB)`,
 );

package/src/routes/cmsRoute.ts

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

package/src/routes/index.ts

@@ -8,6 +8,7 @@ export {
   type CmsRouteOptions,
   cmsHomeRouteConfig,
   cmsRouteConfig,
+  deferredSectionLoader,
   loadCmsHomePage,
   loadCmsPage,
   loadDeferredSection,

package/src/vite/plugin.js

@@ -5,12 +5,21 @@
  * are eliminated from the browser bundle. This consolidates stubs that
  * every Deco site previously had to copy into its own vite.config.ts.
  *
+ * blocks.gen.ts handling:
+ *   The CMS block registry can be 10MB+. Inlining it as a JS object literal
+ *   causes Vite's SSR module runner to hang on dynamic imports (transport
+ *   serialization bottleneck) and is slow to parse even with static imports
+ *   (V8 full JS parser). Instead, generate-blocks.ts writes a .json data
+ *   file, and this plugin intercepts the .ts import to return JSON.parse(...)
+ *   — V8's JSON parser is 2-10x faster than the JS parser for large data.
+ *
  * Usage:
  * ```ts
  * import { decoVitePlugin } from "@decocms/start/vite";
  * export default defineConfig({ plugins: [decoVitePlugin(), ...] });
  * ```
  */
+import { readFileSync, existsSync } from "node:fs";
 
 // Bare-specifier stubs resolved by ID before Vite touches them.
 /** @type {Record<string, string>} */
@@ -69,16 +78,45 @@ export function decoVitePlugin() {
     },
 
     load(id, options) {
-      // blocks.gen.ts — the CMS block registry (often 500KB+ compiled).
-      // Only the server needs it; the client receives pre-resolved sections.
-      if (!options?.ssr && id.endsWith("blocks.gen.ts")) {
-        return "export const blocks = {};";
+      // blocks.gen.ts — the CMS block registry (can be 10MB+).
+      if (id.endsWith("blocks.gen.ts")) {
+        // Client: stub — the browser receives pre-resolved sections.
+        if (!options?.ssr) {
+          return "export const blocks = {};";
+        }
+
+        // SSR: read .json sibling and emit JSON.parse(...) wrapper.
+        // This avoids the Vite SSR module runner hanging on large dynamic
+        // imports and lets V8 use its fast JSON parser (~2-10x vs object literal).
+        const jsonPath = id.replace(/\.ts$/, ".json");
+        if (existsSync(jsonPath)) {
+          const raw = readFileSync(jsonPath, "utf-8");
+          return `export const blocks = JSON.parse(${JSON.stringify(raw)});`;
+        }
+
+        // Fallback: if .json doesn't exist yet (pre-generate-blocks), let
+        // Vite load the .ts file normally (may contain inline data for
+        // backward-compatible sites that haven't regenerated).
       }
 
       // Virtual module stubs.
       return STUB_SOURCE[id];
     },
 
+    configureServer(server) {
+      // When blocks.gen.json changes on disk, invalidate the .ts module
+      // so Vite re-runs our load() hook with the fresh data.
+      server.watcher.on("change", (file) => {
+        if (file.endsWith("blocks.gen.json")) {
+          const tsId = file.replace(/\.json$/, ".ts");
+          const mod = server.environments?.ssr?.moduleGraph?.getModuleById(tsId);
+          if (mod) {
+            server.environments.ssr.moduleGraph.invalidateModule(mod);
+          }
+        }
+      });
+    },
+
     configEnvironment(name, env) {
       if (name === "ssr" || name === "client") {
         env.optimizeDeps = env.optimizeDeps || {};