footprint as child and footprint as prop working

package.json

@@ -16,7 +16,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@tscircuit/builder": "^1.5.6",
+    "@tscircuit/builder": "file:.yalc/@tscircuit/builder",
     "@types/react-reconciler": "^0.28.0",
     "ava": "^4.3.3",
     "axios": "^1.3.2",

src/lib/render.ts

@@ -59,12 +59,10 @@ export const hostConfig: HostConfig<
       props.onAdd(instance)
       return instance
     } else if (typeof type === "string") {
-      console.log("RENDERING ", type)
       const instance = getBuilderForType(type, rootContainer.project_builder)
 
       let footprint = props.footprint
       if (props.footprint && isValidElement(props.footprint)) {
-        console.log("Converting props.footprint")
         const fb = createFootprintBuilder(rootContainer.project_builder)
         ;(fb as any).createBuildContext =
           rootContainer.project_builder.createBuildContext
@@ -173,22 +171,18 @@ export const hostConfig: HostConfig<
     throw new Error("Text is not allowed in TSCircuit React")
   },
   appendInitialChild(parent: any, child) {
-    console.log("appendInitialChild")
     // throw new Error("appendInitialChild not implemented")
     // console.log(child.build())
     parent.appendChild(child)
   },
   appendChild(parent, child) {
-    console.log("appendChild")
     throw new Error("appendChild not implemented")
   },
   finalizeInitialChildren(instance, type, props) {
-    console.log("finalizeInitialChildren")
     // NOTE: return true for commitMount
     return false
   },
   appendChildToContainer(container: any, child) {
-    console.log("appendChildToContainer")
     if (!("appendChild" in container)) {
       throw new Error(
         `Container "${container.builder_type}" does not support appending children`

src/types/intrinsic-jsx.d.ts

@@ -1,4 +1,5 @@
 import type * as B from "@tscircuit/builder"
+import { ReactElement } from "react"
 
 type Point = [number, number] | { x: number; y: number }
 
@@ -47,8 +48,11 @@ type Position = SchematicPosition & PCBPosition
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      resistor: Parameters<B.ResistorBuilder["setSourceProperties"]>[0] &
-        Position & { children?: any }
+      resistor: { name: string; resistance: Dimension } & Position & {
+          children?: any
+        } & {
+          footprint?: any
+        }
       custom: any
       capacitor: Parameters<B.CapacitorBuilder["setSourceProperties"]>[0] &
         Position & { children?: any }
@@ -89,14 +93,15 @@ declare global {
           from?: string
           to?: string
         }
-      smtpad: Omit<
-        Parameters<B.SMTPadBuilder["setSourceProperties"]>[0],
-        "x" | "y"
-      > & {
+      smtpad: {
         shape: "circle" | "rect"
+        x: Dimension
+        y: Dimension
         layer?: string
         radius?: string
-        size?: { width: number | string; height: number | string }
+        width?: Dimension
+        height?: Dimension
+        // size?: { width: number | string; height: number | string }
       } & PCBPosition
       port: {
         name: string

tests/footprint-as-prop.test.tsx

@@ -4,21 +4,16 @@ import { createRoot } from "lib/render"
 import { createProjectBuilder } from "@tscircuit/builder"
 import { logLayout } from "./utils/log-layout"
 
-export const FragmentFootprint = () => {
+export const FootprintDefUsage1 = () => {
   return (
     <resistor
       name="R1"
       resistance="10 ohm"
       footprint={
-        // <>
-        <smtpad
-          shape="rect"
-          size={{ width: "2mm", height: "2mm" }}
-          pcb_cx={0}
-          pcb_cy={0}
-        />
-        // <smtpad pcb_cx={1} pcb_cy={0} />
-        // </>
+        <footprint>
+          <smtpad shape="rect" x={0} y={0} width="2mm" height="2mm" />
+          <smtpad shape="rect" x="1mm" y={0} width="2mm" height="2mm" />
+        </footprint>
       }
       center={[2, 1]}
     >
@@ -27,11 +22,71 @@ export const FragmentFootprint = () => {
     </resistor>
   )
 }
+export const FootprintDefUsage2 = () => {
+  return (
+    <resistor
+      name="R1"
+      resistance="10 ohm"
+      footprint={
+        <>
+          <smtpad shape="rect" x={0} y={0} width="2mm" height="2mm" />
+          <smtpad shape="rect" x="1mm" y={0} width="2mm" height="2mm" />
+        </>
+      }
+      center={[2, 1]}
+    >
+      {/* <smtpad pcb_cx={0} pcb_cy={0} />
+      <smtpad pcb_cx={1} pcb_cy={0} /> */}
+    </resistor>
+  )
+}
+export const FootprintDefUsage3 = () => {
+  return (
+    <resistor name="R1" resistance="10 ohm" center={[2, 1]}>
+      <footprint>
+        <smtpad shape="rect" x={0} y={0} width="2mm" height="2mm" />
+        <smtpad shape="rect" x="1mm" y={0} width="2mm" height="2mm" />
+      </footprint>
+    </resistor>
+  )
+}
 
-test("example footprint resistor capacitor trace", async (t) => {
+test("footprint def usage 1", async (t) => {
+  const pb = createProjectBuilder()
+  const result = await createRoot().render(<FootprintDefUsage1 />, pb)
+  await logLayout("footprint def usage 1 example", result)
+  const smtpads = result
+    .filter((r) => r.type === "pcb_smtpad")
+    .sort((a: any, b: any) => a.x - b.x)
+  const [a, b] = smtpads as any
+  t.is(a.x, 0)
+  t.is(b.x, 1)
+  t.is(a.width, 2)
+  t.is(b.width, 2)
+})
+test("footprint def usage 2", async (t) => {
+  const pb = createProjectBuilder()
+  const result = await createRoot().render(<FootprintDefUsage2 />, pb)
+  await logLayout("footprint def usage 2 example", result)
+  const smtpads = result
+    .filter((r) => r.type === "pcb_smtpad")
+    .sort((a: any, b: any) => a.x - b.x)
+  const [a, b] = smtpads as any
+  t.is(a.x, 0)
+  t.is(b.x, 1)
+  t.is(a.width, 2)
+  t.is(b.width, 2)
+})
+test("footprint def usage 3", async (t) => {
   const pb = createProjectBuilder()
-  const result = await createRoot().render(<FragmentFootprint />, pb)
-  console.log(result)
-  await logLayout("fragment footprint example", result)
-  t.pass()
+  const result = await createRoot().render(<FootprintDefUsage3 />, pb)
+  await logLayout("footprint def usage 3 example", result)
+  const smtpads = result
+    .filter((r) => r.type === "pcb_smtpad")
+    .sort((a: any, b: any) => a.x - b.x)
+  const [a, b] = smtpads as any
+  t.is(a.x, 0)
+  t.is(b.x, 1)
+  t.is(a.width, 2)
+  t.is(b.width, 2)
 })