Remove legacy tsx runner, replace with RunFrame, everything uses WebWorkers

package.json

@@ -132,7 +132,7 @@
     "@playwright/test": "^1.48.0",
     "@tscircuit/core": "^0.0.315",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.193",
+    "@tscircuit/runframe": "^0.0.216",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

src/components/CodeAndPreview.tsx

@@ -2,7 +2,6 @@ import { CodeEditor } from "@/components/CodeEditor"
 import { useAxios } from "@/hooks/use-axios"
 import { useCreateSnippetMutation } from "@/hooks/use-create-snippet-mutation"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useRunTsx } from "@/hooks/use-run-tsx"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
 import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
@@ -16,7 +15,6 @@ import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
 import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
-import { PreviewContent } from "./PreviewContent"
 import { SuspenseRunFrame } from "./SuspenseRunFrame"
 
 interface Props {
@@ -51,9 +49,7 @@ export function CodeAndPreview({ snippet }: Props) {
   const [showPreview, setShowPreview] = useState(true)
   const [lastRunCode, setLastRunCode] = useState(defaultCode ?? "")
   const [fullScreen, setFullScreen] = useState(false)
-  const shouldUseWebworkerForRun = useGlobalStore(
-    (s) => s.should_use_webworker_for_run,
-  )
+  const [circuitJson, setCircuitJson] = useState<any>(null)
 
   const snippetType: "board" | "package" | "model" | "footprint" =
     snippet?.snippet_type ??
@@ -82,26 +78,6 @@ export function CodeAndPreview({ snippet }: Props) {
     [manualEditsFileContent],
   )
 
-  const {
-    message,
-    circuitJson,
-    compiledJs,
-    triggerRunTsx,
-    tsxRunTriggerCount,
-    circuitJsonKey,
-    isRunningCode,
-  } = useRunTsx({
-    code,
-    userImports,
-    type: snippetType,
-    circuitDisplayName: snippet?.name,
-  })
-
-  // Update lastRunCode whenever the code is run
-  useEffect(() => {
-    setLastRunCode(code)
-  }, [tsxRunTriggerCount])
-
   const qc = useQueryClient()
 
   const updateSnippetMutation = useMutation({
@@ -112,7 +88,7 @@ export function CodeAndPreview({ snippet }: Props) {
         snippet_id: snippet.snippet_id,
         code: code,
         dts: dts,
-        compiled_js: compiledJs,
+        // compiled_js: compiledJs,
         circuit_json: circuitJson,
         manual_edits_json_content: manualEditsFileContent,
       }
@@ -276,28 +252,7 @@ export function CodeAndPreview({ snippet }: Props) {
             onDtsChange={(newDts) => setDts(newDts)}
           />
         </div>
-        {showPreview && !shouldUseWebworkerForRun && (
-          <PreviewContent
-            className={cn(
-              "flex p-2 flex-col min-h-[640px]",
-              fullScreen
-                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
-                : "w-full md:w-1/2",
-            )}
-            code={code}
-            triggerRunTsx={triggerRunTsx}
-            tsxRunTriggerCount={tsxRunTriggerCount}
-            errorMessage={message}
-            circuitJsonKey={circuitJsonKey}
-            circuitJson={circuitJson}
-            isRunningCode={isRunningCode}
-            manualEditsFileContent={manualEditsFileContent ?? ""}
-            onManualEditsFileContentChange={setManualEditsFileContent}
-            onToggleFullScreen={() => setFullScreen(!fullScreen)}
-            isFullScreen={fullScreen}
-          />
-        )}
-        {showPreview && shouldUseWebworkerForRun && (
+        {showPreview && (
           <div
             className={cn(
               "flex p-0 flex-col min-h-[640px]",
@@ -308,8 +263,17 @@ export function CodeAndPreview({ snippet }: Props) {
           >
             <SuspenseRunFrame
               showRunButton
+              onRenderStarted={() => {
+                setLastRunCode(code)
+              }}
+              onRenderFinished={({ circuitJson }) => {
+                setCircuitJson(circuitJson)
+              }}
               onEditEvent={() => {
                 // TODO
+                window.alert(
+                  "Edit events are temporarily disabled on tscircuit.com, use the CLI",
+                )
               }}
               fsMap={fsMap}
               entrypoint="main.tsx"

src/components/CodeEditor.tsx

@@ -27,7 +27,7 @@ import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import ts from "typescript"
 import CodeEditorHeader from "./CodeEditorHeader"
-import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
+// import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -86,7 +86,6 @@ export const CodeEditor = ({
   // Whenever streaming completes, reset the code to the initial code
   useEffect(() => {
     if (!isStreaming && code !== initialCode && initialCode) {
-      console.log("Resetting code to initial code", initialCode)
       setCode(initialCode)
 
       // HACK: Timeout because we need to wait for the editor to mount again
@@ -187,6 +186,8 @@ export const CodeEditor = ({
     const ata = setupTypeAcquisition(ataConfig)
     ataRef.current = ata
 
+    const lastFilesEventContent: Record<string, string> = {}
+
     // Set up base extensions
     const baseExtensions = [
       basicSetup,
@@ -198,7 +199,9 @@ export const CodeEditor = ({
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()
-          if (newContent === files[currentFile]) return
+
+          if (newContent === lastFilesEventContent[currentFile]) return
+          lastFilesEventContent[currentFile] = newContent
 
           if (currentFile === "index.tsx") {
             setCode(newContent)
@@ -228,10 +231,10 @@ export const CodeEditor = ({
     ]
     if (codeCompletionApi?.apiKey) {
       baseExtensions.push(
-        copilotPlugin({
-          apiKey: codeCompletionApi.apiKey,
-          language: Language.TYPESCRIPT,
-        }),
+        // copilotPlugin({
+        //   apiKey: codeCompletionApi.apiKey,
+        //   language: Language.TYPESCRIPT,
+        // }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {
             opacity: "0.6",

src/components/EditorNav.tsx

@@ -76,12 +76,6 @@ export default function EditorNav({
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const session = useGlobalStore((s) => s.session)
-  const shouldUseWebworkerForRun = useGlobalStore(
-    (s) => s.should_use_webworker_for_run,
-  )
-  const setShouldUseWebworkerForRun = useGlobalStore(
-    (s) => s.setShouldUseWebworkerForRun,
-  )
   const { Dialog: RenameDialog, openDialog: openRenameDialog } =
     useRenameSnippetDialog()
   const {
@@ -278,21 +272,6 @@ export default function EditorNav({
             <Share className="mr-1 h-3 w-3" />
             Copy URL
           </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="hidden md:flex px-2 text-xs"
-            onClick={() =>
-              setShouldUseWebworkerForRun(!shouldUseWebworkerForRun)
-            }
-          >
-            {shouldUseWebworkerForRun ? (
-              <CircleCheckBig className="mr-1 h-3 w-3" />
-            ) : (
-              <Square className="mr-1 h-3 w-3" />
-            )}
-            Webworker (Beta)
-          </Button>
           {/* <Button
             variant="ghost"
             size="sm"

src/components/SuspenseRunFrame.tsx

@@ -8,6 +8,7 @@ const RunFrame = lazy(async () => {
 export const SuspenseRunFrame = (
   props: React.ComponentProps<typeof RunFrame>,
 ) => {
+  console.log(props.fsMap)
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <RunFrame {...props} />

src/hooks/use-global-store.ts

@@ -10,18 +10,13 @@ export type Store = {
   } | null
   setSession: (session: Store["session"]) => any
   should_onboarding_tips_be_closed: boolean
-  should_use_webworker_for_run?: boolean
-  setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) => any
   setOnboardingTipsClosed: (closed: boolean) => any
 }
 
 export const useGlobalStore = create<Store>()(
   persist(
     (set) => ({
       session: null,
-      should_use_webworker_for_run: false,
-      setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) =>
-        set({ should_use_webworker_for_run }),
       setSession: (session) => set({ session }),
       should_onboarding_tips_be_closed: false,
       setOnboardingTipsClosed: (closed) =>

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

@@ -19,6 +19,10 @@ type RunTsxResult = {
   isRunningCode: boolean
 }
 
+/**
+ * @deprecated will be removed in future version, use @tscircuit/eval or
+ * @tscircuit/runframe
+ */
 export const useRunTsx = ({
   code,
   userImports,