circuit-json-to-tscircuit 0.0.1 → 0.0.3

package/.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

package/.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 }}

package/.github/workflows/bun-test.yml

@@ -0,0 +1,25 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Bun Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run tests
+        run: bun test

package/.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

package/README.md

@@ -3,3 +3,20 @@
 Convert [circuit json](https://github.com/tscircuit/circuit-json) code to [tscircuit](https://github.com/tscircuit/tscircuit) code.
 
 ## Usage
+
+```bash
+bun add circuit-json-to-tscircuit
+```
+
+```tsx
+import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
+
+const circuitJson = await fetch("https://tscircuit.com/circuit.json")
+
+const tscircuit = convertCircuitJsonToTscircuit(circuitJson)
+console.log(tscircuit)
+
+/**
+
+*/
+```

package/dist/index.d.ts

@@ -1,5 +1,14 @@
-import { CircuitJson } from 'circuit-json';
+import { AnyCircuitElement, CircuitJson } from 'circuit-json';
 
-declare const convertCircuitJsonToTscircuit: (circuitJson: CircuitJson) => string;
+interface ComponentTemplateParams {
+    pinLabels?: Record<string, string[]> | Record<string, string>;
+    componentName: string;
+    objUrl?: string;
+    circuitJson: AnyCircuitElement[];
+    supplierPartNumbers?: Record<string, string[]>;
+    manufacturerPartNumber?: string;
+}
+
+declare const convertCircuitJsonToTscircuit: (circuitJson: CircuitJson, opts: Omit<ComponentTemplateParams, "circuitJson">) => string;
 
 export { convertCircuitJsonToTscircuit };

package/dist/index.js

@@ -1,6 +1,103 @@
+// lib/generate-footprint-tsx.tsx
+import { mmStr } from "@tscircuit/mm";
+import { su } from "@tscircuit/soup-util";
+var generateFootprintTsx = (circuitJson) => {
+  const holes = su(circuitJson).pcb_hole.list();
+  const platedHoles = su(circuitJson).pcb_plated_hole.list();
+  const smtPads = su(circuitJson).pcb_smtpad.list();
+  const silkscreenPaths = su(circuitJson).pcb_silkscreen_path.list();
+  const elementStrings = [];
+  for (const hole of holes) {
+    if (hole.hole_shape === "circle") {
+      elementStrings.push(
+        `<hole pcbX="${mmStr(hole.x)}" pcbY="${mmStr(hole.y)}" diameter="${mmStr(hole.hole_diameter)}" />`
+      );
+    } else if (hole.hole_shape === "oval") {
+      console.warn("Unhandled oval hole in conversion (needs implementation)");
+    }
+  }
+  for (const platedHole of platedHoles) {
+    if (platedHole.shape === "oval" || platedHole.shape === "pill") {
+      elementStrings.push(
+        `<platedhole  portHints={${JSON.stringify(platedHole.port_hints)}} pcbX="${mmStr(platedHole.x)}" pcbY="${mmStr(platedHole.y)}" outerHeight="${mmStr(platedHole.outer_height)}" outerWidth="${mmStr(platedHole.outer_width)}" holeHeight="${mmStr(platedHole.hole_height)}" holeWidth="${mmStr(platedHole.hole_width)}" height="${mmStr(platedHole.hole_height)}" shape="${platedHole.shape}" />`
+      );
+    } else if (platedHole.shape === "circle") {
+      elementStrings.push(
+        `<platedhole  portHints={${JSON.stringify(platedHole.port_hints)}} pcbX="${mmStr(platedHole.x)}" pcbY="${mmStr(platedHole.y)}" outerDiameter="${mmStr(platedHole.outer_diameter)}" holeDiameter="${mmStr(platedHole.hole_diameter)}" shape="circle" />`
+      );
+    }
+  }
+  for (const smtPad of smtPads) {
+    if (smtPad.shape === "circle") {
+      elementStrings.push(
+        `<smtpad portHints={${JSON.stringify(smtPad.port_hints)}} pcbX="${mmStr(smtPad.x)}" pcbY="${mmStr(smtPad.y)}" radius="${mmStr(smtPad.radius)}" shape="circle" />`
+      );
+    } else if (smtPad.shape === "rect") {
+      elementStrings.push(
+        `<smtpad portHints={${JSON.stringify(smtPad.port_hints)}} pcbX="${mmStr(smtPad.x)}" pcbY="${mmStr(smtPad.y)}" width="${mmStr(smtPad.width)}" height="${mmStr(smtPad.height)}" shape="rect" />`
+      );
+    }
+  }
+  for (const silkscreenPath of silkscreenPaths) {
+    elementStrings.push(
+      `<silkscreenpath route={${JSON.stringify(silkscreenPath.route)}} />`
+    );
+  }
+  return `
+      <footprint>
+        ${elementStrings.join("\n")}
+      </footprint>
+  `.trim();
+};
+
+// lib/get-component-using-template.ts
+var getComponentUsingTemplate = ({
+  pinLabels,
+  componentName,
+  objUrl,
+  circuitJson,
+  supplierPartNumbers,
+  manufacturerPartNumber
+}) => {
+  const footprintTsx = generateFootprintTsx(circuitJson);
+  return `
+import { createUseComponent } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
+
+const pinLabels = ${JSON.stringify(pinLabels, null, "  ")} as const
+
+interface Props extends CommonLayoutProps {
+  name: string
+}
+
+export const ${componentName} = (props: Props) => {
+  return (
+    <chip
+      {...props}
+      ${objUrl ? `cadModel={{
+        objUrl: "${objUrl}",
+        rotationOffset: { x: 0, y: 0, z: 0 },
+        positionOffset: { x: 0, y: 0, z: 0 },
+      }}` : ""}
+      ${pinLabels ? `pinLabels={${JSON.stringify(pinLabels, null, "  ")}}` : ""}
+      ${supplierPartNumbers ? `supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}` : ""}
+      ${manufacturerPartNumber ? `manufacturerPartNumber="${manufacturerPartNumber}"` : ""}
+      footprint={${footprintTsx}}
+    />
+  )
+}
+
+export const use${componentName} = createUseComponent(${componentName}, pinLabels)
+
+`.trim();
+};
+
 // lib/index.ts
-var convertCircuitJsonToTscircuit = (circuitJson) => {
-  return "";
+var convertCircuitJsonToTscircuit = (circuitJson, opts) => {
+  return getComponentUsingTemplate({
+    circuitJson,
+    ...opts
+  });
 };
 export {
   convertCircuitJsonToTscircuit

package/lib/generate-footprint-tsx.tsx

@@ -0,0 +1,60 @@
+import { mmStr } from "@tscircuit/mm"
+import type { AnyCircuitElement } from "circuit-json"
+import { su } from "@tscircuit/soup-util"
+
+export const generateFootprintTsx = (
+  circuitJson: AnyCircuitElement[],
+): string => {
+  const holes = su(circuitJson).pcb_hole.list()
+  const platedHoles = su(circuitJson).pcb_plated_hole.list()
+  const smtPads = su(circuitJson).pcb_smtpad.list()
+  const silkscreenPaths = su(circuitJson).pcb_silkscreen_path.list()
+
+  const elementStrings: string[] = []
+
+  for (const hole of holes) {
+    if (hole.hole_shape === "circle") {
+      elementStrings.push(
+        `<hole pcbX="${mmStr(hole.x)}" pcbY="${mmStr(hole.y)}" diameter="${mmStr(hole.hole_diameter)}" />`,
+      )
+    } else if (hole.hole_shape === "oval") {
+      console.warn("Unhandled oval hole in conversion (needs implementation)")
+    }
+  }
+
+  for (const platedHole of platedHoles) {
+    if (platedHole.shape === "oval" || platedHole.shape === "pill") {
+      elementStrings.push(
+        `<platedhole  portHints={${JSON.stringify(platedHole.port_hints)}} pcbX="${mmStr(platedHole.x)}" pcbY="${mmStr(platedHole.y)}" outerHeight="${mmStr(platedHole.outer_height)}" outerWidth="${mmStr(platedHole.outer_width)}" holeHeight="${mmStr(platedHole.hole_height)}" holeWidth="${mmStr(platedHole.hole_width)}" height="${mmStr(platedHole.hole_height)}" shape="${platedHole.shape}" />`,
+      )
+    } else if (platedHole.shape === "circle") {
+      elementStrings.push(
+        `<platedhole  portHints={${JSON.stringify(platedHole.port_hints)}} pcbX="${mmStr(platedHole.x)}" pcbY="${mmStr(platedHole.y)}" outerDiameter="${mmStr(platedHole.outer_diameter)}" holeDiameter="${mmStr(platedHole.hole_diameter)}" shape="circle" />`,
+      )
+    }
+  }
+
+  for (const smtPad of smtPads) {
+    if (smtPad.shape === "circle") {
+      elementStrings.push(
+        `<smtpad portHints={${JSON.stringify(smtPad.port_hints)}} pcbX="${mmStr(smtPad.x)}" pcbY="${mmStr(smtPad.y)}" radius="${mmStr(smtPad.radius)}" shape="circle" />`,
+      )
+    } else if (smtPad.shape === "rect") {
+      elementStrings.push(
+        `<smtpad portHints={${JSON.stringify(smtPad.port_hints)}} pcbX="${mmStr(smtPad.x)}" pcbY="${mmStr(smtPad.y)}" width="${mmStr(smtPad.width)}" height="${mmStr(smtPad.height)}" shape="rect" />`,
+      )
+    }
+  }
+
+  for (const silkscreenPath of silkscreenPaths) {
+    elementStrings.push(
+      `<silkscreenpath route={${JSON.stringify(silkscreenPath.route)}} />`,
+    )
+  }
+
+  return `
+      <footprint>
+        ${elementStrings.join("\n")}
+      </footprint>
+  `.trim()
+}

package/lib/get-component-using-template.ts

@@ -0,0 +1,56 @@
+import type { AnyCircuitElement } from "circuit-json"
+import { generateFootprintTsx } from "./generate-footprint-tsx"
+
+export interface ComponentTemplateParams {
+  pinLabels?: Record<string, string[]> | Record<string, string> // ChipProps["pinLabels"]
+  componentName: string
+  objUrl?: string
+  circuitJson: AnyCircuitElement[]
+  supplierPartNumbers?: Record<string, string[]>
+  manufacturerPartNumber?: string
+}
+
+export const getComponentUsingTemplate = ({
+  pinLabels,
+  componentName,
+  objUrl,
+  circuitJson,
+  supplierPartNumbers,
+  manufacturerPartNumber,
+}: ComponentTemplateParams) => {
+  const footprintTsx = generateFootprintTsx(circuitJson)
+  return `
+import { createUseComponent } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
+
+const pinLabels = ${JSON.stringify(pinLabels, null, "  ")} as const
+
+interface Props extends CommonLayoutProps {
+  name: string
+}
+
+export const ${componentName} = (props: Props) => {
+  return (
+    <chip
+      {...props}
+      ${
+        objUrl
+          ? `cadModel={{
+        objUrl: "${objUrl}",
+        rotationOffset: { x: 0, y: 0, z: 0 },
+        positionOffset: { x: 0, y: 0, z: 0 },
+      }}`
+          : ""
+      }
+      ${pinLabels ? `pinLabels={${JSON.stringify(pinLabels, null, "  ")}}` : ""}
+      ${supplierPartNumbers ? `supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}` : ""}
+      ${manufacturerPartNumber ? `manufacturerPartNumber="${manufacturerPartNumber}"` : ""}
+      footprint={${footprintTsx}}
+    />
+  )
+}
+
+export const use${componentName} = createUseComponent(${componentName}, pinLabels)
+
+`.trim()
+}

package/lib/index.ts

@@ -1,5 +1,15 @@
 import type { CircuitJson } from "circuit-json"
+import {
+  getComponentUsingTemplate,
+  type ComponentTemplateParams,
+} from "./get-component-using-template"
 
-export const convertCircuitJsonToTscircuit = (circuitJson: CircuitJson) => {
-  return ""
+export const convertCircuitJsonToTscircuit = (
+  circuitJson: CircuitJson,
+  opts: Omit<ComponentTemplateParams, "circuitJson">,
+) => {
+  return getComponentUsingTemplate({
+    circuitJson,
+    ...opts,
+  })
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "circuit-json-to-tscircuit",
   "main": "dist/index.js",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "scripts": {
     "build": "tsup-node lib/index.ts --format esm --dts",
     "test": "bun test",
@@ -10,7 +10,13 @@
     "format:check": "biome format ."
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@tscircuit/core": "^0.0.251",
+    "@tscircuit/mm": "^0.0.8",
+    "@tscircuit/soup-util": "^0.0.41",
     "@types/bun": "latest",
+    "@types/react": "18",
+    "@types/react-dom": "18",
     "circuit-json": "^0.0.126",
     "tsup": "^8.3.5"
   },

package/tests/test1-basic-circuit.test.tsx

@@ -0,0 +1,54 @@
+import { test, expect } from "bun:test"
+import { convertCircuitJsonToTscircuit } from "lib/index"
+import { Circuit } from "@tscircuit/core"
+
+declare module "bun:test" {
+  interface Matchers<T = unknown> {
+    toMatchInlineSnapshot(snapshot?: string | null): Promise<MatcherResult>
+  }
+}
+
+test("test1 basic circuit", async () => {
+  const circuit = new Circuit()
+
+  circuit.add(
+    <group subcircuit>
+      <resistor name="R1" resistance="1k" footprint="0402" />
+    </group>,
+  )
+
+  const circuitJson = circuit.getCircuitJson()
+
+  const tscircuit = convertCircuitJsonToTscircuit(circuitJson, {
+    componentName: "MyResistor",
+  })
+
+  expect(tscircuit).toMatchInlineSnapshot(`
+"import { createUseComponent } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
+
+const pinLabels = undefined as const
+
+interface Props extends CommonLayoutProps {
+  name: string
+}
+
+export const MyResistor = (props: Props) => {
+  return (
+    <chip
+      {...props}
+      
+      
+      
+      
+      footprint={<footprint>
+        <smtpad portHints={["1","left"]} pcbX="-0.5mm" pcbY="0mm" width="0.6000000000000001mm" height="0.6000000000000001mm" shape="rect" />
+<smtpad portHints={["2","right"]} pcbX="0.5mm" pcbY="0mm" width="0.6000000000000001mm" height="0.6000000000000001mm" shape="rect" />
+      </footprint>}
+    />
+  )
+}
+
+export const useMyResistor = createUseComponent(MyResistor, pinLabels)"
+`)
+})

package/tests/test2-get-component-template.test.tsx

@@ -0,0 +1,77 @@
+import { test, expect } from "bun:test"
+import { convertCircuitJsonToTscircuit } from "lib/index"
+import { Circuit } from "@tscircuit/core"
+import { getComponentUsingTemplate } from "lib/get-component-using-template"
+
+test("test2 getComponentUsingTemplate", async () => {
+  const circuit = new Circuit()
+
+  circuit.add(
+    <board width="10mm" height="10mm">
+      <resistor name="R1" resistance="1k" footprint="0402" />
+    </board>,
+  )
+
+  const tscircuitCode = getComponentUsingTemplate({
+    circuitJson: circuit.getCircuitJson(),
+    componentName: "MyResistor",
+    pinLabels: {
+      pin1: ["pin1"],
+      pin2: ["pin2"],
+    },
+    objUrl: "...",
+    supplierPartNumbers: { jlcpcb: ["123456"] },
+    manufacturerPartNumber: "123456",
+  })
+
+  expect(tscircuitCode).toMatchInlineSnapshot(`
+"import { createUseComponent } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
+
+const pinLabels = {
+  "pin1": [
+    "pin1"
+  ],
+  "pin2": [
+    "pin2"
+  ]
+} as const
+
+interface Props extends CommonLayoutProps {
+  name: string
+}
+
+export const MyResistor = (props: Props) => {
+  return (
+    <chip
+      {...props}
+      cadModel={{
+        objUrl: "...",
+        rotationOffset: { x: 0, y: 0, z: 0 },
+        positionOffset: { x: 0, y: 0, z: 0 },
+      }}
+      pinLabels={{
+  "pin1": [
+    "pin1"
+  ],
+  "pin2": [
+    "pin2"
+  ]
+}}
+      supplierPartNumbers={{
+  "jlcpcb": [
+    "123456"
+  ]
+}}
+      manufacturerPartNumber="123456"
+      footprint={<footprint>
+        <smtpad portHints={["1","left"]} pcbX="-0.5mm" pcbY="0mm" width="0.6000000000000001mm" height="0.6000000000000001mm" shape="rect" />
+<smtpad portHints={["2","right"]} pcbX="0.5mm" pcbY="0mm" width="0.6000000000000001mm" height="0.6000000000000001mm" shape="rect" />
+      </footprint>}
+    />
+  )
+}
+
+export const useMyResistor = createUseComponent(MyResistor, pinLabels)"
+`)
+})

package/tsconfig.json

@@ -7,6 +7,10 @@
     "moduleDetection": "force",
     "jsx": "react-jsx",
     "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "lib/*": ["lib/*"]
+    },
 
     // Bundler mode
     "moduleResolution": "bundler",