@pyscript/core 0.4.33 → 0.4.35

package/src/plugins/py-terminal.js

@@ -1,11 +1,14 @@
 // PyScript py-terminal plugin
-import { TYPES, hooks } from "../core.js";
+import { TYPES } from "../core.js";
 import { notify } from "./error.js";
-import { customObserver, defineProperties } from "polyscript/exports";
+import { customObserver } from "polyscript/exports";
 
 // will contain all valid selectors
 const SELECTORS = [];
 
+// avoid processing same elements twice
+const processed = new WeakSet();
+
 // show the error on main and
 // stops the module from keep executing
 const notifyAndThrow = (message) => {
@@ -15,265 +18,10 @@ const notifyAndThrow = (message) => {
 
 const onceOnMain = ({ attributes: { worker } }) => !worker;
 
-const bootstrapped = new WeakSet();
-
 let addStyle = true;
 
-// this callback will be serialized as string and it never needs
-// to be invoked multiple times. Each xworker here is bootstrapped
-// only once thanks to the `sync.is_pyterminal()` check.
-const workerReady = ({ interpreter, io, run, type }, { sync }) => {
-    if (!sync.is_pyterminal()) return;
-
-    // in workers it's always safe to grab the polyscript currentScript
-    // the ugly `_` dance is due MicroPython not able to import via:
-    // `from polyscript.currentScript import terminal as __terminal__`
-    run(
-        "from polyscript import currentScript as _; __terminal__ = _.terminal; del _",
-    );
-
-    let data = "";
-    const { pyterminal_read, pyterminal_write } = sync;
-    const decoder = new TextDecoder();
-    const generic = {
-        isatty: false,
-        write(buffer) {
-            data = decoder.decode(buffer);
-            pyterminal_write(data);
-            return buffer.length;
-        },
-    };
-
-    // This part works already in both Pyodide and MicroPython
-    io.stderr = (error) => {
-        pyterminal_write(String(error.message || error));
-    };
-
-    // MicroPython has no code or code.interact()
-    // This part patches it in a way that simulates
-    // the code.interact() module in Pyodide.
-    if (type === "mpy") {
-        // monkey patch global input otherwise broken in MicroPython
-        interpreter.registerJsModule("_pyscript_input", {
-            input: pyterminal_read,
-        });
-        run("from _pyscript_input import input");
-
-        // this is needed to avoid truncated unicode in MicroPython
-        // the reason is that `linebuffer` false just send one byte
-        // per time and readline here doesn't like it much.
-        // MicroPython also has issues with code-points and
-        // replProcessChar(byte) but that function accepts only
-        // one byte per time so ... we have an issue!
-        // @see https://github.com/pyscript/pyscript/pull/2018
-        // @see https://github.com/WebReflection/buffer-points
-        const bufferPoints = (stdio) => {
-            const bytes = [];
-            let needed = 0;
-            return (buffer) => {
-                let written = 0;
-                for (const byte of buffer) {
-                    bytes.push(byte);
-                    // @see https://encoding.spec.whatwg.org/#utf-8-bytes-needed
-                    if (needed) needed--;
-                    else if (0xc2 <= byte && byte <= 0xdf) needed = 1;
-                    else if (0xe0 <= byte && byte <= 0xef) needed = 2;
-                    else if (0xf0 <= byte && byte <= 0xf4) needed = 3;
-                    if (!needed) {
-                        written += bytes.length;
-                        stdio(new Uint8Array(bytes.splice(0)));
-                    }
-                }
-                return written;
-            };
-        };
-
-        io.stdout = bufferPoints(generic.write);
-
-        // tiny shim of the code module with only interact
-        // to bootstrap a REPL like environment
-        interpreter.registerJsModule("code", {
-            interact() {
-                let input = "";
-                let length = 1;
-
-                const encoder = new TextEncoder();
-                const acc = [];
-                const handlePoints = bufferPoints((buffer) => {
-                    acc.push(...buffer);
-                    pyterminal_write(decoder.decode(buffer));
-                });
-
-                // avoid duplicating the output produced by the input
-                io.stdout = (buffer) =>
-                    length++ > input.length ? handlePoints(buffer) : 0;
-
-                interpreter.replInit();
-
-                // loop forever waiting for user inputs
-                (function repl() {
-                    const out = decoder.decode(new Uint8Array(acc.splice(0)));
-                    // print in current line only the last line produced by the REPL
-                    const data = `${pyterminal_read(out.split("\n").at(-1))}\r`;
-                    length = 0;
-                    input = encoder.encode(data);
-                    for (const c of input) interpreter.replProcessChar(c);
-                    repl();
-                })();
-            },
-        });
-    } else {
-        interpreter.setStdout(generic);
-        interpreter.setStderr(generic);
-        interpreter.setStdin({
-            isatty: false,
-            stdin: () => pyterminal_read(data),
-        });
-    }
-};
-
-const pyTerminal = async (element) => {
-    // lazy load these only when a valid terminal is found
-    const [{ Terminal }, { Readline }, { FitAddon }, { WebLinksAddon }] =
-        await Promise.all([
-            import(/* webpackIgnore: true */ "../3rd-party/xterm.js"),
-            import(/* webpackIgnore: true */ "../3rd-party/xterm-readline.js"),
-            import(/* webpackIgnore: true */ "../3rd-party/xterm_addon-fit.js"),
-            import(
-                /* webpackIgnore: true */ "../3rd-party/xterm_addon-web-links.js"
-            ),
-        ]);
-
-    const readline = new Readline();
-
-    // common main thread initialization for both worker
-    // or main case, bootstrapping the terminal on its target
-    const init = (options) => {
-        let target = element;
-        const selector = element.getAttribute("target");
-        if (selector) {
-            target =
-                document.getElementById(selector) ||
-                document.querySelector(selector);
-            if (!target) throw new Error(`Unknown target ${selector}`);
-        } else {
-            target = document.createElement("py-terminal");
-            target.style.display = "block";
-            element.after(target);
-        }
-        const terminal = new Terminal({
-            theme: {
-                background: "#191A19",
-                foreground: "#F5F2E7",
-            },
-            ...options,
-        });
-        const fitAddon = new FitAddon();
-        terminal.loadAddon(fitAddon);
-        terminal.loadAddon(readline);
-        terminal.loadAddon(new WebLinksAddon());
-        terminal.open(target);
-        fitAddon.fit();
-        terminal.focus();
-        defineProperties(element, {
-            terminal: { value: terminal },
-            process: {
-                value: async (code) => {
-                    // this loop is the only way I could find to actually simulate
-                    // the user input char after char in a way that works in both
-                    // MicroPython and Pyodide
-                    for (const line of code.split(/(?:\r|\n|\r\n)/)) {
-                        terminal.paste(`${line}\n`);
-                        do {
-                            await new Promise((resolve) =>
-                                setTimeout(resolve, 0),
-                            );
-                        } while (!readline.activeRead?.resolve);
-                        readline.activeRead.resolve(line);
-                    }
-                },
-            },
-        });
-        return terminal;
-    };
-
-    // branch logic for the worker
-    if (element.hasAttribute("worker")) {
-        // add a hook on the main thread to setup all sync helpers
-        // also bootstrapping the XTerm target on main *BUT* ...
-        hooks.main.onWorker.add(function worker(_, xworker) {
-            // ... as multiple workers will add multiple callbacks
-            // be sure no xworker is ever initialized twice!
-            if (bootstrapped.has(xworker)) return;
-            bootstrapped.add(xworker);
-
-            // still cleanup this callback for future scripts/workers
-            hooks.main.onWorker.delete(worker);
-
-            init({
-                disableStdin: false,
-                cursorBlink: true,
-                cursorStyle: "block",
-            });
-
-            xworker.sync.is_pyterminal = () => true;
-            xworker.sync.pyterminal_read = readline.read.bind(readline);
-            xworker.sync.pyterminal_write = readline.write.bind(readline);
-        });
-
-        // setup remote thread JS/Python code for whenever the
-        // worker is ready to become a terminal
-        hooks.worker.onReady.add(workerReady);
-    } else {
-        // in the main case, just bootstrap XTerm without
-        // allowing any input as that's not possible / awkward
-        hooks.main.onReady.add(function main({ interpreter, io, run, type }) {
-            console.warn("py-terminal is read only on main thread");
-            hooks.main.onReady.delete(main);
-
-            // on main, it's easy to trash and clean the current terminal
-            globalThis.__py_terminal__ = init({
-                disableStdin: true,
-                cursorBlink: false,
-                cursorStyle: "underline",
-            });
-            run("from js import __py_terminal__ as __terminal__");
-            delete globalThis.__py_terminal__;
-
-            io.stderr = (error) => {
-                readline.write(String(error.message || error));
-            };
-
-            if (type === "mpy") {
-                interpreter.setStdin = Object; // as no-op
-                interpreter.setStderr = Object; // as no-op
-                interpreter.setStdout = ({ write }) => {
-                    io.stdout = write;
-                };
-            }
-
-            let data = "";
-            const decoder = new TextDecoder();
-            const generic = {
-                isatty: false,
-                write(buffer) {
-                    data = decoder.decode(buffer);
-                    readline.write(data);
-                    return buffer.length;
-                },
-            };
-            interpreter.setStdout(generic);
-            interpreter.setStderr(generic);
-            interpreter.setStdin({
-                isatty: false,
-                stdin: () => readline.read(data),
-            });
-        });
-    }
-};
-
-for (const key of TYPES.keys()) {
-    const selector = `script[type="${key}"][terminal],${key}-script[terminal]`;
+for (const type of TYPES.keys()) {
+    const selector = `script[type="${type}"][terminal],${type}-script[terminal]`;
     SELECTORS.push(selector);
     customObserver.set(selector, async (element) => {
         // we currently support only one terminal on main as in "classic"
@@ -292,6 +40,21 @@ for (const key of TYPES.keys()) {
             );
         }
 
-        await pyTerminal(element);
+        if (processed.has(element)) return;
+        processed.add(element);
+
+        const bootstrap = (module) => module.default(element);
+
+        // we can't be smart with template literals for the dynamic import
+        // or bundlers are incapable of producing multiple files around
+        if (type === "mpy") {
+            await import(/* webpackIgnore: true */ "./py-terminal/mpy.js").then(
+                bootstrap,
+            );
+        } else {
+            await import(/* webpackIgnore: true */ "./py-terminal/py.js").then(
+                bootstrap,
+            );
+        }
     });
 }

package/src/stdlib/pyscript.js

@@ -13,6 +13,6 @@ export default {
   "pyweb": {
     "__init__.py": "from .pydom import dom as pydom\n",
     "media.py": "from pyodide.ffi import to_js\nfrom pyscript import window\n\n\nclass Device:\n    \"\"\"Device represents a media input or output device, such as a microphone,\n    camera, or headset.\n    \"\"\"\n\n    def __init__(self, device):\n        self._js = device\n\n    @property\n    def id(self):\n        return self._js.deviceId\n\n    @property\n    def group(self):\n        return self._js.groupId\n\n    @property\n    def kind(self):\n        return self._js.kind\n\n    @property\n    def label(self):\n        return self._js.label\n\n    def __getitem__(self, key):\n        return getattr(self, key)\n\n    @classmethod\n    async def load(cls, audio=False, video=True):\n        \"\"\"Load the device stream.\"\"\"\n        options = window.Object.new()\n        options.audio = audio\n        if isinstance(video, bool):\n            options.video = video\n        else:\n            # TODO: Think this can be simplified but need to check it on the pyodide side\n\n            # TODO: this is pyodide specific. shouldn't be!\n            options.video = window.Object.new()\n            for k in video:\n                setattr(\n                    options.video,\n                    k,\n                    to_js(video[k], dict_converter=window.Object.fromEntries),\n                )\n\n        stream = await window.navigator.mediaDevices.getUserMedia(options)\n        return stream\n\n    async def get_stream(self):\n        key = self.kind.replace(\"input\", \"\").replace(\"output\", \"\")\n        options = {key: {\"deviceId\": {\"exact\": self.id}}}\n\n        return await self.load(**options)\n\n\nasync def list_devices() -> list[dict]:\n    \"\"\"\n    Return the list of the currently available media input and output devices,\n    such as microphones, cameras, headsets, and so forth.\n\n    Output:\n\n        list(dict) - list of dictionaries representing the available media devices.\n            Each dictionary has the following keys:\n            * deviceId: a string that is an identifier for the represented device\n                that is persisted across sessions. It is un-guessable by other\n                applications and unique to the origin of the calling application.\n                It is reset when the user clears cookies (for Private Browsing, a\n                different identifier is used that is not persisted across sessions).\n\n            * groupId: a string that is a group identifier. Two devices have the same\n                group identifier if they belong to the same physical device — for\n                example a monitor with both a built-in camera and a microphone.\n\n            * kind: an enumerated value that is either \"videoinput\", \"audioinput\"\n                or \"audiooutput\".\n\n            * label: a string describing this device (for example \"External USB\n                Webcam\").\n\n    Note: the returned list will omit any devices that are blocked by the document\n    Permission Policy: microphone, camera, speaker-selection (for output devices),\n    and so on. Access to particular non-default devices is also gated by the\n    Permissions API, and the list will omit devices for which the user has not\n    granted explicit permission.\n    \"\"\"\n    # https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\n    return [\n        Device(obj) for obj in await window.navigator.mediaDevices.enumerateDevices()\n    ]\n",
-    "pydom.py": "try:\n    from typing import Any\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\ntry:\n    from functools import cached_property\nexcept ImportError:\n    # TODO: same comment about micropython as above\n    cached_property = property\n\ntry:\n    from pyodide.ffi import JsProxy\nexcept ImportError:\n    # TODO: same comment about micropython as above\n    def JsProxy(obj):\n        return obj\n\n\nfrom pyscript import display, document, window\n\nalert = window.alert\n\n\nclass BaseElement:\n    def __init__(self, js_element):\n        self._js = js_element\n        self._parent = None\n        self.style = StyleProxy(self)\n        self._proxies = {}\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, BaseElement) and obj._js == self._js\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._js.parentElement:\n            self._parent = self.__class__(self._js.parentElement)\n\n        return self._parent\n\n    @property\n    def __class(self):\n        return self.__class__ if self.__class__ != PyDom else Element\n\n    def create(self, type_, is_child=True, classes=None, html=None, label=None):\n        js_el = document.createElement(type_)\n        element = self.__class(js_el)\n\n        if classes:\n            for class_ in classes:\n                element.add_class(class_)\n\n        if html is not None:\n            element.html = html\n\n        if label is not None:\n            element.label = label\n\n        if is_child:\n            self.append(element)\n\n        return element\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        elements = self._js.querySelectorAll(selector)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\nclass Element(BaseElement):\n    @property\n    def children(self):\n        return [self.__class__(el) for el in self._js.children]\n\n    def append(self, child):\n        # TODO: this is Pyodide specific for now!!!!!!\n        # if we get passed a JSProxy Element directly we just map it to the\n        # higher level Python element\n        if isinstance(child, JsProxy):\n            return self.append(Element(child))\n\n        elif isinstance(child, Element):\n            self._js.appendChild(child._js)\n\n            return child\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self.append(el)\n\n    # -------- Pythonic Interface to Element -------- #\n    @property\n    def html(self):\n        return self._js.innerHTML\n\n    @html.setter\n    def html(self, value):\n        self._js.innerHTML = value\n\n    @property\n    def text(self):\n        return self._js.textContent\n\n    @text.setter\n    def text(self, value):\n        self._js.textContent = value\n\n    @property\n    def content(self):\n        # TODO: This breaks with with standard template elements. Define how to best\n        #       handle this specifica use case. Just not support for now?\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return None\n        return self._js.innerHTML\n\n    @content.setter\n    def content(self, value):\n        # TODO: (same comment as above)\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return\n\n        display(value, target=self.id)\n\n    @property\n    def id(self):\n        return self._js.id\n\n    @id.setter\n    def id(self, value):\n        self._js.id = value\n\n    @property\n    def options(self):\n        if \"options\" in self._proxies:\n            return self._proxies[\"options\"]\n\n        if not self._js.tagName.lower() in {\"select\", \"datalist\", \"optgroup\"}:\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no options attribute.\"\n            )\n        self._proxies[\"options\"] = OptionsProxy(self)\n        return self._proxies[\"options\"]\n\n    @property\n    def value(self):\n        return self._js.value\n\n    @value.setter\n    def value(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"value\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.value = value\n\n    @property\n    def selected(self):\n        return self._js.selected\n\n    @selected.setter\n    def selected(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"selected\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.selected = value\n\n    def clone(self, new_id=None):\n        clone = Element(self._js.cloneNode(True))\n        clone.id = new_id\n\n        return clone\n\n    def remove_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.remove(*classname)\n        else:\n            classList.remove(classname)\n        return self\n\n    def add_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.add(*classname)\n        else:\n            self._js.classList.add(classname)\n        return self\n\n    @property\n    def classes(self):\n        classes = self._js.classList.values()\n        return [x for x in classes]\n\n    def show_me(self):\n        self._js.scrollIntoView()\n\n    def snap(\n        self,\n        to: BaseElement | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Captures a snapshot of a video element. (Only available for video elements)\n\n        Inputs:\n\n            * to: element where to save the snapshot of the video frame to\n            * width: width of the image\n            * height: height of the image\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        if self._js.tagName != \"VIDEO\":\n            raise AttributeError(\"Snap method is only available for video Elements\")\n\n        if to is None:\n            canvas = self.create(\"canvas\")\n            if width is None:\n                width = self._js.width\n            if height is None:\n                height = self._js.height\n            canvas._js.width = width\n            canvas._js.height = height\n\n        elif isistance(to, Element):\n            if to._js.tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a canvas.\")\n            canvas = to\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            canvas = Element(to)\n        elif isinstance(to, str):\n            canvas = pydom[to][0]\n            if canvas._js.tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a be canvas.\")\n\n        canvas.draw(self, width, height)\n\n        return canvas\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element (only available for canvas elements) with the filename\n        provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        if self._js.tagName != \"CANVAS\":\n            raise AttributeError(\n                \"The download method is only available for canvas Elements\"\n            )\n\n        link = self.create(\"a\")\n        link._js.download = filename\n        link._js.href = self._js.toDataURL()\n        link._js.click()\n\n    def draw(self, what, width, height):\n        \"\"\"Draw `what` on the current element  (only available for canvas elements).\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The specification permits any canvas\n                image source, specifically, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a VideoFrame.\n        \"\"\"\n        if self._js.tagName != \"CANVAS\":\n            raise AttributeError(\n                \"The draw method is only available for canvas Elements\"\n            )\n\n        if isinstance(what, Element):\n            what = what._js\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        self._js.getContext(\"2d\").drawImage(what, 0, 0, width, height)\n\n\nclass OptionsProxy:\n    \"\"\"This class represents the options of a select element. It\n    allows to access to add and remove options by using the `add` and `remove` methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        if self._element._js.tagName.lower() != \"select\":\n            raise AttributeError(\n                f\"Element {self._element._js.tagName} has no options attribute.\"\n            )\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n        # create the option element and set the attributes\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._js\n\n        self._element._js.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._js.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [Element(opt) for opt in self._element._js.options]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._js.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass StyleProxy:  # (dict):\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    @cached_property\n    def _style(self):\n        return self._element._js.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kws):\n        for k, v in kws.items():\n            self._element._js.style.setProperty(k, v)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following prperties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._js.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._js.style.visibility = value\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self.style = StyleCollection(self)\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a selector\n        # TODO: Write tests!\n        elements = self._element.querySelectorAll(key)\n        return ElementCollection([Element(el) for el in elements])\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n    @property\n    def html(self):\n        return self._get_attribute(\"html\")\n\n    @html.setter\n    def html(self, value):\n        self._set_attribute(\"html\", value)\n\n    @property\n    def value(self):\n        return self._get_attribute(\"value\")\n\n    @value.setter\n    def value(self, value):\n        self._set_attribute(\"value\", value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n\nclass DomScope:\n    def __getattr__(self, __name: str):\n        element = document[f\"#{__name}\"]\n        if element:\n            return element[0]\n\n\nclass PyDom(BaseElement):\n    # Add objects we want to expose to the DOM namespace since this class instance is being\n    # remapped as \"the module\" itself\n    BaseElement = BaseElement\n    Element = Element\n    ElementCollection = ElementCollection\n\n    def __init__(self):\n        # PyDom is a special case of BaseElement where we don't want to create a new JS element\n        # and it really doesn't have a need for styleproxy or parent to to call to __init__\n        # (which actually fails in MP for some reason)\n        self._js = document\n        self._parent = None\n        self._proxies = {}\n        self.ids = DomScope()\n        self.body = Element(document.body)\n        self.head = Element(document.head)\n\n    def create(self, type_, classes=None, html=None):\n        return super().create(type_, is_child=False, classes=classes, html=html)\n\n    def __getitem__(self, key):\n        elements = self._js.querySelectorAll(key)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\ndom = PyDom()\n"
+    "pydom.py": "try:\n    from typing import Any\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\ntry:\n    from functools import cached_property\nexcept ImportError:\n    # TODO: same comment about micropython as above\n    cached_property = property\n\ntry:\n    from pyodide.ffi import JsProxy\nexcept ImportError:\n    # TODO: same comment about micropython as above\n    def JsProxy(obj):\n        return obj\n\n\nfrom pyscript import display, document, window\n\nalert = window.alert\n\n\nclass BaseElement:\n    def __init__(self, js_element):\n        self._js = js_element\n        self._parent = None\n        self.style = StyleProxy(self)\n        self._proxies = {}\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, BaseElement) and obj._js == self._js\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._js.parentElement:\n            self._parent = self.__class__(self._js.parentElement)\n\n        return self._parent\n\n    @property\n    def __class(self):\n        return self.__class__ if self.__class__ != PyDom else Element\n\n    def create(self, type_, is_child=True, classes=None, html=None, label=None):\n        js_el = document.createElement(type_)\n        element = self.__class(js_el)\n\n        if classes:\n            for class_ in classes:\n                element.add_class(class_)\n\n        if html is not None:\n            element.html = html\n\n        if label is not None:\n            element.label = label\n\n        if is_child:\n            self.append(element)\n\n        return element\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        elements = self._js.querySelectorAll(selector)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\nclass Element(BaseElement):\n    @property\n    def children(self):\n        return [self.__class__(el) for el in self._js.children]\n\n    def append(self, child):\n        # TODO: this is Pyodide specific for now!!!!!!\n        # if we get passed a JSProxy Element directly we just map it to the\n        # higher level Python element\n        if isinstance(child, JsProxy):\n            return self.append(Element(child))\n\n        elif isinstance(child, Element):\n            self._js.appendChild(child._js)\n\n            return child\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self.append(el)\n\n    # -------- Pythonic Interface to Element -------- #\n    @property\n    def html(self):\n        return self._js.innerHTML\n\n    @html.setter\n    def html(self, value):\n        self._js.innerHTML = value\n\n    @property\n    def text(self):\n        return self._js.textContent\n\n    @text.setter\n    def text(self, value):\n        self._js.textContent = value\n\n    @property\n    def content(self):\n        # TODO: This breaks with with standard template elements. Define how to best\n        #       handle this specifica use case. Just not support for now?\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return None\n        return self._js.innerHTML\n\n    @content.setter\n    def content(self, value):\n        # TODO: (same comment as above)\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return\n\n        display(value, target=self.id)\n\n    @property\n    def id(self):\n        return self._js.id\n\n    @id.setter\n    def id(self, value):\n        self._js.id = value\n\n    @property\n    def options(self):\n        if \"options\" in self._proxies:\n            return self._proxies[\"options\"]\n\n        if not self._js.tagName.lower() in {\"select\", \"datalist\", \"optgroup\"}:\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no options attribute.\"\n            )\n        self._proxies[\"options\"] = OptionsProxy(self)\n        return self._proxies[\"options\"]\n\n    @property\n    def value(self):\n        return self._js.value\n\n    @value.setter\n    def value(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"value\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.value = value\n\n    @property\n    def selected(self):\n        return self._js.selected\n\n    @selected.setter\n    def selected(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"selected\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.selected = value\n\n    def clone(self, new_id=None):\n        clone = Element(self._js.cloneNode(True))\n        clone.id = new_id\n\n        return clone\n\n    def remove_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.remove(*classname)\n        else:\n            classList.remove(classname)\n        return self\n\n    def add_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.add(*classname)\n        else:\n            self._js.classList.add(classname)\n        return self\n\n    @property\n    def classes(self):\n        classes = self._js.classList.values()\n        return [x for x in classes]\n\n    def show_me(self):\n        self._js.scrollIntoView()\n\n    def snap(\n        self,\n        to: BaseElement | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Captures a snapshot of a video element. (Only available for video elements)\n\n        Inputs:\n\n            * to: element where to save the snapshot of the video frame to\n            * width: width of the image\n            * height: height of the image\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        if self._js.tagName != \"VIDEO\":\n            raise AttributeError(\"Snap method is only available for video Elements\")\n\n        if to is None:\n            canvas = self.create(\"canvas\")\n            if width is None:\n                width = self._js.width\n            if height is None:\n                height = self._js.height\n            canvas._js.width = width\n            canvas._js.height = height\n\n        elif isinstance(to, Element):\n            if to._js.tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a canvas.\")\n            canvas = to\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            canvas = Element(to)\n        elif isinstance(to, str):\n            canvas = pydom[to][0]\n            if canvas._js.tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a be canvas.\")\n\n        canvas.draw(self, width, height)\n\n        return canvas\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element (only available for canvas elements) with the filename\n        provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        if self._js.tagName != \"CANVAS\":\n            raise AttributeError(\n                \"The download method is only available for canvas Elements\"\n            )\n\n        link = self.create(\"a\")\n        link._js.download = filename\n        link._js.href = self._js.toDataURL()\n        link._js.click()\n\n    def draw(self, what, width, height):\n        \"\"\"Draw `what` on the current element  (only available for canvas elements).\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The specification permits any canvas\n                image source, specifically, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a VideoFrame.\n        \"\"\"\n        if self._js.tagName != \"CANVAS\":\n            raise AttributeError(\n                \"The draw method is only available for canvas Elements\"\n            )\n\n        if isinstance(what, Element):\n            what = what._js\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        self._js.getContext(\"2d\").drawImage(what, 0, 0, width, height)\n\n\nclass OptionsProxy:\n    \"\"\"This class represents the options of a select element. It\n    allows to access to add and remove options by using the `add` and `remove` methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        if self._element._js.tagName.lower() != \"select\":\n            raise AttributeError(\n                f\"Element {self._element._js.tagName} has no options attribute.\"\n            )\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n        # create the option element and set the attributes\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._js\n\n        self._element._js.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._js.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [Element(opt) for opt in self._element._js.options]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._js.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass StyleProxy:  # (dict):\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    @cached_property\n    def _style(self):\n        return self._element._js.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kws):\n        for k, v in kws.items():\n            self._element._js.style.setProperty(k, v)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following prperties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._js.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._js.style.visibility = value\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self.style = StyleCollection(self)\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a selector\n        # TODO: Write tests!\n        elements = self._element.querySelectorAll(key)\n        return ElementCollection([Element(el) for el in elements])\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n    @property\n    def html(self):\n        return self._get_attribute(\"html\")\n\n    @html.setter\n    def html(self, value):\n        self._set_attribute(\"html\", value)\n\n    @property\n    def value(self):\n        return self._get_attribute(\"value\")\n\n    @value.setter\n    def value(self, value):\n        self._set_attribute(\"value\", value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n\nclass DomScope:\n    def __getattr__(self, __name: str):\n        element = document[f\"#{__name}\"]\n        if element:\n            return element[0]\n\n\nclass PyDom(BaseElement):\n    # Add objects we want to expose to the DOM namespace since this class instance is being\n    # remapped as \"the module\" itself\n    BaseElement = BaseElement\n    Element = Element\n    ElementCollection = ElementCollection\n\n    def __init__(self):\n        # PyDom is a special case of BaseElement where we don't want to create a new JS element\n        # and it really doesn't have a need for styleproxy or parent to to call to __init__\n        # (which actually fails in MP for some reason)\n        self._js = document\n        self._parent = None\n        self._proxies = {}\n        self.ids = DomScope()\n        self.body = Element(document.body)\n        self.head = Element(document.head)\n\n    def create(self, type_, classes=None, html=None):\n        return super().create(type_, is_child=False, classes=classes, html=html)\n\n    def __getitem__(self, key):\n        elements = self._js.querySelectorAll(key)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\ndom = PyDom()\n"
   }
 };

package/src/stdlib/pyweb/pydom.py

@@ -267,7 +267,7 @@ class Element(BaseElement):
             canvas._js.width = width
             canvas._js.height = height
 
-        elif isistance(to, Element):
+        elif isinstance(to, Element):
             if to._js.tagName != "CANVAS":
                 raise TypeError("Element to snap to must a canvas.")
             canvas = to

package/types/core.d.ts

@@ -1,6 +1,7 @@
 export function offline_interpreter(config: any): string;
 import { stdlib } from "./stdlib.js";
 import { optional } from "./stdlib.js";
+import { inputFailure } from "./hooks.js";
 import TYPES from "./types.js";
 /**
  * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.
@@ -53,4 +54,4 @@ declare const exportedHooks: {
 };
 declare const exportedConfig: {};
 declare const exportedWhenDefined: (type: string) => Promise<any>;
-export { stdlib, optional, TYPES, exportedPyWorker as PyWorker, exportedMPWorker as MPWorker, exportedHooks as hooks, exportedConfig as config, exportedWhenDefined as whenDefined };
+export { stdlib, optional, inputFailure, TYPES, exportedPyWorker as PyWorker, exportedMPWorker as MPWorker, exportedHooks as hooks, exportedConfig as config, exportedWhenDefined as whenDefined };

package/types/hooks.d.ts

@@ -2,6 +2,7 @@ export function main(name: any): any;
 export function worker(name: any): any;
 export function codeFor(branch: any, type: any): {};
 export function createFunction(self: any, name: any): any;
+export const inputFailure: "\n    import builtins\n    def input(prompt=\"\"):\n        raise Exception(\"\\n           \".join([\n            \"input() doesn't work when PyScript runs in the main thread.\",\n            \"Consider using the worker attribute: https://pyscript.github.io/docs/2023.11.2/user-guide/workers/\"\n        ]))\n\n    builtins.input = input\n    del builtins\n    del input\n";
 export namespace hooks {
     namespace main {
         let onWorker: Set<Function>;

package/types/plugins/py-terminal/mpy.d.ts

@@ -0,0 +1,2 @@
+declare function _default(element: any): Promise<void>;
+export default _default;

package/types/plugins/py-terminal/py.d.ts

@@ -0,0 +1,2 @@
+declare function _default(element: any): Promise<void>;
+export default _default;