Implement JsSlangContextStore and update core types and hooks

Co-authored-by: RichDom2185 <[email protected]>

Author: Copilot

src/commons/application/ApplicationTypes.ts

@@ -13,6 +13,7 @@ import type { FileSystemState } from '../fileSystem/FileSystemTypes';
 import type { SideContentManagerState, SideContentState } from '../sideContent/SideContentTypes';
 import Constants from '../utils/Constants';
 import { createContext } from '../utils/JsSlangHelper';
+import { putJsSlangContext } from '../utils/JsSlangContextStore';
 import type {
   DebuggerContext,
   WorkspaceLocation,
@@ -384,12 +385,12 @@ export const defaultEditorValue = '// Type your program in here!';
  */
 export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): WorkspaceState => ({
   autogradingResults: [],
-  context: createContext<WorkspaceLocation>(
+  contextId: putJsSlangContext(createContext<WorkspaceLocation>(
     Constants.defaultSourceChapter,
     [],
     workspaceLocation,
     Constants.defaultSourceVariant
-  ),
+  )),
   isFolderModeEnabled: false,
   activeEditorTabIndex: 0,
   editorTabs: [
@@ -427,7 +428,18 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   isRunning: false,
   isDebugging: false,
   enableDebugging: true,
-  debuggerContext: {} as DebuggerContext,
+  debuggerContext: {
+    result: undefined,
+    lastDebuggerResult: undefined,
+    code: '',
+    contextId: putJsSlangContext(createContext<string>(
+      Constants.defaultSourceChapter,
+      [],
+      'debugger',
+      Constants.defaultSourceVariant
+    )),
+    workspaceLocation: workspaceLocation
+  },
   lastDebuggerResult: undefined,
   files: {},
   updateUserRoleCallback: () => {}

src/commons/sagas/PersistenceSaga.tsx

@@ -13,6 +13,7 @@ import { combineSagaHandlers } from '../redux/utils';
 import { actions } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
 import { showSimpleConfirmDialog, showSimplePromptDialog } from '../utils/DialogHelper';
+import { getJsSlangContext } from '../utils/JsSlangContextStore';
 import {
   dismiss,
   showMessage,
@@ -118,15 +119,18 @@ const PersistenceSaga = combineSagaHandlers({
       try {
         yield call(ensureInitialisedAndAuthorised);
 
-        const [activeEditorTabIndex, editorTabs, chapter, variant, external] = yield select(
+        const [activeEditorTabIndex, editorTabs, contextId, external] = yield select(
           (state: OverallState) => [
             state.workspaces.playground.activeEditorTabIndex,
             state.workspaces.playground.editorTabs,
-            state.workspaces.playground.context.chapter,
-            state.workspaces.playground.context.variant,
+            state.workspaces.playground.contextId,
             state.workspaces.playground.externalLibrary
           ]
         );
+        
+        const context = getJsSlangContext(contextId);
+        const chapter = context?.chapter || Constants.defaultSourceChapter;
+        const variant = context?.variant || Constants.defaultSourceVariant;
 
         if (activeEditorTabIndex === null) {
           throw new Error('No active editor tab found.');
@@ -249,9 +253,13 @@ const PersistenceSaga = combineSagaHandlers({
       const {
         activeEditorTabIndex,
         editorTabs,
-        context: { chapter, variant },
+        contextId,
         externalLibrary: external
       } = yield* selectWorkspace('playground');
+      
+      const context = getJsSlangContext(contextId);
+      const chapter = context?.chapter || Constants.defaultSourceChapter;
+      const variant = context?.variant || Constants.defaultSourceVariant;
 
       if (activeEditorTabIndex === null) {
         throw new Error('No active editor tab found.');

src/commons/sagas/PlaygroundSaga.ts

@@ -13,6 +13,8 @@ import {
   type OverallState
 } from '../application/ApplicationTypes';
 import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/utils';
+import Constants from '../utils/Constants';
+import { getJsSlangContext } from '../utils/JsSlangContextStore';
 import { combineSagaHandlers } from '../redux/utils';
 import SideContentActions from '../sideContent/SideContentActions';
 import { SideContentType } from '../sideContent/SideContentTypes';
@@ -66,9 +68,12 @@ const PlaygroundSaga = combineSagaHandlers({
     }
 
     const {
-      context: { chapter: playgroundSourceChapter },
+      contextId,
       editorTabs
     } = yield* selectWorkspace('playground');
+    
+    const context = getJsSlangContext(contextId);
+    const playgroundSourceChapter = context?.chapter || Constants.defaultSourceChapter;
 
     if (prevId === SideContentType.substVisualizer) {
       if (newId === SideContentType.mobileEditorRun) return;
@@ -131,12 +136,16 @@ function* updateQueryString() {
 
   const {
     activeEditorTabIndex,
-    context: { chapter, variant },
+    contextId,
     editorTabs,
     execTime,
     externalLibrary: external,
     isFolderModeEnabled
   } = yield* selectWorkspace('playground');
+  
+  const context = getJsSlangContext(contextId);
+  const chapter = context?.chapter || Constants.defaultSourceChapter;
+  const variant = context?.variant || Constants.defaultSourceVariant;
 
   const editorTabFilePaths = editorTabs
     .map(editorTab => editorTab.filePath)

src/commons/sagas/RemoteExecutionSaga.ts

@@ -26,6 +26,7 @@ import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { combineSagaHandlers } from '../redux/utils';
 import { actions } from '../utils/ActionsHelper';
 import type { MaybePromise } from '../utils/TypeHelper';
+import { getJsSlangContext } from '../utils/JsSlangContextStore';
 import { fetchDevices, getDeviceWSEndpoint } from './RequestsSaga';
 
 const dummyLocation = {
@@ -271,9 +272,13 @@ const RemoteExecutionSaga = combineSagaHandlers({
     yield put(actions.clearReplOutput(session.workspace));
 
     const client = session.connection.client;
-    const context: Context = yield select(
-      (state: OverallState) => state.workspaces[session.workspace].context
+    const contextId: string = yield select(
+      (state: OverallState) => state.workspaces[session.workspace].contextId
     );
+    const context = getJsSlangContext(contextId);
+    if (!context) {
+      throw new Error('Context not found');
+    }
     // clear the context of errors (note: the way this works is that the context
     // is mutated by js-slang anyway, so it's ok to do it like this)
     context.errors.length = 0;

src/commons/sagas/SideContentSaga.ts

@@ -5,6 +5,7 @@ import StoriesActions from 'src/features/stories/StoriesActions';
 import { combineSagaHandlers } from '../redux/utils';
 import SideContentActions from '../sideContent/SideContentActions';
 import { SideContentType } from '../sideContent/SideContentTypes';
+import { putJsSlangContext } from '../utils/JsSlangContextStore';
 import WorkspaceActions from '../workspace/WorkspaceActions';
 
 const isSpawnSideContent = (
@@ -34,15 +35,21 @@ const SideContentSaga = combineSagaHandlers({
       result: action.payload.result,
       lastDebuggerResult: action.payload.lastDebuggerResult,
       code: action.payload.code,
-      context: action.payload.context,
+      contextId: putJsSlangContext(action.payload.context),
       workspaceLocation: action.payload.workspaceLocation
     };
     yield put(
       SideContentActions.spawnSideContent(action.payload.workspaceLocation, debuggerContext)
     );
   },
   [StoriesActions.notifyStoriesEvaluated.type]: function* (action) {
-    yield put(SideContentActions.spawnSideContent(`stories.${action.payload.env}`, action.payload));
+    const storiesDebuggerContext = {
+      ...action.payload,
+      contextId: putJsSlangContext(action.payload.context)
+    };
+    // Remove the original context property to avoid type conflicts
+    delete storiesDebuggerContext.context;
+    yield put(SideContentActions.spawnSideContent(`stories.${action.payload.env}`, storiesDebuggerContext));
   }
 });
 

src/commons/utils/JsSlangContextStore.ts

@@ -0,0 +1,77 @@
+import { v4 as uuidv4 } from 'uuid';
+import type { Context } from 'js-slang/dist/types';
+
+/**
+ * Global singleton store for js-slang Context objects.
+ * 
+ * This store manages mutable js-slang contexts outside of Redux,
+ * solving the issue where storing mutable objects in Redux violates
+ * immutability requirements and causes problems with Immer's auto-freezing.
+ * 
+ * Instead of storing Context objects directly in Redux, we store
+ * UUIDs that reference contexts in this global store.
+ */
+class JsSlangContextStore {
+  private contextStore = new Map<string, Context>();
+
+  /**
+   * Stores a js-slang context and returns a UUID to reference it.
+   * @param context - The js-slang Context object to store
+   * @returns UUID string that can be stored in Redux state
+   */
+  putJsSlangContext(context: Context): string {
+    const id = uuidv4();
+    this.contextStore.set(id, context);
+    return id;
+  }
+
+  /**
+   * Retrieves a js-slang context by its UUID.
+   * @param id - The UUID of the context to retrieve
+   * @returns The Context object, or undefined if not found
+   */
+  getJsSlangContext(id: string): Context | undefined {
+    return this.contextStore.get(id);
+  }
+
+  /**
+   * Removes a js-slang context from the store.
+   * @param id - The UUID of the context to remove
+   * @returns true if the context was found and removed, false otherwise
+   */
+  deleteJsSlangContext(id: string): boolean {
+    return this.contextStore.delete(id);
+  }
+
+  /**
+   * Gets the number of contexts currently stored.
+   * Useful for debugging and monitoring.
+   */
+  size(): number {
+    return this.contextStore.size;
+  }
+
+  /**
+   * Clears all stored contexts.
+   * Use with caution - this will invalidate all context references.
+   */
+  clear(): void {
+    this.contextStore.clear();
+  }
+}
+
+// Export a singleton instance
+export const jsSlangContextStore = new JsSlangContextStore();
+
+// Export the class for testing purposes
+export { JsSlangContextStore };
+
+// Export utility functions for convenience
+export const putJsSlangContext = (context: Context): string => 
+  jsSlangContextStore.putJsSlangContext(context);
+
+export const getJsSlangContext = (id: string): Context | undefined => 
+  jsSlangContextStore.getJsSlangContext(id);
+
+export const deleteJsSlangContext = (id: string): boolean => 
+  jsSlangContextStore.deleteJsSlangContext(id);

src/commons/workspace/WorkspaceReducer.ts

@@ -21,6 +21,7 @@ import {
 } from '../collabEditing/CollabEditingActions';
 import type { SourceActionType } from '../utils/ActionsHelper';
 import { createContext } from '../utils/JsSlangHelper';
+import { putJsSlangContext } from '../utils/JsSlangContextStore';
 import { handleCseAndStepperActions } from './reducers/cseReducer';
 import { handleDebuggerActions } from './reducers/debuggerReducer';
 import { handleEditorActions } from './reducers/editorReducer';
@@ -95,12 +96,12 @@ const newWorkspaceReducer = createReducer(defaultWorkspaceManager, builder => {
         ...state,
         [workspaceLocation]: {
           ...state[workspaceLocation],
-          context: createContext<WorkspaceLocation>(
+          contextId: putJsSlangContext(createContext<WorkspaceLocation>(
             action.payload.library.chapter,
             action.payload.library.external.symbols,
             workspaceLocation,
             action.payload.library.variant
-          ),
+          )),
           globals: action.payload.library.globals,
           externalLibrary: action.payload.library.external.name
         }
@@ -360,18 +361,19 @@ const newWorkspaceReducer = createReducer(defaultWorkspaceManager, builder => {
       };
     })
     .addCase(WorkspaceActions.updateSublanguage, (state, action) => {
-      // TODO: Mark for removal
-      const { chapter, variant } = action.payload.sublang;
-      state.playground.context.chapter = chapter;
-      state.playground.context.variant = variant;
+      // TODO: Mark for removal - this functionality needs to be updated
+      // to work with the new context store or removed entirely
+      // const { chapter, variant } = action.payload.sublang;
+      // state.playground.context.chapter = chapter;
+      // state.playground.context.variant = variant;
     })
     .addCase(WorkspaceActions.notifyProgramEvaluated, (state, action) => {
       const workspaceLocation = getWorkspaceLocation(action);
       const debuggerContext = state[workspaceLocation].debuggerContext;
       debuggerContext.result = action.payload.result;
       debuggerContext.lastDebuggerResult = action.payload.lastDebuggerResult;
       debuggerContext.code = action.payload.code;
-      debuggerContext.context = action.payload.context;
+      debuggerContext.contextId = putJsSlangContext(action.payload.context);
       debuggerContext.workspaceLocation = action.payload.workspaceLocation;
     })
     .addCase(WorkspaceActions.toggleUsingUpload, (state, action) => {

src/commons/workspace/WorkspaceTypes.ts

@@ -1,5 +1,4 @@
 import type { CollabEditingAccess } from '@sourceacademy/sharedb-ace/types';
-import type { Context } from 'js-slang';
 
 import type {
   AllColsSortStates,
@@ -79,7 +78,7 @@ export type EditorTabState = {
 
 export type WorkspaceState = {
   readonly autogradingResults: AutogradingResult[];
-  readonly context: Context;
+  readonly contextId: string;
   readonly isFolderModeEnabled: boolean;
   readonly activeEditorTabIndex: number | null;
   readonly editorTabs: EditorTabState[];
@@ -120,7 +119,7 @@ export type DebuggerContext = {
   result: any;
   lastDebuggerResult: any;
   code: string;
-  context: Context;
+  contextId: string;
   workspaceLocation?: WorkspaceLocation;
 };
 

src/commons/workspace/hooks/useJsSlangContext.ts

@@ -0,0 +1,52 @@
+import { useSelector } from 'react-redux';
+import type { Context } from 'js-slang/dist/types';
+
+import type { OverallState } from '../../application/ApplicationTypes';
+import { getJsSlangContext } from '../../utils/JsSlangContextStore';
+import type { WorkspaceLocation } from '../WorkspaceTypes';
+
+/**
+ * Custom hook to get the js-slang context for a specific workspace.
+ * 
+ * This hook abstracts away the complexity of retrieving contexts from
+ * the global store. It uses the context ID stored in Redux to fetch
+ * the actual mutable Context object from the JsSlangContextStore.
+ * 
+ * @param workspaceLocation - The workspace location to get the context for
+ * @returns The js-slang Context object, or undefined if not found
+ */
+export function useJsSlangContext(workspaceLocation: WorkspaceLocation): Context | undefined {
+  const contextId = useSelector((state: OverallState) => 
+    state.workspaces[workspaceLocation].contextId
+  );
+
+  return contextId ? getJsSlangContext(contextId) : undefined;
+}
+
+/**
+ * Hook to get the context ID (UUID) for a workspace.
+ * Useful when you need the ID itself rather than the context object.
+ * 
+ * @param workspaceLocation - The workspace location to get the context ID for
+ * @returns The context ID string, or undefined if not set
+ */
+export function useJsSlangContextId(workspaceLocation: WorkspaceLocation): string | undefined {
+  return useSelector((state: OverallState) => 
+    state.workspaces[workspaceLocation].contextId
+  );
+}
+
+/**
+ * Hook to get the debugger context for a workspace.
+ * Similar to useJsSlangContext but for the debugger context specifically.
+ * 
+ * @param workspaceLocation - The workspace location to get the debugger context for
+ * @returns The debugger's js-slang Context object, or undefined if not found
+ */
+export function useDebuggerJsSlangContext(workspaceLocation: WorkspaceLocation): Context | undefined {
+  const debuggerContextId = useSelector((state: OverallState) => 
+    state.workspaces[workspaceLocation].debuggerContext.contextId
+  );
+
+  return debuggerContextId ? getJsSlangContext(debuggerContextId) : undefined;
+}