@tscircuit/cli 0.1.4 → 0.1.6

package/biome.json

@@ -32,6 +32,7 @@
         "noForEach": "off"
       },
       "style": {
+        "noUnusedTemplateLiteral": "off",
         "noUselessElse": "off",
         "noNonNullAssertion": "off",
         "useNumberNamespace": "off",

package/cli/dev/DevServer.ts

@@ -0,0 +1,158 @@
+import ky from "ky"
+import type { FileServerRoutes } from "lib/file-server/FileServerRoutes"
+import { createHttpServer } from "lib/server/createHttpServer"
+import { EventsWatcher } from "lib/server/EventsWatcher"
+import type http from "node:http"
+import type { TypedKyInstance } from "typed-ky"
+import path from "node:path"
+import fs from "node:fs"
+import type { FileUpdatedEvent } from "lib/file-server/FileServerEvent"
+import * as chokidar from "chokidar"
+
+export class DevServer {
+  port: number
+  /**
+   * The path to a component that exports a <board /> or <group /> component
+   */
+  componentFilePath: string
+
+  projectDir: string
+
+  /**
+   * The HTTP server that hosts the file server and event bus. You can use
+   * fsKy to communicate with the file server/event bus
+   */
+  httpServer?: http.Server
+  /**
+   * Watches for events on the event bus by polling `api/events/list`
+   */
+  eventsWatcher?: EventsWatcher
+  /**
+   * A ky instance that can be used to communicate with the file server and
+   * event bus
+   */
+  fsKy: TypedKyInstance<keyof FileServerRoutes, FileServerRoutes>
+  /**
+   * A chokidar instance that watches the project directory for file changes
+   */
+  filesystemWatcher?: chokidar.FSWatcher
+
+  constructor({
+    port,
+    componentFilePath,
+  }: {
+    port: number
+    componentFilePath: string
+  }) {
+    this.port = port
+    this.componentFilePath = componentFilePath
+    this.projectDir = path.dirname(componentFilePath)
+    this.fsKy = ky.create({
+      prefixUrl: `http://localhost:${port}`,
+    }) as any
+  }
+
+  async start() {
+    const { server } = await createHttpServer(this.port)
+    this.httpServer = server
+
+    this.eventsWatcher = new EventsWatcher(`http://localhost:${this.port}`)
+    this.eventsWatcher.start()
+
+    this.eventsWatcher.on(
+      "FILE_UPDATED",
+      this.handleFileUpdatedEventFromServer.bind(this),
+    )
+
+    this.filesystemWatcher = chokidar.watch(this.projectDir, {
+      persistent: true,
+      ignoreInitial: true,
+    })
+
+    this.filesystemWatcher.on("change", (filePath) =>
+      this.handleFileChangedOnFilesystem(filePath),
+    )
+    this.filesystemWatcher.on("add", (filePath) =>
+      this.handleFileChangedOnFilesystem(filePath),
+    )
+
+    this.upsertInitialFiles()
+  }
+
+  async addEntrypoint() {
+    const relativeComponentFilePath = path.relative(
+      this.projectDir,
+      this.componentFilePath,
+    )
+    await this.fsKy.post("api/files/upsert", {
+      json: {
+        file_path: "entrypoint.tsx",
+        text_content: `
+import MyCircuit from "./${relativeComponentFilePath}"
+
+circuit.add(<MyCircuit />)
+`,
+      },
+    })
+  }
+
+  async handleFileUpdatedEventFromServer(ev: FileUpdatedEvent) {
+    if (ev.initiator === "filesystem_change") return
+
+    if (ev.file_path === "manual-edits.json") {
+      console.log("Manual edits updated, updating on filesystem...")
+      const { file } = await this.fsKy
+        .get("api/files/get", {
+          searchParams: { file_path: ev.file_path },
+        })
+        .json()
+      fs.writeFileSync(
+        path.join(this.projectDir, "manual-edits.json"),
+        file.text_content,
+      )
+    }
+  }
+
+  async handleFileChangedOnFilesystem(absoluteFilePath: string) {
+    const relativeFilePath = path.relative(this.projectDir, absoluteFilePath)
+
+    // We've temporarily disabled upserting manual edits from filesystem changes
+    // because it can be edited by the browser
+    if (relativeFilePath.includes("manual-edits.json")) return
+
+    await this.fsKy
+      .post("api/files/upsert", {
+        json: {
+          file_path: relativeFilePath,
+          text_content: fs.readFileSync(absoluteFilePath, "utf-8"),
+          initiator: "filesystem_change",
+        },
+      })
+      .json()
+  }
+
+  async upsertInitialFiles() {
+    // Scan project directory for all files and upsert them
+    const fileNames = fs.readdirSync(this.projectDir)
+    for (const fileName of fileNames) {
+      if (fs.statSync(path.join(this.projectDir, fileName)).isDirectory())
+        continue
+      const fileContent = fs.readFileSync(
+        path.join(this.projectDir, fileName),
+        "utf-8",
+      )
+      await this.fsKy.post("api/files/upsert", {
+        json: {
+          file_path: fileName,
+          text_content: fileContent,
+          initiator: "filesystem_change",
+        },
+      })
+    }
+  }
+
+  async stop() {
+    this.httpServer?.close()
+    this.eventsWatcher?.stop()
+  }
+}

package/cli/dev/register.ts

@@ -2,10 +2,11 @@ import type { Command } from "commander"
 import * as path from "node:path"
 import * as chokidar from "chokidar"
 import * as fs from "node:fs"
-import { createServer } from "lib/server/createServer"
+import { createHttpServer } from "lib/server/createHttpServer"
 import { getLocalFileDependencies } from "lib/dependency-analysis/getLocalFileDependencies"
-import { installTypes } from "../../lib/dependency-analysis/installNodeModuleTypes"
+import { installNodeModuleTypesForSnippet } from "../../lib/dependency-analysis/installNodeModuleTypesForSnippet"
 import { EventsWatcher } from "../../lib/server/EventsWatcher"
+import { DevServer } from "./DevServer"
 
 export const registerDev = (program: Command) => {
   program
@@ -20,92 +21,18 @@ export const registerDev = (program: Command) => {
 
       try {
         console.log("Installing types for imported snippets...")
-        await installTypes(absolutePath)
+        await installNodeModuleTypesForSnippet(absolutePath)
         console.log("Types installed successfully")
       } catch (error) {
         console.warn("Failed to install types:", error)
       }
 
-      // Start the server
-      await createServer(port)
-
-      const eventsWatcher = new EventsWatcher(`http://localhost:${port}`)
-      eventsWatcher.start()
-
-      await fetch(`http://localhost:${port}/api/files/upsert`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          file_path: "entrypoint.tsx",
-          text_content: `
-import MyCircuit from "./snippet.tsx"
-
-circuit.add(<MyCircuit />)
-`,
-        }),
-      })
-
-      // Function to update file content
-      const updateFile = async (filePath: string) => {
-        try {
-          const content = await fs.promises.readFile(filePath, "utf-8")
-          const response = await fetch(
-            `http://localhost:${port}/api/files/upsert`,
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                file_path: path.relative(fileDir, filePath),
-                text_content: content,
-              }),
-            },
-          )
-          if (!response.ok) {
-            console.error(`Failed to update ${filePath}`)
-          }
-        } catch (error) {
-          console.error(`Error updating ${filePath}:`, error)
-        }
-      }
-
-      // Get initial dependencies
-      const dependencies = new Set([absolutePath])
-      try {
-        const deps = getLocalFileDependencies(absolutePath)
-        deps.forEach((dep) => dependencies.add(dep))
-      } catch (error) {
-        console.warn("Failed to analyze dependencies:", error)
-      }
-
-      // Watch the main file and its dependencies
-      const filesystemWatcher = chokidar.watch(Array.from(dependencies), {
-        persistent: true,
-        ignoreInitial: false,
-      })
-
-      filesystemWatcher.on("change", async (filePath) => {
-        console.log(`File ${filePath} changed`)
-        await updateFile(filePath)
-      })
-
-      filesystemWatcher.on("add", async (filePath) => {
-        console.log(`File ${filePath} added`)
-        await updateFile(filePath)
-      })
-
-      eventsWatcher.on("FILE_UPDATED", async (ev) => {
-        if (ev.file_path === "manual-edits.json") {
-          console.log("Manual edits updated, updating on filesystem...")
-          const { file } = await fetch(
-            `http://localhost:${port}/api/files/get?file_path=manual-edits.json`,
-          ).then((r) => r.json())
-          fs.writeFileSync(
-            path.join(fileDir, "manual-edits.json"),
-            file.text_content,
-          )
-        }
+      const server = new DevServer({
+        port,
+        componentFilePath: absolutePath,
       })
 
-      console.log(`Watching ${file} and its dependencies...`)
+      await server.start()
+      await server.addEntrypoint()
     })
 }

package/cli/main.ts

@@ -9,13 +9,16 @@ import { registerConfigPrint } from "./config/print/register"
 import { registerClone } from "./clone/register"
 import { perfectCli } from "perfect-cli"
 import pkg from "../package.json"
+import semver from "semver"
 
 const program = new Command()
 
 program
   .name("tsci")
   .description("CLI for developing tscircuit snippets")
-  .version(pkg.version)
+  // HACK: at build time the version is old, we need to
+  // fix this at some point...
+  .version(semver.inc(pkg.version, "patch") ?? pkg.version)
 
 registerDev(program)
 registerClone(program)