@tscircuit/cli 0.0.5 → 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/index.ts

@@ -8,8 +8,9 @@ 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"
+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
@@ -21,17 +22,25 @@ export const devCmd = async (ctx: AppContext, args: any) => {
 
   const { cwd, port } = params
 
+  // 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)
+
+  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)
+  }
+
+  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 "tsck init"
-  // TODO
-
-  // Check that examples directory exists, if not create it and put inside
-  // a sample file ExampleCircuit.ts
-  // TODO
-
-  // Create .tscircuit directory if it doesn't exist
+  // instead run "tsci init"
   // TODO
 
   // Add .tscircuit to .gitignore if it's not already there

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

@@ -3,6 +3,7 @@ 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,
@@ -17,23 +18,7 @@ export const soupifyAndUploadExampleFile = async ({
     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]
-    }
+    const exportName = inferExportNameFromSource(exampleContent)
 
     console.log(kleur.gray(`[soupifying] ${exampleFileName}...`))
     const soup = await soupify({

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"

package/lib/cmd-fns/init/create-or-modify-npmrc.ts

@@ -0,0 +1,21 @@
+import { existsSync, writeFileSync } from "fs"
+import kleur from "kleur"
+import * as Path from "path"
+import { getGeneratedNpmrc } from "./get-generated-npmrc"
+import { AppContext } from "lib/util/app-context"
+
+export const createOrModifyNpmrc = async (
+  { quiet = true }: { quiet?: boolean },
+  ctx: AppContext
+) => {
+  const npmrcPath = Path.join(ctx.cwd, ".npmrc")
+
+  if (existsSync(npmrcPath)) {
+    // TODO check that @tsci registry is correctly set
+    if (!quiet) {
+      console.log(kleur.yellow("npmrc already exists, not doing anything"))
+    }
+  } else {
+    writeFileSync(npmrcPath, getGeneratedNpmrc(ctx))
+  }
+}

package/lib/cmd-fns/init/get-generated-npmrc.ts

@@ -0,0 +1,8 @@
+import { AppContext } from "lib/util/app-context"
+
+export const getGeneratedNpmrc = (ctx: AppContext) =>
+  `
+
+@tsci:registry=${ctx.registry_url}/npm
+
+`.trim()

package/lib/cmd-fns/init/get-generated-readme.ts

@@ -0,0 +1,34 @@
+export const getGeneratedReadme = ({
+  name,
+  shouldHaveProjectGeneratedNotice = false,
+}: {
+  name: string
+  shouldHaveProjectGeneratedNotice?: boolean
+}) => {
+  return `
+# ${name}
+${
+  shouldHaveProjectGeneratedNotice
+    ? `\n\n> This project was generated using [tsci](https://github.com/tscircuit/tscircuit)\n`
+    : ""
+}
+To develop and view the examples, run \`tsci dev\` and open [http://localhost:3020](http://localhost:3020) in your browser.
+
+## Developing
+
+You should install an editor like [VS Code](https://code.visualstudio.com/) with a typescript extension. Many web developers already have this.
+
+Usually, you'll want to develop some named circuits inside of the \`lib\` directory,
+export them in the \`index.ts\` file, then show how to use them in the \`examples\` directory.
+
+Any file in \`examples\` will be automatically loaded and appear in the browser preview when you run \`tsci dev\`. It auto-reloads when you make changes, no need to reload the page or re-run the command.
+
+> [!TIP] Make sure to replace this README with some details about your project and how to use it.
+
+## Publishing
+
+After you're satisfied with your project, publish it on the [tscircuit registry](https://registry.tscircuit.com) with \`tsci publish\`
+  
+  
+`.trim()
+}

package/lib/cmd-fns/init/get-generated-tsconfig.ts

@@ -0,0 +1,34 @@
+export const getGeneratedTsconfig = () =>
+  `
+
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "types": ["@tscircuit/react-fiber"],
+    "baseUrl": ".",
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
+
+`.trim()

package/lib/cmd-fns/{init.ts → init/index.ts}

@@ -1,4 +1,4 @@
-import { AppContext } from "../util/app-context"
+import { AppContext } from "../../util/app-context"
 import { z } from "zod"
 import {
   readFileSync,
@@ -10,6 +10,10 @@ import {
 } from "fs"
 import * as Path from "node:path"
 import $ from "dax-sh"
+import { getGeneratedReadme } from "./get-generated-readme"
+import { getGeneratedTsconfig } from "./get-generated-tsconfig"
+import { getGeneratedNpmrc } from "./get-generated-npmrc"
+import { createOrModifyNpmrc } from "./create-or-modify-npmrc"
 
 export const initCmd = async (ctx: AppContext, args: any) => {
   const params = z
@@ -69,11 +73,14 @@ 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\n*.__tmp_entrypoint.tsx", {
+  appendFileSync(".gitignore", "\n.tscircuit\n*.__tmp_entrypoint.tsx\ndist", {
     encoding: "utf-8",
     flag: "a+",
   })
 
+  console.log("Add .npmrc with tscircuit registry...")
+  await createOrModifyNpmrc({ quiet: false }, ctx)
+
   console.log("Creating lib and examples directories...")
   mkdirSync("examples", { recursive: true })
   mkdirSync("lib", { recursive: true })
@@ -107,69 +114,14 @@ export const MyExample = () => (
   // Override the README file
   writeFileSync(
     "README.md",
-    `
-# ${params.name}
-
-> This project was generated using [tsck](https://github.com/tscircuit/tscircuit)
-
-To develop and view the examples, run \`tsck dev\` and open [http://localhost:3020](http://localhost:3020) in your browser.
-
-## Developing
-
-You should install an editor like [VS Code](https://code.visualstudio.com/) with a typescript extension. Many web developers already have this.
-
-Usually, you'll want to develop some named circuits inside of the \`lib\` directory,
-export them in the \`index.ts\` file, then show how to use them in the \`examples\` directory.
-
-Any file in \`examples\` will be automatically loaded and appear in the browser preview when you run \`tsck dev\`. It auto-reloads when you make changes, no need to reload the page or re-run the command.
-
-> [!TIP] Make sure to replace this README with some details about your project and how to use it.
-
-## Publishing
-
-After you're satisfied with your project, publish it on the [tscircuit registry](https://registry.tscircuit.com) with \`tsck publish\`
-
-
-
-`.trim()
+    getGeneratedReadme({
+      name: params.name!,
+      shouldHaveProjectGeneratedNotice: true,
+    })
   )
 
   // Open tsconfig.json and modify it to import the tscircuit types
-  writeFileSync(
-    "tsconfig.json",
-    `
-{
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "types": ["@tscircuit/react-fiber"],
-    "baseUrl": ".",
-
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
-  }
-}
-  
-`.trim()
-  )
+  writeFileSync("tsconfig.json", getGeneratedTsconfig())
 
-  console.log("Done! Run `tsck dev` to start developing!")
+  console.log("Done! Run `tsci dev` to start developing!")
 }

package/lib/cmd-fns/install.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 installCmd = 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 install ${flagsString} ${params.packages
+    .map((p) => `@tsci/${p.replace(/\//, ".")}`)
+    .join(" ")}`
+  console.log(kleur.gray(`> ${cmd}`))
+
+  await $`npm install ${flagsString} ${params.packages
+    .map((p) => `@tsci/${p.replace(/\//, ".")}`)
+    .join(" ")}`
+}