intelligent run button updates, importing working

tscircuit · Oct 10, 2024 · 424be5d · 424be5d
1 parent 0f139ab
commit 424be5d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 14 deletions.
diff --git a/src/components/CodeAndPreview.tsx b/src/components/CodeAndPreview.tsx
@@ -123,7 +123,6 @@ export function CodeAndPreview({ snippet }: Props) {
           <PreviewContent
             code={code}
             triggerRunTsx={triggerRunTsx}
-            hasUnsavedChanges={hasUnsavedChanges}
             tsxRunTriggerCount={tsxRunTriggerCount}
             errorMessage={message}
             circuitJson={circuitJson}

diff --git a/src/components/PreviewContent.tsx b/src/components/PreviewContent.tsx
@@ -46,12 +46,17 @@ const PreviewEmptyState = ({
 export const PreviewContent = ({
   code,
   triggerRunTsx,
-  hasUnsavedChanges,
   tsxRunTriggerCount,
   errorMessage,
   circuitJson,
 }: PreviewContentProps) => {
   const [activeTab, setActiveTab] = useState("pcb")
+  const [versionOfCodeLastRun, setVersionOfCodeLastRun] = useState("")
+
+  useEffect(() => {
+    if (tsxRunTriggerCount === 0) return
+    setVersionOfCodeLastRun(code)
+  }, [tsxRunTriggerCount])
 
   useEffect(() => {
     if (errorMessage) {
@@ -66,7 +71,7 @@ export const PreviewContent = ({
           <Button
             className="bg-blue-600 hover:bg-blue-500"
             onClick={() => triggerRunTsx()}
-            disabled={hasUnsavedChanges && tsxRunTriggerCount !== 0}
+            disabled={versionOfCodeLastRun === code && tsxRunTriggerCount !== 0}
           >
             Run
             <PlayIcon className="w-3 h-3 ml-2" />

diff --git a/src/hooks/use-compiled-tsx.ts b/src/hooks/use-compiled-tsx.ts
@@ -4,8 +4,8 @@ import * as Babel from "@babel/standalone"
 export const safeCompileTsx = (
   code: string,
 ):
-  | { success: true; compiledTsx: string }
-  | { success: false; error: Error } => {
+  | { success: true; compiledTsx: string; error?: undefined }
+  | { success: false; error: Error; compiledTsx?: undefined } => {
   try {
     return {
       success: true,

diff --git a/src/hooks/use-run-tsx/index.tsx b/src/hooks/use-run-tsx/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useReducer, useState } from "react"
 import * as React from "react"
-import { useCompiledTsx } from "../use-compiled-tsx"
+import { safeCompileTsx, useCompiledTsx } from "../use-compiled-tsx"
 import { Circuit } from "@tscircuit/core"
 import { createJSCADRenderer } from "jscad-fiber"
 import { jscadPlanner } from "jscad-planner"
@@ -30,7 +30,6 @@ export const useRunTsx = ({
   tsxRunTriggerCount: number
 } => {
   type ??= "board"
-  const compiledJs = useCompiledTsx(code, { isStreaming })
   const [tsxRunTriggerCount, incTsxRunTriggerCount] = useReducer(
     (c) => c + 1,
     0,
@@ -45,15 +44,25 @@ export const useRunTsx = ({
 
   useEffect(() => {
     if (tsxRunTriggerCount === 0) return
+    if (isStreaming) {
+      setTsxResult({
+        compiledModule: null,
+        message: "",
+        circuitJson: null,
+        isLoading: false,
+      })
+    }
+    if (!code) return
     async function run() {
-      if (isStreaming || !compiledJs || !code) {
+      const { success, compiledTsx: compiledJs, error } = safeCompileTsx(code!)
+
+      if (!success) {
         setTsxResult({
           compiledModule: null,
-          message: "",
+          message: `Compile Error: ${error.message}`,
           circuitJson: null,
           isLoading: false,
         })
-        return
       }
 
       const imports = getImportsFromCode(code!).filter((imp) =>
@@ -66,7 +75,6 @@ export const useRunTsx = ({
         const fullSnippetName = importName
           .replace("@tsci/", "")
           .replace(".", "/")
-        console.log({ importName, fullSnippetName })
         // Fetch compiled code from the server
         const { snippet: importedSnippet } = await fetch(
           `${apiBaseUrl}/snippets/get?name=${fullSnippetName}`,
@@ -75,7 +83,7 @@ export const useRunTsx = ({
         try {
           preSuppliedImports[importName] = evalCompiledJs(
             importedSnippet.compiled_js,
-          ).default.exports
+          ).exports
         } catch (e) {
           console.error("Error importing snippet", e)
         }
@@ -139,7 +147,7 @@ export const useRunTsx = ({
       }
     }
     run()
-  }, [tsxRunTriggerCount, compiledJs, isStreaming])
+  }, [tsxRunTriggerCount])
 
   return {
     ...tsxResult,

diff --git a/src/pages/ai.tsx b/src/pages/ai.tsx
@@ -72,7 +72,6 @@ export const AiPage = () => {
               <PreviewContent
                 code={code}
                 triggerRunTsx={triggerRunTsx}
-                hasUnsavedChanges={hasUnsavedChanges}
                 errorMessage={errorMessage}
                 circuitJson={circuitJson}
                 tsxRunTriggerCount={tsxRunTriggerCount}