Merge pull request #74 from pyscript/better-js-modules-support

Improved js_modules support

Author: WebReflection

docs/core.js

@@ -99,6 +99,7 @@ export const handleCustomType = (node) => {
                         XWorker,
                     };
 
+                    module.registerJSModule(interpreter, 'polyscript.js_modules', JSModules);
                     module.registerJSModule(interpreter, 'polyscript', {
                         js_modules: JSModules,
                         XWorker,

docs/core.js.map

@@ -29,6 +29,7 @@ export default {
     },
     // Fallback to globally defined module fields (i.e. $xworker)
     registerJSModule(interpreter, name, value) {
+        name = name.replace(/\W+/g, '__');
         const id = `__module_${jsType}_${name}`;
         globalThis[id] = value;
         this.run(interpreter, `require "js";$${name}=JS.global[:${id}]`);

esm/custom.js

@@ -60,6 +60,7 @@ const execute = async (script, source, XWorker, isAsync) => {
             configurable: true,
             get: () => script,
         });
+        module.registerJSModule(interpreter, 'polyscript.js_modules', JSModules);
         module.registerJSModule(interpreter, 'polyscript', {
             js_modules: JSModules,
             XWorker,

esm/interpreter/ruby-wasm-wasi.js

@@ -68,6 +68,8 @@ defineProperty(globalThis, js_modules, { value: jsModules });
 
 export const JSModules = new Proxy(jsModules, {
     get: (map, name) => map.get(name),
+    has: (map, name) => map.has(name),
+    ownKeys: map => [...map.keys()],
 });
 
 export const importJS = (source, name) => import(source).then(esm => {

esm/script-handler.js

@@ -7,8 +7,8 @@
 import * as JSON from '@ungap/structured-clone/json';
 import coincident from 'coincident/window';
 
-import { absoluteURL, assign, create, createFunction, createOverload, createResolved, dispatch, entries, isCSS, js_modules } from '../utils.js';
-import { base } from '../interpreter/_utils.js';
+import { assign, create, createFunction, createOverload, createResolved, dispatch } from '../utils.js';
+import createJSModules from './js_modules.js';
 import { configs, registry } from '../interpreters.js';
 import { getRuntime, getRuntimeID } from '../loader.js';
 import { patch, polluteJS, js as jsHooks, code as codeHooks } from '../hooks.js';
@@ -136,28 +136,14 @@ add('message', ({ data: { options, config: baseURL, code, hooks } }) => {
             const { CustomEvent, document } = window;
             const element = id && document.getElementById(id) || null;
             const notify = kind => dispatch(element, custom || type, kind, true, CustomEvent);
+            const JSModules = createJSModules(window, sync, mainModules);
 
             let target = '';
 
-            // set the `xworker` global reference once
+            details.registerJSModule(interpreter, 'polyscript.js_modules', JSModules);
             details.registerJSModule(interpreter, 'polyscript', {
                 xworker,
-                js_modules: new Proxy(globalThis[js_modules], {
-                    get(map, name) {
-                        if (!map.has(name) && mainModules) {
-                            for (let [source, module] of entries(mainModules)) {
-                                if (module !== name) continue;
-                                source = absoluteURL(source, base.get(mainModules));
-                                if (isCSS(source)) sync.importCSS(source);
-                                else {
-                                    sync.importJS(source, name);
-                                    map.set(name, window[js_modules].get(name));
-                                }
-                            }
-                        }
-                        return map.get(name);
-                    }
-                }),
+                js_modules: JSModules,
                 get target() {
                     if (!target && element) {
                         if (tag === 'SCRIPT') {

esm/utils.js

@@ -0,0 +1,43 @@
+import { absoluteURL, defineProperties, defineProperty, entries, isCSS, js_modules } from '../utils.js';
+import { base } from '../interpreter/_utils.js';
+
+export default (window, sync, mainModules) => {
+    const JSModules = {};
+    const descriptors = {};
+    const known = new Set;
+    const ops = new Map;
+    for (const [name, value] of globalThis[js_modules]) {
+        known.add(name);
+        descriptors[name] = { value };
+    }
+    // define lazy main modules resolution
+    if (mainModules) {
+        for (let [source, module] of entries(mainModules)) {
+            // ignore modules already defined in worker
+            if (known.has(module)) continue;
+            let sources = ops.get(module);
+            if (!sources) ops.set(module, (sources = []));
+            sources.push(source);
+        }
+        for (const [name, sources] of ops) {
+            descriptors[name] = {
+                configurable: true,
+                get() {
+                    let value;
+                    for (let source of sources) {
+                        source = absoluteURL(source, base.get(mainModules));
+                        if (isCSS(source)) sync.importCSS(source);
+                        else {
+                            sync.importJS(source, name);
+                            value = window[js_modules].get(name);
+                        }
+                    }
+                    // override the getter and make it no more configurable
+                    defineProperty(JSModules, name, { configurable: false, get: () => value });
+                    return value;
+                }
+            };
+        }
+    }
+    return defineProperties(JSModules, descriptors);
+};

esm/worker/_template.js

@@ -83,6 +83,6 @@
         "sticky-module": "^0.1.1"
     },
     "worker": {
-        "blob": "sha256-Ff8OBms0P5eTVfjUpcA1RayQJVKinKqjW+A+nsLN/ns="
+        "blob": "sha256-gFg6QJJiDmvnxzhq0SoEdF6pDhzuRcvFEbZVZRxImpU="
     }
 }

esm/worker/js_modules.js

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <title>Polyscript JS Modules</title>
+        <style>#main-map, #worker-map { height: 320px; } h3 { margin-bottom: 0; }</style>
+        <script type="module" src="../core.js"></script>
+    </head>
+    <body>
+        <!--
+            main only:      npx static-handler .
+            main/worker:    npx static-handler --coop --coep .
+
+            Note: --corp breaks the tiles server
+        -->
+
+        <h3>Main</h3>
+        <script type="micropython" config="./modules.toml">
+            from polyscript import js_modules
+
+            print(js_modules.random_js.default)
+        </script>
+
+        <hr>
+
+        <h3>Worker</h3>
+        <script type="micropython" config="./modules.toml" worker>
+            from polyscript.js_modules import random_js
+
+            print(random_js.default)
+        </script>
+
+    </body>
+</html>