Support for @tscircuit/core (#131)

* soupify tmp outputs, support for running with core

* more core integration

* fix test

* add minor comment

* support using core

* fix builder not recognizing <chip />

* fix types

* fix path not resolved issue with builds

* fix type issues with dependency update

* update core with fixed schematic symbols types

cli/lib/cmd-fns/dev/index.ts

@@ -23,6 +23,7 @@ export const devCmd = async (ctx: AppContext, args: any) => {
   const params = z
     .object({
       port: z.coerce.number().optional().default(3020),
+      core: z.boolean().optional(),
     })
     .parse(args)
 

cli/lib/cmd-fns/dev/soupify-and-upload-example-file.ts

@@ -30,6 +30,7 @@ export const soupifyAndUploadExampleFile = async (
       {
         filePath: examplePath,
         exportName,
+        useCore: ctx.params.core,
       },
       ctx,
     )

cli/lib/cmd-fns/publish/index.ts

@@ -7,7 +7,7 @@ import { existsSync, readFileSync } from "fs"
 import { getAllPackageFiles } from "cli/lib/util/get-all-package-files"
 import prompts from "prompts"
 import { getGeneratedReadme } from "../init/get-generated-readme"
-import { soupify } from "../../soupify"
+import { soupify } from "../../soupify/soupify"
 import { inferExportNameFromSource } from "../dev/infer-export-name-from-source"
 import $ from "dax-sh"
 import semver from "semver"

cli/lib/cmd-fns/soupify.ts

@@ -11,13 +11,15 @@ export const soupifyCmd = async (ctx: AppContext, args: any) => {
       file: z.string(),
       export: z.string().optional(),
       output: z.string().optional(),
+      core: z.boolean().optional(),
     })
     .parse(args)
 
   const soup = await soupify(
     {
       filePath: params.file,
       exportName: params.export,
+      useCore: params.core,
     },
     ctx,
   )

cli/lib/cmd-fns/version.ts

@@ -12,7 +12,7 @@ export const versionCmd = async (ctx: AppContext, args: any) => {
   table.push({ name: "@tscircuit/cli", current: cliPackageJson.version })
   table.push({
     name: "@tscircuit/react-fiber",
-    current: cliPackageJson.devDependencies["@tscircuit/react-fiber"],
+    current: cliPackageJson.dependencies["@tscircuit/react-fiber"],
   })
   table.push({
     name: "@tscircuit/schematic-viewer",

cli/lib/get-program.ts

@@ -12,6 +12,7 @@ export const getProgram = (ctx: AppContext) => {
     .description("Run development server in current directory")
     .option("--cwd <cwd>", "Current working directory")
     .option("--port <port>", "Port to run dev server on")
+    .option("--core", "Use @tscircuit/core beta")
     .option("--no-cleanup", "Don't cleanup temporary files (for debugging)")
     .action((args) => CMDFN.dev(ctx, args))
 
@@ -293,6 +294,7 @@ export const getProgram = (ctx: AppContext) => {
     .description("Convert an example file to tscircuit soup")
     .requiredOption("--file <file>", "Input example files")
     .option("--output <output.json>", "Output file")
+    .option("--core", "Use @tscircuit/core to build (future version)")
     .option(
       "--export <export_name>",
       "Name of export to soupify, if not specified, soupify the default/only export",

cli/lib/soupify/get-export-name-from-file.ts

@@ -0,0 +1,29 @@
+import { readFile } from "node:fs/promises"
+import Debug from "debug"
+
+const debug = Debug("tscircuit:soupify")
+
+export const getExportNameFromFile = async (filePath: string) => {
+  debug(`reading ${filePath}`)
+  const targetFileContent = await readFile(filePath, "utf-8")
+
+  let exportName: string | undefined
+  if (targetFileContent.includes("export default")) {
+    exportName = "default"
+  } else {
+    // Look for "export const <name>" or "export function <name>"
+    const exportRegex = /export\s+(?:const|function)\s+(\w+)/g
+    const match = exportRegex.exec(targetFileContent)
+    if (match) {
+      exportName = match[1]
+    }
+  }
+
+  if (!exportName) {
+    throw new Error(
+      `Couldn't derive an export name and didn't find default export in "${filePath}"`,
+    )
+  }
+
+  return exportName
+}

cli/lib/soupify/get-tmp-entrpoint-filepath.ts

@@ -0,0 +1,13 @@
+import Path from "node:path"
+
+export const getTmpEntrypointFilePath = (filePath: string) => {
+  const tmpEntrypointPath = Path.join(
+    Path.dirname(filePath),
+    Path.basename(filePath).replace(/\.[^\.]+$/, "") + ".__tmp_entrypoint.tsx",
+  )
+  const tmpOutputPath = Path.join(
+    Path.dirname(filePath),
+    Path.basename(filePath).replace(/\.[^\.]+$/, "") + ".__tmp_output.json",
+  )
+  return { tmpEntrypointPath, tmpOutputPath }
+}

cli/lib/soupify/index.ts

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

cli/lib/soupify/run-entrypoint-file.ts

@@ -0,0 +1,60 @@
+import Debug from "debug"
+import { writeFileSync } from "fs"
+import { readFile, unlink } from "node:fs/promises"
+import $ from "dax-sh"
+import kleur from "kleur"
+import { AppContext } from "../util/app-context"
+
+const debug = Debug("tscircuit:soupify")
+
+/**
+ * Runs the entrypoint file to generate circuit json (soup) for a given file
+ */
+export const runEntrypointFile = async (
+  {
+    tmpEntrypointPath,
+    tmpOutputPath,
+  }: { tmpEntrypointPath: string; tmpOutputPath: string },
+  ctx: Pick<AppContext, "runtime" | "params">,
+) => {
+  debug(`using runtime ${ctx.runtime}`)
+  const processCmdPart1 =
+    ctx.runtime === "node"
+      ? $`npx tsx ${tmpEntrypointPath}`
+      : $`bun ${tmpEntrypointPath}`
+
+  debug(`starting process....`)
+  const processResult = await processCmdPart1
+    .stdout(debug.enabled ? "inheritPiped" : "piped")
+    .stderr(debug.enabled ? "inheritPiped" : "piped")
+    .noThrow()
+
+  const rawSoup = await readFile(tmpOutputPath, "utf-8")
+  const errText = processResult.stderr
+
+  if (ctx.params.cleanup !== false) {
+    debug(`deleting ${tmpEntrypointPath}`)
+    await unlink(tmpEntrypointPath)
+    debug(`deleting ${tmpOutputPath}`)
+    await unlink(tmpOutputPath)
+  }
+
+  try {
+    debug(`parsing result of soupify...`)
+    const soup = JSON.parse(rawSoup)
+
+    if (soup.COMPILE_ERROR) {
+      // console.log(kleur.red(`Failed to compile ${filePath}`))
+      console.log(kleur.red(soup.COMPILE_ERROR))
+      throw new Error(soup.COMPILE_ERROR)
+    }
+
+    return soup
+  } catch (e: any) {
+    // console.log(kleur.red(`Failed to parse result of soupify: ${e.toString()}`))
+    const t = Date.now()
+    console.log(`Dumping raw output to .tscircuit/err-${t}.log`)
+    writeFileSync(`.tscircuit/err-${t}.log`, rawSoup + "\n\n" + errText)
+    throw new Error(errText)
+  }
+}

cli/lib/soupify/soupify-with-core.ts

@@ -0,0 +1,52 @@
+import { AppContext } from "../util/app-context"
+import { z } from "zod"
+import $ from "dax-sh"
+import * as Path from "path"
+import { unlink } from "node:fs/promises"
+import kleur from "kleur"
+import { writeFileSync } from "fs"
+import { readFile } from "fs/promises"
+import Debug from "debug"
+import { getExportNameFromFile } from "./get-export-name-from-file"
+import { getTmpEntrypointFilePath } from "./get-tmp-entrpoint-filepath"
+import { runEntrypointFile } from "./run-entrypoint-file"
+
+const debug = Debug("tscircuit:soupify")
+
+export const soupifyWithCore = async (
+  params: {
+    filePath: string
+    exportName?: string
+  },
+  ctx: Pick<AppContext, "runtime" | "params">,
+) => {
+  let { filePath, exportName } = params
+
+  exportName ??= await getExportNameFromFile(filePath)
+
+  const { tmpEntrypointPath, tmpOutputPath } =
+    getTmpEntrypointFilePath(filePath)
+
+  debug(`writing to ${tmpEntrypointPath}`)
+  writeFileSync(
+    tmpEntrypointPath,
+    `
+import React from "react"
+import { Project } from "@tscircuit/core"
+import * as EXPORTS from "./${Path.basename(filePath)}"
+import { writeFileSync } from "node:fs"
+
+const Component = EXPORTS["${exportName}"]
+
+const project = new Project()
+
+project.add(<Component />)
+
+project.render()
+
+writeFileSync("${tmpOutputPath}", JSON.stringify(project.getCircuitJson()))
+`.trim(),
+  )
+
+  return await runEntrypointFile({ tmpEntrypointPath, tmpOutputPath }, ctx)
+}