@tscircuit/cli 0.0.4 → 0.0.5

package/dist/cli.js

@@ -210,7 +210,7 @@ import {Command} from "commander";
 // package.json
 var package_default = {
   name: "@tscircuit/cli",
-  version: "0.0.4",
+  version: "0.0.5",
   private: false,
   type: "module",
   description: "Command line tool for developing, publishing and installing tscircuit circuits",
@@ -221,7 +221,8 @@ var package_default = {
     "start:dev-server": "bun build:dev-server && bun cli.ts dev -y --cwd ./tests/assets/example-project",
     "build:dev-server": "cd dev-server-api && bun run build && cd ../dev-server-frontend && bun run build",
     "build:cli": "bun build-cli.ts",
-    build: "bun build:dev-server && npm run build:cli"
+    build: "bun build:dev-server && npm run build:cli",
+    "test:init": "bun cli.ts init --dir ./tmp/test --name test"
   },
   bin: {
     tscircuit: "./dist/cli.js",
@@ -238,6 +239,7 @@ var package_default = {
     "@tscircuit/react-fiber": "^1.0.6",
     axios: "^1.6.7",
     "better-sqlite3": "^9.4.3",
+    chokidar: "^3.6.0",
     commander: "^12.0.0",
     configstore: "^6.0.0",
     "dax-sh": "^0.39.2",
@@ -258,6 +260,7 @@ var package_default = {
   },
   devDependencies: {
     "@types/bun": "^1.0.8",
+    "@types/chokidar": "^2.1.3",
     "@types/configstore": "^6.0.2",
     "@types/lodash": "^4.14.202",
     "@types/mime-types": "^2.1.4",
@@ -622,8 +625,7 @@ var soupifyCmd = async (ctx, args) => {
 };
 // lib/cmd-fns/dev/index.ts
 import {z as z16} from "zod";
-import kleur4 from "kleur";
-import {join as joinPath} from "path";
+import kleur7 from "kleur";
 import prompts from "prompts";
 import open from "open";
 
@@ -845,66 +847,54 @@ var bundle_default = {
   "index.html": Buffer.from("PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPCEtLSA8bGluayByZWw9Imljb24iIHR5cGU9ImltYWdlL3N2Zyt4bWwiIGhyZWY9Ii92aXRlLnN2ZyIgLz4gLS0+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCIgLz4KICAgIDx0aXRsZT5bZGV2XSB0c2NpcmN1aXQ8L3RpdGxlPgogICAgPHNjcmlwdCB0eXBlPSJtb2R1bGUiIGNyb3Nzb3JpZ2luIHNyYz0iL3ByZXZpZXcvYXNzZXRzL2luZGV4LUNpRUdEejdkLmpzIj48L3NjcmlwdD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgY3Jvc3NvcmlnaW4gaHJlZj0iL3ByZXZpZXcvYXNzZXRzL2luZGV4LUNNNkk3TGhOLmNzcyI+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0icm9vdCI+PC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==", "base64")
 };
 
-// lib/cmd-fns/dev/index.ts
-import defaultAxios from "axios";
-import {readdirSync, readFileSync} from "fs";
+// lib/cmd-fns/dev/dev-server-request-handler.ts
 import EdgeRuntimePrimitives from "@edge-runtime/primitives";
 import mime from "mime-types";
-var devCmd = async (ctx, args) => {
-  const params = z16.object({
-    cwd: z16.string().optional().default(process.cwd()),
-    port: z16.coerce.number().optional().default(3020)
-  }).parse(args);
-  const { cwd, port } = params;
-  console.log(kleur4.green(`\n--------------------------------------------\n\nStarting dev server http://localhost:${port}\n\n--------------------------------------------\n\n`));
-  const serverUrl = `http://localhost:${port}`;
-  const axios = defaultAxios.create({
-    baseURL: serverUrl
-  });
-  axios.interceptors.response.use((res) => res, (err) => {
-    console.log(kleur4.red(`[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${err.config.url}\n\n${JSON.stringify(err.response?.data, null, "  ")}`.replace(/\\n/g, "\n").replace(/\\"/g, '"')));
-    console.log(kleur4.yellow("[Request Body]:"), err.config.data);
-    return Promise.reject(err);
-  });
-  const requestHandler = async (bunReq) => {
-    const url = new URL(bunReq.url);
-    const requestType = url.pathname.startsWith("/api") ? "api" : url.pathname.startsWith("/preview") ? "preview" : "other";
-    if (requestType === "api") {
-      const req = new EdgeRuntimePrimitives.Request(bunReq.url, {
-        headers: bunReq.headers,
-        method: bunReq.method,
-        body: bunReq.body
-      });
-      const response = await stdin_default.makeRequest(req, {});
-      return response;
-    } else if (requestType === "preview") {
-      let frontendPath = url.pathname.replace("/preview", "");
-      if (frontendPath === "/" || frontendPath === "") {
-        frontendPath = "index.html";
+var devServerRequestHandler = async (bunReq) => {
+  const url = new URL(bunReq.url);
+  const requestType = url.pathname.startsWith("/api") ? "api" : url.pathname.startsWith("/preview") ? "preview" : "other";
+  if (requestType === "api") {
+    const req = new EdgeRuntimePrimitives.Request(bunReq.url, {
+      headers: bunReq.headers,
+      method: bunReq.method,
+      body: bunReq.body
+    });
+    const response = await stdin_default.makeRequest(req, {});
+    return response;
+  } else if (requestType === "preview") {
+    let frontendPath = url.pathname.replace("/preview", "");
+    if (frontendPath === "/" || frontendPath === "") {
+      frontendPath = "index.html";
+    }
+    frontendPath = frontendPath.replace(/^\//, "");
+    const fileContent = bundle_default[frontendPath];
+    if (!fileContent) {
+      return new Response("Not Found", { status: 404 });
+    }
+    return new Response(fileContent.toString("utf-8"), {
+      headers: {
+        "Content-Type": mime.lookup(frontendPath) || "text/plain"
       }
-      frontendPath = frontendPath.replace(/^\//, "");
-      const fileContent = bundle_default[frontendPath];
-      if (!fileContent) {
-        return new Response("Not Found", { status: 404 });
+    });
+  } else {
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: "/preview"
       }
-      return new Response(fileContent.toString("utf-8"), {
-        headers: {
-          "Content-Type": mime.lookup(frontendPath) || "text/plain"
-        }
-      });
-    } else {
-      return new Response(null, {
-        status: 302,
-        headers: {
-          Location: "/preview"
-        }
-      });
-    }
-  };
+    });
+  }
+};
+
+// lib/cmd-fns/dev/start-dev-server.ts
+var startDevServer = async ({
+  port,
+  devServerAxios
+}) => {
   let server;
   if (typeof Bun !== "undefined") {
     server = Bun.serve({
-      fetch: requestHandler,
+      fetch: devServerRequestHandler,
       development: false,
       port
     });
@@ -912,49 +902,155 @@ var devCmd = async (ctx, args) => {
     const { Hono } = await import("hono");
     const { serve } = await import("@hono/node-server");
     const honoApp = new Hono;
-    honoApp.all("/*", (c) => requestHandler(c.req.raw));
+    honoApp.all("/*", (c) => devServerRequestHandler(c.req.raw));
     server = serve({
       fetch: honoApp.fetch,
       port
     });
   }
   console.log("Running health check against dev server...");
-  await axios.get("/api/health");
-  console.log(`Loading examples...`);
-  const examplesDir = joinPath(cwd, "examples");
-  const exampleFileNames = readdirSync(examplesDir);
+  await devServerAxios.get("/api/health");
+  return server;
+};
+
+// lib/cmd-fns/dev/get-dev-server-axios.ts
+import kleur4 from "kleur";
+import defaultAxios from "axios";
+var getDevServerAxios = ({ serverUrl }) => {
+  const devServerAxios = defaultAxios.create({
+    baseURL: serverUrl
+  });
+  devServerAxios.interceptors.response.use((res) => res, (err) => {
+    console.log(kleur4.red(`[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${err.config.url}\n\n${JSON.stringify(err.response?.data, null, "  ")}`.replace(/\\n/g, "\n").replace(/\\"/g, '"')));
+    console.log(kleur4.yellow("[Request Body]:"), err.config.data);
+    return Promise.reject(err);
+  });
+  return devServerAxios;
+};
+
+// lib/cmd-fns/dev/upload-examples-from-directory.ts
+import {join as joinPath2} from "path";
+import {readdirSync as readdirSync2} from "fs";
+
+// lib/cmd-fns/dev/soupify-and-upload-example-file.ts
+import kleur5 from "kleur";
+import {join as joinPath} from "path";
+import {readFileSync} from "fs";
+var soupifyAndUploadExampleFile = async ({
+  examplesDir,
+  exampleFileName,
+  devServerAxios
+}) => {
+  try {
+    const examplePath = joinPath(examplesDir, exampleFileName);
+    const exampleContent = readFileSync(examplePath).toString();
+    let exportName = "default";
+    if (!exampleContent.includes("export default")) {
+      const matches = Array.from(exampleContent.matchAll(/export\s+(const|function)\s+([A-Z]\w+)\s*=?/g)).map((m) => m[2]);
+      if (matches.length === 0) {
+        throw new Error(`No export detected in "${exampleFileName}"`);
+      }
+      if (matches.length > 1) {
+        throw new Error(`Multiple exports detected in "${exampleFileName}", only single exports currently working`);
+      }
+      exportName = matches[0];
+    }
+    console.log(kleur5.gray(`[soupifying] ${exampleFileName}...`));
+    const soup = await soupify({
+      filePath: examplePath,
+      exportName
+    });
+    console.log(kleur5.gray(`[uploading ] ${exampleFileName}...`));
+    await devServerAxios.post("/api/dev_package_examples/create", {
+      tscircuit_soup: soup,
+      file_path: examplePath,
+      export_name: exportName
+    });
+    console.log(kleur5.gray(`[   done   ] ${exampleFileName}!`));
+  } catch (e) {
+    console.log(kleur5.red(e.toString()));
+  }
+};
+
+// lib/cmd-fns/dev/upload-examples-from-directory.ts
+var uploadExamplesFromDirectory = async ({
+  cwd,
+  devServerAxios
+}) => {
+  const examplesDir = joinPath2(cwd, "examples");
+  const exampleFileNames = readdirSync2(examplesDir);
   for (const exampleFileName of exampleFileNames) {
-    try {
-      const examplePath = joinPath(examplesDir, exampleFileName);
-      const exampleContent = readFileSync(examplePath).toString();
-      let exportName = "default";
-      if (!exampleContent.includes("export default")) {
-        const matches = Array.from(exampleContent.matchAll(/export\s+(const|function)\s+([A-Z]\w+)\s*=?/g)).map((m) => m[2]);
-        if (matches.length === 0) {
-          throw new Error(`No export detected in "${exampleFileName}"`);
-        }
-        if (matches.length > 1) {
-          throw new Error(`Multiple exports detected in "${exampleFileName}", only single exports currently working`);
-        }
-        exportName = matches[0];
+    if (exampleFileName.endsWith(".__tmp_entrypoint.tsx"))
+      continue;
+    if (!exampleFileName.endsWith(".tsx"))
+      continue;
+    await soupifyAndUploadExampleFile({
+      devServerAxios,
+      examplesDir,
+      exampleFileName
+    });
+  }
+};
+
+// lib/cmd-fns/dev/index.ts
+import {unlink as unlink2} from "fs/promises";
+import * as Path3 from "path";
+
+// lib/cmd-fns/dev/start-watcher.ts
+import chokidar from "chokidar";
+import kleur6 from "kleur";
+var startWatcher = async ({
+  cwd,
+  devServerAxios
+}) => {
+  const watcher = chokidar.watch(`${cwd}/**/*.tsx`, {
+    ignored: /node_modules/,
+    persistent: true
+  });
+  const upload_queue_state = {
+    dirty: false,
+    should_run: true
+  };
+  watcher.on("change", async (path) => {
+    console.log(`File ${path} has been changed`);
+    upload_queue_state.dirty = true;
+  });
+  async function uploadInBackground() {
+    while (upload_queue_state.should_run) {
+      if (upload_queue_state.dirty) {
+        console.log(kleur6.yellow("Changes detected, re-uploading examples..."));
+        upload_queue_state.dirty = false;
+        await uploadExamplesFromDirectory({ cwd, devServerAxios });
       }
-      console.log("Soupifying...");
-      const soup = await soupify({
-        filePath: examplePath,
-        exportName
-      });
-      console.log(`Soupified ${exampleFileName}!`);
-      console.log(`Uploading ${exampleFileName}...`);
-      await axios.post("/api/dev_package_examples/create", {
-        tscircuit_soup: soup,
-        file_path: examplePath,
-        export_name: exportName
-      });
-      console.log(`Uploaded ${exampleFileName}!`);
-    } catch (e) {
-      console.log(kleur4.red(e.toString()));
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
   }
+  const _backgroundUploaderPromise = uploadInBackground();
+  return {
+    _backgroundUploaderPromise,
+    stop: () => {
+      upload_queue_state.should_run = false;
+      watcher.close();
+    }
+  };
+};
+
+// lib/cmd-fns/dev/index.ts
+var devCmd = async (ctx, args) => {
+  const params = z16.object({
+    cwd: z16.string().optional().default(process.cwd()),
+    port: z16.coerce.number().optional().default(3020)
+  }).parse(args);
+  const { cwd, port } = params;
+  unlink2(Path3.join(cwd, ".tscircuit/dev-server.db")).catch(() => {
+  });
+  console.log(kleur7.green(`\n--------------------------------------------\n\nStarting dev server http://localhost:${port}\n\n--------------------------------------------\n\n`));
+  const serverUrl = `http://localhost:${port}`;
+  const devServerAxios = getDevServerAxios({ serverUrl });
+  const server = await startDevServer({ port, devServerAxios });
+  console.log(`Loading examples...`);
+  await uploadExamplesFromDirectory({ devServerAxios, cwd });
+  const watcher = await startWatcher({ cwd, devServerAxios });
   while (true) {
     const { action } = await prompts({
       type: "select",
@@ -978,6 +1074,7 @@ var devCmd = async (ctx, args) => {
         server.stop();
       if (server.close)
         server.close();
+      watcher.stop();
       break;
     }
   }
@@ -985,13 +1082,13 @@ var devCmd = async (ctx, args) => {
 // lib/cmd-fns/init.ts
 import {z as z17} from "zod";
 import {
-readFileSync as readFileSync2,
+readFileSync as readFileSync3,
 writeFileSync as writeFileSync3,
 existsSync,
 mkdirSync as mkdirSync2,
 appendFileSync
 } from "fs";
-import * as Path3 from "node:path";
+import * as Path4 from "node:path";
 import $2 from "dax-sh";
 var initCmd = async (ctx, args) => {
   const params = z17.object({
@@ -1015,7 +1112,7 @@ var initCmd = async (ctx, args) => {
   }
   const pkm = runtime === "bun" ? "bun" : "npm";
   const runner = runtime === "bun" ? "bun" : "tsx";
-  const packageJsonExists = existsSync(Path3.join(params.dir, "package.json"));
+  const packageJsonExists = existsSync(Path4.join(params.dir, "package.json"));
   const dirExists = existsSync(params.dir);
   if (!dirExists) {
     console.log(`Creating directory ${params.dir}`);
@@ -1030,19 +1127,20 @@ var initCmd = async (ctx, args) => {
     console.log(`Setting up project for typescript...`);
     await $2`${pkm} add -D typescript tsx`;
   }
+  await $2`${pkm} add -D @tscircuit/react-fiber @tscircuit/builder`;
   console.log("Changing package name...");
-  const packageJson = JSON.parse(readFileSync2("package.json", "utf-8"));
+  const packageJson = JSON.parse(readFileSync3("package.json", "utf-8"));
   packageJson.name = params.name;
   writeFileSync3("package.json", JSON.stringify(packageJson, null, 2));
   console.log(`Adding ".tscircuit" to .gitignore`);
-  appendFileSync(".gitignore", "\n.tscircuit", {
+  appendFileSync(".gitignore", "\n.tscircuit\n*.__tmp_entrypoint.tsx", {
     encoding: "utf-8",
-    flag: "w+"
+    flag: "a+"
   });
   console.log("Creating lib and examples directories...");
   mkdirSync2("examples", { recursive: true });
   mkdirSync2("lib", { recursive: true });
-  writeFileSync3(Path3.join("lib", "MyCircuit.tsx"), `
+  writeFileSync3(Path4.join("lib", "MyCircuit.tsx"), `
   export const MyCircuit = () => (
     <resistor
       resistance="10kohm"
@@ -1052,7 +1150,7 @@ var initCmd = async (ctx, args) => {
   )
   `.trim());
   writeFileSync3("index.ts", `export * from "./lib/MyCircuit"`);
-  writeFileSync3(Path3.join("examples", "MyExample.tsx"), `
+  writeFileSync3(Path4.join("examples", "MyExample.tsx"), `
 import { MyCircuit } from "lib/MyCircuit"
 
 export const MyExample = () => (
@@ -1171,7 +1269,7 @@ var getProgram = (ctx) => {
 
 // lib/util/create-context-and-run-program.ts
 import defaultAxios2 from "axios";
-import kleur5 from "kleur";
+import kleur8 from "kleur";
 
 // lib/param-handlers/interact-for-local-directory.ts
 import * as fs4 from "fs/promises";
@@ -1417,17 +1515,17 @@ var createContextAndRunProgram = async (process_args) => {
   if (global_config.get("log_requests")) {
     console.log(`Using registry_url: ${registry_url}`);
     axios.interceptors.request.use((req) => {
-      console.log(kleur5.grey(`[REQ] ${req.method?.toUpperCase()} ${req.url}`));
+      console.log(kleur8.grey(`[REQ] ${req.method?.toUpperCase()} ${req.url}`));
       return req;
     });
     axios.interceptors.response.use((res) => {
-      console.log(kleur5.grey(`[RES] ${res.status} ${res.config.method?.toUpperCase()} ${res.config.url}`));
+      console.log(kleur8.grey(`[RES] ${res.status} ${res.config.method?.toUpperCase()} ${res.config.url}`));
       return res;
     });
   }
   axios.interceptors.response.use((res) => res, (err) => {
-    console.log(kleur5.red(`[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${err.config.url}\n\n${JSON.stringify(err.response?.data, null, "  ")}`.replace(/\\n/g, "\n").replace(/\\"/g, '"')));
-    console.log(kleur5.yellow("[Request Body]:"), err.config.data);
+    console.log(kleur8.red(`[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${err.config.url}\n\n${JSON.stringify(err.response?.data, null, "  ")}`.replace(/\\n/g, "\n").replace(/\\"/g, '"')));
+    console.log(kleur8.yellow("[Request Body]:"), err.config.data);
     return Promise.reject(err);
   });
   const ctx = {

package/lib/cmd-fns/dev/dev-server-request-handler.ts

@@ -0,0 +1,54 @@
+import apiServer from "../../../dev-server-api/dist/bundle"
+import frontendVfs from "../../../dev-server-frontend/dist/bundle"
+import EdgeRuntimePrimitives from "@edge-runtime/primitives"
+import mime from "mime-types"
+
+export const devServerRequestHandler = async (bunReq: Request) => {
+  const url = new URL(bunReq.url)
+  const requestType = url.pathname.startsWith("/api")
+    ? "api"
+    : url.pathname.startsWith("/preview")
+    ? "preview"
+    : "other"
+
+  if (requestType === "api") {
+    // We have to shim Bun's Request until they fix the issue where
+    // .clone() doesn't clone the body
+    // https://github.com/oven-sh/bun/pull/8668
+    const req = new EdgeRuntimePrimitives.Request(bunReq.url, {
+      headers: bunReq.headers,
+      method: bunReq.method,
+      body: bunReq.body,
+    })
+
+    const response = await apiServer.makeRequest(req, {})
+    return response
+  } else if (requestType === "preview") {
+    let frontendPath = url.pathname.replace("/preview", "")
+    if (frontendPath === "/" || frontendPath === "") {
+      frontendPath = "index.html"
+    }
+    frontendPath = frontendPath.replace(/^\//, "")
+
+    const fileContent: Buffer = (frontendVfs as any)[frontendPath]
+    if (!fileContent) {
+      return new Response("Not Found", { status: 404 })
+    }
+    return new Response(
+      // Buffer.from(fileContent.toString(), "base64").toString("utf-8"),
+      fileContent.toString("utf-8"),
+      {
+        headers: {
+          "Content-Type": mime.lookup(frontendPath) || "text/plain",
+        },
+      }
+    )
+  } else {
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: "/preview",
+      },
+    })
+  }
+}

package/lib/cmd-fns/dev/get-dev-server-axios.ts

@@ -0,0 +1,25 @@
+import kleur from "kleur"
+import defaultAxios from "axios"
+
+export const getDevServerAxios = ({ serverUrl }: { serverUrl: string }) => {
+  const devServerAxios = defaultAxios.create({
+    baseURL: serverUrl,
+  })
+  devServerAxios.interceptors.response.use(
+    (res) => res,
+    (err) => {
+      console.log(
+        kleur.red(
+          `[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${
+            err.config.url
+          }\n\n${JSON.stringify(err.response?.data, null, "  ")}`
+            .replace(/\\n/g, "\n")
+            .replace(/\\"/g, '"')
+        )
+      )
+      console.log(kleur.yellow("[Request Body]:"), err.config.data)
+      return Promise.reject(err)
+    }
+  )
+  return devServerAxios
+}

package/lib/cmd-fns/dev/index.ts

@@ -1,16 +1,15 @@
 import { AppContext } from "../../util/app-context"
 import { z } from "zod"
 import kleur from "kleur"
-import { join as joinPath } from "path"
 import prompts from "prompts"
 import open from "open"
-import apiServer from "../../../dev-server-api/dist/bundle"
-import frontendVfs from "../../../dev-server-frontend/dist/bundle"
-import defaultAxios from "axios"
-import { readdirSync, readFileSync } from "fs"
-import { soupify } from "lib/soupify"
-import EdgeRuntimePrimitives from "@edge-runtime/primitives"
-import mime from "mime-types"
+import { startDevServer } from "./start-dev-server"
+import { getDevServerAxios } from "./get-dev-server-axios"
+import { uploadExamplesFromDirectory } from "./upload-examples-from-directory"
+import { unlink } from "fs/promises"
+import * as Path from "path"
+import { appendFileSync } from "fs"
+import { startWatcher } from "./start-watcher"
 
 export const devCmd = async (ctx: AppContext, args: any) => {
   const params = z
@@ -24,7 +23,8 @@ export const devCmd = async (ctx: AppContext, args: any) => {
 
   // Load package.json, install tscircuit if it's not installed. If any other
   // tscircuit dependency like @tscircuit/builder is installed, then don't
-  // install anything
+  // install anything. If there is nothing in the current directory, ask to
+  // instead run "tsck init"
   // TODO
 
   // Check that examples directory exists, if not create it and put inside
@@ -37,13 +37,8 @@ export const devCmd = async (ctx: AppContext, args: any) => {
   // Add .tscircuit to .gitignore if it's not already there
   // TODO
 
-  // Delete and recreate .tscircuit/dev-server.db
-
-  // INSIDE BACKGROUND SERVICE
-  // Soupify contents of examples directory, upload to sqlite db
-  // TODO
-  // Watch and re-soupify on file changes
-  // TODO
+  // Delete old .tscircuit/dev-server.db
+  unlink(Path.join(cwd, ".tscircuit/dev-server.db")).catch(() => {})
 
   console.log(
     kleur.green(
@@ -51,144 +46,16 @@ export const devCmd = async (ctx: AppContext, args: any) => {
     )
   )
   const serverUrl = `http://localhost:${port}`
-  const axios = defaultAxios.create({
-    baseURL: serverUrl,
-  })
-  axios.interceptors.response.use(
-    (res) => res,
-    (err) => {
-      console.log(
-        kleur.red(
-          `[ERR] ${err.response?.status} ${err.config.method?.toUpperCase()} ${
-            err.config.url
-          }\n\n${JSON.stringify(err.response?.data, null, "  ")}`
-            .replace(/\\n/g, "\n")
-            .replace(/\\"/g, '"')
-        )
-      )
-      console.log(kleur.yellow("[Request Body]:"), err.config.data)
-      return Promise.reject(err)
-    }
-  )
-
-  const requestHandler = async (bunReq: Request) => {
-    const url = new URL(bunReq.url)
-    const requestType = url.pathname.startsWith("/api")
-      ? "api"
-      : url.pathname.startsWith("/preview")
-      ? "preview"
-      : "other"
+  const devServerAxios = getDevServerAxios({ serverUrl })
 
-    if (requestType === "api") {
-      // We have to shim Bun's Request until they fix the issue where
-      // .clone() doesn't clone the body
-      // https://github.com/oven-sh/bun/pull/8668
-      const req = new EdgeRuntimePrimitives.Request(bunReq.url, {
-        headers: bunReq.headers,
-        method: bunReq.method,
-        body: bunReq.body,
-      })
-
-      const response = await apiServer.makeRequest(req, {})
-      return response
-    } else if (requestType === "preview") {
-      let frontendPath = url.pathname.replace("/preview", "")
-      if (frontendPath === "/" || frontendPath === "") {
-        frontendPath = "index.html"
-      }
-      frontendPath = frontendPath.replace(/^\//, "")
-
-      const fileContent: Buffer = (frontendVfs as any)[frontendPath]
-      if (!fileContent) {
-        return new Response("Not Found", { status: 404 })
-      }
-      return new Response(
-        // Buffer.from(fileContent.toString(), "base64").toString("utf-8"),
-        fileContent.toString("utf-8"),
-        {
-          headers: {
-            "Content-Type": mime.lookup(frontendPath) || "text/plain",
-          },
-        }
-      )
-    } else {
-      return new Response(null, {
-        status: 302,
-        headers: {
-          Location: "/preview",
-        },
-      })
-    }
-  }
-
-  let server: any
-  if (typeof Bun !== "undefined") {
-    server = Bun.serve({
-      fetch: requestHandler,
-      development: false,
-      port,
-    })
-  } else {
-    // Hono messes up the globals, only import it if we don't have Bun
-    const { Hono } = await import("hono")
-    const { serve } = await import("@hono/node-server")
-    const honoApp = new Hono()
-    honoApp.all("/*", (c) => requestHandler(c.req.raw))
-    server = serve({
-      fetch: honoApp.fetch,
-      port,
-    })
-  }
-
-  console.log("Running health check against dev server...")
-  await axios.get("/api/health")
+  const server = await startDevServer({ port, devServerAxios })
 
   // Soupify all examples
   console.log(`Loading examples...`)
-  const examplesDir = joinPath(cwd, "examples")
-  const exampleFileNames = readdirSync(examplesDir)
-  for (const exampleFileName of exampleFileNames) {
-    try {
-      const examplePath = joinPath(examplesDir, exampleFileName)
-      const exampleContent = readFileSync(examplePath).toString()
-
-      let exportName = "default"
-
-      if (!exampleContent.includes("export default")) {
-        // try to infer an export if possible
-        const matches = Array.from(
-          exampleContent.matchAll(
-            /export\s+(const|function)\s+([A-Z]\w+)\s*=?/g
-          )
-        ).map((m) => m[2])
-        if (matches.length === 0) {
-          throw new Error(`No export detected in "${exampleFileName}"`)
-        }
-        if (matches.length > 1) {
-          throw new Error(
-            `Multiple exports detected in "${exampleFileName}", only single exports currently working`
-          )
-        }
-        exportName = matches[0]
-      }
+  await uploadExamplesFromDirectory({ devServerAxios, cwd })
 
-      console.log("Soupifying...")
-      const soup = await soupify({
-        filePath: examplePath,
-        exportName,
-      })
-      console.log(`Soupified ${exampleFileName}!`)
-      console.log(`Uploading ${exampleFileName}...`)
-      await axios.post("/api/dev_package_examples/create", {
-        tscircuit_soup: soup,
-        file_path: examplePath,
-        export_name: exportName,
-      })
-      console.log(`Uploaded ${exampleFileName}!`)
-    } catch (e: any) {
-      console.log(kleur.red(e.toString()))
-    }
-  }
+  // Start watcher
+  const watcher = await startWatcher({ cwd, devServerAxios })
 
   while (true) {
     const { action } = await prompts({
@@ -211,6 +78,7 @@ export const devCmd = async (ctx: AppContext, args: any) => {
     } else if (!action || action === "stop") {
       if (server.stop) server.stop()
       if (server.close) server.close()
+      watcher.stop()
       break
     }
   }

package/lib/cmd-fns/dev/soupify-and-upload-example-file.ts

@@ -0,0 +1,53 @@
+import kleur from "kleur"
+import { join as joinPath } from "path"
+import { AxiosInstance } from "axios"
+import { readdirSync, readFileSync } from "fs"
+import { soupify } from "lib/soupify"
+
+export const soupifyAndUploadExampleFile = async ({
+  examplesDir,
+  exampleFileName,
+  devServerAxios,
+}: {
+  examplesDir: string
+  exampleFileName: string
+  devServerAxios: AxiosInstance
+}) => {
+  try {
+    const examplePath = joinPath(examplesDir, exampleFileName)
+    const exampleContent = readFileSync(examplePath).toString()
+
+    let exportName = "default"
+
+    if (!exampleContent.includes("export default")) {
+      // try to infer an export if possible
+      const matches = Array.from(
+        exampleContent.matchAll(/export\s+(const|function)\s+([A-Z]\w+)\s*=?/g)
+      ).map((m) => m[2])
+      if (matches.length === 0) {
+        throw new Error(`No export detected in "${exampleFileName}"`)
+      }
+      if (matches.length > 1) {
+        throw new Error(
+          `Multiple exports detected in "${exampleFileName}", only single exports currently working`
+        )
+      }
+      exportName = matches[0]
+    }
+
+    console.log(kleur.gray(`[soupifying] ${exampleFileName}...`))
+    const soup = await soupify({
+      filePath: examplePath,
+      exportName,
+    })
+    console.log(kleur.gray(`[uploading ] ${exampleFileName}...`))
+    await devServerAxios.post("/api/dev_package_examples/create", {
+      tscircuit_soup: soup,
+      file_path: examplePath,
+      export_name: exportName,
+    })
+    console.log(kleur.gray(`[   done   ] ${exampleFileName}!`))
+  } catch (e: any) {
+    console.log(kleur.red(e.toString()))
+  }
+}

package/lib/cmd-fns/dev/start-dev-server.ts

@@ -0,0 +1,34 @@
+import { AxiosInstance } from "axios"
+import { devServerRequestHandler } from "./dev-server-request-handler"
+
+export const startDevServer = async ({
+  port,
+  devServerAxios,
+}: {
+  port: number
+  devServerAxios: AxiosInstance
+}) => {
+  let server: any
+  if (typeof Bun !== "undefined") {
+    server = Bun.serve({
+      fetch: devServerRequestHandler,
+      development: false,
+      port,
+    })
+  } else {
+    // Hono messes up the globals, only import it if we don't have Bun
+    const { Hono } = await import("hono")
+    const { serve } = await import("@hono/node-server")
+    const honoApp = new Hono()
+    honoApp.all("/*", (c) => devServerRequestHandler(c.req.raw))
+    server = serve({
+      fetch: honoApp.fetch,
+      port,
+    })
+  }
+
+  console.log("Running health check against dev server...")
+  await devServerAxios.get("/api/health")
+
+  return server
+}

package/lib/cmd-fns/dev/start-watcher.ts

@@ -0,0 +1,48 @@
+import { AxiosInstance } from "axios"
+import chokidar from "chokidar"
+import { uploadExamplesFromDirectory } from "./upload-examples-from-directory"
+import kleur from "kleur"
+
+export const startWatcher = async ({
+  cwd,
+  devServerAxios,
+}: {
+  cwd: string
+  devServerAxios: AxiosInstance
+}) => {
+  const watcher = chokidar.watch(`${cwd}/**/*.tsx`, {
+    ignored: /node_modules/,
+    persistent: true,
+  })
+
+  const upload_queue_state = {
+    dirty: false,
+    should_run: true,
+  }
+  watcher.on("change", async (path) => {
+    console.log(`File ${path} has been changed`)
+    // TODO analyze to determine which examples were impacted
+    upload_queue_state.dirty = true
+  })
+
+  async function uploadInBackground() {
+    while (upload_queue_state.should_run) {
+      if (upload_queue_state.dirty) {
+        console.log(kleur.yellow("Changes detected, re-uploading examples..."))
+        upload_queue_state.dirty = false
+        await uploadExamplesFromDirectory({ cwd, devServerAxios })
+      }
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+  }
+
+  const _backgroundUploaderPromise = uploadInBackground()
+
+  return {
+    _backgroundUploaderPromise,
+    stop: () => {
+      upload_queue_state.should_run = false
+      watcher.close()
+    },
+  }
+}

package/lib/cmd-fns/dev/upload-examples-from-directory.ts

@@ -0,0 +1,26 @@
+import kleur from "kleur"
+import { join as joinPath } from "path"
+import { AxiosInstance } from "axios"
+import { readdirSync, readFileSync } from "fs"
+import { soupify } from "lib/soupify"
+import { soupifyAndUploadExampleFile } from "./soupify-and-upload-example-file"
+
+export const uploadExamplesFromDirectory = async ({
+  cwd,
+  devServerAxios,
+}: {
+  cwd: string
+  devServerAxios: AxiosInstance
+}) => {
+  const examplesDir = joinPath(cwd, "examples")
+  const exampleFileNames = readdirSync(examplesDir)
+  for (const exampleFileName of exampleFileNames) {
+    if (exampleFileName.endsWith(".__tmp_entrypoint.tsx")) continue
+    if (!exampleFileName.endsWith(".tsx")) continue
+    await soupifyAndUploadExampleFile({
+      devServerAxios,
+      examplesDir,
+      exampleFileName,
+    })
+  }
+}

package/lib/cmd-fns/init.ts

@@ -59,6 +59,9 @@ export const initCmd = async (ctx: AppContext, args: any) => {
     await $`${pkm} add -D typescript tsx`
   }
 
+  // TODO just allow adding "tscircuit" in the future
+  await $`${pkm} add -D @tscircuit/react-fiber @tscircuit/builder`
+
   console.log("Changing package name...")
   // Change package.json "name" to params.name
   const packageJson = JSON.parse(readFileSync("package.json", "utf-8"))
@@ -66,9 +69,9 @@ export const initCmd = async (ctx: AppContext, args: any) => {
   writeFileSync("package.json", JSON.stringify(packageJson, null, 2))
 
   console.log(`Adding ".tscircuit" to .gitignore`)
-  appendFileSync(".gitignore", "\n.tscircuit", {
+  appendFileSync(".gitignore", "\n.tscircuit\n*.__tmp_entrypoint.tsx", {
     encoding: "utf-8",
-    flag: "w+",
+    flag: "a+",
   })
 
   console.log("Creating lib and examples directories...")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/cli",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "description": "Command line tool for developing, publishing and installing tscircuit circuits",
@@ -11,7 +11,8 @@
     "start:dev-server": "bun build:dev-server && bun cli.ts dev -y --cwd ./tests/assets/example-project",
     "build:dev-server": "cd dev-server-api && bun run build && cd ../dev-server-frontend && bun run build",
     "build:cli": "bun build-cli.ts",
-    "build": "bun build:dev-server && npm run build:cli"
+    "build": "bun build:dev-server && npm run build:cli",
+    "test:init": "bun cli.ts init --dir ./tmp/test --name test"
   },
   "bin": {
     "tscircuit": "./dist/cli.js",
@@ -28,6 +29,7 @@
     "@tscircuit/react-fiber": "^1.0.6",
     "axios": "^1.6.7",
     "better-sqlite3": "^9.4.3",
+    "chokidar": "^3.6.0",
     "commander": "^12.0.0",
     "configstore": "^6.0.0",
     "dax-sh": "^0.39.2",
@@ -48,6 +50,7 @@
   },
   "devDependencies": {
     "@types/bun": "^1.0.8",
+    "@types/chokidar": "^2.1.3",
     "@types/configstore": "^6.0.2",
     "@types/lodash": "^4.14.202",
     "@types/mime-types": "^2.1.4",

package/tests/assets/example-project/src/MyCircuit.tsx

@@ -1,5 +1,5 @@
 import "@tscircuit/react-fiber"
 
 export const MyCircuit = () => (
-  <resistor name="R1" resistance="10kohm" footprint="0805" />
+  <resistor name="R2" resistance="20kohm" footprint="0805" />
 )