run a server in dev for snapshot testing

tscircuit · Jan 8, 2025 · 9427ebe · 9427ebe
1 parent 8cb65dc
commit 9427ebe
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!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>EasyEDA Converter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/site/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "url": "https://github.com/tscircuit/easyeda-converter"
   },
   "scripts": {
+    "start": "vite",
     "test": "bun test",
     "cli": "bun cli/main.ts",
     "build": "tsup lib/index.ts cli/main.ts --format esm --dts --sourcemap",
@@ -27,12 +28,21 @@
     "@biomejs/biome": "^1.8.3",
     "@tscircuit/log-soup": "1.0.2",
     "@tscircuit/props": "^0.0.128",
+    "@tscircuit/runframe": "^0.0.72",
     "@tscircuit/soup-util": "^0.0.41",
     "@types/bun": "latest",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "bun-match-svg": "^0.0.6",
-    "circuit-json": "^0.0.92",
-    "circuit-to-svg": "^0.0.56",
-    "tsup": "^8.1.0"
+    "circuit-json": "^0.0.129",
+    "circuit-to-svg": "^0.0.99",
+    "class-variance-authority": "^0.7.1",
+    "react": "18",
+    "react-dom": "18",
+    "tsup": "^8.1.0",
+    "vite": "^6.0.7",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "typescript": "^5.5.2"

diff --git a/site/App.tsx b/site/App.tsx
@@ -0,0 +1,68 @@
+import { RunFrame } from "@tscircuit/runframe/runner"
+import { useEffect, useState } from "react"
+export default () => {
+  const params = new URLSearchParams(window.location.search)
+  const jlcpcb_part_number = params.get("jlcpcb_part_number")
+
+  const [error, setError] = useState<string | null>(null)
+  const [tscircuitCode, setTscircuitCode] = useState<string>("")
+
+  useEffect(() => {
+    if (!jlcpcb_part_number) {
+      return
+    }
+    setError(null)
+
+    fetch("/api", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ jlcpcb_part_number }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          throw new Error(data.error)
+        }
+        setTscircuitCode(data.tscircuitCode)
+      })
+      .catch((error) => {
+        setError(error.message)
+      })
+  }, [jlcpcb_part_number])
+
+  if (!jlcpcb_part_number) {
+    return (
+      <div>No part number provided, add ?jlcpcb_part_number= to the URL</div>
+    )
+  }
+
+  if (!tscircuitCode) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      <RunFrame
+        entrypoint="entrypoint.tsx"
+        fsMap={{
+          "entrypoint.tsx": `
+import * as Snippet from "./snippet.tsx"
+
+let bestImport = Object.keys(Snippet).find((key) => !key.startsWith("use"))
+
+const Component = Snippet[bestImport]
+
+circuit.add(<board width="10mm" height="10mm"><Component name="U1" /></board>)
+    
+    `,
+          "snippet.tsx": tscircuitCode,
+        }}
+      />
+      <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto">
+        <code className="text-sm font-mono">{tscircuitCode}</code>
+      </pre>
+    </div>
+  )
+}
diff --git a/site/main.tsx b/site/main.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tsconfigPaths from "vite-tsconfig-paths"
+import type { Plugin } from "vite"
+import { fetchEasyEDAComponent, convertRawEasyEdaToTs } from "./dist/lib/index"
+
+// Create plugin to handle JLCPCB part number requests
+const jlcpcbPlugin = (): Plugin => ({
+  name: "jlcpcb-api",
+  configureServer(server) {
+    server.middlewares.use(async (req, res, next) => {
+      if (req.url === "/api" && req.method === "POST") {
+        try {
+          const chunks = []
+          for await (const chunk of req) {
+            chunks.push(chunk)
+          }
+          const body = JSON.parse(Buffer.concat(chunks).toString())
+
+          if (!body.jlcpcb_part_number) {
+            res.statusCode = 400
+            res.end(JSON.stringify({ error: "Missing jlcpcb_part_number" }))
+            return
+          }
+
+          const rawEasyJson = await fetchEasyEDAComponent(
+            body.jlcpcb_part_number,
+          )
+          const tsxComponent = await convertRawEasyEdaToTs(rawEasyJson)
+
+          res.setHeader("Content-Type", "application/json")
+          res.end(JSON.stringify({ tscircuitCode: tsxComponent }))
+        } catch (error: any) {
+          res.statusCode = 500
+          res.end(JSON.stringify({ error: error.message }))
+        }
+      } else {
+        next()
+      }
+    })
+  },
+})
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths(), jlcpcbPlugin()],
+  define: {
+    global: "globalThis",
+  },
+})