Merge pull request #24 from anaconda/mattpap/esm_importmaps

Very rudimentary support for ESM and import maps

pyscriptjs/examples/d3.html

@@ -3,8 +3,6 @@
     <title>d3: JavaScript & PyScript visualizations side-by-side</title>
     <meta charset="utf-8">
 
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-
     <link rel="stylesheet" href="../build/pyscript.css" />
     <script defer src="../build/pyscript.js"></script>
 
@@ -46,7 +44,17 @@
         </div>
       </div>
 
-<script>
+<script type="importmap">
+{
+  "imports": {
+    "d3": "https://cdn.skypack.dev/d3@7"
+  }
+}
+</script>
+
+<script type="module">
+import * as d3 from "d3"
+
 const fruits = [
   {name: "🍊", count: 21},
   {name: "🍇", count: 13},
@@ -55,7 +63,7 @@ const fruits = [
   {name: "🍐", count: 3},
   {name: "🍋", count: 2},
   {name: "🍎", count: 1},
-  {name: "🍉", count: 1}
+  {name: "🍉", count: 1},
 ]
 
 const fn = (d) => d.count
@@ -101,7 +109,7 @@ for (const d of data) {
 
 <py-script>
 from pyodide import create_proxy, to_js
-from js import d3
+from esm import d3
 
 fruits = [
   dict(name="🍊", count=21),

pyscriptjs/src/components/pyscript.ts

@@ -45,6 +45,11 @@ function htmlDecode(input) {
   return doc.documentElement.textContent;
 }
 
+// TODO: use type declaractions
+type PyodideInterface = {
+  registerJsModule(name: string, module: object): void
+}
+
 class Script {
   source: string;
   state: string;
@@ -241,17 +246,50 @@ export class PyScript extends HTMLElement {
       // pkg.do_something();
     }
 
-    async evaluate() {
+    protected async _register_esm(pyodide: PyodideInterface): Promise<void> {
+      const imports: {[key: string]: unknown} = {}
 
+      for (const node of document.querySelectorAll("script[type='importmap']")) {
+        const importmap = (() => {
+          try {
+            return JSON.parse(node.textContent)
+          } catch {
+            return null
+          }
+        })()
+
+        if (importmap?.imports == null)
+          continue
+
+        for (const [name, url] of Object.entries(importmap.imports)) {
+          if (typeof name != "string" || typeof url != "string")
+            continue
+
+          try {
+            // XXX: pyodide doesn't like Module(), failing with
+            // "can't read 'name' of undefined" at import time
+            imports[name] = {...await import(url)}
+          } catch {
+            console.error(`failed to fetch '${url}' for '${name}'`)
+          }
+        }
+      }
+
+      pyodide.registerJsModule("esm", imports)
+    }
+
+    async evaluate(): Promise<void> {
         console.log('evaluate');
+
         if (this.source){
           this.loadFromFile(this.source)
         }else{
-          let pyodide = await pyodideReadyPromise;
+          const pyodide = await pyodideReadyPromise;
+          await this._register_esm(pyodide)
           // debugger
           try {
             // @ts-ignore
-            let source = htmlDecode(this.editor.state.doc.toString());
+            const source = htmlDecode(this.editor.state.doc.toString());
             let output;
             if (source.includes("asyncio")){
               output = await pyodide.runPythonAsync(source);