@tscircuit/runframe 0.0.2946 → 0.0.2948

package/dist/{chunk-3W76R6HC.js → chunk-T3FFIUMM.js}

@@ -2865,7 +2865,7 @@ var usePostHogActivity = (properties) => {
 };
 
 // package.json
-var version = "0.0.2945";
+var version = "0.0.2947";
 var package_default = {
   name: "@tscircuit/runframe",
   main: "dist/preview.js",
@@ -2993,7 +2993,7 @@ var package_default = {
   },
   dependencies: {
     "@tscircuit/core": "^0.0.1911",
-    "@tscircuit/eval": "0.0.1584",
+    "@tscircuit/eval": "0.0.1585",
     "@tscircuit/solver-utils": "^0.0.16",
     debug: "^4.4.0",
     "format-si-unit": "^0.0.12"

package/dist/preview.js

@@ -10,7 +10,7 @@ import {
   useOrderDialogCli,
   usePcbViewerController,
   useSchematicViewerController
-} from "./chunk-3W76R6HC.js";
+} from "./chunk-T3FFIUMM.js";
 export {
   BomTable,
   CadViewer,

package/dist/runner.js

@@ -43,14 +43,14 @@ import {
   useRunnerStore,
   useSchematicViewerController,
   useStyles
-} from "./chunk-3W76R6HC.js";
+} from "./chunk-T3FFIUMM.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
 import Debug from "debug";
 import { HTTPError } from "ky";
 import { Loader2, Play, Square } from "lucide-react";
-import { useEffect, useReducer, useRef as useRef2, useState } from "react";
+import { useEffect, useMemo as useMemo2, useReducer, useRef as useRef2, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // lib/components/RunFrame/RunFrameErrorFallback.tsx
@@ -342,6 +342,8 @@ var RunFrame = (props) => {
   const [error, setError] = useState(null);
   const [componentStack, setComponentStack] = useState(null);
   const cancelExecutionRef = useRef2(null);
+  const componentActiveRef = useRef2(true);
+  const workerCreationRef = useRef2(null);
   const [autoroutingGraphics, setAutoroutingGraphics] = useState(null);
   const [runCountTrigger, incRunCountTrigger] = useReducer(
     (acc, s) => acc + 1,
@@ -356,6 +358,58 @@ var RunFrame = (props) => {
   const [currentDebugOption, setCurrentDebugOption] = useState("");
   const [showSchematicDebugGrid, setShowSchematicDebugGrid] = useState(false);
   const [showSchematicPorts, setShowSchematicPorts] = useState(false);
+  useEffect(() => {
+    componentActiveRef.current = true;
+    return () => {
+      componentActiveRef.current = false;
+      cancelExecutionRef.current?.();
+      const pending = workerCreationRef.current;
+      void pending?.then(({ worker }) => {
+        if (!componentActiveRef.current && globalThis.runFrameWorker !== worker) {
+          return worker.kill();
+        }
+      }).catch(() => {
+      });
+    };
+  }, []);
+  const getWorker = () => {
+    if (workerCreationRef.current) return workerCreationRef.current;
+    const pending = (async () => {
+      const evalVersion = await resolveEvalVersion(
+        props.evalVersion,
+        !globalThis.runFrameWorker && props.forceLatestEvalVersion
+      );
+      const worker = globalThis.runFrameWorker ?? await createCircuitWebWorker({
+        evalVersion,
+        webWorkerBlobUrl: props.evalWebWorkerBlobUrl,
+        projectConfig: getRunFrameProjectConfig({
+          projectBaseUrl: props.projectBaseUrl || `${API_BASE}/files/static`
+        }),
+        ...props.platformConfig && { platform: props.platformConfig },
+        verbose: true,
+        ...props.enableFetchProxy && {
+          enableFetchProxy: props.enableFetchProxy
+        },
+        ...window.TSCIRCUIT_USE_RUNFRAME_FOR_CLI && {
+          disableCdnLoading: true
+        },
+        ...props.tscircuitSessionToken && {
+          tscircuitSessionToken: props.tscircuitSessionToken
+        },
+        ...props.easyEdaProxyConfig && {
+          easyEdaProxyConfig: props.easyEdaProxyConfig
+        }
+      });
+      return { worker, evalVersion };
+    })();
+    workerCreationRef.current = pending;
+    const clearPending = () => {
+      if (workerCreationRef.current === pending)
+        workerCreationRef.current = null;
+    };
+    void pending.then(clearPending, clearPending);
+    return pending;
+  };
   const activeEffectName = Object.values(activeAsyncEffects).sort(
     (a, b) => a.startTime - b.startTime
   )[0]?.effectName;
@@ -378,40 +432,16 @@ var RunFrame = (props) => {
     const load = async () => {
       try {
         if (!globalThis.runFrameWorker) {
-          const evalVersion = await resolveEvalVersion(
-            props.evalVersion,
-            props.forceLatestEvalVersion
-          );
-          const worker = await createCircuitWebWorker({
-            evalVersion,
-            webWorkerBlobUrl: props.evalWebWorkerBlobUrl,
-            projectConfig: getRunFrameProjectConfig({
-              projectBaseUrl: props.projectBaseUrl || `${API_BASE}/files/static`
-            }),
-            ...props.platformConfig && {
-              platform: props.platformConfig
-            },
-            verbose: true,
-            ...props.enableFetchProxy && {
-              enableFetchProxy: props.enableFetchProxy
-            },
-            ...window.TSCIRCUIT_USE_RUNFRAME_FOR_CLI && {
-              disableCdnLoading: true
-            },
-            ...props.tscircuitSessionToken && {
-              tscircuitSessionToken: props.tscircuitSessionToken
-            },
-            ...props.easyEdaProxyConfig && {
-              easyEdaProxyConfig: props.easyEdaProxyConfig
-            }
-          });
-          if (cancelled) return;
+          const { worker, evalVersion } = await getWorker();
+          if (cancelled || !componentActiveRef.current) return;
           globalThis.runFrameWorker = worker;
           setLastRunEvalVersion(evalVersion);
         }
         if (!cancelled) setDependenciesLoaded(true);
       } catch (err) {
-        console.error("Failed to preload eval worker", err);
+        if (!cancelled && componentActiveRef.current) {
+          console.error("Failed to preload eval worker", err);
+        }
       }
     };
     load();
@@ -441,9 +471,9 @@ var RunFrame = (props) => {
   useEffect(() => {
     if (props.debug) Debug.enable("run-frame*");
   }, [props.debug]);
-  const fsMap = props.fsMap instanceof Map ? props.fsMap : Object.entries(props.fsMap ?? {}).reduce(
-    (m, [k, v]) => m.set(k, v),
-    /* @__PURE__ */ new Map()
+  const fsMap = useMemo2(
+    () => props.fsMap instanceof Map ? props.fsMap : new Map(Object.entries(props.fsMap ?? {})),
+    [props.fsMap]
   );
   const lastFsMapRef = useRef2(null);
   const lastEntrypointRef = useRef2(null);
@@ -465,10 +495,18 @@ var RunFrame = (props) => {
     }
   }, [isStaticCircuitJson, circuitJsonFileParsedContent, circuitJsonFileError]);
   useEffect(() => {
-    if (props.isLoadingFiles) return;
-    if (isStaticCircuitJson) return;
+    if (isStaticCircuitJson || props.isLoadingFiles) {
+      autoroutingCaptureGeneration.current += 1;
+      cancelExecutionRef.current?.();
+      cancelExecutionRef.current = null;
+      setIsRunning(false);
+      setActiveAsyncEffects({});
+      if (props.isLoadingFiles) setCircuitJson(null);
+      return;
+    }
     const fsMapObj = fsMap instanceof Map ? Object.fromEntries(fsMap.entries()) : fsMap;
     if (!fsMapObj || Object.keys(fsMapObj).length === 0) {
+      setCircuitJson(null);
       setError({
         error: "No files provided. Please provide at least one file with code to execute.",
         stack: ""
@@ -495,50 +533,29 @@ var RunFrame = (props) => {
     lastEntrypointRef.current = props.entrypoint ?? null;
     lastRunCountTriggerRef.current = runCountTrigger;
     setIsRunning(true);
+    let cancelled = false;
+    const captureGeneration = ++autoroutingCaptureGeneration.current;
+    const isCurrentRun = () => componentActiveRef.current && !cancelled && captureGeneration === autoroutingCaptureGeneration.current;
+    let renderResult;
     const runWorker = async () => {
+      if (!isCurrentRun()) return;
       debug("running render worker");
       setError(null);
       setRenderLog(null);
       setActiveAsyncEffects({});
       setSolverEvents([]);
       setAutoroutingPhases([]);
-      const captureGeneration = ++autoroutingCaptureGeneration.current;
       const renderLog2 = { progress: 0, debugOutputs: [] };
-      let cancelled = false;
       cancelExecutionRef.current = () => {
         cancelled = true;
       };
-      const resolvedEvalVersion = await resolveEvalVersion(
-        props.evalVersion,
-        !globalThis.runFrameWorker && props.forceLatestEvalVersion
-      );
+      const { worker, evalVersion: resolvedEvalVersion } = await getWorker();
+      if (!isCurrentRun()) return;
       debug("resolvedEvalVersion", resolvedEvalVersion);
-      const worker = globalThis.runFrameWorker ?? await createCircuitWebWorker({
-        evalVersion: resolvedEvalVersion,
-        webWorkerBlobUrl: props.evalWebWorkerBlobUrl,
-        verbose: true,
-        projectConfig: getRunFrameProjectConfig({
-          projectBaseUrl: props.projectBaseUrl || `${API_BASE}/files/static`
-        }),
-        ...props.platformConfig && {
-          platform: props.platformConfig
-        },
-        ...props.enableFetchProxy && {
-          enableFetchProxy: props.enableFetchProxy
-        },
-        ...window.TSCIRCUIT_USE_RUNFRAME_FOR_CLI && {
-          disableCdnLoading: true
-        },
-        ...props.tscircuitSessionToken && {
-          tscircuitSessionToken: props.tscircuitSessionToken
-        },
-        ...props.easyEdaProxyConfig && {
-          easyEdaProxyConfig: props.easyEdaProxyConfig
-        }
-      });
       globalThis.runFrameWorker = worker;
       setLastRunEvalVersion(resolvedEvalVersion);
       await worker.clearEventListeners();
+      if (!isCurrentRun()) return;
       if (currentDebugOption?.trim()) {
         worker.enableDebug(currentDebugOption.replace("DEBUG=", ""));
       }
@@ -638,48 +655,32 @@ var RunFrame = (props) => {
         }
       });
       debug("Executing fsMap...");
-      const evalResult = await worker.executeWithFsMap({
+      await worker.executeWithFsMap({
         entrypoint: props.entrypoint,
         fsMap: fsMapObj2,
         ...props.mainComponentPath ? { mainComponentPath: props.mainComponentPath } : {}
-      }).then(() => {
-        return { success: true };
-      }).catch((e) => {
-        const message = e.message.replace("Error: ", "");
-        debug(`eval error: ${message}`);
-        props.onError?.(e);
-        emitRunCompleted(buildRunCompletedPayload({ executionError: e }));
-        setError({ error: message, stack: e.stack });
-        setRenderLog(null);
-        console.error(e);
-        return { success: false };
       });
+      if (!isCurrentRun()) return;
       debug("worker call started");
-      if (!evalResult.success) {
-        setIsRunning(false);
-        setActiveAsyncEffects({});
-        return;
-      }
-      const $renderResult = worker.renderUntilSettled();
+      const settlement = worker.renderUntilSettled().then(
+        () => ({ success: true }),
+        (error2) => ({ success: false, error: error2 })
+      );
+      renderResult = settlement;
       debug("waiting for initial circuit json...");
-      let circuitJson2 = await worker.getCircuitJson().catch((e) => {
-        debug("error getting initial circuit json", e);
-        props.onError?.(e);
-        emitRunCompleted(buildRunCompletedPayload({ executionError: e }));
-        setError({ error: e.message, stack: e.stack });
-        setRenderLog(null);
-        setIsRunning(false);
-        setActiveAsyncEffects({});
-        return null;
-      });
-      if (!circuitJson2) return;
+      let circuitJson2 = await worker.getCircuitJson();
+      if (!isCurrentRun()) return;
+      if (!circuitJson2) throw new Error("Eval worker returned no Circuit JSON");
       debug("got initial circuit json");
       setCircuitJson(circuitJson2);
       props.onCircuitJsonChange?.(circuitJson2);
       props.onInitialRender?.({ circuitJson: circuitJson2 });
-      await $renderResult;
+      const settled = await settlement;
+      if (!isCurrentRun()) return;
+      if (!settled.success) throw settled.error;
       debug("getting final circuit json");
       circuitJson2 = await worker.getCircuitJson();
+      if (!isCurrentRun()) return;
       props.onCircuitJsonChange?.(circuitJson2);
       setCircuitJson(circuitJson2);
       emitRunCompleted(buildRunCompletedPayload({ circuitJson: circuitJson2 }));
@@ -699,7 +700,29 @@ var RunFrame = (props) => {
       setCurrentDebugOption("");
       cancelExecutionRef.current = null;
     };
-    runMutex.runWithMutex(runWorker);
+    void runMutex.runWithMutex(async () => {
+      try {
+        await runWorker();
+      } finally {
+        await renderResult;
+      }
+    }).catch((failure) => {
+      if (!isCurrentRun()) return;
+      const error2 = failure instanceof Error ? failure : new Error(String(failure));
+      debug("worker execution failed", error2);
+      props.onError?.(error2);
+      emitRunCompleted(buildRunCompletedPayload({ executionError: error2 }));
+      setCircuitJson(null);
+      setError({
+        error: error2.message.replace("Error: ", ""),
+        stack: error2.stack
+      });
+      setRenderLog(null);
+      setIsRunning(false);
+      setActiveAsyncEffects({});
+      setCurrentDebugOption("");
+      cancelExecutionRef.current = null;
+    });
   }, [
     props.fsMap,
     props.entrypoint,
@@ -803,7 +826,7 @@ var RunFrame = (props) => {
       children: /* @__PURE__ */ jsx3(
         CircuitJsonPreview,
         {
-          code: fsMap.get(props.entrypoint ?? props.mainComponentPath),
+          code: fsMap.get(props.entrypoint ?? props.mainComponentPath ?? ""),
           fsMap,
           defaultActiveTab: props.defaultActiveTab ?? props.defaultTab,
           defaultTab: props.defaultTab,
@@ -1050,7 +1073,7 @@ var useSyncPageTitle = () => {
 };
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useState as useState6 } from "react";
 
 // lib/utils/get-board-files-from-config.ts
 import { projectConfig } from "@tscircuit/props";
@@ -1094,7 +1117,7 @@ import {
   Folder,
   Save
 } from "lucide-react";
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef3, useState as useState5 } from "react";
 
 // lib/components/ui/command.tsx
 import * as React from "react";
@@ -1536,7 +1559,7 @@ var EnhancedFileSelectorCombobox = ({
       }
     }
   }, [currentFiles, currentFile]);
-  const recentFiles = useMemo3(() => {
+  const recentFiles = useMemo4(() => {
     const validSavedFiles = recentlySavedFiles.filter(
       (file2) => filteredFiles.includes(file2)
     );
@@ -1853,12 +1876,12 @@ var RunFrameWithApi = (props) => {
   const hasReceivedInitialFiles = useHasReceivedInitialFilesLoaded();
   const fsMap = useRunFrameStore((s) => s.fsMap);
   const recentlySavedFiles = useRunFrameStore((s) => s.recentlySavedFiles);
-  const allFiles = useMemo4(() => Array.from(fsMap.keys()), [fsMap]);
-  const projectConfigContent = useMemo4(() => {
+  const allFiles = useMemo5(() => Array.from(fsMap.keys()), [fsMap]);
+  const projectConfigContent = useMemo5(() => {
     const rawConfig = fsMap.get("tscircuit.config.json");
     return typeof rawConfig === "string" ? rawConfig : void 0;
   }, [fsMap]);
-  const boardFiles = useMemo4(
+  const boardFiles = useMemo5(
     () => getBoardFilesFromConfig(allFiles, projectConfigContent),
     [allFiles, projectConfigContent]
   );
@@ -1883,7 +1906,7 @@ var RunFrameWithApi = (props) => {
     [setFavorites]
   );
   const activeFileFilter = props.fileFilter ?? DEFAULT_UI_FILE_FILTER;
-  const visibleBoardFiles = useMemo4(
+  const visibleBoardFiles = useMemo5(
     () => boardFiles.filter(activeFileFilter),
     [boardFiles, activeFileFilter]
   );
@@ -1959,7 +1982,7 @@ var RunFrameWithApi = (props) => {
     startPolling();
     return () => stopPolling();
   }, [startPolling, stopPolling]);
-  const componentProp = useMemo4(
+  const componentProp = useMemo5(
     () => String(componentPath).length > 0 ? {
       mainComponentPath: componentPath
     } : {},
@@ -2068,7 +2091,7 @@ var RunFrameWithApi = (props) => {
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { useCallback as useCallback6, useMemo as useMemo5, useState as useState8 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo6, useState as useState8 } from "react";
 
 // lib/components/RunFrameForCli/LoginDialog.tsx
 import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef4, useState as useState7 } from "react";
@@ -2295,7 +2318,7 @@ var RunFrameForCli = (props) => {
   );
   const evalWebWorkerBlobUrl = props.evalWebWorkerBlobUrl ?? props.workerBlobUrl;
   const cacheApiBaseUrl = props.apiBaseUrl ?? API_BASE;
-  const platformConfig = useMemo5(
+  const platformConfig = useMemo6(
     () => ({
       ...props.platformConfig,
       localCacheEngine: props.platformConfig?.localCacheEngine ?? createCliLocalCacheEngine({ apiBaseUrl: cacheApiBaseUrl })