working cosmos fixtures

tscircuit · Dec 10, 2024 · 8b07a55 · 8b07a55
1 parent 63d9e77
commit 8b07a55
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 19 deletions.
diff --git a/biome.json b/biome.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": ["cosmos-export", "dist", "package.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "complexity": {
+        "noForEach": "info"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "style": {
+        "noUselessElse": "off",
+        "noNonNullAssertion": "off",
+        "useNumberNamespace": "off",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": true,
+            "requireAscii": true,
+            "filenameCases": ["kebab-case", "export"]
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/examples/resistor-and-capacitor.fixture.tsx b/examples/resistor-and-capacitor.fixture.tsx
@@ -0,0 +1,16 @@
+import { SchematicViewer } from "lib/components/SchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <div style={{ width: "100vw", height: "90vh" }}>
+    <SchematicViewer
+      circuitJson={renderToCircuitJson(
+        <board width="10mm" height="10mm">
+          <resistor name="R1" resistance={1000} schX={-2} />
+          <capacitor name="C1" capacitance="1uF" schX={2} />
+          <trace from=".R1 .pin2" to=".C1 .pin1" />
+        </board>,
+      )}
+    />
+  </div>
+)
diff --git a/index.html b/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/vite/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/lib/components/SchematicViewer.tsx b/lib/components/SchematicViewer.tsx
@@ -0,0 +1,78 @@
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { toString as transformToString } from "transformation-matrix"
+
+interface Props {
+  circuitJson: Array<{ type: string }>
+}
+
+export const SchematicViewer = ({ circuitJson }: Props) => {
+  const svgDivRef = useRef<HTMLDivElement>(null)
+  const { ref: containerRef } = useMouseMatrixTransform({
+    onSetTransform(transform) {
+      if (!svgDivRef.current) return
+      svgDivRef.current.style.transform = transformToString(transform)
+    },
+  })
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const updateDimensions = () => {
+      const rect = containerRef.current?.getBoundingClientRect()
+
+      setContainerWidth(rect?.width || 0)
+      setContainerHeight(rect?.height || 0)
+    }
+
+    // Set initial dimensions
+    updateDimensions()
+
+    // Add resize listener
+    const resizeObserver = new ResizeObserver(updateDimensions)
+    resizeObserver.observe(containerRef.current)
+
+    // Fallback to window resize
+    window.addEventListener("resize", updateDimensions)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener("resize", updateDimensions)
+    }
+  }, [])
+
+  const svg = useMemo(() => {
+    if (!containerWidth || !containerHeight) return ""
+
+    return convertCircuitJsonToSchematicSvg(circuitJson as any, {
+      width: containerWidth,
+      height: containerHeight || 720,
+    })
+  }, [circuitJson, containerWidth, containerHeight])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        backgroundColor: "#F5F1ED",
+        overflow: "hidden",
+        cursor: "grab",
+        minHeight: "300px",
+        height: "100%",
+      }}
+    >
+      <div
+        ref={svgDivRef}
+        style={{
+          pointerEvents: "auto",
+          transformOrigin: "0 0",
+        }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    </div>
+  )
+}
diff --git a/lib/dev/render-to-circuit-json.ts b/lib/dev/render-to-circuit-json.ts
@@ -0,0 +1,8 @@
+import * as Core from "@tscircuit/core"
+console.log(Core)
+
+export const renderToCircuitJson = (board: React.ReactElement) => {
+  const circuit = new Core.Circuit()
+  circuit.add(board)
+  return circuit.getCircuitJson()
+}
diff --git a/lib/test.fixture.tsx b/lib/test.fixture.tsx
diff --git a/package.json b/package.json
@@ -9,21 +9,28 @@
     "build:site": "cosmos-export"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@tscircuit/core": "^0.0.222",
     "@types/bun": "latest",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "react": "^19.0.0",
+    "circuit-json": "^0.0.111",
+    "react": "18",
     "react-cosmos": "^6.2.1",
     "react-cosmos-plugin-vite": "^6.2.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "18",
     "tsup": "^8.3.5",
     "vite": "^6.0.3"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "circuit-to-svg": "^0.0.90"
+    "circuit-to-svg": "^0.0.90",
+    "debug": "^4.4.0",
+    "performance-now": "^2.1.0",
+    "react-reconciler": "^0.31.0",
+    "use-mouse-matrix-transform": "^1.1.13"
   }
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+import { SchematicViewer } from "lib/components/SchematicViewer"
+
+const root = createRoot(document.getElementById("root")!)
+
+root.render(
+  <React.StrictMode>
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <SchematicViewer
+        circuitJson={renderToCircuitJson(
+          <board width="10mm" height="10mm">
+            <resistor name="R1" resistance={1000} />
+          </board>,
+        )}
+      />
+    </div>
+  </React.StrictMode>,
+)
diff --git a/test.ts b/test.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     // Enable latest features
     "lib": ["ESNext", "DOM"],
-    "target": "ESNext",
+    "target": "ES2020",
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
@@ -12,6 +12,7 @@
     "paths": {
       "lib/*": ["lib/*"]
     },
+    "esModuleInterop": true,
 
     // Bundler mode
     "moduleResolution": "bundler",

diff --git a/vite.config.js b/vite.config.js
@@ -1,12 +1,15 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
-import { resolve } from "path"
+import { resolve } from "node:path"
 
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      lib: resolve(__dirname, "./lib")
-    }
+      lib: resolve(__dirname, "./lib"),
+    },
+  },
+  define: {
+    global: {},
   },
 })
diff --git a/vite/main.tsx b/vite/main.tsx