@decocms/start 0.30.0 → 0.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "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/sdk/analytics.ts

@@ -61,7 +61,12 @@ export const ANALYTICS_SCRIPT = `
   }
 
   observeAll();
-  new MutationObserver(observeAll).observe(document.body, { childList: true, subtree: true });
+  var mo = new MutationObserver(observeAll);
+  if (typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(function() { mo.observe(document.body, { childList: true, subtree: true }); });
+  } else {
+    setTimeout(function() { mo.observe(document.body, { childList: true, subtree: true }); }, 0);
+  }
 })();
 `;
 

package/src/sdk/workerEntry.ts

@@ -34,6 +34,23 @@ import {
 import { buildHtmlShell } from "./htmlShell";
 import { cleanPathForCacheKey } from "./urlUtils";
 import { isMobileUA } from "./useDevice";
+import { getRenderShellConfig } from "../admin/setup";
+
+/**
+ * Append Link preload headers for CSS and fonts so the browser starts
+ * fetching them before parsing HTML. Only applied to HTML responses.
+ */
+function appendResourceHints(resp: Response): void {
+  const ct = resp.headers.get("content-type");
+  if (!ct || !ct.includes("text/html")) return;
+  const { cssHref, fontHrefs } = getRenderShellConfig();
+  if (cssHref) {
+    resp.headers.append("Link", `<${cssHref}>; rel=preload; as=style`);
+  }
+  for (const href of fontHrefs) {
+    resp.headers.append("Link", `<${href}>; rel=preload; as=font; crossorigin`);
+  }
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -736,6 +753,7 @@ export function createDecoWorkerEntry(
             // CDN auto-caching would bypass that versioning and serve stale HTML
             // after deploys (referencing old CSS/JS fingerprinted filenames).
             hit.headers.set("CDN-Cache-Control", "no-store");
+            appendResourceHints(hit);
             return hit;
           }
         } catch {
@@ -750,6 +768,7 @@ export function createDecoWorkerEntry(
         const resp = new Response(origin.body, origin);
         resp.headers.set("X-Cache", "BYPASS");
         resp.headers.set("X-Cache-Reason", `status:${origin.status}`);
+        appendResourceHints(resp);
         return resp;
       }
 
@@ -764,6 +783,7 @@ export function createDecoWorkerEntry(
         resp.headers.delete("CDN-Cache-Control");
         resp.headers.set("X-Cache", "BYPASS");
         resp.headers.set("X-Cache-Reason", "set-cookie");
+        appendResourceHints(resp);
         return resp;
       }
 
@@ -776,6 +796,7 @@ export function createDecoWorkerEntry(
         resp.headers.set("Cache-Control", "private, no-cache, no-store, must-revalidate");
         resp.headers.set("X-Cache", "BYPASS");
         resp.headers.set("X-Cache-Reason", `profile:${profile}`);
+        appendResourceHints(resp);
         return resp;
       }
 
@@ -804,6 +825,7 @@ export function createDecoWorkerEntry(
       // BUILD_HASH-versioned keys; CDN auto-caching would bypass versioning
       // and serve stale HTML after deploys.
       toReturn.headers.set("CDN-Cache-Control", "no-store");
+      appendResourceHints(toReturn);
 
       // For Cache API storage, use sMaxAge as max-age since the Cache API
       // ignores s-maxage and only respects max-age for TTL decisions.

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,81 @@ 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);
+          }
+        }
+      });
+    },
+
+    config(_cfg, { command }) {
+      // Only split chunks for production builds — dev uses unbundled ESM.
+      if (command !== "build") return;
+      return {
+        build: {
+          rollupOptions: {
+            output: {
+              manualChunks(id) {
+                if (
+                  id.includes("node_modules/react-dom") ||
+                  id.includes("node_modules/react/")
+                ) {
+                  return "vendor-react";
+                }
+                if (
+                  id.includes("@tanstack/react-router") ||
+                  id.includes("@tanstack/start")
+                ) {
+                  return "vendor-router";
+                }
+                if (id.includes("@tanstack/react-query")) {
+                  return "vendor-query";
+                }
+                if (id.includes("@decocms/start")) {
+                  return "vendor-deco";
+                }
+                if (id.includes("@decocms/apps")) {
+                  return "vendor-commerce";
+                }
+              },
+            },
+          },
+        },
+      };
+    },
+
     configEnvironment(name, env) {
       if (name === "ssr" || name === "client") {
         env.optimizeDeps = env.optimizeDeps || {};