Merge pull request #71 from pyscript/issue-70

Fix #70 - Use the config base URL to resolve modules

docs/README.md

@@ -266,6 +266,8 @@ In *polyscript*, this is possible by defining one or more `[js_modules.X]` field
 
 ### js_modules config example
 
+**TOML**
+
 ```toml
 [js_modules.main]
 # this modules work best on main
@@ -281,6 +283,8 @@ In *polyscript*, this is possible by defining one or more `[js_modules.X]` field
 "https://cdn.jsdelivr.net/npm/worker-only" = "worker_only"
 ```
 
+**JSON**
+
 ```js
 {
   "js_modules": {
@@ -297,6 +301,8 @@ In *polyscript*, this is possible by defining one or more `[js_modules.X]` field
 }
 ```
 
+**Python**
+
 ```html
 <!-- main case -->
 <script type="pyodide" config="./that.toml">

esm/interpreter/_utils.js

@@ -173,11 +173,14 @@ const RUNNING_IN_WORKER = typeof document === UNDEFINED;
 export const fetchJSModules = ({ main, worker }) => {
     const promises = [];
     if (worker && RUNNING_IN_WORKER) {
-        for (const [source, name] of entries(worker))
+        for (let [source, name] of entries(worker)) {
+            source = absoluteURL(source, base.get(worker));
             promises.push(importJS(source, name));
+        }
     }
     if (main && !RUNNING_IN_WORKER) {
-        for (const [source, name] of entries(main)) {
+        for (let [source, name] of entries(main)) {
+            source = absoluteURL(source, base.get(main));
             if (isCSS(source)) importCSS(source);
             else promises.push(importJS(source, name));
         }

esm/interpreters.js

@@ -38,6 +38,10 @@ export const interpreter = new Proxy(new Map(), {
                     const value = config?.[entry];
                     if (value) base.set(value, baseURL);
                 }
+                for (const entry of ['main', 'worker']) {
+                    const value = config?.js_modules?.[entry];
+                    if (value) base.set(value, baseURL);
+                }
                 return engine(module, config, url);
             });
     },

esm/worker/_template.js

@@ -7,7 +7,8 @@
 import * as JSON from '@ungap/structured-clone/json';
 import coincident from 'coincident/window';
 
-import { assign, create, createFunction, createOverload, createResolved, dispatch, entries, isCSS, js_modules } from '../utils.js';
+import { absoluteURL, assign, create, createFunction, createOverload, createResolved, dispatch, entries, isCSS, js_modules } from '../utils.js';
+import { base } from '../interpreter/_utils.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';
@@ -144,8 +145,9 @@ add('message', ({ data: { options, config: baseURL, code, hooks } }) => {
                 js_modules: new Proxy(globalThis[js_modules], {
                     get(map, name) {
                         if (!map.has(name) && mainModules) {
-                            for (const [source, module] of entries(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);

index.html

@@ -35,6 +35,7 @@
             <li><a href="/test/plugins/index.html">custom tags</a></li>
             <li><a href="/test/async-events/">async events</a></li>
             <li><a href="/test/multi-turtle/">multi turtle</a></li>
+            <li><a href="/test/modules.html">js_modules</a></li>
         </ul>
     </body>
 </html>

package.json

@@ -83,6 +83,6 @@
         "sticky-module": "^0.1.1"
     },
     "worker": {
-        "blob": "sha256-qCANJhVOyA+B1ms4kuhKj6mC9rErzLpD95XDILaiP+0="
+        "blob": "sha256-cvr5TwJH3FX7KekdE0ALuJNaSIhhi7xaK7rHUQ0FNxE="
     }
 }

test/index.js

@@ -167,6 +167,9 @@ const polyscript = require("../cjs");
                     { from: "utils" },
                     { from: "/utils", files: ["c.py"] },
                 ],
+                js_modules: {
+                    main: { "./modules.js": "random_js" }
+                }
             });
             patchFetch(() =>
                 Promise.resolve({

test/modules.html

@@ -22,7 +22,8 @@ <h3>Main</h3>
             # needed to fix pyodide proxies
             from pyodide.ffi import to_js
 
-            from polyscript.js_modules import leaflet as L
+            from polyscript.js_modules import random_js, leaflet as L
+            print(random_js.default)
 
             center = to_js([51.505, -0.09])
             mark = to_js([51.5, -0.09])
@@ -41,7 +42,9 @@ <h3>Main</h3>
         <h3>Worker</h3>
         <div id="worker-map"></div>
         <script type="pyodide" config="./modules.toml" worker>
-            from polyscript.js_modules import leaflet as L
+            from polyscript.js_modules import random_js, leaflet as L
+
+            print(random_js.default)
 
             center = [51.505, -0.09]
             mark = [51.5, -0.09]

test/modules.js

@@ -0,0 +1 @@
+export default Math.random();

test/modules.toml

@@ -1,3 +1,4 @@
 [js_modules.main]
 "https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-src.esm.js" = "leaflet"
 "https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" = "leaflet"
+"./modules.js" = "random_js"