Prebuild worker bundle and import WASM files from same directory as J…

…S wrappers (#57)

package.json

@@ -22,7 +22,8 @@
         "fetch:wasm:create-env": "micromamba create -p $(pwd)/cockle_wasm_env -y cockle_fs grep coreutils lua --platform=emscripten-wasm32 -c https://repo.mamba.pm/emscripten-forge -c https://repo.mamba.pm/conda-forge",
         "fetch:wasm:copy": "mkdir -p src/wasm && cp $(pwd)/cockle_wasm_env/bin/*.js src/wasm/ && cp $(pwd)/cockle_wasm_env/bin/*.wasm src/wasm/",
         "fetch:wasm": "npm run fetch:wasm:create-env && npm run fetch:wasm:copy",
-        "build": "tsc && cp src/wasm/*.wasm lib/wasm/",
+        "build": "tsc && npm run build:worker && cp src/wasm/*.wasm lib/wasm/",
+        "build:worker": "rspack --config worker.rspack.config.js --mode=development",
         "eslint": "npm run eslint:check -- --fix",
         "eslint:check": "eslint . --cache --ext .ts,.tsx",
         "lint": "npm run prettier && npm run eslint",
@@ -36,6 +37,8 @@
         "comlink": "^4.4.1"
     },
     "devDependencies": {
+        "@rspack/cli": "^1.0.3",
+        "@rspack/core": "^1.0.3",
         "@types/json-schema": "^7.0.15",
         "@types/node": "^20.14.12",
         "@types/react": "^18.2.79",
@@ -45,6 +48,8 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "prettier": "^3.3.3",
+        "source-map-loader": "^5.0.0",
+        "ts-loader": "^9.5.1",
         "typescript": "^5.4.5"
     },
     "eslintIgnore": [

src/commands/wasm_command_runner.ts

@@ -12,6 +12,7 @@ export abstract class WasmCommandRunner implements ICommandRunner {
 
   async run(cmdName: string, context: Context): Promise<number> {
     const { args, fileSystem, mountpoint, stdin, stdout, stderr } = context;
+    const { wasmBaseUrl } = this.wasmLoader;
 
     const start = Date.now();
     const wasmModule = this.wasmLoader.getModule(this.moduleName());
@@ -52,6 +53,7 @@ export abstract class WasmCommandRunner implements ICommandRunner {
     const wasm = await wasmModule({
       thisProgram: cmdName,
       arguments: args,
+      locateFile: (path: string) => wasmBaseUrl + path,
       print: (text: string) => stdout.write(`${text}\n`),
       printErr: (text: string) => {
         if (

src/defs.ts

@@ -5,7 +5,7 @@ import { ProxyMarked, Remote } from 'comlink';
 interface IOptionsCommon {
   color?: boolean;
   mountpoint?: string;
-  wasmBaseUrl?: string;
+  wasmBaseUrl: string;
   driveFsBaseUrl?: string;
   // Initial directories and files to create, for testing purposes.
   initialDirectories?: string[];

src/shell_impl.ts

@@ -181,8 +181,11 @@ export class ShellImpl implements IShell {
   }
 
   private async _initFilesystem(): Promise<void> {
+    const { wasmBaseUrl } = this.options;
     const fsModule = this._wasmLoader.getModule('fs');
-    const module = await fsModule({});
+    const module = await fsModule({
+      locateFile: (path: string) => wasmBaseUrl + path
+    });
     const { FS, PATH, ERRNO_CODES, PROXYFS } = module;
 
     const { mountpoint } = this;

src/wasm_loader.ts

@@ -3,15 +3,13 @@
  * Must be run in a WebWorker.
  */
 export class WasmLoader {
-  constructor(wasmBaseUrl?: string) {
-    this._wasmBaseUrl = wasmBaseUrl ?? '';
-  }
+  constructor(readonly wasmBaseUrl: string) {}
 
   public getModule(name: string): any {
     let module = this._cache.get(name);
     if (module === undefined) {
       // Maybe should use @jupyterlab/coreutils.URLExt to combine URL components.
-      const url = this._wasmBaseUrl + name + '.js';
+      const url = this.wasmBaseUrl + name + '.js';
       console.log('Importing JS/WASM from ' + url);
       importScripts(url);
       module = (self as any).Module;
@@ -20,6 +18,5 @@ export class WasmLoader {
     return module;
   }
 
-  private _wasmBaseUrl: string;
   private _cache = new Map<string, any>();
 }

worker.rspack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const rules = [
+  {
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loader: 'source-map-loader'
+  },
+  {
+    test: /\.ts$/,
+    use: 'ts-loader',
+    exclude: /node_modules/,
+  },
+];
+
+const resolve = {
+  fallback: {
+    fs: false,
+    child_process: false,
+    crypto: false
+  },
+  extensions: ['.js', '.ts']
+};
+
+module.exports = [
+  {
+    entry: './src/shell_worker.ts',
+    output: {
+      filename: 'shell_worker.js',
+      path: path.resolve(__dirname, 'lib', 'worker_bundle'),
+      libraryTarget: 'amd'
+    },
+    module: {
+      rules
+    },
+    devtool: 'source-map',
+    resolve
+  }
+];