Major Refactor: Move js-slang evaluation context out of Redux

[Copilot]

This PR implements a major architectural refactor to move mutable js-slang evaluation contexts out of Redux state, resolving critical issues with immutability violations and Immer compatibility.

Problem

The current implementation stores mutable js-slang Context objects directly in Redux state, which violates two fundamental Redux principles:

1. State must be immutable - js-slang contexts are inherently mutable objects that get modified during program evaluation
2. State must only consist of simple objects/arrays/primitives - js-slang contexts contain complex objects with circular references

This has caused significant issues:

• Immer's auto-freezing behavior breaks program evaluation (currently disabled via setAutoFreeze(false))
• Immer prevents circular data structures, which js-slang contexts require
• Large performance overhead from serializing complex objects in Redux

Solution

Implemented a global context store that manages js-slang contexts outside of Redux:

Core Architecture

// New global singleton store
class JsSlangContextStore {
  private contextStore = new Map<string, Context>();
  
  putJsSlangContext(context: Context): string // Returns UUID
  getJsSlangContext(id: string): Context | undefined
  deleteJsSlangContext(id: string): boolean
}

// Redux state now only stores primitive IDs
interface WorkspaceState {
  contextId: string; // Instead of context: Context
}

// Transparent access via custom hook
function useJsSlangContext(location: WorkspaceLocation): Context | undefined

Migration Pattern

Before:

// Mutable objects in Redux state ❌
const workspace = {
  context: createContext(chapter, [], location, variant)
};

// Direct context access
const context = useTypedSelector(state => state.workspaces.playground.context);

After:

// Primitive IDs in Redux state ✅
const workspace = {
  contextId: putJsSlangContext(createContext(chapter, [], location, variant))
};

// Transparent context access via hook
const context = useJsSlangContext('playground');

Implementation Details

Files Changed

• Core Store: JsSlangContextStore.ts - Global singleton with Map-based storage
• React Hook: useJsSlangContext.ts - Transparent context access for components
• Type Updates: WorkspaceTypes.ts - Changed context: Context to contextId: string
• Redux Layer: Updated WorkspaceReducer.ts, ApplicationTypes.ts, createStore.ts
• Sagas: All workspace and evaluation sagas updated to use context store
• Components: Playground, Sourcecast, Sourcereel pages updated to use new hook
• Persistence: localStorage functions updated to extract chapter/variant from stored contexts

Key Benefits

✅ Redux Compliance - State is now fully immutable with only primitives
✅ Mutable Contexts - js-slang contexts can be mutated during evaluation as needed
✅ Immer Compatible - No more auto-freezing conflicts
✅ Circular References - Context objects with circular data structures work properly
✅ Performance - Reduced Redux payload size and serialization overhead
✅ Transparency - Existing component patterns preserved via custom hook

Testing

Added comprehensive test suite (9/9 tests passing) covering:

• Context storage and retrieval
• UUID generation and uniqueness
• Memory management (add/delete/clear)
• Context mutation capabilities
• Multiple store instance isolation

Backward Compatibility

The refactor maintains full backward compatibility through the useJsSlangContext() hook, which abstracts away the complexity of the new architecture. Most existing component code requires minimal changes.

Example Usage

// In a React component
function MyComponent({ workspaceLocation }: Props) {
  // Before: const context = useTypedSelector(state => state.workspaces[workspaceLocation].context);
  const context = useJsSlangContext(workspaceLocation); // After
  
  const chapter = context?.chapter || Constants.defaultSourceChapter;
  // ... rest of component logic unchanged
}

// In a saga
function* mySaga(workspaceLocation: WorkspaceLocation) {
  // Before: const context = yield select(state => state.workspaces[workspaceLocation].context);
  const contextId = yield select(state => state.workspaces[workspaceLocation].contextId);
  const context = getJsSlangContext(contextId);
  // ... rest of saga logic
}

This architectural change resolves the fundamental Redux violations while maintaining a clean, performant, and maintainable codebase.

Fixes #3294.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.