@cloudwerk/vite-plugin 0.6.9 → 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);
@@ -1594,6 +1689,87 @@ export default __WrappedComponent
   }
 }
 
+// src/strip-server-exports.ts
+import { parseSync as parseSync2 } from "@swc/core";
+var SERVER_ONLY_EXPORTS = /* @__PURE__ */ new Set(["loader", "config", "generateStaticParams"]);
+function stripServerExports(code) {
+  const ast = parseSync2(code, {
+    syntax: "typescript",
+    tsx: true,
+    comments: true
+  });
+  const stripped = [];
+  const removals = [];
+  for (const node of ast.body) {
+    if (node.type === "ExportDeclaration") {
+      const decl = node.declaration;
+      if (decl.type === "FunctionDeclaration" && SERVER_ONLY_EXPORTS.has(decl.identifier.value)) {
+        stripped.push(decl.identifier.value);
+        removals.push({ start: node.span.start, end: node.span.end });
+        continue;
+      }
+      if (decl.type === "VariableDeclaration") {
+        const names = decl.declarations.map((d) => d.id.type === "Identifier" ? d.id.value : null).filter(Boolean);
+        const allServerOnly = names.length > 0 && names.every((n) => SERVER_ONLY_EXPORTS.has(n));
+        if (allServerOnly) {
+          stripped.push(...names);
+          removals.push({ start: node.span.start, end: node.span.end });
+        }
+      }
+    }
+    if (node.type === "ExportNamedDeclaration") {
+      const specifiers = node.specifiers;
+      if (specifiers.length === 0) continue;
+      const serverSpecifiers = [];
+      const keptSpecifiers = [];
+      for (const spec of specifiers) {
+        if (spec.type === "ExportSpecifier") {
+          const exportedName = spec.exported?.type === "Identifier" ? spec.exported.value : null;
+          const origName = spec.orig.type === "Identifier" ? spec.orig.value : null;
+          const effectiveName = exportedName ?? origName;
+          if (effectiveName && SERVER_ONLY_EXPORTS.has(effectiveName)) {
+            serverSpecifiers.push(effectiveName);
+          } else {
+            if (origName) {
+              if (exportedName && exportedName !== origName) {
+                keptSpecifiers.push(`${origName} as ${exportedName}`);
+              } else {
+                keptSpecifiers.push(origName);
+              }
+            }
+          }
+        }
+      }
+      if (serverSpecifiers.length === 0) continue;
+      stripped.push(...serverSpecifiers);
+      if (keptSpecifiers.length === 0) {
+        removals.push({ start: node.span.start, end: node.span.end });
+      } else {
+        const source = node.source ? ` from ${code.slice(node.source.span.start - ast.span.start, node.source.span.end - ast.span.start)}` : "";
+        const replacement = `export { ${keptSpecifiers.join(", ")} }${source}`;
+        removals.push({
+          start: node.span.start,
+          end: node.span.end,
+          replacement
+        });
+      }
+    }
+  }
+  if (removals.length === 0) {
+    return { code, stripped: [] };
+  }
+  const offset = ast.span.start;
+  let result = code;
+  removals.sort((a, b) => b.start - a.start);
+  for (const removal of removals) {
+    const start = removal.start - offset;
+    const end = removal.end - offset;
+    const replacement = removal.replacement ?? "";
+    result = result.slice(0, start) + replacement + result.slice(end);
+  }
+  return { code: result, stripped };
+}
+
 // src/wrangler-watcher.ts
 import * as fs from "fs";
 import * as path2 from "path";
@@ -2529,7 +2705,7 @@ function cloudwerkPlugin(options = {}) {
      * Transform hook to detect and wrap client components,
      * and rewrite binding imports to use the bindings proxy.
      */
-    transform(code, id) {
+    transform(code, id, options2) {
       if (!state) return null;
       if (id.includes("node_modules")) return null;
       if (!id.endsWith(".tsx") && !id.endsWith(".ts")) return null;
@@ -2613,6 +2789,13 @@ function cloudwerkPlugin(options = {}) {
           }
         }
       }
+      if ((isLayout || isPage) && !options2?.ssr) {
+        const stripResult = stripServerExports(transformedCode);
+        if (stripResult.stripped.length > 0) {
+          transformedCode = stripResult.code;
+          wasTransformed = true;
+        }
+      }
       if (hasUseClientDirective(transformedCode)) {
         const componentId = generateComponentId(id, state.options.root);
         const bundlePath = `${state.options.hydrationEndpoint}/${componentId}.js`;
@@ -2638,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.6.9",
+  "version": "0.8.0",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",