Performance, background rendering, stack labels

Author: bitjson

libauth

@@ -6,10 +6,14 @@ import {
   CurrentScripts,
   EvaluationViewerSettings,
   IDESupportedProgramState,
+  IDESupportedVM,
 } from '../state/types';
 import { unknownValue } from '../utils';
 
 import { getCurrentScripts, getUsedIds } from './common';
+import { DebugWorkerResult } from './debug-worker';
+// eslint-disable-next-line import/no-unresolved
+import DebugWorker from './debug-worker.ts?worker';
 import { ImportExportDialog } from './dialogs/import-export-dialog/ImportExportDialog';
 import { ImportScriptDialog } from './dialogs/import-script-dialog/ImportScriptDialog';
 import { NewEntityDialog } from './dialogs/new-entity-dialog/NewEntityDialog';
@@ -33,7 +37,8 @@ import { WalletEditor } from './wallet/wallet-editor/WalletEditor';
 import { WalletHistoryExplorer } from './wallet/wallet-history-explorer/WalletHistoryExplorer';
 import { WelcomePane } from './welcome-pane/WelcomePane';
 
-import { useCallback, useEffect, useState } from 'react';
+import { stringify } from '@bitauth/libauth';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Mosaic } from 'react-mosaic-component';
 import { connect } from 'react-redux';
 
@@ -60,13 +65,17 @@ type EditorDispatch = {
   changeEvaluationViewerSettings: typeof ActionCreators.changeEvaluationViewerSettings;
   importExport: typeof ActionCreators.importExport;
   switchScenario: typeof ActionCreators.switchScenario;
+  startDebugging: typeof ActionCreators.startDebugging;
+  finishDebugging: typeof ActionCreators.finishDebugging;
 };
 
 type EditorProps<ProgramState extends IDESupportedProgramState> = {
   computed: ComputedEditorState<ProgramState>;
   currentlyEditingInternalId: string | undefined;
   currentScripts: CurrentScripts;
   activeDialog: ActiveDialog;
+  currentVmId: IDESupportedVM;
+  debug: AppState['debug'];
   evaluationViewerSettings: EvaluationViewerSettings;
   usedIds: string[];
 } & EditorDispatch;
@@ -78,6 +87,8 @@ export const Editor = connect(
     currentScripts: getCurrentScripts(state),
     activeDialog: state.activeDialog,
     evaluationViewerSettings: state.evaluationViewerSettings,
+    currentVmId: state.currentVmId,
+    debug: state.debug,
     usedIds: getUsedIds(state),
   }),
   {
@@ -92,6 +103,8 @@ export const Editor = connect(
       ActionCreators.changeEvaluationViewerSettings,
     importExport: ActionCreators.importExport,
     switchScenario: ActionCreators.switchScenario,
+    startDebugging: ActionCreators.startDebugging,
+    finishDebugging: ActionCreators.finishDebugging,
   },
 )((props: EditorProps<IDESupportedProgramState>) => {
   const [projectExplorerWidth, setProjectExplorerWidth] = useState(21);
@@ -151,6 +164,53 @@ export const Editor = connect(
     viewerRefCallbackFrame2,
     viewerRefCallbackFrame3,
   ];
+  const workerRef = useRef<Worker>();
+  const lastKey = useRef<string>();
+
+  const { finishDebugging } = props;
+  useEffect(() => {
+    workerRef.current = new DebugWorker();
+    workerRef.current.onmessage = (e: MessageEvent<DebugWorkerResult>) => {
+      finishDebugging(e.data);
+    };
+    return () => {
+      workerRef.current?.terminate();
+    };
+  }, [finishDebugging]);
+
+  const { computed, currentVmId, startDebugging, debug: debugState } = props;
+  useEffect(() => {
+    if (
+      computed.editorMode === ProjectEditorMode.isolatedScriptEditor ||
+      computed.editorMode === ProjectEditorMode.scriptPairEditor ||
+      computed.editorMode === ProjectEditorMode.testedScriptEditor
+    ) {
+      const scriptMode = computed;
+      const key = stringify(
+        {
+          vmId: currentVmId,
+          config: scriptMode.workerDetails.compilerConfiguration,
+          lockingScriptId: scriptMode.workerDetails.lockingScriptId,
+          unlockingScriptId: scriptMode.workerDetails.unlockingScriptId,
+          scenarioId: scriptMode.workerDetails.scenarioId,
+        },
+        0,
+      );
+      if (key !== lastKey.current) {
+        lastKey.current = key;
+        const compilationId = debugState.compilationId + 1;
+        startDebugging();
+        workerRef.current?.postMessage({
+          compilerConfiguration: scriptMode.workerDetails.compilerConfiguration,
+          lockingScriptId: scriptMode.workerDetails.lockingScriptId,
+          unlockingScriptId: scriptMode.workerDetails.unlockingScriptId,
+          scenarioId: scriptMode.workerDetails.scenarioId,
+          vmId: currentVmId,
+          compilationId,
+        });
+      }
+    }
+  }, [computed, currentVmId, startDebugging, debugState.compilationId]);
 
   useEffect(() => {
     const setKey = (value: unknown) => {
@@ -217,6 +277,7 @@ export const Editor = connect(
       debugTrace={computed.debugTrace}
       evaluationViewerSettings={props.evaluationViewerSettings}
       importExport={props.importExport}
+      isProcessing={computed.isProcessing}
       scenarioDetails={computed.scenarioDetails}
       showControls={indexFromTop === 0}
       switchScenario={props.switchScenario}

src/editor/Editor.tsx

@@ -0,0 +1,130 @@
+/// <reference lib="webworker" />
+import {
+  DebugDetails,
+  IDESupportedProgramState,
+  IDESupportedVM,
+} from '../state/types';
+
+import { IDESupportedAuthenticationProgram } from './editor-types';
+
+import {
+  createCompiler,
+  createVirtualMachineBch2023,
+  createVirtualMachineBch2025,
+  createVirtualMachineBch2026,
+  createVirtualMachineBchSpec,
+  ScenarioGenerationDebuggingResult,
+  stringify,
+} from '@bitauth/libauth';
+
+export type DebugWorkerJob = {
+  compilerConfiguration: unknown;
+  lockingScriptId?: string;
+  unlockingScriptId?: string;
+  scenarioId?: string;
+  vmId: IDESupportedVM;
+  compilationId: number;
+};
+
+export type DebugWorkerResult = {
+  compilationId: number;
+  result: DebugDetails['result'];
+};
+
+const debugCache = new Map<
+  string,
+  { debugTrace: IDESupportedProgramState[]; verifyResult: string | true }
+>();
+const scenarioCache = new Map<
+  string,
+  string | ScenarioGenerationDebuggingResult<IDESupportedProgramState>
+>();
+const debugKey = (
+  vmId: IDESupportedVM,
+  program: IDESupportedAuthenticationProgram,
+) => `${vmId}:${stringify(program, 0)}`;
+const scenarioKey = (
+  configuration: unknown,
+  lockingScriptId: string | undefined,
+  unlockingScriptId: string | undefined,
+  scenarioId: string | undefined,
+) =>
+  `${lockingScriptId ?? ''}:${unlockingScriptId ?? ''}:${scenarioId ?? ''}:${stringify(configuration, 0)}`;
+
+self.onmessage = (event: MessageEvent<DebugWorkerJob>) => {
+  const {
+    compilerConfiguration,
+    lockingScriptId,
+    unlockingScriptId,
+    scenarioId,
+    vmId,
+    compilationId,
+  } = event.data;
+
+  const sKey = scenarioKey(
+    compilerConfiguration,
+    lockingScriptId,
+    unlockingScriptId,
+    scenarioId,
+  );
+  let scenarioGeneration = scenarioCache.get(sKey);
+  if (scenarioGeneration === undefined) {
+    const compiler = createCompiler(
+      compilerConfiguration as ReturnType<
+        typeof createCompiler
+      >['configuration'],
+    );
+    scenarioGeneration = compiler.generateScenario({
+      debug: true,
+      lockingScriptId,
+      unlockingScriptId,
+      scenarioId,
+    }) as string | ScenarioGenerationDebuggingResult<IDESupportedProgramState>;
+    scenarioCache.set(sKey, scenarioGeneration);
+    if (scenarioCache.size > 20) {
+      const first = scenarioCache.keys().next().value as string;
+      scenarioCache.delete(first);
+    }
+  }
+
+  const program =
+    typeof scenarioGeneration !== 'string' &&
+    typeof scenarioGeneration.scenario !== 'string'
+      ? scenarioGeneration.scenario.program
+      : undefined;
+
+  let debugTrace: IDESupportedProgramState[] | undefined;
+  let verifyResult: string | true | undefined;
+  if (program !== undefined) {
+    const dKey = debugKey(vmId, program);
+    const cached = debugCache.get(dKey);
+    if (cached !== undefined) {
+      ({ debugTrace, verifyResult } = cached);
+    } else {
+      const vm =
+        vmId === 'BCH_2023_05'
+          ? createVirtualMachineBch2023()
+          : vmId === 'BCH_2025_05'
+            ? createVirtualMachineBch2025()
+            : vmId === 'BCH_2026_05'
+              ? createVirtualMachineBch2026()
+              : createVirtualMachineBchSpec();
+      debugTrace = vm.debug(program) as IDESupportedProgramState[];
+      verifyResult = vm.verify(program);
+      debugCache.set(dKey, { debugTrace, verifyResult });
+      if (debugCache.size > 20) {
+        const first = debugCache.keys().next().value as string;
+        debugCache.delete(first);
+      }
+    }
+  }
+  const workResult: DebugWorkerResult = {
+    compilationId,
+    result: {
+      debugTrace: debugTrace!,
+      scenarioGeneration,
+      verifyResult: verifyResult!,
+    },
+  };
+  self.postMessage(workResult);
+};

src/editor/debug-worker.ts

@@ -250,7 +250,9 @@ export const ImportExportDialog = connect(
                 return;
               }
               const checkMarkers = () => {
-                const markers = monaco.editor.getModelMarkers({});
+                const markers = monaco.editor.getModelMarkers({
+                  resource: model.uri,
+                });
                 setErrorCount(markers.length);
               };
               /**
@@ -305,7 +307,7 @@ export const ImportExportDialog = connect(
             )}
           </div>
           <Button
-            disabled={template === props.WalletTemplate}
+            // disabled={template === props.WalletTemplate}
             className={
               errorCount !== 0 ||
               errorMessage !== '' ||
@@ -314,6 +316,10 @@ export const ImportExportDialog = connect(
                 : ''
             }
             onClick={() => {
+              if (template === props.WalletTemplate) {
+                setErrorMessage(`The template hasn't been modified.`);
+                return;
+              }
               let parsed: unknown;
               try {
                 parsed = JSON.parse(template);