Refactor global into its own store

Author: K0IN

frontend/src/App.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import callstack_view from "./stacktrace-frame.vue"
 import { editor, languages, Position } from "monaco-editor";
-import { stacktraceMap } from "./main";
 import { useMonacoGlobalInit, type MonacoRefType } from "./monaco";
 import type { Checkbox } from "@vscode/webview-ui-toolkit";
 import { generateHoverContent } from "./hover";
-import { useGlobalSettingsStore, useVsEvents } from "./stores";
+import { useGlobalSettingsStore, useVsEvents, useStacktraceMapStore } from "./stores";
 import { useBackendApi } from "./backend-api";
 
 const store = useVsEvents();
 const fn = useBackendApi();
 const settings = useGlobalSettingsStore();
+const stacktraceMapStore = useStacktraceMapStore();
 
 function initGlobalMonaco(monacoRef: MonacoRefType) {
     monacoRef?.languages.registerHoverProvider('*', {
         provideHover: async (model: editor.ITextModel, position: Position, _token: /* CancellationToken */ any, _context?: languages.HoverContext<languages.Hover> | undefined): Promise<languages.Hover> => {
-            const callLocationInfo = stacktraceMap.get(model.id);
+            const callLocationInfo = stacktraceMapStore.getCallLocation(model.id);
             if (!callLocationInfo) {
                 return { contents: [] };
             }

frontend/src/composables/useStacktraceManagement.ts

@@ -1,19 +1,22 @@
 import type { CallLocation } from 'shared/src';
-import { stacktraceMap } from '../main';
+import { useStacktraceMapStore } from '../stores';
+import type { editor } from 'monaco-editor';
 
 export function useStacktraceManagement() {
+    const stacktraceMapStore = useStacktraceMapStore();
+
     function getRealLineNumber(trace: CallLocation, lineNumber: number) {
         const lineOffset = trace.fileLocationOffset.startLine;
         return lineOffset + lineNumber; // WARNING: this is 1-based
     }
 
-    function registerStacktraceEditor(editor: any, traceFrame: CallLocation) {
+    function registerStacktraceEditor(editor: editor.IStandaloneCodeEditor, traceFrame: CallLocation) {
         const currentId = editor.getModel()?.id;
         if (!currentId) {
             throw new Error("Model does not have a id!");
         }
-        stacktraceMap.set(currentId, traceFrame);
-        editor.onDidDispose(() => stacktraceMap.delete(currentId));
+        stacktraceMapStore.registerEditor(currentId, traceFrame);
+        editor.onDidDispose(() => stacktraceMapStore.unregisterEditor(currentId));
     }
 
     function processCodeForDenseMode(code: string, startLine: number, denseMode: boolean) {

frontend/src/main.ts

@@ -4,14 +4,12 @@ import App from './App.vue'
 import type { } from "vscode-webview"; // this defines globals (acquireVsCodeApi)
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 import { allComponents, provideVSCodeDesignSystem } from "@vscode/webview-ui-toolkit";
-import type { CallLocation } from 'shared/src';
 import { getComlinkChannel } from './messaging';
 
 provideVSCodeDesignSystem().register(allComponents);
-const vscode = acquireVsCodeApi<{ denseMode: boolean }>();
-export const stacktraceMap = new Map</* editor.ITextModel.id */string, CallLocation>();
 
-// Initialize Comlink channels early
+
+const vscode = acquireVsCodeApi<{ denseMode: boolean }>();
 const comlinkChannels = getComlinkChannel(vscode);
 
 const pinia = createPinia();
@@ -21,5 +19,5 @@ app.use(pinia);
 app.provide('vscode', vscode);
 app.provide('comlinkChannels', comlinkChannels);
 
-app.use(VueMonacoEditorPlugin, { paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs' }, });
+app.use(VueMonacoEditorPlugin, { paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs' }, });
 app.mount('#app');

frontend/src/stores.ts

@@ -1,8 +1,7 @@
 import { defineStore } from "pinia"
 import { inject, shallowRef, ref } from "vue"
 import * as Comlink from "comlink/dist/esm/comlink";
-import type { ComlinkFrontendApi, MonacoTheme, StackTraceInfo } from "shared/src";
-import type { WebviewApi } from "vscode-webview";
+import type { ComlinkFrontendApi, MonacoTheme, StackTraceInfo, CallLocation } from "shared/src";
 import type { Endpoint } from "comlink";
 
 
@@ -72,3 +71,32 @@ export const useGlobalSettingsStore = defineStore('vscode-global-settings', () =
         }
     };
 });
+
+export const useStacktraceMapStore = defineStore('stacktrace-map', () => {
+    // Map from Monaco editor model ID to CallLocation
+    const stacktraceMap = ref(new Map<string, CallLocation>());
+
+    const registerEditor = (editorId: string, callLocation: CallLocation) => {
+        stacktraceMap.value.set(editorId, callLocation);
+    };
+
+    const unregisterEditor = (editorId: string) => {
+        stacktraceMap.value.delete(editorId);
+    };
+
+    const getCallLocation = (editorId: string): CallLocation | undefined => {
+        return stacktraceMap.value.get(editorId);
+    };
+
+    const clear = () => {
+        stacktraceMap.value.clear();
+    };
+
+    return {
+        stacktraceMap: stacktraceMap,
+        registerEditor,
+        unregisterEditor,
+        getCallLocation,
+        clear
+    };
+});