Fix PCB Viewer to update whenever circuit json changes (#154)

examples/example8-run-button.fixture.tsx

@@ -1,19 +1,41 @@
 import { RunFrame } from "lib/components/RunFrame"
-import React from "react"
+import React, { useState } from "react"
 
-export default () => (
-  <RunFrame
-    fsMap={{
-      "main.tsx": `
+export default () => {
+  const [code, setCode] = useState(
+    `
+// edit me
 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"
-    showRunButton={true}
-  />
-)
+  )`.trim(),
+  )
+
+  return (
+    <div>
+      <textarea
+        value={code}
+        onChange={(e) => setCode(e.target.value)}
+        style={{
+          width: "100%",
+          margin: "1rem",
+          border: "1px solid #ccc",
+          padding: "1rem",
+          fontFamily: "monospace",
+          height: "200px",
+          marginBottom: "1rem",
+        }}
+      />
+      <RunFrame
+        fsMap={{
+          "main.tsx": code,
+        }}
+        entrypoint="main.tsx"
+        showRunButton={true}
+      />
+    </div>
+  )
+}

lib/components/RunFrame.tsx

@@ -1,6 +1,6 @@
 import { createCircuitWebWorker } from "@tscircuit/eval-webworker"
 import { CircuitJsonPreview, type TabId } from "./CircuitJsonPreview"
-import { useEffect, useReducer, useRef, useState } from "react"
+import { useEffect, useMemo, useReducer, useRef, useState } from "react"
 import Debug from "debug"
 import { Loader2, Play } from "lucide-react"
 
@@ -156,6 +156,7 @@ export const RunFrame = (props: Props) => {
 
     lastFsMapRef.current = fsMap
     lastEntrypointRef.current = props.entrypoint
+    lastRunCountTriggerRef.current = runCountTrigger
     setIsRunning(true)
 
     async function runWorker() {
@@ -274,6 +275,10 @@ export const RunFrame = (props: Props) => {
     runWorker()
   }, [props.fsMap, props.entrypoint, runCountTrigger])
 
+  const circuitJsonKey = useMemo(() => {
+    return `cj-${Math.random().toString(36).substring(2, 15)}`
+  }, [circuitJson])
+
   return (
     <CircuitJsonPreview
       defaultActiveTab={props.defaultActiveTab}
@@ -301,6 +306,7 @@ export const RunFrame = (props: Props) => {
       }
       onActiveTabChange={setActiveTab}
       circuitJson={circuitJson}
+      circuitJsonKey={circuitJsonKey}
       renderLog={renderLog}
       isRunningCode={isRunning}
       errorMessage={error?.error}

package.json

@@ -61,7 +61,7 @@
     "@tscircuit/core": "^0.0.272",
     "@tscircuit/eval-webworker": "^0.0.68",
     "@tscircuit/file-server": "^0.0.13",
-    "@tscircuit/pcb-viewer": "^1.10.22",
+    "@tscircuit/pcb-viewer": "^1.11.29",
     "@tscircuit/props": "^0.0.130",
     "@tscircuit/schematic-viewer": "2.0.9",
     "circuit-to-svg": "^0.0.101",