Flow of Module System

This subsection explains the current implementation of the flexible modules system.

Figure 1 shows the flow of the source modules system in the js-slang library.

Js-slang is the library used to evaluate Source code. The code begins in the editor on the Source Academy frontend in a workspace (eg. playground). When the cadet runs the Source program, the code is evaluated by a Js-slang exposed function runInContext() which parses the code into an Abstract Syntax Tree (AST).

After the code is successfully checked for syntax errors and parsed, the import nodes are retrieved from the AST. These import nodes will then be combined together to form the list of modules required by Js-slang to load the imported modules’ required tabs.

At the same time, the transpiler will load the imported modules’ bundle and thereafter append the bundle to the start of the Source program, before evaluating the Source program using the browser’s JavaScript engine. The returned result from the evaluation will then be passed, along with the imported modules’ tabs to the Source Academy frontend.

Figure 2 shows the flow of the source modules system in the Source Academy frontend

The imported tabs will make use of the debuggerContext provided by the Source Academy frontend (which includes the result of the evaluation and the modules’ tabs) to display content.

The most up-to-date definition of debuggerContext is defined here.

export type DebuggerContext = {
  result: any;
  lastDebuggerResult: any;
  code: string;
  context: Context;
  workspaceLocation?: WorkspaceLocation;
};