Merge pull request #62 from tscircuit/fix/circuit-json-dependency

chore: dependency update

package.json

@@ -38,13 +38,13 @@
     "@tscircuit/builder": "^1.5.126",
     "@tscircuit/react-fiber": "^1.1.29",
     "@tscircuit/routing": "^1.3.0",
-    "@tscircuit/soup": "^0.0.41",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
     "@types/react": "^18.0.15",
     "@vitejs/plugin-react": "^4.3.0",
     "ava": "^4.3.1",
     "chromatic": "^11.5.5",
+    "circuit-json": "^0.0.82",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "next": "^14.2.3",

src/Schematic.tsx

@@ -1,24 +1,21 @@
-import { useCallback, useEffect, useState } from "react"
-import { ContextProviders, ProjectComponent } from "schematic-components"
-import { SuperGrid, toMMSI } from "react-supergrid"
 import {
   AnyElement,
   createProjectBuilder,
   createProjectFromElements,
   findBoundsAndCenter,
-  transformSchematicElement,
 } from "@tscircuit/builder"
-import * as builder1 from "@tscircuit/builder"
 import TscReactFiber, { createRoot } from "@tscircuit/react-fiber"
-import { SchematicElement } from "schematic-components/SchematicElement"
-import { collectElementRefs } from "lib/utils/collect-element-refs"
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
-import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
-import { identity, compose, scale, translate } from "transformation-matrix"
+import { AnyCircuitElement } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
+import { useCallback, useEffect, useState } from "react"
+import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
+import { SuperGrid, toMMSI } from "react-supergrid"
 import useMeasure from "react-use-measure"
+import { ContextProviders } from "schematic-components"
+import { SchematicElement } from "schematic-components/SchematicElement"
+import { compose, scale, translate } from "transformation-matrix"
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { TableViewer } from "./schematic-components/TableViewer"
-import { AnySoupElement } from "@tscircuit/soup"
 
 const ErrorBoundary = TypedErrorBoundary as any
 
@@ -41,13 +38,13 @@ export interface SchematicProps {
   /** @deprecated use soup */
   elements?: any
 
-  soup?: AnySoupElement[]
+  soup?: AnyCircuitElement[]
 
   style?: any
 
   showTable?: boolean
 
-  _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[]
+  _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
 }
 
 export const Schematic = (props: SchematicProps) => {
@@ -84,29 +81,29 @@ export const SchematicWithoutContext = ({
       const elmBounds = (ref.current as HTMLDivElement).getBoundingClientRect()
 
       const { center, width, height } = elements.some((e) =>
-        e.type.startsWith("schematic_")
+        e.type.startsWith("schematic_"),
       )
         ? findBoundsAndCenter(
-            elements.filter((e) => e.type.startsWith("schematic_"))
+            elements.filter((e) => e.type.startsWith("schematic_")),
           )
         : { center: { x: 0, y: 0 }, width: 0.001, height: 0.001 }
 
       const scaleFactor = Math.min(
         (elmBounds.width ?? 0) / width,
         (elmBounds.height ?? 0) / height,
-        100
+        100,
       )
       setElements(elements)
       setProject(createProjectFromElements(elements))
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
           scale(scaleFactor, -scaleFactor, 0, 0),
-          translate(-center.x, -center.y)
-        )
+          translate(-center.x, -center.y),
+        ),
       )
     },
-    [setElements, setTransform]
+    [setElements, setTransform],
   )
 
   useEffect(() => {

src/lib/utils/collect-element-refs.ts

@@ -1,8 +1,8 @@
-import { AnySoupElement, SourcePort } from "@tscircuit/soup"
+import { AnyCircuitElement, SourcePort } from "circuit-json"
 
 export const collectElementRefs = (
-  elm: AnySoupElement,
-  allElms: AnySoupElement[]
+  elm: AnyCircuitElement,
+  allElms: AnyCircuitElement[]
 ) => {
   const source_port = allElms.find(
     (e) =>

src/schematic-components/SchematicElement.tsx

@@ -1,4 +1,4 @@
-import { AnySoupElement } from "@tscircuit/soup"
+import { AnyCircuitElement } from "circuit-json"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicBox from "./SchematicBox"
 import SchematicComponent from "./SchematicComponent"
@@ -16,8 +16,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnySoupElement
-  allElements: AnySoupElement[]
+  element: AnyCircuitElement
+  allElements: AnyCircuitElement[]
 }) => {
   // A lot of the split logic for element types into a project is here:
   // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13

src/stories/led-circuit-builder.stories.tsx

@@ -95,7 +95,7 @@ const $soup = pb
 export const LEDCircuitBuilder = () => {
   const soup = useMaybePromise($soup)
   if (!soup) return null
-  return <Schematic style={{ height: 600 }} soup={soup} />
+  return <Schematic style={{ height: 600 }} soup={soup as any} />
 }
 
 export default {