@tscircuit/cli 0.0.4 → 0.0.6

package/README.md

@@ -1,4 +1,4 @@
-# `tsck` - The TSCircuit Command Line Tool
+# `tsci` - The TSCircuit Command Line Tool
 
 Command line tool for developing tscircuit projects and interacting with the
 tscircuit registry.
@@ -11,39 +11,48 @@ npm install -g @tscircuit/cli
 
 ## Usage
 
-The `tsck` CLI is interactive by default. You can specify the `-y` or any fully-
+The `tsci` CLI is interactive by default. You can specify the `-y` or any fully-
 qualified with all required arguments to skip the interactive mode.
 
 ```bash
 # Interactively choose a command and options:
-tsck
+tsci
 
 # Login
-tsck login
+tsci login
 
 # Create a Project
-tsck init
+tsci init
 
-# Develop a Project
-tsck dev                  # build, view and edit circuit files in browser
+# Develop a Project (preview, export, and edit circuit files in browser)
+tsci dev
 
 # Manage Dependencies
-tsck install
-tsck add some-package
-tsck remove some-package
+tsci install
+tsci add some-package
+tsci remove some-package
 
-# Lint a Project
-tsck lint
-tsck lint 2024            # use 2024 tscircuit recommendations
+# Publish a Project
+tsci publish
+```
 
-# Format a Project
-tsck format
-tsck format 2024
+## Developing
 
-# Publish a Project
-tsck publish
+This project is developed with [bun](https://bun.sh/), make sure you have
+that installed.
 
-# View Your Project on Registry
-tsck open
-tsck view
-```
+Run `bun boostrap` to install dependencies and `bun cli.ts` to run test the cli in development.
+
+To run tests, run `bun test`
+
+When you're developing the dev-server, you should do the following:
+
+1. Run the development server with `bun start:dev-server:dev`
+2. Upload examples using `bun dev-server upload --watch ./tests/assets/example-project`
+3. Visit `http://localhost:3020` in your browser
+
+## Features Coming Soon
+
+- [`tsci format`](https://github.com/tscircuit/cli/issues/1)
+- [`tsci lint`](https://github.com/tscircuit/cli/issues/2)
+- [`tsci open`](https://github.com/tscircuit/cli/issues/4)

package/lib/cmd-fns/add.ts

@@ -0,0 +1,34 @@
+import kleur from "kleur"
+import { AppContext } from "lib/util/app-context"
+import { z } from "zod"
+import { createOrModifyNpmrc } from "./init/create-or-modify-npmrc"
+import $ from "dax-sh"
+
+export const addCmd = async (ctx: AppContext, args: any) => {
+  const params = z
+    .object({
+      packages: z.array(z.string()),
+      flags: z
+        .object({ dev: z.boolean().optional().default(false) })
+        .optional()
+        .default({}),
+    })
+    .parse(args)
+
+  params.packages = params.packages.map((p) => p.replace(/^@/, ""))
+
+  await createOrModifyNpmrc({ quiet: true }, ctx)
+
+  $.cd(ctx.cwd)
+
+  const flagsString = params.flags.dev ? "--dev" : ""
+
+  const cmd = `npm add ${flagsString} ${params.packages
+    .map((p) => `@tsci/${p.replace(/\//, ".")}`)
+    .join(" ")}`
+  console.log(kleur.gray(`> ${cmd}`))
+
+  await $`npm add ${flagsString} ${params.packages
+    .map((p) => `@tsci/${p.replace(/\//, ".")}`)
+    .join(" ")}`
+}

package/lib/cmd-fns/config-reveal-location.ts

@@ -1,5 +1,5 @@
 import { AppContext } from "../util/app-context"
 
 export const configRevealLocation = async (ctx: AppContext, args: any) => {
-  console.log(`tsck config path: ${ctx.global_config.path}`)
+  console.log(`tsci config path: ${ctx.global_config.path}`)
 }

package/lib/cmd-fns/dev/check-if-initialized.ts

@@ -0,0 +1,22 @@
+import { AppContext } from "../../util/app-context"
+import kleur from "kleur"
+import * as Path from "path"
+import { existsSync, readFileSync } from "fs"
+
+export const checkIfInitialized = async (ctx: AppContext) => {
+  const packageJsonPath = Path.join(ctx.cwd, "package.json")
+  if (!existsSync(packageJsonPath)) {
+    console.error(kleur.red(`No package.json found`))
+    return false
+  }
+
+  const packageJsonRaw = readFileSync(packageJsonPath, "utf-8")
+  if (!packageJsonRaw.includes("tscircuit")) {
+    console.error(
+      kleur.red(`No tscircuit dependencies are installed in this project.`)
+    )
+    return false
+  }
+
+  return true
+}

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,16 @@
 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 { startWatcher } from "./start-watcher"
+import { createOrModifyNpmrc } from "../init/create-or-modify-npmrc"
+import { checkIfInitialized } from "./check-if-initialized"
 
 export const devCmd = async (ctx: AppContext, args: any) => {
   const params = z
@@ -22,28 +22,32 @@ export const devCmd = async (ctx: AppContext, args: any) => {
 
   const { cwd, port } = params
 
-  // 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
-  // TODO
+  // In the future we should automatically run "tsci init" if the directory
+  // isn't properly initialized, for now we're just going to do a spot check
+  const isInitialized = await checkIfInitialized(ctx)
 
-  // Check that examples directory exists, if not create it and put inside
-  // a sample file ExampleCircuit.ts
-  // TODO
+  if (!isInitialized) {
+    console.log(
+      kleur.red(
+        `This project is not properly initialized. Please run "tsci init" first, or follow the manual installation steps here:\n\nhttps://github.com/tscircuit/tscircuit/blob/main/docs/manual-installation.md`
+      )
+    )
+    process.exit(1)
+  }
 
-  // Create .tscircuit directory if it doesn't exist
+  await createOrModifyNpmrc({ quiet: false }, ctx)
+
+  // 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. If there is nothing in the current directory, ask to
+  // instead run "tsci init"
   // TODO
 
   // 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 +55,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()
+  await uploadExamplesFromDirectory({ devServerAxios, cwd })
 
-      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("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 +87,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/infer-export-name-from-source.ts

@@ -0,0 +1,17 @@
+export const inferExportNameFromSource = (sourceContent: string): string => {
+  if (sourceContent.includes("export default")) {
+    return "default"
+  }
+  const matches = Array.from(
+    sourceContent.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 "${sourceContent}"`)
+  }
+  if (matches.length > 1) {
+    throw new Error(
+      `Multiple exports detected in "${sourceContent}", only single exports currently working`
+    )
+  }
+  return matches[0]
+}

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

@@ -0,0 +1,38 @@
+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 { inferExportNameFromSource } from "./infer-export-name-from-source"
+
+export const soupifyAndUploadExampleFile = async ({
+  examplesDir,
+  exampleFileName,
+  devServerAxios,
+}: {
+  examplesDir: string
+  exampleFileName: string
+  devServerAxios: AxiosInstance
+}) => {
+  try {
+    const examplePath = joinPath(examplesDir, exampleFileName)
+    const exampleContent = readFileSync(examplePath).toString()
+
+    const exportName = inferExportNameFromSource(exampleContent)
+
+    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/dev-server-upload.ts

@@ -0,0 +1,26 @@
+import { AppContext } from "../util/app-context"
+import { z } from "zod"
+import { getDevServerAxios } from "./get-dev-server-axios"
+import { uploadExamplesFromDirectory } from "./upload-examples-from-directory"
+import { startWatcher } from "./dev/start-watcher"
+
+export const devServerUpload = async (ctx: AppContext, args: any) => {
+  const params = z
+    .object({
+      dir: z.string().optional().default(ctx.cwd),
+      port: z.coerce.number().optional().default(3020),
+      watch: z.boolean().optional().default(false),
+    })
+    .parse(args)
+
+  const serverUrl = `http://localhost:${params.port}`
+  const devServerAxios = getDevServerAxios({ serverUrl })
+
+  console.log(`Loading examples...`)
+  await uploadExamplesFromDirectory({ devServerAxios, cwd: params.dir })
+
+  if (params.watch) {
+    // Start watcher
+    const watcher = await startWatcher({ cwd: params.dir, devServerAxios })
+  }
+}

package/lib/cmd-fns/index.ts

@@ -26,3 +26,8 @@ export { publish } from "./publish"
 export { soupifyCmd as soupify } from "./soupify"
 export { devCmd as dev } from "./dev"
 export { initCmd as init } from "./init"
+export { addCmd as add } from "./add"
+export { removeCmd as remove } from "./remove"
+export { installCmd as install } from "./install"
+export { uninstallCmd as uninstall } from "./uninstall"
+export { devServerUpload } from "./dev-server-upload"