Make frontend work with new module loading (#2904)

* Make frontend work with new module loading

* bumping js-slang to version needed by this PR

* Update craco config to ignore warning caused by dynamic imports

---------

Co-authored-by: henz <henz@comp.nus.edu.sg>

Author: leeyi45

craco.config.js

@@ -1,7 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require('webpack');
 
-const cracoConfig = (module.exports = {
+const cracoConfig = {
   webpack: {
     configure: webpackConfig => {
       // avoid the entire process.env being inserted into the service worker
@@ -62,11 +62,16 @@ const cracoConfig = (module.exports = {
         },
       });
 
-      // Ignore warnings for dependencies that do not ship with a source map.
-      // This is because we cannot do anything about our dependencies.
-      webpackConfig.ignoreWarnings = [{
+      webpackConfig.ignoreWarnings = [{ 
+        // Ignore warnings for dependencies that do not ship with a source map.
+        // This is because we cannot do anything about our dependencies.
         module: /node_modules/,
         message: /Failed to parse source map/
+      }, {
+        // Ignore the warnings that occur because js-slang uses dynamic imports
+        // to load Source modules
+        module: /js-slang\/dist\/modules\/loader\/loaders.js/,
+        message: /Critical dependency: the request of a dependency is an expression/
       }];
 
       webpackConfig.plugins = [
@@ -78,7 +83,7 @@ const cracoConfig = (module.exports = {
         // Make the 'buffer' Node.js module available in the browser.
         new webpack.ProvidePlugin({
           Buffer: ['buffer', 'Buffer'],
-        })
+        }),
       ];
 
       // Workaround to suppress warnings caused by ts-morph in js-slang
@@ -153,7 +158,7 @@ const cracoConfig = (module.exports = {
       ['@babel/preset-typescript']
     ]
   }
-});
+}
 
 const ignoreModulePaths = (...paths) => {
   const moduleRoot = replaceSlashes('/node_modules/');
@@ -166,3 +171,5 @@ const ignoreModulePaths = (...paths) => {
 const replaceSlashes = target => {
   return target.replaceAll('/', '[/\\\\]');
 };
+
+module.exports = cracoConfig

package.json

@@ -50,7 +50,7 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
-    "js-slang": "^1.0.60",
+    "js-slang": "^1.0.62",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",

src/commons/utils/CToWasmHelper.ts

@@ -1,7 +1,7 @@
-import { ModulesGlobalConfig as CCompilerConfig } from '@sourceacademy/c-slang/ctowasm/dist';
-import { initModuleContext, loadModuleBundle } from 'js-slang/dist/modules/loader/moduleLoader';
-import { ModuleFunctions } from 'js-slang/dist/modules/moduleTypes';
-import { Context } from 'js-slang/dist/types';
+import type { ModulesGlobalConfig as CCompilerConfig } from '@sourceacademy/c-slang/ctowasm/dist';
+import loadSourceModules from 'js-slang/dist/modules/loader';
+import type { ModuleFunctions } from 'js-slang/dist/modules/moduleTypes';
+import type { Context } from 'js-slang/dist/types';
 
 import { handleConsoleLog } from '../application/actions/InterpreterActions';
 
@@ -37,17 +37,19 @@ export async function loadModulesUsedInCProgram(
   if (!includedModules) {
     return allModuleFunctions;
   }
-  for (const m of includedModules) {
+
+  const modulesToLoad = includedModules.filter(m => {
     const moduleName = m.slice(1, m.length - 1);
+    return modulesAvailableForC.has(moduleName);
+  });
+
+  const loadedModules = await loadSourceModules(new Set(modulesToLoad), context, true);
+  Object.values(loadedModules).forEach(functions => {
+    Object.entries(functions).forEach(([name, func]) => {
+      allModuleFunctions[name] = func;
+    });
+  });
 
-    if (modulesAvailableForC.has(moduleName)) {
-      await initModuleContext(moduleName, context, true);
-      const moduleFuncs = await loadModuleBundle(moduleName, context);
-      for (const moduleFunc of Object.keys(moduleFuncs)) {
-        allModuleFunctions[moduleFunc] = moduleFuncs[moduleFunc];
-      }
-    }
-  }
   const pixNFlixStart = allModuleFunctions['start'];
   allModuleFunctions['start'] = () => {
     specialCReturnObject = pixNFlixStart();

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/loader/moduleLoader';
+import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import Constants, { Links } from 'src/commons/utils/Constants';

yarn.lock

@@ -8556,10 +8556,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.60:
-  version "1.0.60"
-  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.60.tgz#71ffcf6cb094f66e2b97d48f63bbbd1707d6ecbe"
-  integrity sha512-rc972WwXP3O/pPNoXQi5DtEt2lzA4kjeOtmw7fUHGEtxnhqIr3TuA9tieYLyGoQptrvMMdrbQwsG7fqmg+sCzw==
+js-slang@^1.0.62:
+  version "1.0.62"
+  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.62.tgz#516352f5db0738d1bca91b1146e3a7e012355127"
+  integrity sha512-rngDsPDpEsx2VFmJfHxbA9O2AYIR8czwyJgDUC0EeJCBYOVJf8TJLWJEN/85795x5xTrhaZ3qc/QyP84qv53Sw==
   dependencies:
     "@babel/parser" "^7.19.4"
     "@joeychenofficial/alt-ergo-modified" "^2.4.0"
@@ -8575,7 +8575,6 @@ js-slang@^1.0.60:
     lodash "^4.17.21"
     node-getopt "^0.3.2"
     source-map "0.7.3"
-    xmlhttprequest-ts "^1.0.1"
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -13004,7 +13003,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.2:
+tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -14019,13 +14018,6 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xmlhttprequest-ts@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ts/-/xmlhttprequest-ts-1.0.1.tgz#7b3cb4a197aee38cf2d4f9dd6189d1d21f0835b2"
-  integrity sha512-x+7u8NpBcwfBCeGqUpdGrR6+kGUGVjKc4wolyCz7CQqBZQp7VIyaF1xAvJ7ApRzvLeuiC4BbmrA6CWH9NqxK/g==
-  dependencies:
-    tslib "^1.9.2"
-
 "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"