Merge pull request #3 from tscircuit/cli

cli branch

.github/workflows/bun-formatcheck.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Format Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run format check
+        run: bun run format:check

.github/workflows/bun-pver-release.yml

@@ -0,0 +1,25 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install -g pver
+      - run: bun install --frozen-lockfile
+      - run: bun run build
+      - run: pver release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/bun-typecheck.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Type Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun i
+
+      - name: Run type check
+        run: bunx tsc --noEmit

examples/runframe1-basic.fixture.tsx

@@ -0,0 +1,19 @@
+import { RunFrame } from "lib/components/RunFrame"
+import React from "react"
+
+export default () => (
+  <RunFrame
+    fsMap={{
+      "main.tsx": `
+circuit.add(
+<board width="10mm" height="10mm">
+  <resistor name="R1" resistance="1k" footprint="0402" />
+  <capacitor name="C1" capacitance="1uF" footprint="0603" pcbX={4} />
+  <trace from=".R1 .pin1" to=".C1 .pin1" />
+</board>
+)
+`,
+    }}
+    entrypoint="main.tsx"
+  />
+)

lib/components/ErrorFallback.tsx

@@ -1,25 +1,25 @@
-import React from "react";
+import React from "react"
 
 export const ErrorFallback = ({ error }: { error: Error }) => {
-	return (
-		<div
-			data-testid="error-container"
-			className="error-container mt-4 bg-red-50 rounded-md border border-red-200"
-		>
-			<div className="p-4">
-				<h2 className="text-lg font-semibold text-red-800 mb-3">
-					Error Loading 3D Viewer
-				</h2>
-				<p className="text-xs font-mono whitespace-pre-wrap text-red-700">
-					{error.message}
-				</p>
-				<details
-					style={{ whiteSpace: "pre-wrap" }}
-					className="text-xs font-mono text-red-600 mt-2"
-				>
-					{error.stack}
-				</details>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div
+      data-testid="error-container"
+      className="error-container mt-4 bg-red-50 rounded-md border border-red-200"
+    >
+      <div className="p-4">
+        <h2 className="text-lg font-semibold text-red-800 mb-3">
+          Error Loading 3D Viewer
+        </h2>
+        <p className="text-xs font-mono whitespace-pre-wrap text-red-700">
+          {error.message}
+        </p>
+        <details
+          style={{ whiteSpace: "pre-wrap" }}
+          className="text-xs font-mono text-red-600 mt-2"
+        >
+          {error.stack}
+        </details>
+      </div>
+    </div>
+  )
+}

lib/components/RunFrame.tsx

@@ -1,3 +1,68 @@
-export const RunFrame = () => {
-  return <div>hello</div>
+import { createCircuitWebWorker } from "@tscircuit/eval-webworker"
+import { CircuitJsonPreview } from "./CircuitJsonPreview"
+import { useEffect, useState } from "react"
+
+// @ts-ignore
+import evalWebWorkerBlobUrl from "@tscircuit/eval-webworker/blob-url"
+
+interface Props {
+  /**
+   * Map of filenames to file contents that will be available in the worker
+   */
+  fsMap: { [filename: string]: string }
+
+  /**
+   * The entry point file that will be executed first
+   */
+  entrypoint: string
+
+  /**
+   * Called when the circuit JSON changes
+   */
+  onCircuitJsonChange?: (circuitJson: any) => void
+
+  /**
+   * Called when rendering is finished
+   */
+  onRenderingFinished?: (params: { circuitJson: any }) => void
+
+  /**
+   * Called for each render event
+   */
+  onRenderEvent?: (event: any) => void
+
+  /**
+   * Called when an error occurs
+   */
+  onError?: (error: Error) => void
+}
+
+export const RunFrame = (props: Props) => {
+  const [circuitJson, setCircuitJson] = useState<any>(null)
+
+  useEffect(() => {
+    async function runWorker() {
+      const worker = await createCircuitWebWorker({
+        webWorkerUrl: evalWebWorkerBlobUrl,
+        verbose: true,
+      })
+      const $finished = worker.executeWithFsMap({
+        entrypoint: props.entrypoint,
+        fsMap: props.fsMap,
+      })
+      console.log("waiting for execution to finish...")
+      await $finished
+      console.log("waiting for initial circuit json...")
+      setCircuitJson(await worker.getCircuitJson())
+      console.log("got initial circuit json")
+      await $finished.catch((e) => {
+        console.error(e)
+      })
+      setCircuitJson(await worker.getCircuitJson())
+    }
+    runWorker()
+  }, [props.fsMap])
+
+  console.log({ circuitJson })
+  return <CircuitJsonPreview circuitJson={circuitJson} />
 }

package.json

@@ -6,6 +6,9 @@
     "start": "cosmos",
     "build:css": "bun run scripts/build-css.ts",
     "build:site": "cosmos-export",
+    "build:cli": "vite build",
+    "format:check": "biome format .",
+    "format": "biome format --write .",
     "vercel-build": "bun run build:css && cosmos-export"
   },
   "devDependencies": {
@@ -30,9 +33,10 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-tabs": "^1.1.1",
     "@tscircuit/3d-viewer": "^0.0.46",
-    "@tscircuit/eval-webworker": "^0.0.4",
-    "@tscircuit/pcb-viewer": "^1.10.21",
+    "@tscircuit/eval-webworker": "^0.0.20",
+    "@tscircuit/pcb-viewer": "^1.10.22",
     "@tscircuit/schematic-viewer": "2.0.3",
+    "comlink": "^4.4.2",
     "cssnano": "^7.0.6",
     "lucide-react": "^0.468.0",
     "react-cosmos-plugin-vite": "^6.2.0",

postcss.config.js

@@ -1,8 +1,8 @@
 export default {
   plugins: {
-    'tailwindcss': {},
-    'cssnano': {
-      preset: 'default'
-    }
-  }
-}
+    tailwindcss: {},
+    cssnano: {
+      preset: "default",
+    },
+  },
+}

renovate.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "excludePackagePatterns": ["@tscircuit/*", "circuit-to-svg"],
+      "enabled": false
+    },
+    {
+      "matchUpdateTypes": ["major", "minor", "patch"],
+      "automerge": true
+    }
+  ]
+}

tailwind.config.js

@@ -1,5 +1,3 @@
 export default {
-  content: [
-    './lib/**/*.{js,jsx,ts,tsx}',
-  ],
-}
+  content: ["./lib/**/*.{js,jsx,ts,tsx}"],
+}

tsconfig.json

@@ -29,5 +29,15 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
-  }
+  },
+  "include": [
+    "lib/**/*.ts",
+    "lib/**/*.tsx",
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    "cli/**/*.ts",
+    "cli/**/*.tsx",
+    "scripts/**/*.ts",
+    "scripts/**/*.tsx"
+  ]
 }