exportc 0.0.1 → 0.0.2

package/README.md

@@ -8,12 +8,11 @@ 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
 ```
 
 ## Usage
@@ -49,7 +48,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
@@ -59,15 +58,22 @@ 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",
+
+      // Optional: customize dev server
+      // port: 8787,
+      // autoStart: true,  // Auto-start Wrangler (default: true)
     }),
   ],
 });
 ```
 
+When you run `npm run dev`, the plugin:
+1. Automatically starts Wrangler dev server
+2. Waits for it to be ready
+3. Transforms `export:/` imports to point to the local server
+
 ## Project Structure
 
 After running `exportc init`:

package/commands/init.js

@@ -157,13 +157,15 @@ 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 deploy script for export
+  if (!pkg.scripts["deploy"]) {
+    pkg.scripts["deploy"] = "cd export && npm run deploy";
+  } else if (!pkg.scripts["deploy"].includes("export")) {
+    // Add export deploy to existing deploy script
+    pkg.scripts["deploy:export"] = "cd export && npm run deploy";
   }
 
   // Add exportc to devDependencies
@@ -293,16 +295,18 @@ ${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:
+   ${pc.cyan("npm run deploy")}`,
     "Created"
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exportc",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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,175 @@
  *   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 } 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.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 devPort = options.port || DEFAULT_DEV_PORT;
+  const devUrl = options.dev || `http://localhost:${devPort}`;
   const 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;
+
+  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";
+      return {};
+    },
+
+    configureServer(server) {
+      if (isDev && autoStart) {
+        const root = server.config.root || process.cwd();
+        wranglerReadyPromise = startWrangler(root);
+
+        // Cleanup on server close
+        server.httpServer?.on("close", stopWrangler);
+      }
+    },
 
-      // Add proxy for development
+    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 +184,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 +208,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 +235,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}`
-        );
-      }
-    },
   };
 }