PyodideRuntime should be one of the runtimes

pyscriptjs/Makefile

@@ -40,6 +40,10 @@ setup:
 	$(CONDA_EXE) env $(shell [ -d $(env) ] && echo update || echo create) -p $(env) --file environment.yml
 	$(conda_run) playwright install
 	$(CONDA_EXE) install -c anaconda pytest -y
+    # context for the removal of assert statement below: https://github.com/pyodide/pyodide/issues/2764
+    # the assert statement fails even if `arrayBuffer.constructor.name == "ArrayBuffer"` is `true`
+    # thus, the statement is removed from the auto-generated `pyodide.asm.js` file
+	sed $(SED_I_ARG) 's/assert(arrayBuffer instanceof ArrayBuffer,"bad input to processPackageData");//g' node_modules/pyodide/pyodide.asm.js
 
 clean:
 	find . -name \*.py[cod] -delete

pyscriptjs/__mocks__/fileMock.js

@@ -0,0 +1,12 @@
+/**
+ * this file mocks the `src/python/pyscript.py` file
+ * since importing of `.py` files isn't usually supported
+ * inside JS/TS files.
+ *
+ * It sets the value of whatever is imported from
+ * `src/python/pyscript.py` to be an empty string i.e. ""
+ *
+ * This is needed since the imported object is further
+ * passed to a function which only accepts a string.
+ */
+module.exports = "";

pyscriptjs/jest.config.js

@@ -2,13 +2,18 @@
 module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'jest-environment-jsdom',
+    extensionsToTreatAsEsm: ['.ts'],
     globals: {
       'ts-jest': {
-          tsconfig: 'tsconfig.json'
+          tsconfig: 'tsconfig.json',
+          useESM: true
       }
     },
     verbose: true,
     testEnvironmentOptions: {
         url: "http://localhost"
+    },
+    moduleNameMapper: {
+      "^[./a-zA-Z0-9$_-]+\\.py$": "<rootDir>/__mocks__/fileMock.js",
     }
   };

pyscriptjs/package.json

@@ -12,8 +12,8 @@
     "lint": "eslint './src/**/*.{js,svelte,html,ts}'",
     "lint:fix": "eslint --fix './src/**/*.{js,svelte,html,ts}'",
     "xprelint": "npm run format",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage",
+    "test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -22,17 +22,19 @@
     "@tsconfig/svelte": "^1.0.0",
     "@types/jest": "^28.1.6",
     "@types/js-yaml": "^4.0.5",
+    "@types/node": "^18.7.11",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "^10.4.7",
+    "cross-env": "^7.0.3",
     "eslint": "^8.14.0",
     "eslint-plugin-svelte3": "^3.4.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "postcss": "^8.4.13",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
-    "pyodide": "^0.20.1-alpha.2",
+    "pyodide": "^0.21.0",
     "rollup": "^2.71.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",

pyscriptjs/rollup.config.js

@@ -17,13 +17,15 @@ export default {
     {
     sourcemap: true,
     format: "iife",
+    inlineDynamicImports: true,
     name: "app",
     file: "build/pyscript.js",
     },
     {
       file: "build/pyscript.min.js",
       format: "iife",
       sourcemap: true,
+      inlineDynamicImports: true,
       plugins: [terser()],
     },
   ],

pyscriptjs/src/components/base.ts

@@ -1,11 +1,13 @@
-import { pyodideLoaded } from '../stores';
+import { runtimeLoaded } from '../stores';
 import { guidGenerator, addClasses, removeClasses } from '../utils';
-import type { PyodideInterface } from '../pyodide';
-// Premise used to connect to the first available pyodide interpreter
-let runtime: PyodideInterface;
+
+import type { Runtime } from '../runtime';
+
+// Global `Runtime` that implements the generic runtimes API
+let runtime: Runtime;
 let Element;
 
-pyodideLoaded.subscribe(value => {
+runtimeLoaded.subscribe(value => {
     runtime = value;
 });
 
@@ -77,7 +79,7 @@ export class BaseEvalElement extends HTMLElement {
         return this.code;
     }
 
-    protected async _register_esm(pyodide: PyodideInterface): Promise<void> {
+    protected async _register_esm(runtime: Runtime): Promise<void> {
         const imports: { [key: string]: unknown } = {};
         const nodes = document.querySelectorAll("script[type='importmap']");
         const importmaps: Array<any> = [];
@@ -107,7 +109,7 @@ export class BaseEvalElement extends HTMLElement {
             }
         }
 
-        pyodide.registerJsModule('esm', imports);
+        runtime.registerJsModule('esm', imports);
     }
 
     async evaluate(): Promise<void> {
@@ -119,20 +121,12 @@ export class BaseEvalElement extends HTMLElement {
         try {
             source = this.source ? await this.getSourceFromFile(this.source)
                                  : this.getSourceFromElement();
-            const is_async = source.includes('asyncio')
 
             this._register_esm(runtime);
-            if (is_async) {
-                <string>await runtime.runPythonAsync(
-                    `output_manager.change(out="${this.outputElement.id}", err="${this.errorElement.id}", append=${this.appendOutput ? 'True' : 'False'})`,
-                );
-                output = <string>await runtime.runPythonAsync(source);
-            } else {
-                output = <string>runtime.runPython(
-                    `output_manager.change(out="${this.outputElement.id}", err="${this.errorElement.id}", append=${this.appendOutput ? 'True' : 'False'})`,
-                );
-                output = <string>runtime.runPython(source);
-            }
+            <string>await runtime.run(
+                `output_manager.change(out="${this.outputElement.id}", err="${this.errorElement.id}", append=${this.appendOutput ? 'True' : 'False'})`,
+            );
+            output = <string>await runtime.run(source);
 
             if (output !== undefined) {
                 if (Element === undefined) {
@@ -145,8 +139,7 @@ export class BaseEvalElement extends HTMLElement {
                 this.outputElement.style.display = 'block';
             }
 
-            is_async ? await runtime.runPythonAsync(`output_manager.revert()`)
-                     : await runtime.runPython(`output_manager.revert()`);
+            await runtime.run(`output_manager.revert()`);
 
             // check if this REPL contains errors, delete them and remove error classes
             const errorElements = document.querySelectorAll(`div[id^='${this.errorElement.id}'][error]`);
@@ -191,10 +184,8 @@ export class BaseEvalElement extends HTMLElement {
     } // end evaluate
 
     async eval(source: string): Promise<void> {
-        const pyodide = runtime;
-
         try {
-            const output = await pyodide.runPythonAsync(source);
+            const output = await runtime.run(source);
             if (output !== undefined) {
                 console.log(output);
             }
@@ -204,8 +195,8 @@ export class BaseEvalElement extends HTMLElement {
     } // end eval
 
     runAfterRuntimeInitialized(callback: () => Promise<void>){
-        pyodideLoaded.subscribe(value => {
-            if ('runPythonAsync' in value) {
+        runtimeLoaded.subscribe(value => {
+            if ('run' in value) {
                 setTimeout(async () => {
                     await callback();
                 }, 100);
@@ -247,9 +238,9 @@ function createWidget(name: string, code: string, klass: string) {
             //     this.proxy.connect();
             //     this.registerWidget();
             // }, 2000);
-            pyodideLoaded.subscribe(value => {
+            runtimeLoaded.subscribe(value => {
                 console.log('RUNTIME READY', value);
-                if ('runPythonAsync' in value) {
+                if ('run' in value) {
                     runtime = value;
                     setTimeout(async () => {
                         await this.eval(this.code);
@@ -263,16 +254,14 @@ function createWidget(name: string, code: string, klass: string) {
         }
 
         registerWidget() {
-            const pyodide = runtime;
             console.log('new widget registered:', this.name);
-            pyodide.globals.set(this.id, this.proxy);
+            runtime.globals.set(this.id, this.proxy);
         }
 
         async eval(source: string): Promise<void> {
-            const pyodide = runtime;
             try {
-                const output = await pyodide.runPythonAsync(source);
-                this.proxyClass = pyodide.globals.get(this.klass);
+                const output = await runtime.run(source);
+                this.proxyClass = runtime.globals.get(this.klass);
                 if (output !== undefined) {
                     console.log(output);
                 }
@@ -365,9 +354,8 @@ export class PyWidget extends HTMLElement {
     }
 
     async eval(source: string): Promise<void> {
-        const pyodide = runtime;
         try {
-            const output = await pyodide.runPythonAsync(source);
+            const output = await runtime.run(source);
             if (output !== undefined) {
                 console.log(output);
             }