@cloudwerk/vite-plugin 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -95,6 +95,8 @@ interface ClientComponentInfo {
     bundlePath: string;
     /** Absolute file path */
     absolutePath: string;
+    /** Named export name (undefined means default export) */
+    exportName?: string;
 }
 /**
  * Information about a CSS import detected in a layout or page.

package/dist/index.js

@@ -1101,9 +1101,12 @@ function generateClientEntry(clientComponents, cssImports, options, manifest) {
 }
 function generateStaticImportsAndMap(clientComponents) {
   const components = Array.from(clientComponents.values());
-  const imports = components.map(
-    (info, index) => `import Component${index} from '${info.absolutePath}'`
-  ).join("\n");
+  const imports = components.map((info, index) => {
+    if (info.exportName) {
+      return `import { ${info.exportName} as Component${index} } from '${info.absolutePath}'`;
+    }
+    return `import Component${index} from '${info.absolutePath}'`;
+  }).join("\n");
   const componentMapEntries = components.map(
     (info, index) => `  '${info.componentId}': Component${index}`
   ).join(",\n");
@@ -1195,7 +1198,10 @@ import { jsx } from 'hono/jsx/jsx-runtime'`,
     });
   }
   const bundleMap = Object.fromEntries(
-    Array.from(clientComponents.values()).map((info) => [info.componentId, `/@fs${info.absolutePath}`])
+    Array.from(clientComponents.values()).map((info) => [
+      info.componentId,
+      { path: `/@fs${info.absolutePath}`, exportName: info.exportName ?? null }
+    ])
   );
   return `/**
  * Generated Cloudwerk Client Entry (Hono JSX)
@@ -1244,19 +1250,19 @@ async function hydrate() {
       continue
     }
 
-    const bundlePath = bundles[componentId]
-    if (!bundlePath) {
+    const bundle = bundles[componentId]
+    if (!bundle) {
       console.warn('[Cloudwerk] Unknown client component:', componentId)
       continue
     }
 
     try {
       const props = propsJson ? JSON.parse(propsJson) : {}
-      const module = await loadComponent(bundlePath)
-      const Component = module.default
+      const module = await loadComponent(bundle.path)
+      const Component = bundle.exportName ? module[bundle.exportName] : module.default
 
       if (!Component) {
-        console.error('[Cloudwerk] No default export in component:', componentId)
+        console.error('[Cloudwerk] No export found in component:', componentId)
         continue
       }
 
@@ -1472,6 +1478,57 @@ function findDefaultExport(ast) {
   }
   return { type: null, name: null, index: -1 };
 }
+function findNamedExports(ast) {
+  const results = [];
+  for (let i = 0; i < ast.body.length; i++) {
+    const node = ast.body[i];
+    if (node.type === "ExportDeclaration") {
+      const decl = node.declaration;
+      if (decl.type === "FunctionDeclaration" && decl.identifier) {
+        const name = decl.identifier.value;
+        if (/^[A-Z]/.test(name)) {
+          results.push({
+            name,
+            type: "function",
+            index: i,
+            spanStart: node.span.start,
+            spanEnd: node.span.end,
+            isAsync: decl.async
+          });
+        }
+      }
+      if (decl.type === "ClassDeclaration" && decl.identifier) {
+        const name = decl.identifier.value;
+        if (/^[A-Z]/.test(name)) {
+          results.push({
+            name,
+            type: "class",
+            index: i,
+            spanStart: node.span.start,
+            spanEnd: node.span.end
+          });
+        }
+      }
+      if (decl.type === "VariableDeclaration") {
+        for (const declarator of decl.declarations) {
+          if (declarator.id.type === "Identifier") {
+            const name = declarator.id.value;
+            if (/^[A-Z]/.test(name)) {
+              results.push({
+                name,
+                type: "const",
+                index: i,
+                spanStart: node.span.start,
+                spanEnd: node.span.end
+              });
+            }
+          }
+        }
+      }
+    }
+  }
+  return results;
+}
 function transformClientComponent(code, options) {
   const { componentId, bundlePath } = options;
   try {
@@ -1481,7 +1538,8 @@ function transformClientComponent(code, options) {
       comments: true
     });
     const exportInfo = findDefaultExport(ast);
-    if (exportInfo.type === null) {
+    const namedExports = findNamedExports(ast);
+    if (exportInfo.type === null && namedExports.length === 0) {
       return {
         code,
         success: false,
@@ -1492,97 +1550,134 @@ function transformClientComponent(code, options) {
     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 wrappedExports = [];
+    if (namedExports.length > 0) {
+      const sorted = [...namedExports].sort((a, b) => b.spanStart - a.spanStart);
+      for (const namedExport of sorted) {
+        const namedMetaObj = JSON.stringify({
+          componentId: `${componentId}__${namedExport.name}`,
+          bundlePath
+        });
+        const originalName = `__${namedExport.name}_original`;
+        switch (namedExport.type) {
+          case "function": {
+            const asyncPrefix = namedExport.isAsync ? "async " : "";
+            transformed = transformed.replace(
+              new RegExp(`export\\s+${asyncPrefix}function\\s+${namedExport.name}\\s*\\(`),
+              `${asyncPrefix}function ${originalName}(`
+            );
+            break;
+          }
+          case "class": {
+            transformed = transformed.replace(
+              new RegExp(`export\\s+class\\s+${namedExport.name}\\s`),
+              `class ${originalName} `
+            );
+            break;
+          }
+          case "const": {
+            transformed = transformed.replace(
+              new RegExp(`export\\s+(const|let|var)\\s+${namedExport.name}\\s*=`),
+              `const ${originalName} =`
+            );
+            break;
+          }
+        }
+        transformed += `
+export const ${namedExport.name} = __createWrapper(${originalName}, ${namedMetaObj})
+`;
+        wrappedExports.push(namedExport.name);
+      }
+    }
+    if (exportInfo.type !== null) {
+      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 += `
 const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
 export default __WrappedComponent
 `;
-        } else {
-          const asyncPrefix = exportInfo.isAsync ? "async " : "";
+          } else {
+            const asyncPrefix = exportInfo.isAsync ? "async " : "";
+            transformed = transformed.replace(
+              new RegExp(`export\\s+default\\s+${asyncPrefix}function\\s*\\(`),
+              `const __OriginalComponent = ${asyncPrefix}function(`
+            );
+            transformed += `
+const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
+export default __WrappedComponent
+`;
+          }
+          break;
+        }
+        case "arrow": {
           transformed = transformed.replace(
-            new RegExp(`export\\s+default\\s+${asyncPrefix}function\\s*\\(`),
-            `const __OriginalComponent = ${asyncPrefix}function(`
+            /export\s+default/,
+            "const __OriginalComponent ="
           );
-          transformed = wrapperImport + transformed;
           transformed += `
 const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
 export default __WrappedComponent
 `;
+          break;
         }
-        break;
-      }
-      case "arrow": {
-        transformed = transformed.replace(
-          /export\s+default/,
-          "const __OriginalComponent ="
-        );
-        transformed = wrapperImport + transformed;
-        transformed += `
+        case "class": {
+          if (exportInfo.name) {
+            transformed = transformed.replace(
+              new RegExp(`export\\s+default\\s+class\\s+${exportInfo.name}`),
+              `class ${exportInfo.name}`
+            );
+            transformed += `
+const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
+export default __WrappedComponent
+`;
+          } else {
+            transformed = transformed.replace(
+              /export\s+default\s+class\s*\{/,
+              "const __OriginalComponent = class {"
+            );
+            transformed += `
 const __WrappedComponent = __createWrapper(__OriginalComponent, ${metaObj})
 export default __WrappedComponent
 `;
-        break;
-      }
-      case "class": {
-        if (exportInfo.name) {
+          }
+          break;
+        }
+        case "identifier": {
           transformed = transformed.replace(
-            new RegExp(`export\\s+default\\s+class\\s+${exportInfo.name}`),
-            `class ${exportInfo.name}`
+            /export\s+default\s+\w+\s*;?\s*$/m,
+            ""
           );
-          transformed = wrapperImport + transformed;
           transformed += `
 const __WrappedComponent = __createWrapper(${exportInfo.name}, ${metaObj})
 export default __WrappedComponent
 `;
-        } else {
+          break;
+        }
+        case "named-export": {
           transformed = transformed.replace(
-            /export\s+default\s+class\s*\{/,
-            "const __OriginalComponent = class {"
+            /export\s*\{\s*\w+\s+as\s+default\s*\}\s*;?/,
+            ""
           );
-          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;
+          break;
+        }
       }
     }
+    transformed = wrapperImport + transformed;
     return {
       code: transformed,
-      success: true
+      success: true,
+      wrappedExports: wrappedExports.length > 0 ? wrappedExports : void 0,
+      hasDefaultExport: exportInfo.type !== null
     };
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
@@ -2726,6 +2821,25 @@ function cloudwerkPlugin(options = {}) {
             map: null
           };
         }
+        if (result.wrappedExports && result.wrappedExports.length > 0) {
+          for (const exportName of result.wrappedExports) {
+            const namedComponentId = `${componentId}__${exportName}`;
+            const namedBundlePath = `${state.options.hydrationEndpoint}/${namedComponentId}.js`;
+            const namedInfo = {
+              componentId: namedComponentId,
+              bundlePath: namedBundlePath,
+              absolutePath: id,
+              exportName
+            };
+            state.clientComponents.set(`${id}::${exportName}`, namedInfo);
+            if (state.options.verbose) {
+              console.log(`[cloudwerk] Detected named client component: ${namedComponentId}`);
+            }
+          }
+          if (!result.hasDefaultExport) {
+            state.clientComponents.delete(id);
+          }
+        }
         return {
           code: result.code,
           map: null

package/package.json

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