@cloudwerk/vite-plugin 0.7.0 → 0.8.1

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);
@@ -1672,8 +1767,111 @@ function stripServerExports(code) {
     const replacement = removal.replacement ?? "";
     result = result.slice(0, start) + replacement + result.slice(end);
   }
+  result = removeUnusedImports(result);
   return { code: result, stripped };
 }
+function removeUnusedImports(code) {
+  const ast = parseSync2(code, {
+    syntax: "typescript",
+    tsx: true,
+    comments: true
+  });
+  const offset = ast.span.start;
+  const imports = [];
+  for (const node of ast.body) {
+    if (node.type !== "ImportDeclaration") continue;
+    if (node.specifiers.length === 0) continue;
+    const specifiers = [];
+    for (const spec of node.specifiers) {
+      if (spec.type === "ImportSpecifier") {
+        specifiers.push({ localName: spec.local.value });
+      } else if (spec.type === "ImportDefaultSpecifier") {
+        specifiers.push({ localName: spec.local.value });
+      } else if (spec.type === "ImportNamespaceSpecifier") {
+        specifiers.push({ localName: spec.local.value });
+      }
+    }
+    if (specifiers.length > 0) {
+      imports.push({
+        node,
+        start: node.span.start,
+        end: node.span.end,
+        specifiers
+      });
+    }
+  }
+  if (imports.length === 0) return code;
+  const importRanges = imports.map((i) => ({ start: i.start - offset, end: i.end - offset }));
+  let remaining = "";
+  let pos = 0;
+  for (const range of importRanges.sort((a, b) => a.start - b.start)) {
+    remaining += code.slice(pos, range.start);
+    pos = range.end;
+  }
+  remaining += code.slice(pos);
+  const removals = [];
+  for (const imp of imports) {
+    const unusedSpecs = [];
+    const usedSpecs = [];
+    for (const spec of imp.specifiers) {
+      const regex = new RegExp(`\\b${escapeRegExp(spec.localName)}\\b`);
+      if (regex.test(remaining)) {
+        usedSpecs.push(spec);
+      } else {
+        unusedSpecs.push(spec.localName);
+      }
+    }
+    if (unusedSpecs.length === 0) continue;
+    if (usedSpecs.length === 0) {
+      removals.push({ start: imp.start, end: imp.end });
+    } else {
+      const importNode = imp.node;
+      const source = code.slice(
+        importNode.source.span.start - offset,
+        importNode.source.span.end - offset
+      );
+      const typeOnly = importNode.typeOnly ? "type " : "";
+      const keptNamed = [];
+      let keptDefault = null;
+      let keptNamespace = null;
+      for (const spec of importNode.specifiers) {
+        const localName = spec.local.value;
+        if (!usedSpecs.some((u) => u.localName === localName)) continue;
+        if (spec.type === "ImportDefaultSpecifier") {
+          keptDefault = localName;
+        } else if (spec.type === "ImportNamespaceSpecifier") {
+          keptNamespace = localName;
+        } else if (spec.type === "ImportSpecifier") {
+          const imported = spec.imported;
+          if (imported && imported.type === "Identifier" && imported.value !== localName) {
+            keptNamed.push(`${imported.value} as ${localName}`);
+          } else {
+            keptNamed.push(localName);
+          }
+        }
+      }
+      const parts = [];
+      if (keptDefault) parts.push(keptDefault);
+      if (keptNamespace) parts.push(`* as ${keptNamespace}`);
+      if (keptNamed.length > 0) parts.push(`{ ${keptNamed.join(", ")} }`);
+      const replacement = `import ${typeOnly}${parts.join(", ")} from ${source}`;
+      removals.push({ start: imp.start, end: imp.end, replacement });
+    }
+  }
+  if (removals.length === 0) return code;
+  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 result;
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 
 // src/wrangler-watcher.ts
 import * as fs from "fs";
@@ -2726,6 +2924,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.1",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "@cloudwerk/ui": "^0.15.6"
   },
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "@hono/vite-dev-server": ">=0.18.0",
     "hono": "^4.0.0"
   },