@tscircuit/core 0.0.1

package/index.ts

@@ -0,0 +1 @@
+export * from "./lib/index"

package/lib/Project.ts

@@ -0,0 +1,84 @@
+import type { AnySoupElement } from "@tscircuit/soup"
+import type { PrimitiveComponent } from "./components/base-components/PrimitiveComponent"
+import type { SoupUtilObjects } from "@tscircuit/soup-util"
+import { su } from "@tscircuit/soup-util"
+import { isValidElement, type ReactElement } from "react"
+import { createInstanceFromReactElement } from "./fiber/create-instance-from-react-element"
+import { identity, type Matrix } from "transformation-matrix"
+
+export class Project {
+  rootComponent: PrimitiveComponent | null = null
+  children: PrimitiveComponent[]
+  db: SoupUtilObjects
+
+  constructor() {
+    this.children = []
+    this.db = su([])
+  }
+
+  add(componentOrElm: PrimitiveComponent | ReactElement) {
+    let component: PrimitiveComponent
+    if (isValidElement(componentOrElm)) {
+      // TODO store subtree
+      component = createInstanceFromReactElement(componentOrElm)
+    } else {
+      component = componentOrElm as PrimitiveComponent
+    }
+    this.children.push(component)
+  }
+
+  _guessRootComponent() {
+    if (this.rootComponent) return
+    if (this.children.length === 1) {
+      this.rootComponent = this.children[0]
+      return
+    }
+    if (this.children.length === 0) {
+      throw new Error(
+        "Not able to guess root component: Project has no children (use project.add(...))",
+      )
+    }
+
+    if (this.children.length > 0) {
+      const board =
+        this.children.find((c) => c.componentName === "Board") ?? null
+
+      if (board) {
+        this.rootComponent = board
+        return
+      }
+    }
+    throw new Error(
+      "Not able to guess root component: Project has multiple children and no board",
+    )
+  }
+
+  render() {
+    if (!this.rootComponent) {
+      this._guessRootComponent()
+    }
+    const { rootComponent, db } = this
+
+    if (!rootComponent) throw new Error("Project has no root component")
+
+    rootComponent.setProject(this)
+
+    rootComponent.runRenderCycle()
+  }
+
+  getSoup(): AnySoupElement[] {
+    return this.db.toArray()
+  }
+
+  getCircuitJson(): AnySoupElement[] {
+    return this.getSoup()
+  }
+
+  computeGlobalSchematicTransform(): Matrix {
+    return identity()
+  }
+
+  computeGlobalPcbTransform(): Matrix {
+    return identity()
+  }
+}

package/lib/components/base-components/NormalComponent.ts

@@ -0,0 +1,330 @@
+import { Footprint } from "../primitive-components/Footprint"
+import { ZodType, z } from "zod"
+import { PrimitiveComponent } from "./PrimitiveComponent"
+import { Port } from "../primitive-components/Port"
+import { symbols, type BaseSymbolName, type SchSymbol } from "schematic-symbols"
+import { fp } from "footprinter"
+import {
+  isValidElement as isReactElement,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from "react"
+import {
+  createInstanceFromReactElement,
+  type ReactSubtree,
+} from "lib/fiber/create-instance-from-react-element"
+import { getPortFromHints } from "lib/utils/getPortFromHints"
+import { createComponentsFromSoup } from "lib/utils/createComponentsFromSoup"
+
+export type PortMap<T extends string> = {
+  [K in T]: Port
+}
+
+/**
+ * A NormalComponent is the base class for most components that a user will
+ * interact with. It has the ability to set a footprint and discover ports.
+ *
+ * When you're extending a NormalComponent, you almost always want to override
+ * initPorts() to create ports for the component.
+ *
+ * class Led extends NormalComponent<typeof resistorProps> {
+ *   pin1: Port = this.portMap.pin1
+ *   pin2: Port = this.portMap.pin2
+ *
+ *   initPorts() {
+ *     this.add(new Port({ pinNumber: 1, aliases: ["anode", "pos"] }))
+ *     this.add(new Port({ pinNumber: 2, aliases: ["cathode", "neg"] }))
+ *   }
+ * }
+ */
+export class NormalComponent<
+  ZodProps extends ZodType = any,
+  PortNames extends string = never,
+> extends PrimitiveComponent<ZodProps> {
+  reactSubtrees: Array<ReactSubtree> = []
+
+  constructor(props: z.input<ZodProps>) {
+    super(props)
+    this._addChildrenFromStringFootprint()
+    this.initPorts()
+  }
+
+  /**
+   * Override this method for better control over the auto-discovery of ports.
+   *
+   * If you override this method just do something like:
+   * initPorts() {
+   *   this.add(new Port({ pinNumber: 1, aliases: ["anode", "pos"] }))
+   *   this.add(new Port({ pinNumber: 2, aliases: ["cathode", "neg"] }))
+   * }
+   *
+   * By default, we'll pull the ports from the first place we find them:
+   * 1. `config.schematicSymbolName`
+   * 2. `props.footprint`
+   *
+   */
+  initPorts() {
+    const { config } = this
+    if (config.schematicSymbolName) {
+      const sym = symbols[
+        `${config.schematicSymbolName}_horz` as keyof typeof symbols
+      ] as SchSymbol | undefined
+      if (!sym) return
+
+      for (const symPort of sym.ports) {
+        const port = getPortFromHints(symPort.labels)
+
+        if (port) {
+          port.schematicSymbolPortDef = symPort
+          this.add(port)
+        }
+      }
+
+      return
+    }
+
+    const portsFromFootprint = this.getPortsFromFootprint()
+
+    this.addAll(portsFromFootprint)
+  }
+
+  _addChildrenFromStringFootprint() {
+    const { footprint } = this.props
+    if (!footprint) return
+    if (typeof footprint === "string") {
+      const fpSoup = fp.string(footprint).soup()
+      const fpComponents = createComponentsFromSoup(fpSoup)
+      this.addAll(fpComponents)
+    }
+  }
+
+  get portMap(): PortMap<PortNames> {
+    return new Proxy(
+      {},
+      {
+        get: (target, prop): Port => {
+          const port = this.children.find(
+            (c) =>
+              c.componentName === "Port" &&
+              (c as Port).isMatchingNameOrAlias(prop as string),
+          )
+          if (!port) {
+            throw new Error(
+              `There was an issue finding the port "${prop.toString()}" inside of a ${this.componentName} component with name: "${this.props.name}". This is a bug in @tscircuit/core`,
+            )
+          }
+          return port as Port
+        },
+      },
+    ) as any
+  }
+
+  getInstanceForReactElement(element: ReactElement): NormalComponent | null {
+    for (const subtree of this.reactSubtrees) {
+      if (subtree.element === element) return subtree.component
+    }
+    return null
+  }
+
+  doInitialSourceRender() {
+    const ftype = this.config.sourceFtype
+    if (!ftype) return
+    const { db } = this.project!
+    const { _parsedProps: props } = this
+    const source_component = db.source_component.insert({
+      ftype,
+      name: props.name,
+      manufacturer_part_number: props.manufacturerPartNumber ?? props.mfn,
+      supplier_part_numbers: props.supplierPartNumbers,
+    })
+    this.source_component_id = source_component.source_component_id
+  }
+
+  /**
+   * Render the schematic component for this NormalComponent using the
+   * config.schematicSymbolName if it exists.
+   *
+   * You can override this method to do more complicated things.
+   */
+  doInitialSchematicComponentRender() {
+    const { db } = this.project!
+    const { schematicSymbolName } = this.config
+    if (!schematicSymbolName) return
+    // TODO switch between horizontal and vertical based on schRotation
+    const symbol_name = `${this.config.schematicSymbolName}_horz`
+
+    const symbol = (symbols as any)[symbol_name] as SchSymbol | undefined
+
+    if (!symbol) {
+      throw new Error(`Could not find schematic-symbol "${symbol_name}"`)
+    }
+
+    const schematic_component = db.schematic_component.insert({
+      center: { x: this.props.schX ?? 0, y: this.props.schY ?? 0 },
+      rotation: this.props.schRotation ?? 0,
+      size: symbol.size,
+      source_component_id: this.source_component_id!,
+
+      // @ts-ignore
+      symbol_name,
+    })
+    this.schematic_component_id = schematic_component.schematic_component_id
+  }
+
+  doInitialPcbComponentRender() {
+    const { db } = this.project!
+    const { _parsedProps: props } = this
+    const pcb_component = db.pcb_component.insert({
+      center: { x: this.props.pcbX ?? 0, y: this.props.pcbY ?? 0 },
+      // width/height are computed in the PcbAnalysis phase
+      width: 0,
+      height: 0,
+      layer: props.layer ?? "top",
+      rotation: props.rotation ?? 0,
+      source_component_id: this.source_component_id!,
+    })
+    this.pcb_component_id = pcb_component.pcb_component_id
+  }
+
+  doInitialPcbAnalysis(): void {
+    const { db } = this.project!
+    const { _parsedProps: props } = this
+
+    // TODO Examine children to compute width/height and pcbX/pcbY
+  }
+
+  _renderReactSubtree(element: ReactElement): ReactSubtree {
+    return {
+      element,
+      component: createInstanceFromReactElement(element),
+    }
+  }
+
+  doInitialReactSubtreesRender(): void {
+    if (isReactElement(this.props.footprint)) {
+      if (this.reactSubtrees.some((rs) => rs.element === this.props.footprint))
+        return
+      const subtree = this._renderReactSubtree(this.props.footprint)
+      this.reactSubtrees.push(subtree)
+      this.add(subtree.component)
+    }
+  }
+
+  add(componentOrElm: PrimitiveComponent | ReactElement) {
+    let component: PrimitiveComponent
+    if (isReactElement(componentOrElm)) {
+      const subtree = this._renderReactSubtree(componentOrElm)
+      this.reactSubtrees.push(subtree)
+      component = subtree.component
+    } else {
+      component = componentOrElm as PrimitiveComponent
+    }
+
+    super.add(component)
+  }
+
+  getPortsFromFootprint(): Port[] {
+    let { footprint } = this.props
+
+    if (!footprint || isValidElement(footprint)) {
+      footprint = this.children.find((c) => c.componentName === "Footprint")
+    }
+
+    if (typeof footprint === "string") {
+      const fpSoup = fp.string(footprint).soup()
+
+      const newPorts: Port[] = []
+      for (const elm of fpSoup) {
+        if ("port_hints" in elm && elm.port_hints) {
+          const newPort = getPortFromHints(elm.port_hints)
+          if (!newPort) continue
+          newPorts.push(newPort)
+        }
+      }
+
+      return newPorts
+    }
+    if (
+      !isValidElement(footprint) &&
+      footprint &&
+      footprint.componentName === "Footprint"
+    ) {
+      const fp = footprint as Footprint
+
+      const newPorts: Port[] = []
+      for (const fpChild of fp.children) {
+        const newPort = getPortFromHints(fpChild.props.portHints ?? [])
+        if (!newPort) continue
+        newPorts.push(newPort)
+      }
+
+      return newPorts
+    }
+
+    // Explore children for possible smtpads etc.
+    const newPorts: Port[] = []
+    if (!footprint) {
+      for (const child of this.children) {
+        if (child.props.portHints && child.isPcbPrimitive) {
+          const port = getPortFromHints(child.props.portHints)
+          if (port) newPorts.push(port)
+        }
+      }
+    }
+    return newPorts
+  }
+
+  getPortsFromSchematicSymbol(): Port[] {
+    const { config } = this
+    if (!config.schematicSymbolName) return []
+    const symbol: SchSymbol = (symbols as any)[config.schematicSymbolName]
+    if (!symbol) return []
+    const newPorts: Port[] = []
+    for (const symbolPort of symbol.ports) {
+      const port = getPortFromHints(symbolPort.labels)
+      if (port) {
+        port.schematicSymbolPortDef = symbolPort
+        newPorts.push(port)
+      }
+    }
+    return newPorts
+  }
+
+  /**
+   * Use data from our props to create ports for this component.
+   *
+   * Generally, this is done by looking at the schematic and the footprint,
+   * reading the pins, making sure there aren't duplicates.
+   *
+   * Can probably be removed in favor of initPorts()
+   *
+   */
+  doInitialPortDiscovery(): void {
+    const newPorts = [
+      ...this.getPortsFromFootprint(),
+      ...this.getPortsFromSchematicSymbol(),
+    ]
+
+    const existingPorts = this.children.filter(
+      (c) => c.componentName === "Port",
+    ) as Port[]
+
+    for (const newPort of newPorts) {
+      const existingPort = existingPorts.find((p) =>
+        p.isMatchingAnyOf(newPort.getNameAndAliases()),
+      )
+      if (existingPort) {
+        if (
+          !existingPort.schematicSymbolPortDef &&
+          newPort.schematicSymbolPortDef
+        ) {
+          existingPort.schematicSymbolPortDef = newPort.schematicSymbolPortDef
+        }
+        continue
+      }
+      existingPorts.push(newPort)
+      this.add(newPort)
+    }
+  }
+}

package/lib/components/base-components/PrimitiveComponent.ts

@@ -0,0 +1,299 @@
+import type { AnySoupElement, AnySourceComponent } from "@tscircuit/soup"
+import type { Project } from "../../Project"
+import type { ZodType } from "zod"
+import { z } from "zod"
+import { symbols, type SchSymbol, type BaseSymbolName } from "schematic-symbols"
+import { isValidElement as isReactElement, type ReactElement } from "react"
+import type { Port } from "../primitive-components/Port"
+import { Renderable, type RenderPhase } from "./Renderable"
+import {
+  applyToPoint,
+  compose,
+  identity,
+  translate,
+  type Matrix,
+} from "transformation-matrix"
+import { isMatchingSelector } from "lib/utils/selector-matching"
+
+export interface BaseComponentConfig {
+  schematicSymbolName?: BaseSymbolName | null
+  zodProps: ZodType
+  sourceFtype?: AnySourceComponent["ftype"] | null
+}
+
+/**
+ * A PrimitiveComponent (SmtPad, Port etc.) doesn't have the ability to contain
+ * React subtrees or explicit handling of the "footprint" prop. But otherwise
+ * has most of the features of a NormalComponent.
+ */
+export abstract class PrimitiveComponent<
+  ZodProps extends ZodType = any,
+> extends Renderable {
+  parent: PrimitiveComponent | null = null
+  children: PrimitiveComponent[]
+  childrenPendingRemoval: PrimitiveComponent[]
+
+  get config(): BaseComponentConfig {
+    return {
+      zodProps: z.object({}).passthrough(),
+    }
+  }
+
+  project: Project | null = null
+  props: z.input<ZodProps>
+  _parsedProps: z.infer<ZodProps>
+
+  componentName = ""
+  lowercaseComponentName = ""
+
+  source_group_id: string | null = null
+  source_component_id: string | null = null
+  schematic_component_id: string | null = null
+  pcb_component_id: string | null = null
+  cad_component_id: string | null = null
+
+  constructor(props: z.input<ZodProps>) {
+    super(props)
+    this.children = []
+    this.childrenPendingRemoval = []
+    this.props = props ?? {}
+    this._parsedProps = this.config.zodProps.parse(
+      props ?? {},
+    ) as z.infer<ZodProps>
+    if (!this.componentName) {
+      this.componentName = this.constructor.name
+      this.lowercaseComponentName = this.componentName.toLowerCase()
+    }
+  }
+
+  setProject(project: Project) {
+    this.project = project
+    for (const c of this.children) {
+      c.setProject(project)
+    }
+  }
+
+  setProps(props: Partial<z.input<ZodProps>>) {
+    const newProps = this.config.zodProps.parse({
+      ...this.props,
+      ...props,
+    }) as z.infer<ZodProps>
+    const oldProps = this.props
+    this.props = newProps
+    this._parsedProps = this.config.zodProps.parse(props) as z.infer<ZodProps>
+    this.onPropsChange({
+      oldProps,
+      newProps,
+      changedProps: Object.keys(props),
+    })
+    this.parent?.onChildChanged(this)
+  }
+
+  /**
+   * Computes a transformation matrix from the props of this component for PCB
+   * components
+   */
+  computePcbPropsTransform(): Matrix {
+    // TODO rotations
+    return compose(translate(this.props.pcbX, this.props.pcbY))
+  }
+
+  /**
+   * Compute a transformation matrix combining all parent transforms for PCB
+   * components
+   */
+  computePcbGlobalTransform(): Matrix {
+    return compose(
+      this.parent?.computePcbGlobalTransform() ?? identity(),
+      this.computePcbPropsTransform(),
+    )
+  }
+
+  /**
+   * Computes a transformation matrix from the props of this component for
+   * schematic components
+   */
+  computeSchematicPropsTransform(): Matrix {
+    return compose(translate(this.props.schX ?? 0, this.props.schY ?? 0))
+  }
+
+  /**
+   * Compute a transformation matrix combining all parent transforms for this
+   * component
+   */
+  computeSchematicGlobalTransform(): Matrix {
+    return compose(
+      this.parent?.computeSchematicGlobalTransform?.() ?? identity(),
+      this.computeSchematicPropsTransform(),
+    )
+  }
+
+  getSchematicSymbol(variant: "horz" | "vert" | null = null): SchSymbol | null {
+    if (variant === null) {
+      return this.getSchematicSymbol(
+        this.props.schRotation % 90 === 0 ? "vert" : "horz",
+      )
+    }
+    const { config } = this
+    if (!config.schematicSymbolName) return null
+    return symbols[
+      `${config.schematicSymbolName}_${variant}` as keyof typeof symbols
+    ]
+  }
+
+  getGlobalPcbPosition(): { x: number; y: number } {
+    return applyToPoint(this.computePcbGlobalTransform(), { x: 0, y: 0 })
+  }
+
+  getGlobalSchematicPosition(): { x: number; y: number } {
+    return applyToPoint(this.computeSchematicGlobalTransform(), { x: 0, y: 0 })
+  }
+
+  onAddToParent(parent: PrimitiveComponent) {
+    this.parent = parent
+    this.project = parent.project
+  }
+
+  /**
+   * Called whenever the props change
+   */
+  onPropsChange(params: {
+    oldProps: z.infer<ZodProps>
+    newProps: z.infer<ZodProps>
+    changedProps: string[]
+  }) {}
+
+  onChildChanged(child: PrimitiveComponent) {
+    this.parent?.onChildChanged(child)
+  }
+
+  add(component: PrimitiveComponent) {
+    component.onAddToParent(this)
+    component.parent = this
+    this.children.push(component)
+  }
+
+  addAll(components: PrimitiveComponent[]) {
+    for (const component of components) {
+      this.add(component)
+    }
+  }
+
+  remove(component: PrimitiveComponent) {
+    this.children = this.children.filter((c) => c !== component)
+    this.childrenPendingRemoval.push(component)
+    component.shouldBeRemoved = true
+  }
+
+  getNameAndAliases(): string[] {
+    return [
+      this._parsedProps.name,
+      ...(this._parsedProps.portHints ?? []),
+    ].filter(Boolean)
+  }
+  isMatchingNameOrAlias(name: string) {
+    return this.getNameAndAliases().includes(name)
+  }
+  isMatchingAnyOf(aliases: Array<string | number>) {
+    return this.getNameAndAliases().some((a) =>
+      aliases.map((a) => a.toString()).includes(a),
+    )
+  }
+
+  doesSelectorMatch(selector: string): boolean {
+    const myTypeNames = [this.componentName, this.lowercaseComponentName]
+    const myClassNames = [this._parsedProps.name].filter(Boolean)
+
+    const parts = selector.trim().split(/\> /)[0]
+    const firstPart = parts[0]
+
+    if (parts.length > 1) return false
+    if (selector === "*") return true
+    if (selector[0] === "#" && selector.slice(1) === this.props.id) return true
+    if (selector[0] === "." && myClassNames.includes(selector.slice(1)))
+      return true
+    if (/^[a-zA-Z0-9_]/.test(firstPart) && myTypeNames.includes(firstPart))
+      return true
+
+    return false
+  }
+
+  selectAll(selector: string): PrimitiveComponent[] {
+    const parts = selector.trim().split(/\s+/)
+    let results: PrimitiveComponent[] = [this]
+
+    let onlyDirectChildren = false
+    for (const part of parts) {
+      if (part === ">") {
+        onlyDirectChildren = true
+      } else {
+        results = results.flatMap((component) => {
+          return (
+            onlyDirectChildren ? component.children : component.getDescendants()
+          ).filter((descendant) => isMatchingSelector(descendant, part))
+        })
+        onlyDirectChildren = false
+      }
+    }
+
+    return results.filter((component) => component !== this)
+  }
+
+  selectOne(
+    selector: string,
+    options?: {
+      type?: string
+      port?: boolean
+      pcbPrimitive?: boolean
+      schematicPrimitive?: boolean
+    },
+  ): PrimitiveComponent | null {
+    let type = options?.type?.toLowerCase()
+    if (options?.port) type = "port"
+    if (type) {
+      return (
+        this.selectAll(selector).find(
+          (c) => c.lowercaseComponentName === type,
+        ) ?? null
+      )
+    }
+    if (options?.pcbPrimitive) {
+      return this.selectAll(selector).find((c) => c.isPcbPrimitive) ?? null
+    }
+    if (options?.schematicPrimitive) {
+      return (
+        this.selectAll(selector).find((c) => c.isSchematicPrimitive) ?? null
+      )
+    }
+    return this.selectAll(selector)[0] ?? null
+  }
+
+  getDescendants(): PrimitiveComponent[] {
+    const descendants: PrimitiveComponent[] = []
+    for (const child of this.children) {
+      descendants.push(child)
+      descendants.push(...child.getDescendants())
+    }
+    return descendants
+  }
+
+  getString(): string {
+    const { lowercaseComponentName: cname, _parsedProps: props, parent } = this
+    if (parent?.props?.name && props?.name) {
+      return `<${cname}#${this._renderId}(.${parent?.props.name}>.${props?.name}) />`
+    }
+    if (props?.name) {
+      return `<${cname}#${this._renderId} name=".${props?.name}" />`
+    }
+    if (props?.portHints) {
+      return `<${cname}#${this._renderId}(${props.portHints.map((ph: string) => `.${ph}`).join(", ")}) />`
+    }
+    return `<${cname}#${this._renderId} />`
+  }
+  get [Symbol.toStringTag](): string {
+    return this.getString()
+  }
+  [Symbol.for("nodejs.util.inspect.custom")]() {
+    return this.getString()
+  }
+}