@cloudwerk/vite-plugin 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Squirrelsoft Dev Tools
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,182 @@
+import { Plugin } from 'vite';
+import { CloudwerkConfig, RouteManifest, ScanResult } from '@cloudwerk/core/build';
+
+/**
+ * @cloudwerk/vite-plugin - Types
+ *
+ * Configuration and internal types for the Cloudwerk Vite plugin.
+ */
+
+/**
+ * Options for the Cloudwerk Vite plugin.
+ */
+interface CloudwerkVitePluginOptions {
+    /**
+     * Directory containing route files.
+     * @default 'app'
+     */
+    appDir?: string;
+    /**
+     * Subdirectory within appDir for routes.
+     * @default 'routes'
+     */
+    routesDir?: string;
+    /**
+     * Override Cloudwerk configuration.
+     * If not provided, loads from cloudwerk.config.ts
+     */
+    config?: Partial<CloudwerkConfig>;
+    /**
+     * Custom server entry file path.
+     * If provided, disables virtual:cloudwerk/server-entry generation.
+     * Plugin also auto-detects if user provides their own app/server.ts
+     */
+    serverEntry?: string;
+    /**
+     * Custom client entry file path.
+     * If provided, disables virtual:cloudwerk/client-entry generation.
+     */
+    clientEntry?: string;
+    /**
+     * Enable verbose logging for debugging.
+     * @default false
+     */
+    verbose?: boolean;
+    /**
+     * Hydration endpoint path for client bundles.
+     * @default '/__cloudwerk'
+     */
+    hydrationEndpoint?: string;
+    /**
+     * UI renderer to use.
+     * @default 'hono-jsx'
+     */
+    renderer?: 'hono-jsx' | 'react';
+}
+/**
+ * Resolved plugin options after applying defaults and loading config.
+ */
+interface ResolvedCloudwerkOptions {
+    /** Directory containing app files (relative to root) */
+    appDir: string;
+    /** Subdirectory within appDir for routes */
+    routesDir: string;
+    /** Loaded Cloudwerk configuration */
+    config: CloudwerkConfig;
+    /** Path to user-provided server entry, or null for generated */
+    serverEntry: string | null;
+    /** Path to user-provided client entry, or null for generated */
+    clientEntry: string | null;
+    /** Whether verbose logging is enabled */
+    verbose: boolean;
+    /** Hydration endpoint path */
+    hydrationEndpoint: string;
+    /** UI renderer name */
+    renderer: 'hono-jsx' | 'react';
+    /** Vite root directory (absolute path) */
+    root: string;
+}
+/**
+ * Information about a detected client component.
+ */
+interface ClientComponentInfo {
+    /** Component identifier for hydration */
+    componentId: string;
+    /** Path to the component's client bundle */
+    bundlePath: string;
+    /** Absolute file path */
+    absolutePath: string;
+}
+/**
+ * Virtual module IDs used by the plugin.
+ */
+declare const VIRTUAL_MODULE_IDS: {
+    readonly SERVER_ENTRY: "virtual:cloudwerk/server-entry";
+    readonly CLIENT_ENTRY: "virtual:cloudwerk/client-entry";
+    readonly MANIFEST: "virtual:cloudwerk/manifest";
+};
+/**
+ * Resolved (internal) virtual module IDs with \0 prefix.
+ */
+declare const RESOLVED_VIRTUAL_IDS: {
+    readonly SERVER_ENTRY: "\0virtual:cloudwerk/server-entry";
+    readonly CLIENT_ENTRY: "\0virtual:cloudwerk/client-entry";
+    readonly MANIFEST: "\0virtual:cloudwerk/manifest";
+};
+
+/**
+ * @cloudwerk/vite-plugin - Core Plugin
+ *
+ * Vite plugin that provides file-based routing for Cloudwerk with
+ * virtual module generation for server and client entry points.
+ */
+
+/**
+ * Create the Cloudwerk Vite plugin.
+ *
+ * @param options - Plugin configuration options
+ * @returns Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite'
+ * import devServer from '@hono/vite-dev-server'
+ * import cloudwerk from '@cloudwerk/vite-plugin'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     cloudwerk(),
+ *     devServer({ entry: 'virtual:cloudwerk/server-entry' }),
+ *   ],
+ * })
+ * ```
+ */
+declare function cloudwerkPlugin(options?: CloudwerkVitePluginOptions): Plugin;
+
+/**
+ * Server Entry Virtual Module Generator
+ *
+ * Generates the virtual:cloudwerk/server-entry module that creates
+ * a Hono app with all routes registered from the file-based routing manifest.
+ */
+
+/**
+ * Generate the server entry module code.
+ *
+ * This creates a complete Hono application with:
+ * - All page and API routes registered
+ * - Layouts applied to pages in correct order
+ * - Middleware chains applied
+ * - Route config support
+ * - Error and 404 handling
+ *
+ * @param manifest - Route manifest from @cloudwerk/core
+ * @param scanResult - Scan result with file information
+ * @param options - Resolved plugin options
+ * @returns Generated TypeScript/JavaScript code
+ */
+declare function generateServerEntry(manifest: RouteManifest, scanResult: ScanResult, options: ResolvedCloudwerkOptions): string;
+
+/**
+ * Client Entry Virtual Module Generator
+ *
+ * Generates the virtual:cloudwerk/client-entry module that handles
+ * client-side hydration of server-rendered components.
+ */
+
+/**
+ * Generate the client entry module code.
+ *
+ * This creates a hydration bootstrap that:
+ * - Finds all elements with data-hydrate-id attributes
+ * - Dynamically imports the corresponding component bundles
+ * - Hydrates each component with its serialized props
+ *
+ * @param clientComponents - Map of detected client components
+ * @param options - Resolved plugin options
+ * @returns Generated JavaScript code
+ */
+declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, options: ResolvedCloudwerkOptions): string;
+
+export { type ClientComponentInfo, type CloudwerkVitePluginOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };

package/dist/index.js

@@ -0,0 +1,903 @@
+// src/plugin.ts
+import * as path from "path";
+import * as fs from "fs";
+import {
+  scanRoutes,
+  buildRouteManifest,
+  resolveLayouts,
+  resolveMiddleware,
+  loadConfig,
+  resolveRoutesPath,
+  hasUseClientDirective,
+  generateComponentId,
+  ROUTE_FILE_NAMES
+} from "@cloudwerk/core/build";
+
+// src/types.ts
+var VIRTUAL_MODULE_IDS = {
+  SERVER_ENTRY: "virtual:cloudwerk/server-entry",
+  CLIENT_ENTRY: "virtual:cloudwerk/client-entry",
+  MANIFEST: "virtual:cloudwerk/manifest"
+};
+var RESOLVED_VIRTUAL_IDS = {
+  SERVER_ENTRY: "\0virtual:cloudwerk/server-entry",
+  CLIENT_ENTRY: "\0virtual:cloudwerk/client-entry",
+  MANIFEST: "\0virtual:cloudwerk/manifest"
+};
+
+// src/virtual-modules/server-entry.ts
+function generateServerEntry(manifest, scanResult, options) {
+  const imports = [];
+  const pageRegistrations = [];
+  const routeRegistrations = [];
+  const layoutImports = [];
+  const middlewareImports = [];
+  const importedModules = /* @__PURE__ */ new Set();
+  const layoutModules = /* @__PURE__ */ new Map();
+  const middlewareModules = /* @__PURE__ */ new Map();
+  let pageIndex = 0;
+  let routeIndex = 0;
+  let layoutIndex = 0;
+  let middlewareIndex = 0;
+  for (const route of manifest.routes) {
+    for (const middlewarePath of route.middleware) {
+      if (!importedModules.has(middlewarePath)) {
+        const varName = `middleware_${middlewareIndex++}`;
+        middlewareImports.push(`import ${varName} from '${middlewarePath}'`);
+        middlewareModules.set(middlewarePath, varName);
+        importedModules.add(middlewarePath);
+      }
+    }
+    if (route.fileType === "page") {
+      for (const layoutPath of route.layouts) {
+        if (!importedModules.has(layoutPath)) {
+          const varName = `layout_${layoutIndex++}`;
+          layoutImports.push(`import * as ${varName} from '${layoutPath}'`);
+          layoutModules.set(layoutPath, varName);
+          importedModules.add(layoutPath);
+        }
+      }
+    }
+    if (route.fileType === "page") {
+      const varName = `page_${pageIndex++}`;
+      imports.push(`import * as ${varName} from '${route.absolutePath}'`);
+      const layoutChain = route.layouts.map((p) => layoutModules.get(p)).join(", ");
+      const middlewareChain = route.middleware.map((p) => middlewareModules.get(p)).join(", ");
+      pageRegistrations.push(
+        `  registerPage(app, '${route.urlPattern}', ${varName}, [${layoutChain}], [${middlewareChain}])`
+      );
+    } else if (route.fileType === "route") {
+      const varName = `route_${routeIndex++}`;
+      imports.push(`import * as ${varName} from '${route.absolutePath}'`);
+      const middlewareChain = route.middleware.map((p) => middlewareModules.get(p)).join(", ");
+      routeRegistrations.push(
+        `  registerRoute(app, '${route.urlPattern}', ${varName}, [${middlewareChain}])`
+      );
+    }
+  }
+  const rendererName = options.renderer;
+  return `/**
+ * Generated Cloudwerk Server Entry
+ * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
+ */
+
+import { Hono } from 'hono'
+import { contextMiddleware, createHandlerAdapter, setRouteConfig } from '@cloudwerk/core/runtime'
+import { setActiveRenderer } from '@cloudwerk/ui'
+
+// Page and Route Imports
+${imports.join("\n")}
+
+// Layout Imports
+${layoutImports.join("\n")}
+
+// Middleware Imports
+${middlewareImports.join("\n")}
+
+// ============================================================================
+// Route Registration Helpers
+// ============================================================================
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
+
+function registerPage(app, pattern, pageModule, layoutModules, middlewareModules) {
+  // Apply middleware
+  for (const mw of middlewareModules) {
+    app.use(pattern, mw)
+  }
+
+  // Apply config middleware if present
+  if (pageModule.config) {
+    app.use(pattern, async (_c, next) => {
+      setRouteConfig(pageModule.config)
+      await next()
+    })
+  }
+
+  // Register GET handler for page
+  app.get(pattern, async (c) => {
+    const params = c.req.param()
+    const request = c.req.raw
+    const url = new URL(request.url)
+    const searchParams = Object.fromEntries(url.searchParams.entries())
+
+    // Execute layout loaders
+    const layoutLoaderData = []
+    const loaderArgs = { params, request, context: c }
+
+    for (const layoutModule of layoutModules) {
+      if (layoutModule.loader) {
+        const data = await Promise.resolve(layoutModule.loader(loaderArgs))
+        layoutLoaderData.push(data ?? {})
+      } else {
+        layoutLoaderData.push({})
+      }
+    }
+
+    // Execute page loader
+    let pageLoaderData = {}
+    if (pageModule.loader) {
+      pageLoaderData = (await Promise.resolve(pageModule.loader(loaderArgs))) ?? {}
+    }
+
+    // Build page props
+    const pageProps = { params, searchParams, ...pageLoaderData }
+
+    // Render page
+    let element = await Promise.resolve(pageModule.default(pageProps))
+
+    // Wrap with layouts (inside-out)
+    for (let i = layoutModules.length - 1; i >= 0; i--) {
+      const Layout = layoutModules[i].default
+      const layoutProps = {
+        children: element,
+        params,
+        ...layoutLoaderData[i],
+      }
+      element = await Promise.resolve(Layout(layoutProps))
+    }
+
+    // Render the page with hydration script injection
+    return renderWithHydration(element)
+  })
+}
+
+/**
+ * Render element to a Response, injecting hydration script before </body>.
+ */
+function renderWithHydration(element) {
+  // Hono JSX elements have toString() for synchronous rendering
+  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 bodyCloseRegex = /<\\/body>/i
+  const injectedHtml = bodyCloseRegex.test(html)
+    ? html.replace(bodyCloseRegex, hydrationScript + '</body>')
+    : html + hydrationScript
+
+  return new Response(injectedHtml, {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+    },
+  })
+}
+
+function registerRoute(app, pattern, routeModule, middlewareModules) {
+  // Apply middleware
+  for (const mw of middlewareModules) {
+    app.use(pattern, mw)
+  }
+
+  // Apply config middleware if present
+  if (routeModule.config) {
+    app.use(pattern, async (_c, next) => {
+      setRouteConfig(routeModule.config)
+      await next()
+    })
+  }
+
+  // Register each HTTP method handler
+  for (const method of HTTP_METHODS) {
+    const handler = routeModule[method]
+    if (handler && typeof handler === 'function') {
+      const h = handler.length === 2 ? createHandlerAdapter(handler) : handler
+      switch (method) {
+        case 'GET': app.get(pattern, h); break
+        case 'POST': app.post(pattern, h); break
+        case 'PUT': app.put(pattern, h); break
+        case 'PATCH': app.patch(pattern, h); break
+        case 'DELETE': app.delete(pattern, h); break
+        case 'OPTIONS': app.options(pattern, h); break
+        case 'HEAD': app.on('HEAD', [pattern], h); break
+      }
+    }
+  }
+}
+
+// ============================================================================
+// App Initialization
+// ============================================================================
+
+// Initialize renderer
+setActiveRenderer('${rendererName}')
+
+// Create Hono app
+const app = new Hono({ strict: false })
+
+// Add context middleware
+app.use('*', contextMiddleware())
+
+// Register all routes
+${pageRegistrations.join("\n")}
+${routeRegistrations.join("\n")}
+
+// 404 handler
+app.notFound((c) => {
+  return c.json({ error: 'Not Found', path: c.req.path }, 404)
+})
+
+// Error handler
+app.onError((err, c) => {
+  console.error('Request error:', err.message)
+  return c.json({ error: 'Internal Server Error', message: err.message }, 500)
+})
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export default app
+`;
+}
+
+// src/virtual-modules/client-entry.ts
+function generateClientEntry(clientComponents, options) {
+  const { renderer, hydrationEndpoint } = options;
+  if (renderer === "react") {
+    return generateReactClientEntry(clientComponents, hydrationEndpoint);
+  }
+  return generateHonoClientEntry(clientComponents, hydrationEndpoint);
+}
+function generateHonoClientEntry(clientComponents, _hydrationEndpoint) {
+  const bundleMap = Object.fromEntries(
+    Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
+  );
+  return `/**
+ * Generated Cloudwerk Client Entry (Hono JSX)
+ * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
+ */
+
+import { render } from 'hono/jsx/dom'
+import { jsx } from 'hono/jsx/jsx-runtime'
+
+// Bundle map for component lookups
+const bundles = ${JSON.stringify(bundleMap, null, 2)}
+
+// Module cache to avoid re-importing
+const moduleCache = new Map()
+
+/**
+ * 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
+}
+
+/**
+ * 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 bundlePath = bundles[componentId]
+    if (!bundlePath) {
+      console.warn('[Cloudwerk] Unknown client component:', componentId)
+      continue
+    }
+
+    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 jsx() to create a proper element
+      // This allows Hono's reactive system to manage re-renders
+      render(jsx(Component, props), el)
+
+      // 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 generateReactClientEntry(clientComponents, _hydrationEndpoint) {
+  const bundleMap = Object.fromEntries(
+    Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
+  );
+  return `/**
+ * Generated Cloudwerk Client Entry (React)
+ * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
+ */
+
+import { hydrateRoot, createRoot } 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()
+
+// Root cache for React 18 concurrent mode
+const rootCache = new Map()
+
+/**
+ * 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
+}
+
+/**
+ * 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 bundlePath = bundles[componentId]
+    if (!bundlePath) {
+      console.warn('[Cloudwerk] Unknown client component:', componentId)
+      continue
+    }
+
+    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')
+
+      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 }
+`;
+}
+
+// src/transform-client-component.ts
+import { parseSync } from "@swc/core";
+function findDefaultExport(ast) {
+  for (let i = 0; i < ast.body.length; i++) {
+    const node = ast.body[i];
+    if (node.type === "ExportDefaultDeclaration") {
+      const decl = node;
+      if (decl.decl.type === "FunctionExpression") {
+        return {
+          type: "function",
+          name: decl.decl.identifier?.value ?? null,
+          index: i,
+          isAsync: decl.decl.async
+        };
+      }
+      if (decl.decl.type === "ClassExpression") {
+        return {
+          type: "class",
+          name: decl.decl.identifier?.value ?? null,
+          index: i
+        };
+      }
+    }
+    if (node.type === "ExportDefaultExpression") {
+      const expr = node;
+      if (expr.expression.type === "Identifier") {
+        return {
+          type: "identifier",
+          name: expr.expression.value,
+          index: i
+        };
+      }
+      if (expr.expression.type === "ArrowFunctionExpression") {
+        return {
+          type: "arrow",
+          name: null,
+          index: i,
+          isAsync: expr.expression.async
+        };
+      }
+      if (expr.expression.type === "FunctionExpression") {
+        return {
+          type: "function",
+          name: expr.expression.identifier?.value ?? null,
+          index: i,
+          isAsync: expr.expression.async
+        };
+      }
+      if (expr.expression.type === "ClassExpression") {
+        return {
+          type: "class",
+          name: expr.expression.identifier?.value ?? null,
+          index: i
+        };
+      }
+    }
+    if (node.type === "ExportNamedDeclaration") {
+      const specifiers = node.specifiers;
+      for (const spec of specifiers) {
+        if (spec.type === "ExportSpecifier") {
+          const exported = spec.exported;
+          if (exported && exported.type === "Identifier" && exported.value === "default") {
+            if (spec.orig.type === "Identifier") {
+              return {
+                type: "named-export",
+                name: spec.orig.value,
+                index: i
+              };
+            }
+          }
+        }
+      }
+    }
+  }
+  return { type: null, name: null, index: -1 };
+}
+function transformClientComponent(code, options) {
+  const { componentId, bundlePath } = options;
+  try {
+    const ast = parseSync(code, {
+      syntax: "typescript",
+      tsx: true,
+      comments: true
+    });
+    const exportInfo = findDefaultExport(ast);
+    if (exportInfo.type === null) {
+      return {
+        code,
+        success: false,
+        error: `Could not find default export in client component: ${componentId}`
+      };
+    }
+    let transformed = code.replace(/['"]use client['"]\s*;?\s*\n?/g, "");
+    const wrapperImport = `import { createClientComponentWrapper as __createWrapper } from '@cloudwerk/ui/client'
+`;
+    const metaObj = JSON.stringify({ componentId, bundlePath });
+    switch (exportInfo.type) {
+      case "function": {
+        if (exportInfo.name) {
+          const asyncPrefix = exportInfo.isAsync ? "async " : "";
+          transformed = transformed.replace(
+            new RegExp(`export\\s+default\\s+${asyncPrefix}function\\s+${exportInfo.name}`),
+            `${asyncPrefix}function ${exportInfo.name}`
+          );
+          transformed = wrapperImport + transformed;
+          transformed += `
+const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
+export default __WrappedComponent
+`;
+        } else {
+          const asyncPrefix = exportInfo.isAsync ? "async " : "";
+          transformed = transformed.replace(
+            new RegExp(`export\\s+default\\s+${asyncPrefix}function\\s*\\(`),
+            `const __OriginalComponent = ${asyncPrefix}function(`
+          );
+          transformed = wrapperImport + transformed;
+          transformed += `
+const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
+export default __WrappedComponent
+`;
+        }
+        break;
+      }
+      case "arrow": {
+        transformed = transformed.replace(
+          /export\s+default/,
+          "const __OriginalComponent ="
+        );
+        transformed = wrapperImport + transformed;
+        transformed += `
+const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
+export default __WrappedComponent
+`;
+        break;
+      }
+      case "class": {
+        if (exportInfo.name) {
+          transformed = transformed.replace(
+            new RegExp(`export\\s+default\\s+class\\s+${exportInfo.name}`),
+            `class ${exportInfo.name}`
+          );
+          transformed = wrapperImport + transformed;
+          transformed += `
+const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
+export default __WrappedComponent
+`;
+        } else {
+          transformed = transformed.replace(
+            /export\s+default\s+class\s*\{/,
+            "const __OriginalComponent = class {"
+          );
+          transformed = wrapperImport + transformed;
+          transformed += `
+const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
+export default __WrappedComponent
+`;
+        }
+        break;
+      }
+      case "identifier": {
+        transformed = transformed.replace(
+          /export\s+default\s+\w+\s*;?\s*$/m,
+          ""
+        );
+        transformed = wrapperImport + transformed;
+        transformed += `
+const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
+export default __WrappedComponent
+`;
+        break;
+      }
+      case "named-export": {
+        transformed = transformed.replace(
+          /export\s*\{\s*\w+\s+as\s+default\s*\}\s*;?/,
+          ""
+        );
+        transformed = wrapperImport + transformed;
+        transformed += `
+const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
+export default __WrappedComponent
+`;
+        break;
+      }
+    }
+    return {
+      code: transformed,
+      success: true
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return {
+      code,
+      success: false,
+      error: `Failed to parse client component ${componentId}: ${message}`
+    };
+  }
+}
+
+// src/plugin.ts
+function cloudwerkPlugin(options = {}) {
+  let state = null;
+  let server = null;
+  async function buildManifest(root) {
+    if (!state) {
+      throw new Error("Plugin state not initialized");
+    }
+    const routesPath = resolveRoutesPath(
+      state.options.routesDir,
+      state.options.appDir,
+      root
+    );
+    state.scanResult = await scanRoutes(routesPath, {
+      extensions: state.options.config.extensions
+    });
+    state.manifest = buildRouteManifest(
+      state.scanResult,
+      routesPath,
+      resolveLayouts,
+      resolveMiddleware
+    );
+    state.serverEntryCache = null;
+    state.clientEntryCache = null;
+    if (state.options.verbose) {
+      console.log(`[cloudwerk] Found ${state.manifest.routes.length} routes`);
+    }
+  }
+  function isRouteFile(filePath) {
+    if (!state) return false;
+    const appDir = path.resolve(state.options.root, state.options.appDir);
+    if (!filePath.startsWith(appDir)) return false;
+    const basename2 = path.basename(filePath);
+    const nameWithoutExt = basename2.replace(/\.(ts|tsx|js|jsx)$/, "");
+    return ROUTE_FILE_NAMES.includes(nameWithoutExt);
+  }
+  function invalidateVirtualModules() {
+    if (!server) return;
+    const idsToInvalidate = [
+      RESOLVED_VIRTUAL_IDS.SERVER_ENTRY,
+      RESOLVED_VIRTUAL_IDS.CLIENT_ENTRY,
+      RESOLVED_VIRTUAL_IDS.MANIFEST
+    ];
+    for (const id of idsToInvalidate) {
+      const mod = server.moduleGraph.getModuleById(id);
+      if (mod) {
+        server.moduleGraph.invalidateModule(mod);
+      }
+    }
+    server.ws.send({ type: "full-reload", path: "*" });
+  }
+  return {
+    name: "cloudwerk",
+    /**
+     * Resolve configuration and build initial manifest.
+     */
+    async configResolved(config) {
+      const root = config.root;
+      let detectedServerEntry = options.serverEntry ? path.resolve(root, options.serverEntry) : null;
+      if (!detectedServerEntry) {
+        const conventionalPaths = [
+          path.resolve(root, "app/server.ts"),
+          path.resolve(root, "app/server.tsx"),
+          path.resolve(root, "src/server.ts"),
+          path.resolve(root, "src/server.tsx")
+        ];
+        for (const p of conventionalPaths) {
+          if (fs.existsSync(p)) {
+            detectedServerEntry = p;
+            if (options.verbose) {
+              console.log(`[cloudwerk] Detected custom server entry: ${p}`);
+            }
+            break;
+          }
+        }
+      }
+      const cloudwerkConfig = await loadConfig(root);
+      const resolvedOptions = {
+        appDir: options.appDir ?? cloudwerkConfig.appDir,
+        routesDir: options.routesDir ?? cloudwerkConfig.routesDir ?? "routes",
+        config: { ...cloudwerkConfig, ...options.config },
+        serverEntry: detectedServerEntry,
+        clientEntry: options.clientEntry ?? null,
+        verbose: options.verbose ?? false,
+        hydrationEndpoint: options.hydrationEndpoint ?? "/__cloudwerk",
+        renderer: options.renderer ?? cloudwerkConfig.ui?.renderer ?? "hono-jsx",
+        root
+      };
+      state = {
+        options: resolvedOptions,
+        manifest: {
+          routes: [],
+          layouts: /* @__PURE__ */ new Map(),
+          middleware: /* @__PURE__ */ new Map(),
+          errors: [],
+          warnings: [],
+          generatedAt: /* @__PURE__ */ new Date(),
+          rootDir: ""
+        },
+        scanResult: {
+          routes: [],
+          layouts: [],
+          middleware: [],
+          loading: [],
+          errors: [],
+          notFound: []
+        },
+        clientComponents: /* @__PURE__ */ new Map(),
+        serverEntryCache: null,
+        clientEntryCache: null
+      };
+      await buildManifest(root);
+    },
+    /**
+     * Configure the dev server with file watching.
+     */
+    configureServer(devServer) {
+      server = devServer;
+      if (!state) return;
+      const appDir = path.resolve(state.options.root, state.options.appDir);
+      devServer.watcher.on("add", async (filePath) => {
+        if (isRouteFile(filePath)) {
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Route added: ${path.relative(appDir, filePath)}`);
+          }
+          await buildManifest(state.options.root);
+          invalidateVirtualModules();
+        }
+      });
+      devServer.watcher.on("unlink", async (filePath) => {
+        if (isRouteFile(filePath)) {
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Route removed: ${path.relative(appDir, filePath)}`);
+          }
+          await buildManifest(state.options.root);
+          invalidateVirtualModules();
+        }
+      });
+      devServer.watcher.on("change", async (filePath) => {
+        if (isRouteFile(filePath)) {
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Route changed: ${path.relative(appDir, filePath)}`);
+          }
+          await buildManifest(state.options.root);
+          invalidateVirtualModules();
+        }
+      });
+    },
+    /**
+     * Resolve virtual module IDs.
+     */
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_IDS.SERVER_ENTRY) {
+        return RESOLVED_VIRTUAL_IDS.SERVER_ENTRY;
+      }
+      if (id === VIRTUAL_MODULE_IDS.CLIENT_ENTRY) {
+        return RESOLVED_VIRTUAL_IDS.CLIENT_ENTRY;
+      }
+      if (id === VIRTUAL_MODULE_IDS.MANIFEST) {
+        return RESOLVED_VIRTUAL_IDS.MANIFEST;
+      }
+      return null;
+    },
+    /**
+     * Load virtual module content.
+     */
+    load(id) {
+      if (!state) return null;
+      if (id === RESOLVED_VIRTUAL_IDS.SERVER_ENTRY) {
+        if (state.options.serverEntry) {
+          return `export { default } from '${state.options.serverEntry}'`;
+        }
+        if (!state.serverEntryCache) {
+          state.serverEntryCache = generateServerEntry(
+            state.manifest,
+            state.scanResult,
+            state.options
+          );
+        }
+        return state.serverEntryCache;
+      }
+      if (id === RESOLVED_VIRTUAL_IDS.CLIENT_ENTRY) {
+        if (state.options.clientEntry) {
+          return `export * from '${state.options.clientEntry}'`;
+        }
+        if (!state.clientEntryCache) {
+          state.clientEntryCache = generateClientEntry(
+            state.clientComponents,
+            state.options
+          );
+        }
+        return state.clientEntryCache;
+      }
+      if (id === RESOLVED_VIRTUAL_IDS.MANIFEST) {
+        return `export default ${JSON.stringify(
+          {
+            routes: state.manifest.routes.map((r) => ({
+              urlPattern: r.urlPattern,
+              filePath: r.filePath,
+              fileType: r.fileType
+            })),
+            generatedAt: state.manifest.generatedAt.toISOString()
+          },
+          null,
+          2
+        )}`;
+      }
+      return null;
+    },
+    /**
+     * Transform hook to detect and wrap client components.
+     */
+    transform(code, id) {
+      if (!state) return null;
+      if (id.includes("node_modules")) return null;
+      if (!id.endsWith(".tsx") && !id.endsWith(".ts")) return null;
+      if (hasUseClientDirective(code)) {
+        const componentId = generateComponentId(id, state.options.root);
+        const bundlePath = `${state.options.hydrationEndpoint}/${componentId}.js`;
+        const info = {
+          componentId,
+          bundlePath,
+          absolutePath: id
+        };
+        state.clientComponents.set(id, info);
+        state.clientEntryCache = null;
+        if (state.options.verbose) {
+          console.log(`[cloudwerk] Detected client component: ${componentId}`);
+        }
+        const result = transformClientComponent(code, {
+          componentId,
+          bundlePath: id
+          // Use file path for Vite to resolve in dev mode
+        });
+        if (!result.success && state.options.verbose) {
+          console.warn(`[cloudwerk] ${result.error}`);
+        }
+        return {
+          code: result.code,
+          map: null
+        };
+      }
+      return null;
+    }
+  };
+}
+export {
+  RESOLVED_VIRTUAL_IDS,
+  VIRTUAL_MODULE_IDS,
+  cloudwerkPlugin,
+  cloudwerkPlugin as default,
+  generateClientEntry,
+  generateServerEntry
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cloudwerk/vite-plugin",
+  "version": "0.1.1",
+  "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/squirrelsoft-dev/cloudwerk.git",
+    "directory": "packages/vite-plugin"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@swc/core": "^1.3.100",
+    "@cloudwerk/core": "^0.7.0",
+    "@cloudwerk/ui": "^0.7.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0",
+    "@hono/vite-dev-server": ">=0.18.0",
+    "hono": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@hono/vite-dev-server": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^1.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "test": "vitest --run --passWithNoTests",
+    "test:watch": "vitest"
+  }
+}