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

@cloudwerk/vite-plugin 0.2.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

@@ -52,6 +52,11 @@ interface CloudwerkVitePluginOptions {
      * @default 'hono-jsx'
      */
     renderer?: 'hono-jsx' | 'react';
+    /**
+     * Directory for static assets served at root.
+     * @default 'public'
+     */
+    publicDir?: string;
 }
 /**
  * Resolved plugin options after applying defaults and loading config.
@@ -73,8 +78,12 @@ interface ResolvedCloudwerkOptions {
     hydrationEndpoint: string;
     /** UI renderer name */
     renderer: 'hono-jsx' | 'react';
+    /** Directory for static assets (relative to root) */
+    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);
+  return generateHonoClientEntry(clientComponents, hydrationEndpoint, isProduction);
 }
-function generateHonoClientEntry(clientComponents, _hydrationEndpoint) {
+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)
+    }
+  }
+}
+// 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;
@@ -965,6 +1129,20 @@ function cloudwerkPlugin(options = {}) {
   }
   return {
     name: "cloudwerk",
+    /**
+     * Pass publicDir configuration to Vite.
+     * This enables Vite's built-in static file serving for the public directory.
+     */
+    async config(userConfig) {
+      if (userConfig.publicDir !== void 0) {
+        return {};
+      }
+      const root = userConfig.root ?? process.cwd();
+      const cloudwerkConfig = await loadConfig(root);
+      return {
+        publicDir: options.publicDir ?? cloudwerkConfig.publicDir ?? "public"
+      };
+    },
     /**
      * Resolve configuration and build initial manifest.
      */
@@ -989,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",
@@ -998,7 +1177,9 @@ function cloudwerkPlugin(options = {}) {
         verbose: options.verbose ?? false,
         hydrationEndpoint: options.hydrationEndpoint ?? "/__cloudwerk",
         renderer: options.renderer ?? cloudwerkConfig.ui?.renderer ?? "hono-jsx",
-        root
+        publicDir: options.publicDir ?? cloudwerkConfig.publicDir ?? "public",
+        root,
+        isProduction
       };
       state = {
         options: resolvedOptions,
@@ -1026,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.2.0",
+  "version": "0.4.0",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@swc/core": "^1.3.100",
-    "@cloudwerk/core": "^0.8.0",
-    "@cloudwerk/ui": "^0.8.0"
+    "@cloudwerk/core": "^0.9.0",
+    "@cloudwerk/ui": "^0.9.0"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0",
@@ -33,7 +33,9 @@
     }
   },
   "devDependencies": {
+    "@hono/vite-dev-server": ">=0.18.0",
     "@types/node": "^20.0.0",
+    "hono": "^4.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^6.0.0",