exportc 0.0.1 → 0.0.3

package/README.md

@@ -8,12 +8,14 @@ Add [export](https://github.com/ihasq/export) to existing Vite projects.
 # In your existing Vite project
 npx exportc init
 
-# Install dependencies
-cd export && npm install
+# Install export dependencies
+cd export && npm install && cd ..
 
-# Start development (two terminals)
-npm run export:dev   # Terminal 1: Wrangler dev server
-npm run dev          # Terminal 2: Vite dev server
+# Start development (Wrangler starts automatically!)
+npm run dev
+
+# Deploy to Cloudflare Workers Sites
+npm run export
 ```
 
 ## Usage
@@ -49,7 +51,7 @@ Deploy your exports to Cloudflare Workers.
 
 ## Vite Plugin
 
-The `exportPlugin` transforms `export:/` imports:
+The `exportPlugin` automatically starts Wrangler and transforms `export:/` imports:
 
 ```typescript
 // vite.config.ts
@@ -58,16 +60,23 @@ import { exportPlugin } from "exportc/vite";
 
 export default defineConfig({
   plugins: [
-    exportPlugin({
-      // Development server (default: http://localhost:8787)
-      dev: "http://localhost:8787",
-      // Production Worker URL (required for production builds)
-      production: "https://my-api.workers.dev",
-    }),
+    exportPlugin(),
+    // Production URL is auto-detected from export/package.json name
+    // Override with: exportPlugin({ production: "https://custom.workers.dev" })
   ],
 });
 ```
 
+**Development** (`npm run dev`):
+1. Automatically starts Wrangler dev server
+2. Waits for it to be ready
+3. Transforms `export:/` imports to `http://localhost:8787`
+
+**Production** (`npm run export`):
+1. Builds Vite app
+2. Deploys to Workers Sites (static assets + server exports)
+3. `export:/` imports resolve to `https://{worker-name}.workers.dev`
+
 ## Project Structure
 
 After running `exportc init`:

package/commands/deploy.js

@@ -23,27 +23,54 @@ export async function deploy(argv) {
 
   p.intro(pc.bgCyan(pc.black(" exportc deploy ")));
 
-  const s = p.spinner();
-  s.start("Deploying to Cloudflare Workers...");
+  // Step 1: Build Vite
+  const s1 = p.spinner();
+  s1.start("Building with Vite...");
 
-  // Run deploy
-  const deployProcess = spawn("npm", ["run", "deploy"], {
+  const viteBuild = spawn("npm", ["run", "build"], {
+    cwd,
+    stdio: ["ignore", "pipe", "pipe"],
+    shell: true,
+  });
+
+  let viteBuildOutput = "";
+  viteBuild.stdout.on("data", (data) => { viteBuildOutput += data.toString(); });
+  viteBuild.stderr.on("data", (data) => { viteBuildOutput += data.toString(); });
+
+  const viteExitCode = await new Promise((resolve) => {
+    viteBuild.on("close", resolve);
+    viteBuild.on("error", () => resolve(1));
+  });
+
+  if (viteExitCode !== 0) {
+    s1.stop("Vite build failed");
+    console.error(viteBuildOutput);
+    process.exit(1);
+  }
+
+  s1.stop("Vite build complete");
+
+  // Step 2: Deploy to Cloudflare Workers
+  const s2 = p.spinner();
+  s2.start("Deploying to Cloudflare Workers...");
+
+  const wranglerDeploy = spawn("npm", ["run", "deploy"], {
     cwd: exportDir,
     stdio: "inherit",
     shell: true,
   });
 
-  const exitCode = await new Promise((resolve) => {
-    deployProcess.on("close", resolve);
-    deployProcess.on("error", () => resolve(1));
+  const wranglerExitCode = await new Promise((resolve) => {
+    wranglerDeploy.on("close", resolve);
+    wranglerDeploy.on("error", () => resolve(1));
   });
 
-  if (exitCode !== 0) {
-    s.stop("Deployment failed");
+  if (wranglerExitCode !== 0) {
+    s2.stop("Deployment failed");
     process.exit(1);
   }
 
-  s.stop("Deployed successfully!");
+  s2.stop("Deployed successfully!");
 
   // Read worker name from export/package.json
   const exportPkgPath = path.join(exportDir, "package.json");
@@ -51,13 +78,16 @@ export async function deploy(argv) {
   const workerName = exportPkg.name;
 
   p.note(
-    `Your exports are now live at:
+    `Your app is now live at:
 ${pc.cyan(`https://${workerName}.workers.dev/`)}
 
-${pc.bold("Update your Vite config for production:")}
-${pc.dim("// vite.config.ts")}
-${pc.cyan(`exportPlugin({ production: "https://${workerName}.workers.dev" })`)}`,
-    "Deployed"
+${pc.bold("What was deployed:")}
+- Static assets (Vite build output)
+- Server exports (export/ directory)
+
+${pc.bold("Client imports will resolve to:")}
+${pc.cyan(`https://${workerName}.workers.dev/`)}`,
+    "Workers Sites"
   );
 
   p.outro("Done!");

package/commands/init.js

@@ -132,6 +132,15 @@ export class Counter {
     fs.writeFileSync(indexPath, template);
   }
 
+  // Detect Vite build output directory from vite.config
+  let viteBuildOutDir = "dist"; // default
+  const viteConfigPath = path.join(cwd, viteConfig);
+  let viteConfigContent = fs.readFileSync(viteConfigPath, "utf8");
+  const outDirMatch = viteConfigContent.match(/outDir:\s*['"]([^'"]+)['"]/);
+  if (outDirMatch) {
+    viteBuildOutDir = outDirMatch[1];
+  }
+
   // Create export/package.json
   const exportPkgPath = path.join(exportDir, "package.json");
   const exportPkg = {
@@ -139,6 +148,7 @@ export class Counter {
     private: true,
     type: "module",
     exports: "./",
+    main: `../${viteBuildOutDir}`, // Static assets from Vite build
     scripts: {
       dev: "generate-export-types && wrangler dev",
       deploy: "generate-export-types && wrangler deploy",
@@ -157,26 +167,23 @@ export class Counter {
 
   fs.writeFileSync(exportPkgPath, JSON.stringify(exportPkg, null, 2) + "\n");
 
-  // Update main package.json scripts
+  // Update main package.json
   pkg.scripts = pkg.scripts || {};
-  if (!pkg.scripts["export:dev"]) {
-    pkg.scripts["export:dev"] = "cd export && npm run dev";
-  }
-  if (!pkg.scripts["export:deploy"]) {
-    pkg.scripts["export:deploy"] = "cd export && npm run deploy";
+
+  // Add export script: build + deploy as Workers Sites
+  if (!pkg.scripts["export"]) {
+    pkg.scripts["export"] = "vite build && cd export && npm run deploy";
   }
 
   // Add exportc to devDependencies
   pkg.devDependencies = pkg.devDependencies || {};
   if (!pkg.devDependencies.exportc) {
-    pkg.devDependencies.exportc = "^0.0.1";
+    pkg.devDependencies.exportc = "^0.0.2";
   }
 
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
 
   // Update vite.config
-  const viteConfigPath = path.join(cwd, viteConfig);
-  let viteConfigContent = fs.readFileSync(viteConfigPath, "utf8");
 
   // Check if export plugin is already added
   if (!viteConfigContent.includes("exportc/vite")) {
@@ -293,16 +300,19 @@ ${pc.cyan("export-env.d.ts")}     ${pc.dim("# Type declarations for export:/ imp
 
 ${pc.bold("Next steps:")}
 
-1. Install dependencies:
-   ${pc.cyan("cd export && npm install")}
+1. Install export dependencies:
+   ${pc.cyan("cd export && npm install && cd ..")}
 
-2. Start development:
-   ${pc.cyan("npm run export:dev")}   ${pc.dim("# In one terminal")}
-   ${pc.cyan("npm run dev")}          ${pc.dim("# In another terminal")}
+2. Start development (Vite + Wrangler auto-start):
+   ${pc.cyan("npm run dev")}
 
 3. Import in your client code:
    ${pc.cyan(`import { hello } from "export:/";`)}
-   ${pc.cyan(`const message = await hello("World");`)}`,
+   ${pc.cyan(`const message = await hello("World");`)}
+
+4. Deploy to Cloudflare Workers Sites:
+   ${pc.cyan("npm run export")}
+   ${pc.dim("# Builds Vite + deploys everything to Workers")}`,
     "Created"
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exportc",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "CLI to add export to existing projects",
   "scripts": {
     "test": "node --test test/*.test.mjs"

package/vite-plugin.d.ts

@@ -7,18 +7,38 @@ export interface ExportPluginOptions {
    */
   dev?: string;
 
+  /**
+   * Development server port
+   * @default 8787
+   */
+  port?: number;
+
   /**
    * Production Worker URL
    * Required for production builds
    * @example "https://my-api.workers.dev"
    */
   production?: string;
+
+  /**
+   * Export directory path (relative to project root)
+   * @default "./export"
+   */
+  exportDir?: string;
+
+  /**
+   * Auto-start Wrangler dev server when running Vite in dev mode
+   * @default true
+   */
+  autoStart?: boolean;
 }
 
 /**
  * Vite plugin for export integration
  *
- * Allows importing server exports using the "export:/" prefix:
+ * Automatically starts Wrangler when you run `npm run dev` and allows
+ * importing server exports using the "export:/" prefix:
+ *
  * ```ts
  * import { hello } from "export:/";
  * import { utils } from "export:/utils";
@@ -31,6 +51,7 @@ export interface ExportPluginOptions {
  * export default defineConfig({
  *   plugins: [
  *     exportPlugin({
+ *       // Required for production builds
  *       production: "https://my-api.workers.dev"
  *     })
  *   ]

package/vite-plugin.js

@@ -5,51 +5,195 @@
  *   import { hello } from "export:/";
  *   import { utils } from "export:/utils";
  *
- * In development, proxies to local Wrangler dev server (localhost:8787)
- * In production, resolves to the deployed Worker URL
+ * In development:
+ *   - Automatically starts Wrangler dev server
+ *   - Proxies to local Wrangler (localhost:8787)
+ *
+ * In production:
+ *   - Resolves to the deployed Worker URL
  */
 
+import { spawn } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
 const EXPORT_PREFIX = "export:";
-const DEFAULT_DEV_URL = "http://localhost:8787";
+const DEFAULT_DEV_PORT = 8787;
 
 /**
  * @param {Object} options
  * @param {string} [options.dev] - Development server URL (default: http://localhost:8787)
- * @param {string} [options.production] - Production Worker URL (required for production builds)
+ * @param {string} [options.production] - Production Worker URL (auto-detected from export/package.json name if not specified)
+ * @param {string} [options.exportDir] - Export directory (default: ./export)
+ * @param {boolean} [options.autoStart] - Auto-start Wrangler in dev mode (default: true)
  * @returns {import('vite').Plugin}
  */
 export function exportPlugin(options = {}) {
-  const devUrl = options.dev || DEFAULT_DEV_URL;
-  const prodUrl = options.production;
+  const devPort = options.port || DEFAULT_DEV_PORT;
+  const devUrl = options.dev || `http://localhost:${devPort}`;
+  let prodUrl = options.production;
+  const exportDir = options.exportDir || "./export";
+  const autoStart = options.autoStart !== false;
 
   let isDev = true;
+  let wranglerProcess = null;
+  let wranglerReady = false;
+  let wranglerReadyPromise = null;
+
+  // Auto-detect production URL from export/package.json
+  const detectProductionUrl = (root) => {
+    if (prodUrl) return prodUrl;
+    try {
+      const exportPkgPath = resolve(root, exportDir, "package.json");
+      if (existsSync(exportPkgPath)) {
+        const exportPkg = JSON.parse(readFileSync(exportPkgPath, "utf8"));
+        if (exportPkg.name) {
+          return `https://${exportPkg.name}.workers.dev`;
+        }
+      }
+    } catch {}
+    return null;
+  };
+
+  const startWrangler = (root) => {
+    const exportPath = resolve(root, exportDir);
+
+    if (!existsSync(exportPath)) {
+      console.warn(`[exportc] Export directory not found: ${exportPath}`);
+      console.warn(`[exportc] Run 'npx exportc init' to initialize.`);
+      return Promise.resolve();
+    }
+
+    const nodeModulesPath = resolve(exportPath, "node_modules");
+    if (!existsSync(nodeModulesPath)) {
+      console.warn(`[exportc] Dependencies not installed in ${exportPath}`);
+      console.warn(`[exportc] Run 'cd ${exportDir} && npm install' first.`);
+      return Promise.resolve();
+    }
+
+    return new Promise((resolveReady) => {
+      console.log(`[exportc] Starting Wrangler dev server...`);
+
+      // Generate types first, then start wrangler
+      const generateTypes = spawn("npm", ["run", "dev"], {
+        cwd: exportPath,
+        stdio: ["ignore", "pipe", "pipe"],
+        shell: true,
+      });
+
+      wranglerProcess = generateTypes;
+
+      generateTypes.stdout.on("data", (data) => {
+        const output = data.toString();
+        process.stdout.write(`[export] ${output}`);
+
+        // Detect when wrangler is ready
+        if (output.includes("Ready on") || output.includes("Listening on") || output.includes("localhost")) {
+          if (!wranglerReady) {
+            wranglerReady = true;
+            console.log(`[exportc] Wrangler ready at ${devUrl}`);
+            resolveReady();
+          }
+        }
+      });
+
+      generateTypes.stderr.on("data", (data) => {
+        const output = data.toString();
+        // Filter out noisy warnings
+        if (!output.includes("ExperimentalWarning")) {
+          process.stderr.write(`[export] ${output}`);
+        }
+        // Also check stderr for ready message
+        if (output.includes("Ready on") || output.includes("Listening on") || output.includes("localhost:8787")) {
+          if (!wranglerReady) {
+            wranglerReady = true;
+            console.log(`[exportc] Wrangler ready at ${devUrl}`);
+            resolveReady();
+          }
+        }
+      });
+
+      generateTypes.on("error", (err) => {
+        console.error(`[exportc] Failed to start Wrangler:`, err.message);
+        resolveReady();
+      });
+
+      generateTypes.on("close", (code) => {
+        if (code !== 0 && code !== null) {
+          console.error(`[exportc] Wrangler exited with code ${code}`);
+        }
+        wranglerProcess = null;
+        resolveReady();
+      });
+
+      // Timeout after 30 seconds
+      setTimeout(() => {
+        if (!wranglerReady) {
+          console.warn(`[exportc] Wrangler startup timeout, continuing anyway...`);
+          wranglerReady = true;
+          resolveReady();
+        }
+      }, 30000);
+    });
+  };
+
+  const stopWrangler = () => {
+    if (wranglerProcess) {
+      console.log(`[exportc] Stopping Wrangler...`);
+      wranglerProcess.kill("SIGTERM");
+      wranglerProcess = null;
+      wranglerReady = false;
+    }
+  };
 
   return {
     name: "vite-plugin-export",
 
     config(config, { command }) {
       isDev = command === "serve";
+      // Auto-detect production URL if not specified
+      if (!isDev && !prodUrl) {
+        const root = config.root || process.cwd();
+        prodUrl = detectProductionUrl(root);
+      }
+      return {};
+    },
+
+    configureServer(server) {
+      if (isDev && autoStart) {
+        const root = server.config.root || process.cwd();
+        wranglerReadyPromise = startWrangler(root);
 
-      // Add proxy for development
+        // Cleanup on server close
+        server.httpServer?.on("close", stopWrangler);
+      }
+    },
+
+    async buildStart() {
       if (isDev) {
-        return {
-          server: {
-            proxy: {
-              // Proxy WebSocket connections
-              "^/__export_ws__": {
-                target: devUrl.replace(/^http/, "ws"),
-                ws: true,
-                rewrite: (path) => path.replace("/__export_ws__", ""),
-              },
-            },
-          },
-        };
+        if (autoStart && wranglerReadyPromise) {
+          await wranglerReadyPromise;
+        }
+        this.info(`Development mode - using ${devUrl}`);
+      } else if (prodUrl) {
+        this.info(`Production mode - using ${prodUrl}`);
+      } else {
+        this.warn(`Production URL not configured. Add 'production' option to exportPlugin().`);
       }
     },
 
+    buildEnd() {
+      if (!isDev) {
+        stopWrangler();
+      }
+    },
+
+    closeBundle() {
+      stopWrangler();
+    },
+
     resolveId(source) {
       if (source.startsWith(EXPORT_PREFIX)) {
-        // Mark as external - we'll handle it in load
         return { id: source, external: false };
       }
       return null;
@@ -60,28 +204,20 @@ export function exportPlugin(options = {}) {
         return null;
       }
 
-      // Extract the path after "export:"
       const exportPath = id.slice(EXPORT_PREFIX.length) || "/";
-
-      // In development, use the local dev server
-      // In production, use the configured production URL
       const baseUrl = isDev ? devUrl : prodUrl;
 
       if (!baseUrl) {
         if (!isDev) {
           this.error(
-            `[exportc] Production URL not configured. Add { production: "https://your-worker.workers.dev" } to exportPlugin() in vite.config.`
+            `[exportc] Production URL not configured. Add { production: "https://your-worker.workers.dev" } to exportPlugin().`
           );
         }
         this.error(`[exportc] Could not resolve base URL for export imports.`);
       }
 
-      // Build the full URL
       const fullUrl = new URL(exportPath, baseUrl).href;
 
-      // Generate a module that re-exports from the Worker URL
-      // For development, we dynamically import from the Worker
-      // For production, we use the deployed URL
       const code = `
 // Auto-generated by exportc/vite
 // Importing from: ${fullUrl}
@@ -92,24 +228,18 @@ export { default } from "${fullUrl}";
       return code;
     },
 
-    // Transform import statements in the final bundle for production
     transform(code, id) {
-      // Skip node_modules and non-JS files
       if (id.includes("node_modules") || !/\.(js|ts|jsx|tsx|vue|svelte)$/.test(id)) {
         return null;
       }
 
-      // Replace dynamic imports of export: URLs
       if (code.includes('import("export:') || code.includes("import('export:")) {
         const baseUrl = isDev ? devUrl : prodUrl;
         if (!baseUrl && !isDev) {
-          this.warn(
-            `[exportc] Production URL not configured for dynamic imports in ${id}`
-          );
+          this.warn(`[exportc] Production URL not configured for dynamic imports in ${id}`);
           return null;
         }
 
-        // Replace export:/ with the actual URL
         const transformed = code.replace(
           /import\((['"])export:([^'"]*)\1\)/g,
           (match, quote, path) => {
@@ -125,19 +255,6 @@ export { default } from "${fullUrl}";
 
       return null;
     },
-
-    // Generate TypeScript declarations hint
-    buildStart() {
-      if (isDev) {
-        this.info(
-          `[exportc] Development mode - proxying to ${devUrl}`
-        );
-      } else if (prodUrl) {
-        this.info(
-          `[exportc] Production mode - using ${prodUrl}`
-        );
-      }
-    },
   };
 }