Experimenal Pyodide in MicroPython

Author: WebReflection

test/raw/micropython/index.html

@@ -4,22 +4,32 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <script type="module">
-      import { serialize } from 'https://esm.run/@ungap/serialization-registry';
-      import '../converter.js';
-
-      globalThis.test = arg => {
-        console.log(...serialize(arg));
-      };
-
-      const base = 'https://cdn.jsdelivr.net/npm/@micropython/micropython-webassembly-pyscript@latest';
-      const { loadMicroPython } = await import(`${base}/micropython.mjs`);
-      const interpreter = await loadMicroPython({ url: `${base}/micropython.wasm` });
       const { textContent } = document.querySelector('script[type=micropython]');
-      interpreter.runPythonAsync(textContent);
+      const worker = new Worker('./worker.js', { type: 'module' });
+      worker.postMessage(textContent);
+      let i = 0;
+      (function idle() {
+        requestAnimationFrame(idle);
+        document.body.textContent = i++;
+      }());
     </script>
     <script type="micropython" async>
-      import js
-      js.test([{'a': 123}, {'a': 456}])
+      import pyodide
+
+      print("importing pyodide.sys")
+
+      sys = await pyodide.sys
+      print(sys.version)
+
+      print("---")
+
+      sys = await pyodide.sys
+      print(sys.version)
+
+      print("---")
+
+      pandas = await pyodide.pandas
+      print(pandas.__version__)
     </script>
   </head>
 </html>

test/raw/micropython/worker.js

@@ -0,0 +1,41 @@
+const { promise, resolve } = Promise.withResolvers();
+
+addEventListener('message', async ({ data }) => {
+  await promise;
+  await interpreter.runPythonAsync(data);
+});
+
+// Instant MicroPython
+const base = 'https://cdn.jsdelivr.net/npm/@micropython/micropython-webassembly-pyscript@latest';
+const { loadMicroPython } = await import(`${base}/micropython.mjs`);
+const interpreter = await loadMicroPython({ url: `${base}/micropython.wasm` });
+
+// Lazy Pyodide
+let pyodide;
+interpreter.registerJsModule('pyodide', new Proxy(new Map, {
+  async get(locals, prop) {
+    const [ module ] = prop.split(/[@<>=]/);
+    if (!locals.has(module)) {
+      if (!pyodide) {
+        const { loadPyodide } = await import(`https://cdn.jsdelivr.net/pyodide/v0.28.1/full/pyodide.mjs`);
+        pyodide = await loadPyodide({ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.28.1/full' });
+      }
+      try {
+        pyodide.runPython(`import ${module}`, { locals });
+      }
+      catch {
+        let micropip = locals.get('micropip');
+        if (!micropip) {
+          await pyodide.loadPackage('micropip');
+          micropip = pyodide.pyimport('micropip');
+          locals.set('micropip', micropip);
+        }
+        await micropip.install([prop], { keep_going: true });
+        pyodide.runPython(`import ${module}`, { locals });
+      }
+    }
+    return locals.get(module);
+  }
+}));
+
+resolve();