System Implementation in Source Implementations
This page contains developer information regarding the interaction between the Source Modules system and Source implementations js-slang.
Table of Contents
The Source Module Bundle is the core of the logic related to the Source Module provided functions. As explained in the Source Modules Implementation page here, the Source Module Bundle is served as an IIFE.
In the evaluation of the function application of the Source Implementation js-slang's runInContext method, the Source Module Bundle is consumed in both the interpretation step and transpilation step, only one of which will be used at any one time.
The following two subsections assumes that the reader understands the content highlighted in the System Implementation introduction to js-slang section here.
The transpilation step of the Source Implementations js-slang takes in a Source abstract syntax tree (Source AST) and performs some operations using the Source AST. The Source AST consists of import nodes that are the nodes that concerns the Source Modules system. These import nodes are converted from import statements in the Source program string. An example of such an import statement is shown below.
import { foo } from "bar";
As part of the Source program transpiler, the import nodes in the AST is used to determine which Source Modules the Source program requires and thereafter, for each import node, the corresponding Source Module bundle is fetched from the Source Module static server. The Source Module bundle is retrieved in the form of a JavaScript program string to be evaluated in the evaluation step of the transpilation process.
While the JavaScript Source Module files are being retrieved from the static server, the transpiler converts all the import declaration nodes in the Source AST into constant declarations. This is achieved by first assigning each imported Source Module to a unique identifier (eg. 0), and thereafter converting the imported variables to constant declaration statements. For example, the Source AST equivalent of the import statment above will be converted to the Source AST equivalent of the following.
const foo = __module_0__.foo;
When the transpilation process of the Source AST is completed, the resulting Source AST will be converted into a JavaScript program string through a process which generates the JavaScript code from the Source AST. The resulting JavaScript program string will thus include the above constant declaration statements at the front of the program string.
At this point, the Source Module bundle's JavaScript IIFE will be prepended with a constant declaration that assigns the result of evaluating the IIFE to the symbol corresponding to the Source Module. An example is shown below.
const __module_0__ = (function () { ... })());
This statement will then be prepended to the front of the JavaScript program string, resulting in the following.
const __module_0__ = (function () { ... })());
const foo = __module_0__.foo;
At the evaluation stage of the transpilation process, the JavaScript program string is evaluated by the browser's built-in JavaScript evaluator, to return the result of the evaluation of the Source program string passed as an argument to the Source Implementation js-slang's runInContext.
The interpretation step of the Source Implementations js-slang takes in a Source abstract syntax tree (Source AST) and performs the program evaluations using the Source AST. The Source AST consists of import nodes that are the nodes that concerns the Source Modules system. These import nodes are converted from import statements in the Source program string. An example of such an import statement is shown below.
import { foo } from "bar";
As part of the Source program interpreter, the import nodes in the AST is used to determine which Source Modules the Source program requires and thereafter, for each import node, the corresponding Source Module bundle is fetched from the Source Module static server. The Source Module bundles are then evaluated using the browser's built-in JavaScript evaluator, and thereafter the imported functions' bindings are stored in the global scope of the Source program evaluator.
The Source Module Bundle is the core of the code related to the Source Module's user interface in the Source Academy side content tabs.
During the evaluation of Source Implementation js-slangs runInContext method, a Context object is passed into the method as an argument. The Context stores information related to things like the Source language version used, runtime options, execution method and Source language variant. This Context object, is then used during the evaluation and returned as part of the Result of the evaluation of the Source program string.
As part of the Context object in the runInContext method, a new property modules is added to store all the Source Module Tabs corresponding to the Source Modules imported in the Source program string. The Source Modules' Tabs are pushed into the array during a function application of appendModuleTabsToContext with the Source AST supplied as an argument after the parsing step of the runInContext method. The function appendModuleTabsToContext retrieves all the Source Module Tabs from the static server corresponding to all the Source Modules imported, and appends the IIFE JavaScript string to the modules array inside the Context object, which is then return from the runInContext function.