@tscircuit/fake-snippets 0.0.1

package/src/hooks/use-current-snippet.ts

@@ -0,0 +1,24 @@
+import { useCurrentSnippetId } from "./use-current-snippet-id"
+import { useSnippet } from "./use-snippet"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { useAxios } from "./use-axios"
+
+export const useCurrentSnippet = (): {
+  snippet: Snippet | null
+  isLoading: boolean
+  error: (Error & { status: number }) | null
+} => {
+  const {
+    snippetId,
+    isLoading: isLoadingSnippetId,
+    error: errorSnippetId,
+  } = useCurrentSnippetId()
+  const axios = useAxios()
+  const { data: snippet, isLoading, error } = useSnippet(snippetId || "")
+
+  return {
+    snippet: snippet || null,
+    isLoading: isLoadingSnippetId || isLoading,
+    error: errorSnippetId || error || null,
+  }
+}

package/src/hooks/use-global-store.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+export type Store = {
+  session: {
+    token: string
+    account_id: string
+    session_id: string
+    github_username: string
+  } | null
+  setSession: (session: Store["session"]) => any
+  should_onboarding_tips_be_closed: boolean
+  setOnboardingTipsClosed: (closed: boolean) => any
+}
+
+export const useGlobalStore = create<Store>()(
+  persist(
+    (set) => ({
+      session: null,
+      setSession: (session) => set({ session }),
+      should_onboarding_tips_be_closed: false,
+      setOnboardingTipsClosed: (closed) =>
+        set({ should_onboarding_tips_be_closed: closed }),
+    }),
+    {
+      name: "session_store",
+    },
+  ),
+)
+
+useGlobalStore.subscribe((state, prevState) => {
+  ;(window as any).globalStore = state
+})

package/src/hooks/use-is-using-fake-api.ts

@@ -0,0 +1,3 @@
+export const useIsUsingFakeApi = () => {
+  return import.meta.env.VITE_USE_FAKE_API === "true"
+}

package/src/hooks/use-run-tsx/construct-circuit.tsx

@@ -0,0 +1,64 @@
+import { Circuit } from "@tscircuit/core"
+import { useEffect, useMemo, useState } from "react"
+import * as React from "react"
+import { useCompiledTsx } from "../use-compiled-tsx"
+import { createJSCADRenderer } from "jscad-fiber"
+import { jscadPlanner } from "jscad-planner"
+import { jlcPartsEngine } from "@/lib/jlc-parts-engine"
+
+export const constructCircuit = ({
+  UserElm,
+  type,
+  circuitDisplayName,
+}: {
+  UserElm: any
+  type: "board" | "footprint" | "package" | "model"
+  circuitDisplayName?: string
+}) => {
+  const circuit = new Circuit()
+
+  if (circuitDisplayName) {
+    circuit.name = circuitDisplayName
+  }
+
+  if (type === "board") {
+    circuit.add(<UserElm />)
+    // HACK: switch to selectOne when root fixes bug with selecting board
+    const board = circuit.root?.children[0]
+    // const board = circuit.selectOne("board")
+    if (board) {
+      board.setProps({
+        ...board.props,
+        partsEngine: jlcPartsEngine,
+      })
+    }
+  } else if (type === "package") {
+    circuit.add(
+      <board width="50mm" height="50mm">
+        <UserElm name="U1" />
+      </board>,
+    )
+  } else if (type === "footprint") {
+    circuit.add(
+      <board width="10mm" height="10mm">
+        <chip name="U1" footprint={<UserElm />} />
+      </board>,
+    )
+  } else if (type === "model") {
+    const jscadGeoms: any[] = []
+    const { createJSCADRoot } = createJSCADRenderer(jscadPlanner as any)
+    const jscadRoot = createJSCADRoot(jscadGeoms)
+    jscadRoot.render(<UserElm />)
+    circuit.add(
+      <board width="10mm" height="10mm">
+        <chip
+          name="U1"
+          cadModel={{
+            jscad: jscadGeoms[0],
+          }}
+        />
+      </board>,
+    )
+  }
+  return circuit
+}

package/src/hooks/use-run-tsx/eval-compiled-js.ts

@@ -0,0 +1,9 @@
+export const evalCompiledJs = (compiledCode: string) => {
+  const functionBody = `
+var exports = {};
+var require = globalThis.__tscircuit_require;
+var module = { exports };
+${compiledCode};
+return module;`.trim()
+  return Function(functionBody).call(globalThis)
+}

package/src/hooks/use-run-tsx/index.tsx

@@ -0,0 +1,251 @@
+import * as tscircuitCore from "@tscircuit/core"
+import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
+import type { AnyCircuitElement } from "circuit-json"
+import * as jscadFiber from "jscad-fiber"
+import * as React from "react"
+import * as tscircuitMathUtils from "@tscircuit/math-utils"
+import { useEffect, useMemo, useReducer, useRef, useState } from "react"
+import { safeCompileTsx } from "../use-compiled-tsx"
+import { useSnippetsBaseApiUrl } from "../use-snippets-base-api-url"
+import { constructCircuit } from "./construct-circuit"
+import { evalCompiledJs } from "./eval-compiled-js"
+import { getSyntaxError } from "@/lib/utils/getSyntaxError"
+
+type RunTsxResult = {
+  compiledModule: any
+  message: string
+  circuitJson: AnyCircuitElement[] | null
+  compiledJs?: string
+  isRunningCode: boolean
+}
+
+export const useRunTsx = ({
+  code,
+  userImports,
+  type,
+  isStreaming = false,
+  circuitDisplayName,
+}: {
+  code?: string
+  userImports?: Record<string, object>
+  type?: "board" | "footprint" | "package" | "model"
+  isStreaming?: boolean
+  circuitDisplayName?: string
+} = {}): RunTsxResult & {
+  circuitJsonKey: string
+  triggerRunTsx: () => void
+  tsxRunTriggerCount: number
+} => {
+  type ??= "board"
+  const [tsxRunTriggerCount, incTsxRunTriggerCount] = useReducer(
+    (c) => c + 1,
+    0,
+  )
+  const [tsxResult, setTsxResult] = useState<RunTsxResult>({
+    compiledModule: null,
+    message: "",
+    circuitJson: null,
+    isRunningCode: false,
+  })
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const preSuppliedImportsRef = useRef<Record<string, any>>({})
+
+  useEffect(() => {
+    if (tsxRunTriggerCount === 0) return
+    if (isStreaming) {
+      setTsxResult({
+        compiledModule: null,
+        message: "",
+        circuitJson: null,
+        isRunningCode: false,
+      })
+    }
+    if (!code) return
+    const syntaxError = getSyntaxError(code)
+    if (syntaxError) {
+      setTsxResult({
+        compiledModule: null,
+        message: syntaxError,
+        circuitJson: null,
+        isRunningCode: false,
+      })
+      return
+    }
+    async function run() {
+      setTsxResult({
+        compiledModule: null,
+        message: "",
+        circuitJson: null,
+        isRunningCode: true,
+      })
+
+      const userCodeTsciImports = getImportsFromCode(code!).filter((imp) =>
+        imp.startsWith("@tsci/"),
+      )
+
+      const preSuppliedImports: Record<string, any> =
+        preSuppliedImportsRef.current
+
+      for (const [importName, importValue] of Object.entries(
+        userImports ?? {},
+      )) {
+        preSuppliedImports[importName] = importValue
+      }
+
+      const __tscircuit_require = (name: string) => {
+        if (
+          name === "./manual-edits.json" &&
+          preSuppliedImports["./manual-edits.json"] === ""
+        ) {
+          return preSuppliedImports["./manual-edits.json"]
+        }
+        if (!preSuppliedImports[name]) {
+          throw new Error(
+            `Import "${name}" not found (imports available: ${Object.keys(preSuppliedImports).join(",")})`,
+          )
+        }
+        return preSuppliedImports[name]
+      }
+      ;(globalThis as any).__tscircuit_require = __tscircuit_require
+      preSuppliedImports["@tscircuit/core"] = tscircuitCore
+      preSuppliedImports["@tscircuit/math-utils"] = tscircuitMathUtils
+      preSuppliedImports["react"] = React
+      preSuppliedImports["jscad-fiber"] = jscadFiber
+      globalThis.React = React
+
+      async function addImport(importName: string, depth = 0) {
+        if (!importName.startsWith("@tsci/")) return
+        if (preSuppliedImports[importName]) return
+        if (depth > 5) {
+          console.log("Max depth for imports reached")
+          return
+        }
+
+        const fullSnippetName = importName
+          .replace("@tsci/", "")
+          .replace(".", "/")
+        const { snippet: importedSnippet, error } = await fetch(
+          `${apiBaseUrl}/snippets/get?name=${fullSnippetName}`,
+        )
+          .then((res) => res.json())
+          .catch((e) => ({ error: e }))
+
+        if (error) {
+          console.error("Error fetching import", importName, error)
+          return
+        }
+
+        const { compiled_js, code } = importedSnippet
+
+        const importNames = getImportsFromCode(code!)
+
+        for (const importName of importNames) {
+          if (!preSuppliedImports[importName]) {
+            await addImport(importName, depth + 1)
+          }
+        }
+
+        try {
+          preSuppliedImports[importName] = evalCompiledJs(compiled_js).exports
+        } catch (e) {
+          console.error("Error importing snippet", e)
+        }
+      }
+
+      for (const userCodeTsciImport of userCodeTsciImports) {
+        await addImport(userCodeTsciImport)
+      }
+
+      const { success, compiledTsx: compiledJs, error } = safeCompileTsx(code!)
+
+      if (!success) {
+        setTsxResult({
+          compiledModule: null,
+          message: `Compile Error: ${error.message}`,
+          circuitJson: null,
+          isRunningCode: false,
+        })
+      }
+
+      try {
+        const module = evalCompiledJs(compiledJs!)
+
+        const componentExportKeys = Object.keys(module.exports).filter(
+          (key) => !key.startsWith("use"),
+        )
+
+        if (componentExportKeys.length > 1) {
+          throw new Error(
+            `Too many exports, only export one component. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
+          )
+        }
+
+        const primaryKey = componentExportKeys[0]
+
+        const UserElm = (props: any) =>
+          React.createElement(module.exports[primaryKey], props)
+
+        try {
+          const circuit = constructCircuit({
+            UserElm,
+            type: type as any,
+            circuitDisplayName,
+          })
+          const renderPromise = circuit.renderUntilSettled()
+
+          // wait one tick to allow a single render pass
+          await new Promise((resolve) => setTimeout(resolve, 1))
+
+          let circuitJson = circuit.getCircuitJson()
+          setTsxResult({
+            compiledModule: module,
+            compiledJs,
+            message: "",
+            circuitJson: circuitJson as AnyCircuitElement[],
+            isRunningCode: true,
+          })
+
+          await renderPromise
+
+          circuitJson = circuit.getCircuitJson()
+          setTsxResult({
+            compiledModule: module,
+            compiledJs,
+            message: "",
+            circuitJson: circuitJson as AnyCircuitElement[],
+            isRunningCode: false,
+          })
+        } catch (error: any) {
+          console.error("Evaluation error:", error)
+          setTsxResult({
+            compiledModule: module,
+            message: `Render Error: ${error.message}`,
+            circuitJson: null,
+            isRunningCode: false,
+          })
+        }
+      } catch (error: any) {
+        console.error("Evaluation error:", error)
+        setTsxResult({
+          compiledModule: null,
+          message: `Eval Error: ${error.message}\n\n${error.stack}`,
+          circuitJson: null,
+          isRunningCode: false,
+        })
+      }
+    }
+    run()
+  }, [tsxRunTriggerCount])
+
+  const circuitJsonKey: string = useMemo(() => {
+    if (!tsxResult.circuitJson) return ""
+    return `cj-${Math.random().toString(36).substring(2, 15)}`
+  }, [tsxResult.circuitJson, tsxResult.circuitJson?.length])
+
+  return {
+    ...tsxResult,
+    circuitJsonKey: circuitJsonKey,
+    triggerRunTsx: incTsxRunTriggerCount,
+    tsxRunTriggerCount,
+  }
+}

package/src/hooks/use-save-snippet.ts

@@ -0,0 +1,66 @@
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { safeCompileTsx } from "./use-compiled-tsx"
+import { useCurrentSnippetId } from "./use-current-snippet-id"
+
+export const useSaveSnippet = () => {
+  const axios = useAxios()
+
+  const { snippetId } = useCurrentSnippetId()
+
+  const saveSnippetMutation = useMutation<
+    Snippet,
+    Error,
+    { code: string; snippet_type: string; dts?: string; circuit_json?: any[] }
+  >({
+    mutationFn: async ({ code, snippet_type, dts, circuit_json }) => {
+      const compileResult = safeCompileTsx(code)
+
+      if (snippetId) {
+        const response = await axios.post("/snippets/update", {
+          snippet_id: snippetId,
+          code,
+          snippet_type,
+          compiled_js: compileResult.success
+            ? compileResult.compiledTsx
+            : undefined,
+          circuit_json: circuit_json,
+          dts,
+        })
+        return response.data.snippet
+      } else {
+        const response = await axios.post("/snippets/create", {
+          code,
+          snippet_type,
+          owner_name: "seveibar", // Replace with actual user name or fetch from user context
+          compiled_js: compileResult.success
+            ? compileResult.compiledTsx
+            : undefined,
+          dts,
+        })
+        return response.data.snippet
+      }
+    },
+  })
+
+  const saveSnippet = async (
+    code: string,
+    snippet_type: string,
+    dts?: string,
+    circuit_json?: any[],
+  ) => {
+    return saveSnippetMutation.mutateAsync({
+      code,
+      snippet_type,
+      dts,
+      circuit_json,
+    })
+  }
+
+  return {
+    saveSnippet,
+    isLoading: saveSnippetMutation.isLoading,
+    error: saveSnippetMutation.error,
+  }
+}

package/src/hooks/use-sign-in.ts

@@ -0,0 +1,22 @@
+import { useGlobalStore } from "./use-global-store"
+import { useIsUsingFakeApi } from "./use-is-using-fake-api"
+import { useSnippetsBaseApiUrl } from "./use-snippets-base-api-url"
+
+export const useSignIn = () => {
+  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const isUsingFakeApi = useIsUsingFakeApi()
+  const setSession = useGlobalStore((s) => s.setSession)
+  return () => {
+    if (!isUsingFakeApi) {
+      const nextUrl = window.location.origin.replace("127.0.0.1", "localhost")
+      window.location.href = `${snippetsBaseApiUrl}/internal/oauth/github/authorize?next=${nextUrl}/authorize`
+    } else {
+      setSession({
+        account_id: "account-1234",
+        github_username: "testuser",
+        token: "1234",
+        session_id: "session-1234",
+      })
+    }
+  }
+}

package/src/hooks/use-snippet-by-name.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
+
+export const useSnippetByName = (fullSnippetName: string | null) => {
+  const axios = useAxios()
+  return useQuery<Snippet, Error & { status: number }>(
+    ["snippet", fullSnippetName],
+    async () => {
+      if (!fullSnippetName) return
+      const [owner_name, unscoped_name] = fullSnippetName.split("/")
+      const { data } = await axios.get("/snippets/get", {
+        params: {
+          owner_name,
+          unscoped_name,
+        },
+      })
+      return data.snippet
+    },
+    {
+      retry: false,
+      enabled: Boolean(fullSnippetName),
+    },
+  )
+}

package/src/hooks/use-snippet.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
+
+export const useSnippet = (snippetId: string | null) => {
+  const axios = useAxios()
+  return useQuery<Snippet, Error & { status: number }>(
+    ["snippets", snippetId],
+    async () => {
+      if (!snippetId) {
+        throw new Error("Snippet ID is required")
+      }
+      const { data } = await axios.get("/snippets/get", {
+        params: { snippet_id: snippetId },
+      })
+      return data.snippet
+    },
+    {
+      enabled: Boolean(snippetId),
+      retry: false,
+    },
+  )
+}

package/src/hooks/use-snippets-base-api-url.ts

@@ -0,0 +1,3 @@
+export const useSnippetsBaseApiUrl = () => {
+  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
+}