@nextsparkjs/core 0.1.0-beta.133 → 0.1.0-beta.135

package/dist/components/public/pageBuilder/PageRenderer.d.ts

@@ -1,13 +1,18 @@
 /**
- * PageRenderer Component
+ * PageRenderer Component — Async Server Component with RSC Streaming
  *
- * Renders pages from the Page Builder by iterating over blocks
- * and directly loading block components from the SSR registry.
+ * Renders pages from the Page Builder using async dynamic imports
+ * per block, wrapped in Suspense boundaries for streaming SSR.
  *
- * Uses direct imports (BLOCK_COMPONENTS_SSR) instead of React.lazy
- * so that all HTML is visible in the initial server response without JS.
- * React.lazy puts content inside hidden <template> tags that require
- * client-side JS to reveal — breaking no-JS rendering and hurting SEO.
+ * How it works:
+ * 1. Each block is loaded via `loadBlockSSR(slug)` — an async import
+ * 2. React Server Components resolve the import on the server
+ * 3. Suspense boundaries let React stream HTML progressively
+ * 4. Client receives complete HTML (zero CLS, SEO-safe)
+ * 5. Only JS chunks for blocks actually on the page are sent to client
+ *
+ * This gives per-block code splitting WITHOUT the CLS issues of next/dynamic,
+ * because the server fully resolves each block before flushing the HTML.
  *
  * @module core/components/public/pageBuilder
  */

package/dist/components/public/pageBuilder/PageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/public/pageBuilder/PageRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAkC1D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,aAAa,EAAE,CAAA;QACvB,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CA+BvD"}
+{"version":3,"file":"PageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/public/pageBuilder/PageRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAqC1D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,aAAa,EAAE,CAAA;QACvB,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAiCvD"}

package/dist/components/public/pageBuilder/PageRenderer.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getBlockComponentSSR, normalizeBlockProps } from "../../../lib/blocks/loader.js";
+import { Suspense } from "react";
+import { loadBlockSSR, normalizeBlockProps } from "../../../lib/blocks/loader.js";
 function BlockError({ blockSlug }) {
   return /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 bg-destructive/10 border border-destructive/20 rounded", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto text-center", children: [
     /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
@@ -9,8 +10,8 @@ function BlockError({ blockSlug }) {
     /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "This block may not be available or there was an error rendering it." })
   ] }) });
 }
-function BlockRenderer({ block }) {
-  const BlockComponent = getBlockComponentSSR(block.blockSlug);
+async function BlockRenderer({ block }) {
+  const BlockComponent = await loadBlockSSR(block.blockSlug);
   if (!BlockComponent) {
     console.warn(`Block component not found for slug: ${block.blockSlug}`);
     return /* @__PURE__ */ jsx(BlockError, { blockSlug: block.blockSlug });
@@ -32,7 +33,7 @@ function PageRenderer({ page }) {
       className: "@container w-full",
       "data-block-id": block.id,
       "data-block-slug": block.blockSlug,
-      children: /* @__PURE__ */ jsx(BlockRenderer, { block })
+      children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(BlockRenderer, { block }) })
     },
     block.id
   )) });

package/dist/lib/blocks/loader.d.ts

@@ -23,14 +23,26 @@ export declare function getBlockComponents(): Record<string, BlockComponent>;
  */
 export declare function getBlockComponent(slug: string): BlockComponent | undefined;
 /**
- * Get all SSR block components (direct imports, no React.lazy)
- * Use for public page rendering where no-JS SSR is required
+ * @deprecated Use loadBlockSSR for async Server Component rendering
  */
 export declare function getBlockComponentsSSR(): Record<string, BlockComponent>;
 /**
- * Get a specific SSR block component by slug (direct import, no React.lazy)
+ * @deprecated Use loadBlockSSR for async Server Component rendering
  */
 export declare function getBlockComponentSSR(slug: string): BlockComponent | undefined;
+/**
+ * Async block loader for RSC streaming.
+ *
+ * Dynamically imports a block component by slug. Used by PageRenderer
+ * (async Server Component) with Suspense for:
+ * - Per-block code splitting (only used blocks ship JS to client)
+ * - Streaming SSR (server flushes HTML progressively)
+ * - Zero CLS (HTML complete before client JS runs)
+ *
+ * @param slug - Block slug (e.g., 'hero', 'accordion')
+ * @returns Resolved block component, or undefined if not found
+ */
+export declare function loadBlockSSR(slug: string): Promise<BlockComponent | undefined>;
 /**
  * Check if a block exists in the registry
  *

package/dist/lib/blocks/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../src/lib/blocks/loader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAIrC,KAAK,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;AAExC;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAEnE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAE1E;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAEtE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAE7E;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE9C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAgD3F"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../src/lib/blocks/loader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAIrC,KAAK,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;AAExC;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAEnE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAE1E;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAEtE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAE7E;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAKpF;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE9C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAgD3F"}

package/dist/lib/blocks/loader.js

@@ -1,4 +1,4 @@
-import { BLOCK_COMPONENTS, BLOCK_COMPONENTS_SSR } from "@nextsparkjs/registries/block-registry";
+import { BLOCK_COMPONENTS, BLOCK_COMPONENTS_SSR, BLOCK_IMPORTS_SSR } from "@nextsparkjs/registries/block-registry";
 function getBlockComponents() {
   return BLOCK_COMPONENTS;
 }
@@ -11,8 +11,14 @@ function getBlockComponentsSSR() {
 function getBlockComponentSSR(slug) {
   return BLOCK_COMPONENTS_SSR[slug];
 }
+async function loadBlockSSR(slug) {
+  const importFn = BLOCK_IMPORTS_SSR[slug];
+  if (!importFn) return void 0;
+  const mod = await importFn();
+  return mod.default;
+}
 function hasBlock(slug) {
-  return slug in BLOCK_COMPONENTS;
+  return slug in BLOCK_COMPONENTS || slug in BLOCK_IMPORTS_SSR;
 }
 function normalizeBlockProps(props) {
   if (!props || typeof props !== "object" || Array.isArray(props)) {
@@ -58,5 +64,6 @@ export {
   getBlockComponents,
   getBlockComponentsSSR,
   hasBlock,
+  loadBlockSSR,
   normalizeBlockProps
 };

package/dist/styles/classes.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-04-06T20:21:52.643Z",
+  "generated": "2026-04-07T17:07:35.712Z",
   "totalClasses": 1078,
   "classes": [
     "!text-2xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/core",
-  "version": "0.1.0-beta.133",
+  "version": "0.1.0-beta.135",
   "description": "NextSpark - The complete SaaS framework for Next.js",
   "license": "MIT",
   "author": "NextSpark <hello@nextspark.dev>",
@@ -462,7 +462,7 @@
     "tailwind-merge": "^3.3.1",
     "uuid": "^13.0.0",
     "zod": "^4.1.5",
-    "@nextsparkjs/testing": "0.1.0-beta.133"
+    "@nextsparkjs/testing": "0.1.0-beta.135"
   },
   "scripts": {
     "postinstall": "node scripts/postinstall.mjs || true",

package/scripts/build/registry/generators/block-registry.mjs

@@ -47,10 +47,11 @@ export const BLOCK_CATEGORIES: string[] = []
 
 export const BLOCK_COMPONENTS: Record<string, React.LazyExoticComponent<React.ComponentType<unknown>>> = {}
 
-/**
- * Direct-imported block components for SSR rendering
- * No React.lazy, no Suspense — HTML is fully visible without JS
- */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BlockImportFn = () => Promise<{ default: React.ComponentType<any> }>
+export const BLOCK_IMPORTS_SSR: Record<string, BlockImportFn> = {}
+
+/** @deprecated Use BLOCK_IMPORTS_SSR */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const BLOCK_COMPONENTS_SSR: Record<string, React.ComponentType<any>> = {}
 
@@ -66,8 +67,6 @@ export const BLOCK_METADATA = {
 
   // Import field definitions and examples (if they exist)
   const imports = []
-  // Direct component imports for SSR (no React.lazy)
-  const ssrImports = []
 
   blocks.forEach(block => {
     const slugVar = block.slug.replace(/-/g, '_')
@@ -75,9 +74,6 @@ export const BLOCK_METADATA = {
     // Always import field definitions
     imports.push(`import { fieldDefinitions as ${slugVar}_fields } from '${block.paths.fields}'`)
 
-    // Direct component import for SSR rendering
-    ssrImports.push(`import { default as ${slugVar}_component } from '${block.paths.component}'`)
-
     // Conditionally import examples if they exist
     if (block.hasExamples) {
       imports.push(`import { examples as ${slugVar}_examples } from '${block.paths.examples}'`)
@@ -85,7 +81,6 @@ export const BLOCK_METADATA = {
   })
 
   const fieldImports = imports.join('\n')
-  const ssrComponentImports = ssrImports.join('\n')
 
   const registryEntries = blocks.map(block => {
     const slugVar = block.slug.replace(/-/g, '_')
@@ -137,9 +132,6 @@ import type { BlockConfig, BlockCategory } from '${convertCorePath('@/core/types
 
 ${fieldImports}
 
-// Direct component imports for SSR (no React.lazy, no Suspense needed)
-${ssrComponentImports}
-
 export const BLOCK_REGISTRY: Record<string, BlockConfig> = {
 ${registryEntries}
 }
@@ -147,9 +139,8 @@ ${registryEntries}
 export const BLOCK_CATEGORIES: BlockCategory[] = [${categories.map(c => `'${c}'`).join(', ')}]
 
 /**
- * Lazy-loaded block components for runtime rendering
- * Each component is wrapped with React.lazy for code-splitting
- * Uses Object.values to get the first exported component (handles varying naming conventions)
+ * Lazy-loaded block components for client-side rendering (admin UI, block picker).
+ * Each component is wrapped with React.lazy for code-splitting.
  */
 export const BLOCK_COMPONENTS: Record<string, React.LazyExoticComponent<React.ComponentType<any>>> = {
 ${blocks.map(block => {
@@ -158,18 +149,32 @@ ${blocks.map(block => {
 }
 
 /**
- * Direct-imported block components for SSR rendering
- * No React.lazy, no Suspense — HTML is fully visible without JS.
- * Use with SSRPageRenderer for public pages where SEO and no-JS rendering matter.
+ * Server-side block import functions for RSC streaming.
+ *
+ * Each entry is an async import function — NOT a resolved component.
+ * PageRenderer (async Server Component) calls these per-block with Suspense,
+ * enabling:
+ * - Per-block code splitting (only used blocks ship JS to client)
+ * - Streaming SSR (server flushes HTML progressively as blocks resolve)
+ * - Zero CLS (HTML is complete before client JS runs)
+ *
+ * For admin/client rendering, use BLOCK_COMPONENTS (React.lazy) instead.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const BLOCK_COMPONENTS_SSR: Record<string, React.ComponentType<any>> = {
+export type BlockImportFn = () => Promise<{ default: React.ComponentType<any> }>
+export const BLOCK_IMPORTS_SSR: Record<string, BlockImportFn> = {
 ${blocks.map(block => {
-    const slugVar = block.slug.replace(/-/g, '_')
-    return `  '${block.slug}': ${slugVar}_component`
+    return `  '${block.slug}': () => import('${block.paths.component}')`
   }).join(',\n')}
 }
 
+/**
+ * @deprecated Use BLOCK_IMPORTS_SSR with async PageRenderer instead.
+ * Kept for backwards compatibility with themes that override PageRenderer.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const BLOCK_COMPONENTS_SSR: Record<string, React.ComponentType<any>> = {}
+
 /**
  * Block registry metadata
  */