[next] Add mpy as custom type with PyScript magic attached (#1728)

pyscript.core/src/core.css

@@ -1,4 +1,6 @@
 py-script,
-py-config {
+py-config,
+mpy-script,
+mpy-config {
     display: none;
 }

pyscript.core/src/core.js

@@ -15,16 +15,15 @@ import stdlib from "./stdlib.js";
 import { config, plugins, error } from "./config.js";
 import { robustFetch as fetch, getText } from "./fetch.js";
 
-const { assign, defineProperty, entries } = Object;
-
-const TYPE = "py";
+const { assign, defineProperty } = Object;
 
 // allows lazy element features on code evaluation
 let currentElement;
 
-// create a unique identifier when/if needed
-let id = 0;
-const getID = (prefix = TYPE) => `${prefix}-${id++}`;
+const TYPES = new Map([
+    ["py", "pyodide"],
+    ["mpy", "micropython"],
+]);
 
 // generic helper to disambiguate between custom element and script
 const isScript = ({ tagName }) => tagName === "SCRIPT";
@@ -41,35 +40,11 @@ const after = () => {
     delete document.currentScript;
 };
 
-/**
- * Given a generic DOM Element, tries to fetch the 'src' attribute, if present.
- * It either throws an error if the 'src' can't be fetched or it returns a fallback
- * content as source.
- */
-const fetchSource = async (tag, io, asText) => {
-    if (tag.hasAttribute("src")) {
-        try {
-            return await fetch(tag.getAttribute("src")).then(getText);
-        } catch (error) {
-            io.stderr(error);
-        }
-    }
-
-    if (asText) return dedent(tag.textContent);
-
-    console.warn(
-        `Deprecated: use <script type="${TYPE}"> for an always safe content parsing:\n`,
-        tag.innerHTML,
-    );
-
-    return dedent(tag.innerHTML);
-};
-
 // common life-cycle handlers for any node
-const bootstrapNodeAndPlugins = (pyodide, element, callback, hook) => {
+const bootstrapNodeAndPlugins = (wrap, element, callback, hook) => {
     // make it possible to reach the current target node via Python
     callback(element);
-    for (const fn of hooks[hook]) fn(pyodide, element);
+    for (const fn of hooks[hook]) fn(wrap, element);
 };
 
 let shouldRegister = true;
@@ -128,132 +103,180 @@ const workerHooks = {
         [...hooks.codeAfterRunWorkerAsync].map(dedent).join("\n"),
 };
 
-// possible early errors sent by polyscript
-const errors = new Map();
+for (const [TYPE, interpreter] of TYPES) {
+    // create a unique identifier when/if needed
+    let id = 0;
+    const getID = (prefix = TYPE) => `${prefix}-${id++}`;
 
-// define the module as both `<script type="py">` and `<py-script>`
-// but only if the config didn't throw an error
-error ||
-    define(TYPE, {
-        config,
-        env: `${TYPE}-script`,
-        interpreter: "pyodide",
-        onerror(error, element) {
-            errors.set(element, error);
-        },
-        ...workerHooks,
-        onWorkerReady(_, xworker) {
-            assign(xworker.sync, sync);
-        },
-        onBeforeRun(pyodide, element) {
-            currentElement = element;
-            bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRun");
-        },
-        onBeforeRunAsync(pyodide, element) {
-            currentElement = element;
-            bootstrapNodeAndPlugins(
-                pyodide,
-                element,
-                before,
-                "onBeforeRunAsync",
-            );
-        },
-        onAfterRun(pyodide, element) {
-            bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRun");
-        },
-        onAfterRunAsync(pyodide, element) {
-            bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRunAsync");
-        },
-        async onInterpreterReady(pyodide, element) {
-            if (shouldRegister) {
-                shouldRegister = false;
-                registerModule(pyodide);
+    /**
+     * Given a generic DOM Element, tries to fetch the 'src' attribute, if present.
+     * It either throws an error if the 'src' can't be fetched or it returns a fallback
+     * content as source.
+     */
+    const fetchSource = async (tag, io, asText) => {
+        if (tag.hasAttribute("src")) {
+            try {
+                return await fetch(tag.getAttribute("src")).then(getText);
+            } catch (error) {
+                io.stderr(error);
             }
+        }
 
-            // ensure plugins are bootstrapped already
-            if (plugins) await plugins;
+        if (asText) return dedent(tag.textContent);
 
-            // allows plugins to do whatever they want with the element
-            // before regular stuff happens in here
-            for (const callback of hooks.onInterpreterReady)
-                callback(pyodide, element);
+        console.warn(
+            `Deprecated: use <script type="${TYPE}"> for an always safe content parsing:\n`,
+            tag.innerHTML,
+        );
 
-            // now that all possible plugins are configured,
-            // bail out if polyscript encountered an error
-            if (errors.has(element)) {
-                let { message } = errors.get(element);
-                errors.delete(element);
-                const clone = message === INVALID_CONTENT;
-                message = `(${ErrorCode.CONFLICTING_CODE}) ${message} for `;
-                message += element.cloneNode(clone).outerHTML;
-                pyodide.io.stderr(message);
-                return;
-            }
+        return dedent(tag.innerHTML);
+    };
 
-            if (isScript(element)) {
-                const {
-                    attributes: { async: isAsync, target },
-                } = element;
-                const hasTarget = !!target?.value;
-                const show = hasTarget
-                    ? queryTarget(target.value)
-                    : document.createElement("script-py");
+    // define the module as both `<script type="py">` and `<py-script>`
+    // but only if the config didn't throw an error
+    if (!error) {
+        // possible early errors sent by polyscript
+        const errors = new Map();
 
-                if (!hasTarget) {
-                    const { head, body } = document;
-                    if (head.contains(element)) body.append(show);
-                    else element.after(show);
-                }
-                if (!show.id) show.id = getID();
-
-                // allows the code to retrieve the target element via
-                // document.currentScript.target if needed
-                defineProperty(element, "target", { value: show });
-
-                // notify before the code runs
-                dispatch(element, TYPE);
-                pyodide[`run${isAsync ? "Async" : ""}`](
-                    await fetchSource(element, pyodide.io, true),
+        define(TYPE, {
+            config,
+            interpreter,
+            env: `${TYPE}-script`,
+            onerror(error, element) {
+                errors.set(element, error);
+            },
+            ...workerHooks,
+            onWorkerReady(_, xworker) {
+                assign(xworker.sync, sync);
+            },
+            onBeforeRun(wrap, element) {
+                currentElement = element;
+                bootstrapNodeAndPlugins(wrap, element, before, "onBeforeRun");
+            },
+            onBeforeRunAsync(wrap, element) {
+                currentElement = element;
+                bootstrapNodeAndPlugins(
+                    wrap,
+                    element,
+                    before,
+                    "onBeforeRunAsync",
                 );
-            } else {
-                // resolve PyScriptElement to allow connectedCallback
-                element._pyodide.resolve(pyodide);
-            }
-            console.debug("[pyscript/main] PyScript Ready");
-        },
-    });
+            },
+            onAfterRun(wrap, element) {
+                bootstrapNodeAndPlugins(wrap, element, after, "onAfterRun");
+            },
+            onAfterRunAsync(wrap, element) {
+                bootstrapNodeAndPlugins(
+                    wrap,
+                    element,
+                    after,
+                    "onAfterRunAsync",
+                );
+            },
+            async onInterpreterReady(wrap, element) {
+                if (shouldRegister) {
+                    shouldRegister = false;
+                    registerModule(wrap);
+                }
 
-class PyScriptElement extends HTMLElement {
-    constructor() {
-        assign(super(), {
-            _pyodide: Promise.withResolvers(),
-            srcCode: "",
-            executed: false,
+                // ensure plugins are bootstrapped already
+                if (plugins) await plugins;
+
+                // allows plugins to do whatever they want with the element
+                // before regular stuff happens in here
+                for (const callback of hooks.onInterpreterReady)
+                    callback(wrap, element);
+
+                // now that all possible plugins are configured,
+                // bail out if polyscript encountered an error
+                if (errors.has(element)) {
+                    let { message } = errors.get(element);
+                    errors.delete(element);
+                    const clone = message === INVALID_CONTENT;
+                    message = `(${ErrorCode.CONFLICTING_CODE}) ${message} for `;
+                    message += element.cloneNode(clone).outerHTML;
+                    wrap.io.stderr(message);
+                    return;
+                }
+
+                if (isScript(element)) {
+                    const {
+                        attributes: { async: isAsync, target },
+                    } = element;
+                    const hasTarget = !!target?.value;
+                    const show = hasTarget
+                        ? queryTarget(target.value)
+                        : document.createElement("script-py");
+
+                    if (!hasTarget) {
+                        const { head, body } = document;
+                        if (head.contains(element)) body.append(show);
+                        else element.after(show);
+                    }
+                    if (!show.id) show.id = getID();
+
+                    // allows the code to retrieve the target element via
+                    // document.currentScript.target if needed
+                    defineProperty(element, "target", { value: show });
+
+                    // notify before the code runs
+                    dispatch(element, TYPE);
+                    wrap[`run${isAsync ? "Async" : ""}`](
+                        await fetchSource(element, wrap.io, true),
+                    );
+                } else {
+                    // resolve PyScriptElement to allow connectedCallback
+                    element._wrap.resolve(wrap);
+                }
+                console.debug("[pyscript/main] PyScript Ready");
+            },
         });
     }
-    get id() {
-        return super.id || (super.id = getID());
-    }
-    set id(value) {
-        super.id = value;
-    }
-    async connectedCallback() {
-        if (!this.executed) {
-            this.executed = true;
-            const { io, run, runAsync } = await this._pyodide.promise;
-            const runner = this.hasAttribute("async") ? runAsync : run;
-            this.srcCode = await fetchSource(this, io, !this.childElementCount);
-            this.replaceChildren();
-            // notify before the code runs
-            dispatch(this, TYPE);
-            runner(this.srcCode);
-            this.style.display = "block";
+
+    class PyScriptElement extends HTMLElement {
+        constructor() {
+            assign(super(), {
+                _wrap: Promise.withResolvers(),
+                srcCode: "",
+                executed: false,
+            });
+        }
+        get _pyodide() {
+            // TODO: deprecate this hidden attribute already
+            //       currently used by integration tests
+            return this._wrap;
+        }
+        get id() {
+            return super.id || (super.id = getID());
+        }
+        set id(value) {
+            super.id = value;
+        }
+        async connectedCallback() {
+            if (!this.executed) {
+                this.executed = true;
+                const { io, run, runAsync } = await this._wrap.promise;
+                const runner = this.hasAttribute("async") ? runAsync : run;
+                this.srcCode = await fetchSource(
+                    this,
+                    io,
+                    !this.childElementCount,
+                );
+                this.replaceChildren();
+                // notify before the code runs
+                dispatch(this, TYPE);
+                runner(this.srcCode);
+                this.style.display = "block";
+            }
         }
     }
+
+    // define py-script only if the config didn't throw an error
+    if (!error) customElements.define(`${TYPE}-script`, PyScriptElement);
 }
 
-// define py-script only if the config didn't throw an error
-error || customElements.define("py-script", PyScriptElement);
+// TBD: I think manual worker cases are interesting in pyodide only
+//      so for the time being we should be fine with this export.
 
 /**
  * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.

pyscript.core/src/stdlib/pyscript/__init__.py

@@ -31,4 +31,13 @@
 
 from pyscript.magic_js import RUNNING_IN_WORKER, window, document, sync
 from pyscript.display import HTML, display
-from pyscript.event_handling import when
+
+try:
+    from pyscript.event_handling import when
+except:
+    from pyscript.util import NotSupported
+
+    when = NotSupported(
+        "pyscript.when",
+        "pyscript.when currently not available with this interpreter"
+    )

pyscript.core/src/stdlib/pyscript/util.py

@@ -5,12 +5,11 @@ class NotSupported:
     """
 
     def __init__(self, name, error):
-        # we set attributes using self.__dict__ to bypass the __setattr__
-        self.__dict__['name'] = name
-        self.__dict__['error'] = error
+        object.__setattr__(self, "name", name)
+        object.__setattr__(self, "error", error)
 
     def __repr__(self):
-        return f'<NotSupported {self.name} [{self.error}]>'
+        return f"<NotSupported {self.name} [{self.error}]>"
 
     def __getattr__(self, attr):
         raise AttributeError(self.error)

pyscript.core/test/mpy.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyScript Next</title>
+        <script>
+            addEventListener("mpy:ready", console.log);
+        </script>
+        <link rel="stylesheet" href="../dist/core.css">
+        <script type="module" src="../dist/core.js"></script>
+    </head>
+    <body>
+        <script type="mpy">
+            from pyscript import display
+            display("Hello", "M-PyScript Next", append=False)
+        </script>
+        <mpy-script worker>
+            from pyscript import display
+            display("Hello", "M-PyScript Next Worker", append=False)
+        </mpy-script>
+    </body>
+</html>