@tscircuit/cli 0.0.2

package/dev-server-api/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@tscircuit/dev-server-api",
+  "main": "dist/bundle.ts",
+  "type": "module",
+  "scripts": {
+    "start": "edgespec dev --port 3021",
+    "build": "edgespec bundle -o dist/bundle.ts"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.9",
+    "@types/bun": "latest",
+    "@types/sql.js": "^1.4.9"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.4.3",
+    "edgespec": "^0.0.69",
+    "kysely": "^0.27.3",
+    "kysely-bun-sqlite": "^0.3.2",
+    "zod": "^3.22.4"
+  }
+}

package/dev-server-api/routes/api/dev_package_examples/create.ts

@@ -0,0 +1,43 @@
+import { withEdgeSpec } from "src/with-edge-spec"
+import { NotFoundError } from "edgespec/middleware"
+import { z } from "zod"
+
+export default withEdgeSpec({
+  methods: ["POST"],
+  jsonBody: z.object({
+    file_path: z.string(),
+    export_name: z.string().default("default"),
+    tscircuit_soup: z.any(),
+  }),
+  jsonResponse: z.object({
+    dev_package_example: z.object({
+      dev_package_example_id: z.coerce.number(),
+      file_path: z.string(),
+      tscircuit_soup: z.any(),
+      last_updated_at: z.string().datetime(),
+    }),
+  }),
+  auth: "none",
+})(async (req, ctx) => {
+  const dev_package_example = await ctx.db
+    .insertInto("dev_package_example")
+    .values({
+      file_path: req.jsonBody.file_path,
+      export_name: req.jsonBody.export_name,
+      tscircuit_soup: JSON.stringify(req.jsonBody.tscircuit_soup),
+      last_updated_at: new Date().toISOString(),
+    })
+    .onConflict((oc) =>
+      oc.columns(["file_path"]).doUpdateSet({
+        export_name: req.jsonBody.export_name,
+        tscircuit_soup: JSON.stringify(req.jsonBody.tscircuit_soup),
+        last_updated_at: new Date().toISOString(),
+      })
+    )
+    .returningAll()
+    .executeTakeFirstOrThrow()
+
+  return ctx.json({
+    dev_package_example,
+  })
+})

package/dev-server-api/routes/api/dev_package_examples/get.ts

@@ -0,0 +1,37 @@
+import { withEdgeSpec } from "src/with-edge-spec"
+import { NotFoundError } from "edgespec/middleware"
+import { z } from "zod"
+
+export default withEdgeSpec({
+  methods: ["GET", "POST"],
+  commonParams: z.object({
+    dev_package_example_id: z.coerce.number(),
+  }),
+  jsonResponse: z.object({
+    dev_package_example: z.object({
+      dev_package_example_id: z.coerce.number(),
+      file_path: z.string(),
+      tscircuit_soup: z.any(),
+      last_updated_at: z.string().datetime(),
+    }),
+  }),
+  auth: "none",
+})(async (req, ctx) => {
+  return ctx.json({
+    dev_package_example: await ctx.db
+      .selectFrom("dev_package_example")
+      .selectAll()
+      .where(
+        "dev_package_example_id",
+        "=",
+        req.commonParams.dev_package_example_id
+      )
+      .executeTakeFirstOrThrow((e) => {
+        throw new NotFoundError("Package not found")
+      })
+      .then((r) => ({
+        ...r,
+        tscircuit_soup: JSON.parse(r.tscircuit_soup),
+      })),
+  })
+})

package/dev-server-api/routes/api/dev_package_examples/list.ts

@@ -0,0 +1,29 @@
+import { withEdgeSpec } from "src/with-edge-spec"
+import { z } from "zod"
+
+export default withEdgeSpec({
+  methods: ["GET", "POST"],
+  jsonResponse: z.object({
+    dev_package_examples: z.array(
+      z.object({
+        dev_package_example_id: z.coerce.number(),
+        file_path: z.string(),
+        export_name: z.string(),
+        last_updated_at: z.string().datetime(),
+      })
+    ),
+  }),
+  auth: "none",
+})(async (req, ctx) => {
+  return ctx.json({
+    dev_package_examples: await ctx.db
+      .selectFrom("dev_package_example")
+      .select([
+        "dev_package_example_id",
+        "file_path",
+        "export_name",
+        "last_updated_at",
+      ])
+      .execute(),
+  })
+})

package/dev-server-api/routes/api/dev_package_examples/update.ts

@@ -0,0 +1,31 @@
+import { withEdgeSpec } from "src/with-edge-spec"
+import { NotFoundError } from "edgespec/middleware"
+import { z } from "zod"
+
+export default withEdgeSpec({
+  methods: ["POST"],
+  jsonBody: z.object({
+    dev_package_example_id: z.coerce.number(),
+    tscircuit_soup: z.any(),
+  }),
+  jsonResponse: z.object({
+    dev_package_example: z.object({
+      dev_package_example_id: z.coerce.number(),
+      tscircuit_soup: z.any(),
+      last_updated_at: z.string().datetime(),
+    }),
+  }),
+  auth: "none",
+})(async (req, ctx) => {
+  return ctx.json({
+    dev_package_example: await ctx.db
+      .updateTable("dev_package_example")
+      .set({
+        tscircuit_soup: req.jsonBody.tscircuit_soup,
+        last_updated_at: new Date().toISOString(),
+      })
+      .returningAll()
+      .where("dev_package_example_id", "=", req.jsonBody.dev_package_example_id)
+      .executeTakeFirstOrThrow(),
+  })
+})

package/dev-server-api/routes/api/health.ts

@@ -0,0 +1,11 @@
+import { withEdgeSpec } from "../../src/with-edge-spec"
+import { z } from "zod"
+
+export default withEdgeSpec({
+  methods: ["GET", "POST"],
+  jsonResponse: z.object({
+    ok: z.boolean(),
+  }),
+})(async (req, ctx) => {
+  return ctx.json({ ok: true })
+})

package/dev-server-api/src/db/create-schema.ts

@@ -0,0 +1,14 @@
+import type { DbClient } from "./get-db"
+
+export const createSchema = async (db: DbClient) => {
+  await db.schema
+    .createTable("dev_package_example")
+    .addColumn("dev_package_example_id", "integer", (col) =>
+      col.primaryKey().autoIncrement()
+    )
+    .addColumn("file_path", "text", (col) => col.unique())
+    .addColumn("export_name", "text")
+    .addColumn("tscircuit_soup", "json")
+    .addColumn("last_updated_at", "text")
+    .execute()
+}

package/dev-server-api/src/db/get-db.ts

@@ -0,0 +1,78 @@
+import { Kysely, sql, type Generated, SqliteDialect } from "kysely"
+import { createSchema } from "./create-schema"
+import { mkdirSync } from "fs"
+import * as Path from "path"
+
+interface DevPackageExample {
+  dev_package_example_id: Generated<number>
+  tscircuit_soup: any
+  file_path: string
+  export_name: string
+  last_updated_at: string
+}
+
+interface KyselyDatabaseSchema {
+  dev_package_example: DevPackageExample
+}
+
+export type DbClient = Kysely<KyselyDatabaseSchema>
+
+// let globalDb: Database | undefined
+
+let globalDb: Kysely<KyselyDatabaseSchema> | undefined
+
+export const getDb = async (): Promise<Kysely<KyselyDatabaseSchema>> => {
+  if (globalDb) return globalDb
+
+  const devServerDbPath =
+    process.env.TSCI_DEV_SERVER_DB ?? "./.tscircuit/dev-server.db"
+
+  mkdirSync(Path.dirname(devServerDbPath), { recursive: true })
+
+  // better-sqlite3 doesn't work in bun, so if we see we can use the bun
+  // alternative, attempt to use that instead
+  let dialect: any
+
+  if (typeof Bun !== "undefined") {
+    // console.log("Attempting to use bun-sqlite")
+    try {
+      const { BunSqliteDialect } = await import("kysely-bun-sqlite")
+      const { Database } = await import("bun:sqlite")
+      dialect = new BunSqliteDialect({
+        database: new Database(devServerDbPath, {
+          create: true,
+        }),
+      })
+    } catch (e) {}
+  }
+
+  if (!dialect) {
+    // console.log("Attempting to use better-sqlite3")
+    try {
+      const BetterSqlite3 = await import("better-sqlite3")
+      dialect = new SqliteDialect({
+        database: new BetterSqlite3.default(devServerDbPath),
+      })
+    } catch (e) {}
+  }
+
+  if (!dialect) {
+    throw new Error("Was not able to load sqlite dialect")
+  }
+
+  const db = new Kysely<KyselyDatabaseSchema>({
+    dialect,
+  })
+
+  const schemaExistsResult = await sql`
+    SELECT name
+    FROM sqlite_master
+    WHERE type='table' AND name='dev_package_example'
+  `.execute(db)
+
+  if (schemaExistsResult.rows.length === 0) {
+    await createSchema(db)
+  }
+
+  return db
+}

package/dev-server-api/src/middlewares/with-db.ts

@@ -0,0 +1,14 @@
+import type { Middleware } from "edgespec"
+import { getDb, type DbClient } from "../db/get-db"
+
+export const withDb: Middleware<
+  {},
+  {
+    db: DbClient
+  }
+> = async (req, ctx, next) => {
+  if (!ctx.db) {
+    ctx.db = await getDb()
+  }
+  return next(req, ctx)
+}

package/dev-server-api/src/middlewares/with-error-response.ts

@@ -0,0 +1,24 @@
+import type { Middleware } from "edgespec/middleware"
+import kleur from "kleur"
+
+export const withErrorResponse: Middleware<{}, {}> = async (req, ctx, next) => {
+  try {
+    return await next(req, ctx)
+  } catch (error: any) {
+    console.error(kleur.red("Intercepted error:"), error)
+    // If error is a Response, return it
+    if (error instanceof Response) {
+      return error
+    }
+    return (ctx as any).json(
+      {
+        ok: false,
+        error: {
+          message: error?.message,
+          error_code: error?.error_code ?? "internal_server_error",
+        },
+      },
+      { status: error?.status || 500 }
+    )
+  }
+}

package/dev-server-api/src/with-edge-spec.ts

@@ -0,0 +1,8 @@
+import { createWithEdgeSpec } from "edgespec"
+import { withDb } from "./middlewares/with-db"
+import { withErrorResponse } from "./middlewares/with-error-response"
+
+export const withEdgeSpec = createWithEdgeSpec({
+  authMiddleware: {},
+  beforeAuthMiddleware: [withErrorResponse, withDb],
+})

package/dev-server-api/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "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
+  }
+}

package/dev-server-frontend/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-unused-vars': 'off',
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+}

package/dev-server-frontend/README.md

@@ -0,0 +1,3 @@
+# @tscircuit/dev-server-frontend
+
+Frontend for the tscircuit dev server.

package/dev-server-frontend/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils"
+  }
+}

package/dev-server-frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>[dev] tscircuit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dev-server-frontend/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tscircuit/dev-server-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/bundle.ts",
+  "exports": {
+    ".": "./dist/bundle.ts"
+  },
+  "scripts": {
+    "dev": "vite",
+    "start": "npm run dev",
+    "build": "tsc && vite build --base /preview && rm -f dist/bundle* && make-vfs --dir dist --outfile ./dist/bundle.ts",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@tscircuit/pcb-viewer": "^1.2.12",
+    "@tscircuit/schematic-viewer": "^1.1.5",
+    "axios": "^1.6.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-query": "^3.39.3",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "make-vfs": "1.0.10",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6"
+  }
+}

package/dev-server-frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/dev-server-frontend/src/App.tsx

@@ -0,0 +1,22 @@
+import { TabsContent } from "./components/ui/tabs"
+import { MenubarShortcut } from "src/components/ui/menubar"
+import { CommandK } from "./components/command-k"
+import { useToastIfApiNotConnected } from "./hooks/toast-if-api-not-connected"
+import { Header } from "./Header"
+import { ExampleContentView } from "./ExampleContentView"
+
+function App() {
+  useToastIfApiNotConnected()
+
+  return (
+    <div className="">
+      <Header />
+      <div className="">
+        <ExampleContentView />
+      </div>
+      <CommandK />
+    </div>
+  )
+}
+
+export default App

package/dev-server-frontend/src/ExampleContentView.tsx

@@ -0,0 +1,60 @@
+import { useQuery } from "react-query"
+import { useGlobalStore } from "./hooks/use-global-store"
+import axios from "axios"
+import { Schematic } from "@tscircuit/schematic-viewer"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { cn } from "./lib/utils"
+
+export const ExampleContentView = () => {
+  const devExamplePackageId = useGlobalStore(
+    (s) => s.active_dev_example_package_id
+  )
+
+  const { data: pkg } = useQuery(
+    ["dev_package_example", devExamplePackageId],
+    async () =>
+      axios
+        .post(`/api/dev_package_examples/get`, {
+          dev_package_example_id: devExamplePackageId,
+        })
+        .then((r) => r.data.dev_package_example)
+  )
+
+  const viewMode = useGlobalStore((s) => s.view_mode)
+  const splitMode = useGlobalStore((s) => s.split_mode)
+
+  const editorHeight = window.innerHeight - 52
+  const halfHeight = Math.floor(editorHeight / 2)
+
+  const itemHeight =
+    viewMode === "split" && splitMode === "vertical" ? halfHeight : editorHeight
+
+  return (
+    <div
+      key={pkg?.last_updated_at}
+      className={cn(
+        `h-[${editorHeight}px]`,
+        viewMode === "split" &&
+          splitMode === "horizontal" &&
+          "grid grid-cols-2",
+        viewMode === "split" && splitMode === "vertical" && "grid grid-rows-2"
+      )}
+    >
+      {pkg && (viewMode === "schematic" || viewMode === "split") && (
+        <Schematic
+          key={pkg?.last_updated_at}
+          style={{ height: itemHeight }}
+          soup={pkg.tscircuit_soup}
+          showTable={false}
+        />
+      )}
+      {pkg && (viewMode === "pcb" || viewMode === "split") && (
+        <PCBViewer
+          key={pkg?.last_updated_at}
+          height={itemHeight}
+          soup={pkg.tscircuit_soup}
+        />
+      )}
+    </div>
+  )
+}

package/dev-server-frontend/src/Header.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react"
+import { SelectExampleSearch } from "./components/select-example-search"
+import { Button } from "./components/ui/button"
+import { Tabs, TabsList, TabsTrigger } from "./components/ui/tabs"
+import { RotateCounterClockwiseIcon } from "@radix-ui/react-icons"
+import { useGlobalStore } from "./hooks/use-global-store"
+import { HeaderMenu } from "./HeaderMenu"
+import { CommandShortcut } from "./components/ui/command"
+
+export const Header = () => {
+  const [viewMode, setViewMode] = useGlobalStore((s) => [
+    s.view_mode,
+    s.setViewMode,
+  ])
+  const [splitMode, setSplitMode] = useGlobalStore((s) => [
+    s.split_mode,
+    s.setSplitMode,
+  ])
+  const [inDebugMode, setInDebugMode] = useState(false)
+
+  return (
+    <div className="p-2 border-b border-b-gray-200 shadow-sm grid grid-cols-3">
+      <div className="flex">
+        <div className="inline-flex">
+          <HeaderMenu />
+        </div>
+      </div>
+      <div className="justify-center flex">
+        <SelectExampleSearch />
+      </div>
+      <div className="flex justify-end">
+        {/* Tabs from shadcn with "Tab One" and "Tab Two" */}
+        <Tabs onValueChange={(v) => setViewMode(v as any)} value={viewMode}>
+          <TabsList>
+            <TabsTrigger value="schematic">Schematic</TabsTrigger>
+            <TabsTrigger value="pcb">PCB</TabsTrigger>
+            <TabsTrigger value="split">Split</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <Button
+          variant="outline"
+          disabled={viewMode !== "split"}
+          className="ml-1 group"
+          onClick={() => {
+            setSplitMode(splitMode === "horizontal" ? "vertical" : "horizontal")
+          }}
+        >
+          <RotateCounterClockwiseIcon className="scale-x-[-1] group-hover:rotate-[30deg] transition-transform" />
+        </Button>
+      </div>
+    </div>
+  )
+}