iterate-ui-vite 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,8 +1,24 @@
 import { Plugin } from 'vite';
 
 interface IteratePluginOptions {
-    /** Port for the iterate daemon (default: 4000) */
+    /**
+     * Port for the iterate daemon. If omitted, resolved in order:
+     *   1. ITERATE_DAEMON_PORT env var
+     *   2. An already-running daemon's port from .iterate/daemon.lock
+     *   3. `daemonPort` from .iterate/config.json
+     *   4. Auto-picked starting from the default (47100)
+     */
     daemonPort?: number;
+    /**
+     * Name of the app this plugin instance wraps. Must match a `name` in
+     * `.iterate/config.json`'s `apps[]` array. When set, the overlay forwards
+     * this name to the daemon's `/api/command` and `/api/iterations` endpoints
+     * when the user creates iterations via the overlay toolbar — so iterations
+     * spawn the right dev server for the app the user is currently viewing.
+     *
+     * Required in multi-app repos. Optional in single-app repos.
+     */
+    appName?: string;
     /** Disable the babel plugin that injects component names/source locations (default: false) */
     disableBabelPlugin?: boolean;
 }
@@ -26,5 +42,7 @@ interface IteratePluginOptions {
  * 5. Cleans up daemon when dev server stops
  */
 declare function iterate(options?: IteratePluginOptions): Plugin[];
+/** Exported for tests. Resolves the daemon port for a vite plugin invocation. */
+declare function resolveDaemonPort(repoRoot: string, startingFrom: number, override?: number): Promise<number>;
 
-export { type IteratePluginOptions, iterate as default, iterate };
+export { type IteratePluginOptions, iterate as default, iterate, resolveDaemonPort };

package/dist/index.js

@@ -2,10 +2,29 @@
 import { spawn, execSync } from "child_process";
 import { createRequire } from "module";
 import { readFileSync } from "fs";
+import { dirname, join } from "path";
 import http from "http";
+import {
+  findFreePort,
+  isPortInUse,
+  loadConfig,
+  readLockfile,
+  isDaemonAlive
+} from "iterate-ui-core/node";
+function resolvePackageEntry(packageName, _require) {
+  try {
+    return _require.resolve(packageName);
+  } catch {
+    const pkgJsonPath = _require.resolve(`${packageName}/package.json`);
+    const pkg = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+    const main = pkg.exports?.["."]?.import ?? pkg.main ?? "index.js";
+    return join(dirname(pkgJsonPath), main);
+  }
+}
 function iterate(options = {}) {
-  const daemonPort = options.daemonPort ?? 4e3;
   let daemon = null;
+  let resolvedPort = null;
+  let resolvedBase = "";
   let overlayJS = null;
   const plugins = [];
   if (!options.disableBabelPlugin) {
@@ -52,7 +71,7 @@ function iterate(options = {}) {
           });
           if (!result?.code) return null;
           return { code: result.code, map: result.map };
-        } catch (err) {
+        } catch {
           return null;
         }
       }
@@ -62,15 +81,31 @@ function iterate(options = {}) {
     name: "iterate",
     apply: "serve",
     // Only active during dev
-    configureServer(server) {
+    async configResolved(config) {
+      resolvedBase = (config.base ?? "/").replace(/\/+$/, "");
+      const repoRoot = getGitRoot() ?? config.root;
+      const fileConfig = (() => {
+        try {
+          return loadConfig(repoRoot);
+        } catch {
+          return null;
+        }
+      })();
+      const envPort = process.env.ITERATE_DAEMON_PORT ? parseInt(process.env.ITERATE_DAEMON_PORT, 10) : void 0;
+      const startingPort = options.daemonPort ?? envPort ?? fileConfig?.daemonPort ?? 47100;
+      resolvedPort = await resolveDaemonPort(repoRoot, startingPort, options.daemonPort ?? envPort);
+    },
+    async configureServer(server) {
       const repoRoot = getGitRoot() ?? server.config.root;
-      daemon = startDaemon(daemonPort, repoRoot);
-      server.middlewares.use("/__iterate__/overlay.js", (_req, res) => {
+      const port = resolvedPort ?? 47100;
+      daemon = await startDaemonIfNeeded(port, repoRoot);
+      const overlayPath = `${resolvedBase}/__iterate__/overlay.js`;
+      server.middlewares.use(overlayPath, (_req, res) => {
         if (!overlayJS) {
           try {
             const require2 = createRequire(import.meta.url);
-            const overlayPath = require2.resolve("iterate-ui-overlay/standalone");
-            overlayJS = readFileSync(overlayPath, "utf-8");
+            const path = require2.resolve("iterate-ui-overlay/standalone");
+            overlayJS = readFileSync(path, "utf-8");
           } catch {
             res.statusCode = 404;
             res.end("Overlay bundle not found");
@@ -81,10 +116,15 @@ function iterate(options = {}) {
         res.setHeader("Cache-Control", "no-cache");
         res.end(overlayJS);
       });
+      const basePrefix = resolvedBase ? resolvedBase : "";
       server.middlewares.use((req, res, next) => {
         const url = req.url ?? "";
-        if (url.startsWith("/api/") || url.startsWith("/__iterate__/")) {
-          proxyRequest(req, res, daemonPort);
+        const matches = (prefix) => url.startsWith(prefix) || !!basePrefix && url.startsWith(`${basePrefix}${prefix}`);
+        if (matches("/api/") || matches("/__iterate__/")) {
+          if (basePrefix && url.startsWith(basePrefix)) {
+            req.url = url.slice(basePrefix.length) || "/";
+          }
+          proxyRequest(req, res, port);
           return;
         }
         next();
@@ -94,12 +134,12 @@ function iterate(options = {}) {
           const proxy = http.request(
             {
               hostname: "127.0.0.1",
-              port: daemonPort,
+              port,
               path: "/ws",
               method: "GET",
               headers: {
                 ...req.headers,
-                host: `127.0.0.1:${daemonPort}`
+                host: `127.0.0.1:${port}`
               }
             },
             () => {
@@ -127,25 +167,37 @@ Sec-WebSocket-Accept: ${_proxyRes.headers["sec-websocket-accept"]}\r
         }
       });
       server.httpServer?.on("close", () => {
-        stopDaemon(daemon, daemonPort);
-        daemon = null;
+        if (daemon) {
+          stopDaemon(daemon, port);
+          daemon = null;
+        }
       });
     },
     // Inject the overlay script into HTML
     transformIndexHtml(html) {
       const iterationName = JSON.stringify(process.env.ITERATE_ITERATION_NAME ?? "__original__");
+      const port = resolvedPort ?? 47100;
+      const overlaySrc = `${resolvedBase}/__iterate__/overlay.js`;
+      const appNameKey = options.appName ? `, appName: ${JSON.stringify(options.appName)}` : "";
       return html.replace(
         "</body>",
         `<script>
-  window.__iterate_shell__ = { activeTool: 'select', activeIteration: ${iterationName}, daemonPort: ${daemonPort} };
+  window.__iterate_shell__ = { activeTool: 'select', activeIteration: ${iterationName}, daemonPort: ${port}, basePath: ${JSON.stringify(resolvedBase)}${appNameKey} };
 </script>
-<script src="/__iterate__/overlay.js" defer></script>
+<script src=${JSON.stringify(overlaySrc)} defer></script>
 </body>`
       );
     }
   });
   return plugins;
 }
+async function resolveDaemonPort(repoRoot, startingFrom, override) {
+  if (override && Number.isFinite(override)) return override;
+  const lock = readLockfile(repoRoot);
+  if (lock && isDaemonAlive(lock)) return lock.port;
+  if (await isPortInUse(startingFrom)) return startingFrom;
+  return await findFreePort(startingFrom);
+}
 function getGitRoot() {
   try {
     return execSync("git rev-parse --show-toplevel", { encoding: "utf-8" }).trim();
@@ -153,10 +205,24 @@ function getGitRoot() {
     return null;
   }
 }
+async function startDaemonIfNeeded(port, cwd) {
+  if (await isPortInUse(port)) {
+    console.log(`[iterate] daemon already running on port ${port}`);
+    return null;
+  }
+  return startDaemon(port, cwd);
+}
 function startDaemon(port, cwd) {
+  const _req = createRequire(import.meta.url);
+  const daemonEntryPath = resolvePackageEntry("iterate-ui-daemon", _req);
+  const daemonPath = `file://${daemonEntryPath}`;
   const child = spawn(
     process.execPath,
-    ["--input-type=module", "-e", `import { startDaemon } from "iterate-ui-daemon"; startDaemon({ port: ${port}, cwd: ${JSON.stringify(cwd)} });`],
+    [
+      "--input-type=module",
+      "-e",
+      `import { startDaemon } from ${JSON.stringify(daemonPath)}; startDaemon({ port: ${port}, cwd: ${JSON.stringify(cwd)} });`
+    ],
     {
       cwd,
       stdio: ["ignore", "pipe", "pipe"],
@@ -218,5 +284,6 @@ function proxyRequest(req, res, port) {
 var index_default = iterate;
 export {
   index_default as default,
-  iterate
+  iterate,
+  resolveDaemonPort
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iterate-ui-vite",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "iterate Vite plugin — auto-starts daemon and injects overlay",
   "license": "MIT",
   "repository": {
@@ -30,9 +30,10 @@
     }
   },
   "dependencies": {
-    "iterate-ui-daemon": "0.1.1",
-    "iterate-ui-babel-plugin": "0.1.1",
-    "iterate-ui-overlay": "0.1.1"
+    "iterate-ui-core": "0.2.0",
+    "iterate-ui-daemon": "0.2.0",
+    "iterate-ui-babel-plugin": "0.1.2",
+    "iterate-ui-overlay": "0.2.0"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0"
@@ -43,11 +44,13 @@
     "@types/node": "^22.0.0",
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --external @babel/core",
     "dev": "tsup src/index.ts --format esm --dts --watch --external @babel/core",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "test": "vitest run"
   }
 }