npm - @cloudwerk/vite-plugin - Versions diffs - 0.3.0 → 0.4.0 - Mend

@cloudwerk/vite-plugin 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -82,6 +82,8 @@ interface ResolvedCloudwerkOptions {
     publicDir: string;
     /** Vite root directory (absolute path) */
     root: string;
+    /** Whether building for production (affects asset paths) */
+    isProduction?: boolean;
 }
 /**
  * Information about a detected client component.

package/dist/index.js CHANGED Viewed

@@ -124,6 +124,7 @@ function generateServerEntry(manifest, scanResult, options) {
     }
   }
   const rendererName = options.renderer;
+  const clientEntryPath = options.isProduction ? `${options.hydrationEndpoint}/client.js` : "/@id/__x00__virtual:cloudwerk/client-entry";
   return `/**
  * Generated Cloudwerk Server Entry
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
@@ -381,7 +382,7 @@ function renderWithHydration(element, status = 200) {
   const html = '<!DOCTYPE html>' + String(element)
   // Inject hydration script before </body> if it exists (case-insensitive for HTML compat)
-  const hydrationScript = '<script type="module" src="/@id/__x00__virtual:cloudwerk/client-entry"></script>'
+  const hydrationScript = '<script type="module" src="${clientEntryPath}"></script>'
   const bodyCloseRegex = /<\\/body>/i
   const injectedHtml = bodyCloseRegex.test(html)
     ? html.replace(bodyCloseRegex, hydrationScript + '</body>')
@@ -439,7 +440,27 @@ const app = new Hono({ strict: false })
 // Add context middleware
 app.use('*', contextMiddleware())
+${options.isProduction ? `
+// Serve static assets using Workers Static Assets binding (production only)
+app.use('*', async (c, next) => {
+  // Check if ASSETS binding is available
+  if (!c.env?.ASSETS) {
+    await next()
+    return
+  }
+  // Try to serve the request as a static asset
+  const response = await c.env.ASSETS.fetch(c.req.raw)
+  // If asset found (not 404), return it
+  if (response.status !== 404) {
+    return response
+  }
+  // Asset not found, continue to routes
+  await next()
+})
+` : ""}
 // Register all routes
 ${pageRegistrations.join("\n")}
 ${routeRegistrations.join("\n")}
@@ -516,13 +537,105 @@ export default app
 // src/virtual-modules/client-entry.ts
 function generateClientEntry(clientComponents, options) {
-  const { renderer, hydrationEndpoint } = options;
+  const { renderer, hydrationEndpoint, isProduction } = options;
   if (renderer === "react") {
-    return generateReactClientEntry(clientComponents, hydrationEndpoint);
+    return generateReactClientEntry(clientComponents, hydrationEndpoint, isProduction);
+  }
+  return generateHonoClientEntry(clientComponents, hydrationEndpoint, isProduction);
+}
+function generateStaticImportsAndMap(clientComponents) {
+  const components = Array.from(clientComponents.values());
+  const imports = components.map(
+    (info, index) => `import Component${index} from '${info.absolutePath}'`
+  ).join("\n");
+  const componentMapEntries = components.map(
+    (info, index) => `  '${info.componentId}': Component${index}`
+  ).join(",\n");
+  return { imports, componentMapEntries };
+}
+function generateProductionClientEntry(clientComponents, config) {
+  const { imports, componentMapEntries } = generateStaticImportsAndMap(clientComponents);
+  return `/**
+ * ${config.header}
+ * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
+ */
+${config.rendererImports}
+// Static component imports
+${imports}
+// Component map for hydration lookups
+const components = {
+${componentMapEntries}
+}
+${config.additionalDeclarations}
+/**
+ * Hydrate all marked elements on the page.
+ */
+async function hydrate() {
+  const elements = document.querySelectorAll('[data-hydrate-id]')
+  if (elements.length === 0) {
+    console.debug('[Cloudwerk] No client components to hydrate')
+    return
+  }
+  console.debug('[Cloudwerk] Hydrating', elements.length, 'client components')
+  for (const el of elements) {
+    const componentId = el.getAttribute('data-hydrate-id')
+    const propsJson = el.getAttribute('data-hydrate-props')
+    if (!componentId) {
+      console.warn('[Cloudwerk] Element missing data-hydrate-id')
+      continue
+    }
+    const Component = components[componentId]
+    if (!Component) {
+      console.warn('[Cloudwerk] Unknown client component:', componentId)
+      continue
+    }
+    try {
+      const props = propsJson ? JSON.parse(propsJson) : {}
+      ${config.hydrateCall}
+      // Clean up hydration attributes
+      el.removeAttribute('data-hydrate-id')
+      el.removeAttribute('data-hydrate-props')
+      console.debug('[Cloudwerk] Hydrated:', componentId)
+    } catch (error) {
+      console.error('[Cloudwerk] Failed to hydrate component:', componentId, error)
+    }
   }
-  return generateHonoClientEntry(clientComponents, hydrationEndpoint);
 }
-function generateHonoClientEntry(clientComponents, _hydrationEndpoint) {
+// Run hydration when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', hydrate)
+} else {
+  hydrate()
+}
+// Export for manual hydration if needed
+export { hydrate }
+`;
+}
+function generateHonoClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+  if (isProduction) {
+    return generateProductionClientEntry(clientComponents, {
+      header: "Generated Cloudwerk Client Entry (Hono JSX - Production)",
+      rendererImports: `import { render } from 'hono/jsx/dom'
+import { jsx } from 'hono/jsx/jsx-runtime'`,
+      additionalDeclarations: "",
+      hydrateCall: `// Hydrate the component using jsx() to create a proper element
+      // This allows Hono's reactive system to manage re-renders
+      render(jsx(Component, props), el)`
+    });
+  }
   const bundleMap = Object.fromEntries(
     Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
   );
@@ -615,7 +728,21 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateReactClientEntry(clientComponents, _hydrationEndpoint) {
+function generateReactClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+  if (isProduction) {
+    return generateProductionClientEntry(clientComponents, {
+      header: "Generated Cloudwerk Client Entry (React - Production)",
+      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)`
+    });
+  }
   const bundleMap = Object.fromEntries(
     Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
   );
@@ -911,6 +1038,43 @@ export default __WrappedComponent
 }
 // src/plugin.ts
+async function scanClientComponents(root, state) {
+  const appDir = path2.resolve(root, state.options.appDir);
+  try {
+    await fs.promises.access(appDir);
+  } catch {
+    return;
+  }
+  async function scanDir(dir) {
+    const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+    await Promise.all(
+      entries.map(async (entry) => {
+        const fullPath = path2.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== "node_modules" && !entry.name.startsWith(".")) {
+            await scanDir(fullPath);
+          }
+        } else if (entry.isFile() && (entry.name.endsWith(".tsx") || entry.name.endsWith(".ts"))) {
+          const content = await fs.promises.readFile(fullPath, "utf-8");
+          if (hasUseClientDirective(content)) {
+            const componentId = generateComponentId(fullPath, root);
+            const bundlePath = `${state.options.hydrationEndpoint}/${componentId}.js`;
+            const info = {
+              componentId,
+              bundlePath,
+              absolutePath: fullPath
+            };
+            state.clientComponents.set(fullPath, info);
+            if (state.options.verbose) {
+              console.log(`[cloudwerk] Pre-scanned client component: ${componentId}`);
+            }
+          }
+        }
+      })
+    );
+  }
+  await scanDir(appDir);
+}
 function cloudwerkPlugin(options = {}) {
   let state = null;
   let server = null;
@@ -1003,6 +1167,7 @@ function cloudwerkPlugin(options = {}) {
         }
       }
       const cloudwerkConfig = await loadConfig(root);
+      const isProduction = config.command === "build" || config.mode === "production";
       const resolvedOptions = {
         appDir: options.appDir ?? cloudwerkConfig.appDir,
         routesDir: options.routesDir ?? cloudwerkConfig.routesDir ?? "routes",
@@ -1013,7 +1178,8 @@ function cloudwerkPlugin(options = {}) {
         hydrationEndpoint: options.hydrationEndpoint ?? "/__cloudwerk",
         renderer: options.renderer ?? cloudwerkConfig.ui?.renderer ?? "hono-jsx",
         publicDir: options.publicDir ?? cloudwerkConfig.publicDir ?? "public",
-        root
+        root,
+        isProduction
       };
       state = {
         options: resolvedOptions,
@@ -1041,6 +1207,7 @@ function cloudwerkPlugin(options = {}) {
         clientEntryCache: null
       };
       await buildManifest(root);
+      await scanClientComponents(root, state);
     },
     /**
      * Configure the dev server with file watching.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/vite-plugin",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",