@cloudwerk/vite-plugin 0.6.7 → 0.6.9

package/dist/index.d.ts

@@ -228,6 +228,6 @@ declare function generateServerEntry(manifest: RouteManifest, scanResult: ScanRe
  * @param options - Resolved plugin options
  * @returns Generated JavaScript code
  */
-declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, cssImports: Map<string, CssImportInfo[]>, options: ResolvedCloudwerkOptions): string;
+declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, cssImports: Map<string, CssImportInfo[]>, options: ResolvedCloudwerkOptions, manifest?: RouteManifest): string;
 
 export { type AssetManifest, type AssetManifestEntry, type ClientComponentInfo, type CloudwerkVitePluginOptions, type CssImportInfo, type GenerateServerEntryOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };

package/dist/index.js

@@ -140,11 +140,11 @@ function generateServerEntry(manifest, scanResult, options, entryOptions) {
       if (hasOptionalCatchAll) {
         const basePath = route.urlPattern.replace(/\/:[^/]+\{\.\*\}$/, "") || "/";
         pageRegistrations.push(
-          `  registerPage(app, '${basePath}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"})`
+          `  registerPage(app, '${basePath}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"}, '${route.urlPattern}')`
         );
       }
       pageRegistrations.push(
-        `  registerPage(app, '${route.urlPattern}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"})`
+        `  registerPage(app, '${route.urlPattern}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"}, '${route.urlPattern}')`
       );
     } else if (route.fileType === "route") {
       const varName = `route_${routeIndex++}`;
@@ -363,7 +363,7 @@ async function renderNotFoundPage(notFoundModule, layoutModules, layoutLoaderDat
 
 const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
 
-function registerPage(app, pattern, pageModule, layoutModules, middlewareModules, errorModule, notFoundModule) {
+function registerPage(app, pattern, pageModule, layoutModules, middlewareModules, errorModule, notFoundModule, routeId) {
   // Apply middleware (wrap with adapter to convert Cloudwerk middleware to Hono middleware)
   for (const mw of middlewareModules) {
     app.use(pattern, createMiddlewareAdapter(mw))
@@ -428,7 +428,7 @@ function registerPage(app, pattern, pageModule, layoutModules, middlewareModules
       }
 
       // Render the page with hydration script injection
-      return await renderWithHydration(element)
+      return await renderWithHydration(element, 200, routeId, pageProps, layoutLoaderData)
     } catch (error) {
       // Handle NotFoundError (check both instanceof and name for module duplication)
       if (error instanceof NotFoundError || error?.name === 'NotFoundError') {
@@ -460,7 +460,7 @@ function registerPage(app, pattern, pageModule, layoutModules, middlewareModules
  * - CSS links are injected before </head>
  * - Vite client (dev) and hydration script are injected before </body>
  */
-async function renderWithHydration(element, status = 200) {
+async function renderWithHydration(element, status = 200, routeId, pageProps, layoutData) {
   // Render element to HTML string using the active renderer
   ${rendererName === "react" ? `// React: use renderToString from react-dom/server
   const { renderToString } = await import('react-dom/server')
@@ -478,7 +478,13 @@ async function renderWithHydration(element, status = 200) {
   // Inject scripts before </body>
   // - Vite client for HMR (dev only)
   // - Hydration script for client components
-  const scripts = VITE_CLIENT + '<script type="module" src="${clientEntryPath}"></script>'
+  let scripts = VITE_CLIENT
+  ${rendererName === "react" ? `// React: embed serialized page data for full-tree hydration
+  if (routeId) {
+    const pageData = JSON.stringify({ routeId, pageProps: pageProps || {}, layoutData: layoutData || [] }).replace(/</g, '\\\\u003c')
+    scripts += '<script id="__CLOUDWERK_DATA__" type="application/json">' + pageData + '</script>'
+  }` : ""}
+  scripts += '<script type="module" src="${clientEntryPath}"></script>'
   const bodyCloseRegex = /<\\/body>/i
   if (bodyCloseRegex.test(html)) {
     html = html.replace(bodyCloseRegex, scripts + '</body>')
@@ -1085,11 +1091,11 @@ function generateCssImportStatements(cssPaths) {
   }
   return cssPaths.map((cssPath) => `import '${cssPath}'`).join("\n") + "\n\n";
 }
-function generateClientEntry(clientComponents, cssImports, options) {
+function generateClientEntry(clientComponents, cssImports, options, manifest) {
   const { renderer, hydrationEndpoint, isProduction } = options;
   const cssPaths = collectCssImports(cssImports);
   if (renderer === "react") {
-    return generateReactClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
+    return generateReactClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction, manifest);
   }
   return generateHonoClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
 }
@@ -1280,105 +1286,102 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateReactClientEntry(clientComponents, cssPaths, _hydrationEndpoint, isProduction = false) {
+function generateReactClientEntry(_clientComponents, cssPaths, _hydrationEndpoint, isProduction = false, manifest) {
   const cssImportStatements = generateCssImportStatements(cssPaths);
-  if (isProduction) {
-    return generateProductionClientEntry(clientComponents, {
-      header: "Generated Cloudwerk Client Entry (React - Production)",
-      cssImports: cssImportStatements,
-      rendererImports: `import { hydrateRoot } from 'react-dom/client'
-import { createElement } from 'react'`,
-      additionalDeclarations: `
-// Root cache for React 18 concurrent mode
-const rootCache = new Map()
-`,
-      hydrateCall: `// Hydrate the component using React 18 hydrateRoot
-      const root = hydrateRoot(el, createElement(Component, props))
-      rootCache.set(el, root)`
-    });
+  if (!manifest) {
+    return `/**
+ * Generated Cloudwerk Client Entry (React - No Routes)
+ * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
+ */
+
+${cssImportStatements}console.debug('[Cloudwerk] No route manifest available for React hydration')
+`;
+  }
+  const pageImports = [];
+  const layoutImports = [];
+  const routeMapEntries = [];
+  const importedLayouts = /* @__PURE__ */ new Map();
+  let pageIndex = 0;
+  let layoutIndex = 0;
+  for (const route of manifest.routes) {
+    if (route.fileType !== "page") continue;
+    const pageVar = `page_${pageIndex++}`;
+    const importPath = isProduction ? route.absolutePath : `/@fs${route.absolutePath}`;
+    pageImports.push(`import * as ${pageVar} from '${importPath}'`);
+    const layoutVars = [];
+    for (const layoutPath of route.layouts) {
+      if (!importedLayouts.has(layoutPath)) {
+        const layoutVar = `layout_${layoutIndex++}`;
+        const layoutImportPath = isProduction ? layoutPath : `/@fs${layoutPath}`;
+        layoutImports.push(`import * as ${layoutVar} from '${layoutImportPath}'`);
+        importedLayouts.set(layoutPath, layoutVar);
+      }
+      layoutVars.push(importedLayouts.get(layoutPath));
+    }
+    routeMapEntries.push(
+      `  ${JSON.stringify(route.urlPattern)}: { page: ${pageVar}.default, layouts: [${layoutVars.map((v) => `${v}.default`).join(", ")}] }`
+    );
   }
-  const bundleMap = Object.fromEntries(
-    Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
-  );
   return `/**
- * Generated Cloudwerk Client Entry (React)
+ * Generated Cloudwerk Client Entry (React - Full Tree Hydration)
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-${cssImportStatements}import { hydrateRoot, createRoot } from 'react-dom/client'
+${cssImportStatements}import { hydrateRoot } from 'react-dom/client'
 import { createElement } from 'react'
 
-// Bundle map for component lookups
-const bundles = ${JSON.stringify(bundleMap, null, 2)}
-
-// Module cache to avoid re-importing
-const moduleCache = new Map()
+// Page imports
+${pageImports.join("\n")}
 
-// Root cache for React 18 concurrent mode
-const rootCache = new Map()
+// Layout imports
+${layoutImports.join("\n")}
 
-/**
- * Load a component module, using cache for repeated imports.
- */
-async function loadComponent(bundlePath) {
-  if (moduleCache.has(bundlePath)) {
-    return moduleCache.get(bundlePath)
-  }
-  const module = await import(/* @vite-ignore */ bundlePath)
-  moduleCache.set(bundlePath, module)
-  return module
+// Route map: routeId -> { page, layouts }
+const routes = {
+${routeMapEntries.join(",\n")}
 }
 
 /**
- * Hydrate all marked elements on the page.
+ * Hydrate the full React tree from serialized page data.
  */
-async function hydrate() {
-  const elements = document.querySelectorAll('[data-hydrate-id]')
-  if (elements.length === 0) {
-    console.debug('[Cloudwerk] No client components to hydrate')
+function hydrate() {
+  const dataEl = document.getElementById('__CLOUDWERK_DATA__')
+  if (!dataEl) {
+    console.debug('[Cloudwerk] No page data found for React hydration')
     return
   }
 
-  console.debug('[Cloudwerk] Hydrating', elements.length, 'client components')
+  let pageData
+  try {
+    pageData = JSON.parse(dataEl.textContent || '{}')
+  } catch (e) {
+    console.error('[Cloudwerk] Failed to parse page data:', e)
+    return
+  }
 
-  for (const el of elements) {
-    const componentId = el.getAttribute('data-hydrate-id')
-    const propsJson = el.getAttribute('data-hydrate-props')
+  const route = routes[pageData.routeId]
+  if (!route) {
+    console.error('[Cloudwerk] Unknown route:', pageData.routeId)
+    return
+  }
 
-    if (!componentId) {
-      console.warn('[Cloudwerk] Element missing data-hydrate-id')
-      continue
-    }
+  // Reconstruct the component tree (same as server)
+  let element = createElement(route.page, pageData.pageProps || {})
 
-    const bundlePath = bundles[componentId]
-    if (!bundlePath) {
-      console.warn('[Cloudwerk] Unknown client component:', componentId)
-      continue
+  // Wrap with layouts (inside-out, same order as server)
+  for (let i = route.layouts.length - 1; i >= 0; i--) {
+    const layoutProps = {
+      children: element,
+      params: pageData.pageProps?.params,
+      ...(pageData.layoutData?.[i] || {}),
     }
+    element = createElement(route.layouts[i], layoutProps)
+  }
 
-    try {
-      const props = propsJson ? JSON.parse(propsJson) : {}
-      const module = await loadComponent(bundlePath)
-      const Component = module.default
-
-      if (!Component) {
-        console.error('[Cloudwerk] No default export in component:', componentId)
-        continue
-      }
-
-      // Hydrate the component using React 18 hydrateRoot
-      const root = hydrateRoot(el, createElement(Component, props))
-      rootCache.set(el, root)
-
-      // Clean up hydration attributes
-      el.removeAttribute('data-hydrate-id')
-      el.removeAttribute('data-hydrate-props')
+  // Hydrate the full tree
+  hydrateRoot(document, element)
 
-      console.debug('[Cloudwerk] Hydrated:', componentId)
-    } catch (error) {
-      console.error('[Cloudwerk] Failed to hydrate component:', componentId, error)
-    }
-  }
+  console.debug('[Cloudwerk] Full-tree hydration complete for route:', pageData.routeId)
 }
 
 // Run hydration when DOM is ready
@@ -2500,7 +2503,8 @@ function cloudwerkPlugin(options = {}) {
           state.clientEntryCache = generateClientEntry(
             state.clientComponents,
             state.cssImports,
-            state.options
+            state.options,
+            state.manifest
           );
         }
         return state.clientEntryCache;
@@ -2627,8 +2631,12 @@ function cloudwerkPlugin(options = {}) {
           bundlePath: id
           // Use file path for Vite to resolve in dev mode
         });
-        if (!result.success && state.options.verbose) {
-          console.warn(`[cloudwerk] ${result.error}`);
+        if (!result.success) {
+          console.warn(`[cloudwerk] Warning: Failed to wrap client component ${componentId}: ${result.error}`);
+          return {
+            code: transformedCode.replace(/['"]use client['"]\s*;?\s*\n?/g, ""),
+            map: null
+          };
         }
         return {
           code: result.code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/vite-plugin",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@swc/core": "^1.3.100",
     "@cloudwerk/core": "^0.15.3",
-    "@cloudwerk/ui": "^0.15.3"
+    "@cloudwerk/ui": "^0.15.6"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0",