Module Loading Changes (#2871)

* Remove side content state from workspaces and story env

* Run format

* Fix broken import

* Change to new tab loading system

* Merge

* Fix wrongly named type

* Run format

* bumping js-slang

* update mock context

---------

Co-authored-by: henz <henz@comp.nus.edu.sg>
Co-authored-by: NhatMinh0208 <minhkhicon2468@gmail.com>

Author: 3 people

package.json

@@ -49,7 +49,7 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
-    "js-slang": "^1.0.51",
+    "js-slang": "^1.0.52",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",

src/commons/application/ApplicationTypes.ts

@@ -381,10 +381,6 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   isDebugging: false,
   enableDebugging: true,
   debuggerContext: {} as DebuggerContext,
-  sideContent: {
-    alerts: [],
-    dynamicTabs: []
-  },
   lastDebuggerResult: undefined,
   lastNonDetResult: null
 });
@@ -527,11 +523,7 @@ export const createDefaultStoriesEnv = (
   stepLimit: 1000,
   globals: [],
   usingSubst: false,
-  debuggerContext: {} as DebuggerContext,
-  sideContent: {
-    dynamicTabs: [],
-    alerts: []
-  }
+  debuggerContext: {} as DebuggerContext
 });
 
 export const defaultFileSystem: FileSystemState = {

src/commons/mocks/ContextMocks.ts

@@ -37,7 +37,8 @@ export function mockRuntimeContext(): Context {
     control: null,
     stash: null,
     envStepsTotal: 0,
-    breakpointSteps: []
+    breakpointSteps: [],
+    changepointSteps: []
   };
   return context;
 }

src/commons/sideContent/SideContentHelper.ts

@@ -45,27 +45,30 @@ const requireProvider = (x: string) => {
   return exports[x];
 };
 
-type RawTab = (provider: ReturnType<typeof requireProvider>) => ModuleSideContent;
+type RawTab = (provider: ReturnType<typeof requireProvider>) => { default: ModuleSideContent };
 
 /**
  * Returns an array of SideContentTabs to be spawned
  * @param debuggerContext - DebuggerContext object from redux store
  */
-export const getDynamicTabs = (debuggerContext: DebuggerContext): SideContentTab[] => {
+export function getDynamicTabs(debuggerContext: DebuggerContext): SideContentTab[] {
   const moduleContexts = debuggerContext?.context?.moduleContexts;
 
   if (!moduleContexts) return [];
 
   return Object.values(moduleContexts)
     .flatMap(({ tabs }) => tabs ?? [])
-    .map((rawTab: RawTab) => rawTab(requireProvider))
+    .map((rawTab: RawTab) => {
+      const { default: content } = rawTab(requireProvider);
+      return content;
+    })
     .filter(({ toSpawn }) => !toSpawn || toSpawn(debuggerContext))
     .map(tab => ({
       ...tab,
       body: tab.body(debuggerContext),
       id: SideContentType.module
     }));
-};
+}
 
 export const generateIconId = (tabId: TabId) => `${tabId}-icon`;
 export const getTabId = (tab: SideContentTab) =>

src/commons/sideContent/SideContentReducer.ts

@@ -2,13 +2,12 @@ import { defaultSideContent, defaultSideContentManager } from '../application/Ap
 import { SourceActionType } from '../utils/ActionsHelper';
 import { getDynamicTabs, getTabId } from './SideContentHelper';
 import { getLocation } from './SideContentHelper';
-import { CHANGE_SIDE_CONTENT_HEIGHT } from './SideContentTypes';
+import { CHANGE_SIDE_CONTENT_HEIGHT, SPAWN_SIDE_CONTENT } from './SideContentTypes';
 import {
   END_ALERT_SIDE_CONTENT,
   REMOVE_SIDE_CONTENT_ALERT,
   RESET_SIDE_CONTENT,
   SideContentManagerState,
-  SPAWN_SIDE_CONTENT,
   VISIT_SIDE_CONTENT
 } from './SideContentTypes';
 

src/commons/workspace/WorkspaceTypes.ts

@@ -6,7 +6,6 @@ import { InterpreterOutput } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { AutogradingResult, Testcase } from '../assessment/AssessmentTypes';
 import { HighlightedLines, Position } from '../editor/EditorTypes';
-import { SideContentState } from '../sideContent/SideContentTypes';
 
 export const ADD_HTML_CONSOLE_ERROR = 'ADD_HTML_CONSOLE_ERROR';
 export const BEGIN_CLEAR_CONTEXT = 'BEGIN_CLEAR_CONTEXT';
@@ -147,7 +146,6 @@ export type WorkspaceState = {
   readonly stepLimit: number;
   readonly globals: Array<[string, any]>;
   readonly debuggerContext: DebuggerContext;
-  readonly sideContent: SideContentState;
   readonly lastDebuggerResult: any;
   readonly lastNonDetResult: Result | null;
 };

src/features/cseMachine/CseMachineUtils.ts

@@ -10,7 +10,7 @@ import {
   UnOpInstr
 } from 'js-slang/dist/cse-machine/types';
 import { Environment, Value as StashValue } from 'js-slang/dist/types';
-import { astToString } from 'js-slang/dist/utils/astToString';
+import { astToString } from 'js-slang/dist/utils/ast/astToString';
 import { Group } from 'konva/lib/Group';
 import { Node } from 'konva/lib/Node';
 import { Shape } from 'konva/lib/Shape';

src/features/stories/StoriesTypes.ts

@@ -1,5 +1,4 @@
 import { Context } from 'js-slang';
-import { SideContentState } from 'src/commons/sideContent/SideContentTypes';
 import { DebuggerContext } from 'src/commons/workspace/WorkspaceTypes';
 
 import { InterpreterOutput, StoriesRole } from '../../commons/application/ApplicationTypes';
@@ -60,7 +59,6 @@ export type StoriesEnvState = {
   readonly globals: Array<[string, any]>;
   readonly usingSubst: boolean;
   readonly debuggerContext: DebuggerContext;
-  readonly sideContent: SideContentState;
 };
 
 export type StoriesAuthState = {

src/index.tsx

@@ -2,7 +2,7 @@ import 'src/styles/index.scss';
 
 import { Button } from '@blueprintjs/core';
 import * as Sentry from '@sentry/browser';
-import { setModulesStaticURL } from 'js-slang/dist/modules/moduleLoader';
+import { setModulesStaticURL } from 'js-slang/dist/modules/loader/moduleLoader';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import Constants, { Links } from 'src/commons/utils/Constants';

yarn.lock

@@ -8305,10 +8305,10 @@ js-sdsl@4.3.0, js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
   integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==
 
-js-slang@^1.0.51:
-  version "1.0.51"
-  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.51.tgz#254ec52f4db29a8f51276cf681cf2608698337cf"
-  integrity sha512-UmoWDfcgwxG86s+Q7y9BxU8PcPnyyTs6jgVK77luaGqMy+kDKwwNqajjIOmd3thVOouAj2U1llAjVT1oZtmCLw==
+js-slang@^1.0.52:
+  version "1.0.52"
+  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.52.tgz#f24d504e09842fc6567789b45e8c9fc3a86a38d3"
+  integrity sha512-Ioe/XQFxAwZpDGNsg8MDKbC/0CvLXN+0mwhKrtm2jq6PHGa9oldZqykZZAlPYdC5XifI3DktKrRmuc94AIiKfA==
   dependencies:
     "@babel/parser" "^7.19.4"
     "@joeychenofficial/alt-ergo-modified" "^2.4.0"