@pyscript/core 0.5.2-rc2 → 0.5.3-rc1

package/src/stdlib/pyscript.js

@@ -3,17 +3,14 @@ export default {
   "pyscript": {
     "__init__.py": "# Some notes about the naming conventions and the relationship between various\n# similar-but-different names.\n#\n# import pyscript\n#     this package contains the main user-facing API offered by pyscript. All\n#     the names which are supposed be used by end users should be made\n#     available in pyscript/__init__.py (i.e., this file)\n#\n# import _pyscript\n#     this is an internal module implemented in JS. It is used internally by\n#     the pyscript package, end users should not use it directly. For its\n#     implementation, grep for `interpreter.registerJsModule(\"_pyscript\",\n#     ...)` in core.js\n#\n# import js\n#     this is the JS globalThis, as exported by pyodide and/or micropython's\n#     FFIs. As such, it contains different things in the main thread or in a\n#     worker.\n#\n# import pyscript.magic_js\n#     this submodule abstracts away some of the differences between the main\n#     thread and the worker. In particular, it defines `window` and `document`\n#     in such a way that these names work in both cases: in the main thread,\n#     they are the \"real\" objects, in the worker they are proxies which work\n#     thanks to coincident.\n#\n# from pyscript import window, document\n#     these are just the window and document objects as defined by\n#     pyscript.magic_js. This is the blessed way to access them from pyscript,\n#     as it works transparently in both the main thread and worker cases.\n\nfrom polyscript import lazy_py_modules as py_import\nfrom pyscript.display import HTML, display\nfrom pyscript.fetch import fetch\nfrom pyscript.magic_js import (\n    RUNNING_IN_WORKER,\n    PyWorker,\n    config,\n    current_target,\n    document,\n    js_import,\n    js_modules,\n    sync,\n    window,\n)\nfrom pyscript.storage import Storage, storage\nfrom pyscript.websocket import WebSocket\n\nif not RUNNING_IN_WORKER:\n    from pyscript.workers import create_named_worker, workers\n\ntry:\n    from pyscript.event_handling import when\nexcept:\n    # TODO: should we remove this? Or at the very least, we should capture\n    # the traceback otherwise it's very hard to debug\n    from pyscript.util import NotSupported\n\n    when = NotSupported(\n        \"pyscript.when\", \"pyscript.when currently not available with this interpreter\"\n    )\n",
     "display.py": "import base64\nimport html\nimport io\nimport re\n\nfrom pyscript.magic_js import current_target, document, window\n\n_MIME_METHODS = {\n    \"savefig\": \"image/png\",\n    \"_repr_javascript_\": \"application/javascript\",\n    \"_repr_json_\": \"application/json\",\n    \"_repr_latex\": \"text/latex\",\n    \"_repr_png_\": \"image/png\",\n    \"_repr_jpeg_\": \"image/jpeg\",\n    \"_repr_pdf_\": \"application/pdf\",\n    \"_repr_svg_\": \"image/svg+xml\",\n    \"_repr_markdown_\": \"text/markdown\",\n    \"_repr_html_\": \"text/html\",\n    \"__repr__\": \"text/plain\",\n}\n\n\ndef _render_image(mime, value, meta):\n    # If the image value is using bytes we should convert it to base64\n    # otherwise it will return raw bytes and the browser will not be able to\n    # render it.\n    if isinstance(value, bytes):\n        value = base64.b64encode(value).decode(\"utf-8\")\n\n    # This is the pattern of base64 strings\n    base64_pattern = re.compile(\n        r\"^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$\"\n    )\n    # If value doesn't match the base64 pattern we should encode it to base64\n    if len(value) > 0 and not base64_pattern.match(value):\n        value = base64.b64encode(value.encode(\"utf-8\")).decode(\"utf-8\")\n\n    data = f\"data:{mime};charset=utf-8;base64,{value}\"\n    attrs = \" \".join(['{k}=\"{v}\"' for k, v in meta.items()])\n    return f'<img src=\"{data}\" {attrs}></img>'\n\n\ndef _identity(value, meta):\n    return value\n\n\n_MIME_RENDERERS = {\n    \"text/plain\": html.escape,\n    \"text/html\": _identity,\n    \"image/png\": lambda value, meta: _render_image(\"image/png\", value, meta),\n    \"image/jpeg\": lambda value, meta: _render_image(\"image/jpeg\", value, meta),\n    \"image/svg+xml\": _identity,\n    \"application/json\": _identity,\n    \"application/javascript\": lambda value, meta: f\"<script>{value}<\\\\/script>\",\n}\n\n\nclass HTML:\n    \"\"\"\n    Wrap a string so that display() can render it as plain HTML\n    \"\"\"\n\n    def __init__(self, html):\n        self._html = html\n\n    def _repr_html_(self):\n        return self._html\n\n\ndef _eval_formatter(obj, print_method):\n    \"\"\"\n    Evaluates a formatter method.\n    \"\"\"\n    if print_method == \"__repr__\":\n        return repr(obj)\n    elif hasattr(obj, print_method):\n        if print_method == \"savefig\":\n            buf = io.BytesIO()\n            obj.savefig(buf, format=\"png\")\n            buf.seek(0)\n            return base64.b64encode(buf.read()).decode(\"utf-8\")\n        return getattr(obj, print_method)()\n    elif print_method == \"_repr_mimebundle_\":\n        return {}, {}\n    return None\n\n\ndef _format_mime(obj):\n    \"\"\"\n    Formats object using _repr_x_ methods.\n    \"\"\"\n    if isinstance(obj, str):\n        return html.escape(obj), \"text/plain\"\n\n    mimebundle = _eval_formatter(obj, \"_repr_mimebundle_\")\n    if isinstance(mimebundle, tuple):\n        format_dict, _ = mimebundle\n    else:\n        format_dict = mimebundle\n\n    output, not_available = None, []\n    for method, mime_type in _MIME_METHODS.items():\n        if mime_type in format_dict:\n            output = format_dict[mime_type]\n        else:\n            output = _eval_formatter(obj, method)\n\n        if output is None:\n            continue\n        elif mime_type not in _MIME_RENDERERS:\n            not_available.append(mime_type)\n            continue\n        break\n    if output is None:\n        if not_available:\n            window.console.warn(\n                f\"Rendered object requested unavailable MIME renderers: {not_available}\"\n            )\n        output = repr(output)\n        mime_type = \"text/plain\"\n    elif isinstance(output, tuple):\n        output, meta = output\n    else:\n        meta = {}\n    return _MIME_RENDERERS[mime_type](output, meta), mime_type\n\n\ndef _write(element, value, append=False):\n    html, mime_type = _format_mime(value)\n    if html == \"\\\\n\":\n        return\n\n    if append:\n        out_element = document.createElement(\"div\")\n        element.append(out_element)\n    else:\n        out_element = element.lastElementChild\n        if out_element is None:\n            out_element = element\n\n    if mime_type in (\"application/javascript\", \"text/html\"):\n        script_element = document.createRange().createContextualFragment(html)\n        out_element.append(script_element)\n    else:\n        out_element.innerHTML = html\n\n\ndef display(*values, target=None, append=True):\n    if target is None:\n        target = current_target()\n    elif not isinstance(target, str):\n        raise TypeError(f\"target must be str or None, not {target.__class__.__name__}\")\n    elif target == \"\":\n        raise ValueError(\"Cannot have an empty target\")\n    elif target.startswith(\"#\"):\n        # note: here target is str and not None!\n        # align with @when behavior\n        target = target[1:]\n\n    element = document.getElementById(target)\n\n    # If target cannot be found on the page, a ValueError is raised\n    if element is None:\n        raise ValueError(\n            f\"Invalid selector with id={target}. Cannot be found in the page.\"\n        )\n\n    # if element is a <script type=\"py\">, it has a 'target' attribute which\n    # points to the visual element holding the displayed values. In that case,\n    # use that.\n    if element.tagName == \"SCRIPT\" and hasattr(element, \"target\"):\n        element = element.target\n\n    for v in values:\n        if not append:\n            element.replaceChildren()\n        _write(element, v, append=append)\n",
-    "event_handling.py": "import inspect\n\ntry:\n    from pyodide.ffi.wrappers import add_event_listener\n\nexcept ImportError:\n\n    def add_event_listener(el, event_type, func):\n        el.addEventListener(event_type, func)\n\n\nfrom pyscript.magic_js import document\n\n\ndef when(event_type=None, selector=None):\n    \"\"\"\n    Decorates a function and passes py-* events to the decorated function\n    The events might or not be an argument of the decorated function\n    \"\"\"\n\n    def decorator(func):\n\n        from pyscript.web.elements import Element, ElementCollection\n\n        if isinstance(selector, str):\n            elements = document.querySelectorAll(selector)\n        # TODO: This is a hack that will be removed when pyscript becomes a package\n        #       and we can better manage the imports without circular dependencies\n        elif isinstance(selector, Element):\n            elements = [selector._dom_element]\n        elif isinstance(selector, ElementCollection):\n            elements = [el._dom_element for el in selector]\n        else:\n            if isinstance(selector, list):\n                elements = selector\n            else:\n                elements = [selector]\n\n        try:\n            sig = inspect.signature(func)\n            # Function doesn't receive events\n            if not sig.parameters:\n\n                def wrapper(*args, **kwargs):\n                    func()\n\n            else:\n                wrapper = func\n\n        except AttributeError:\n            # TODO: this is very ugly hack to get micropython working because inspect.signature\n            #       doesn't exist, but we need to actually properly replace inspect.signature.\n            #       It may be actually better to not try any magic for now and raise the error\n            def wrapper(*args, **kwargs):\n                try:\n                    return func(*args, **kwargs)\n                except TypeError as e:\n                    if \"takes\" in str(e) and \"positional arguments\" in str(e):\n                        return func()\n\n                    raise\n\n        for el in elements:\n            add_event_listener(el, event_type, wrapper)\n\n        return func\n\n    return decorator\n",
+    "event_handling.py": "import inspect\n\ntry:\n    from pyodide.ffi.wrappers import add_event_listener\n\nexcept ImportError:\n\n    def add_event_listener(el, event_type, func):\n        el.addEventListener(event_type, func)\n\n\nfrom pyscript.magic_js import document\n\n\ndef when(event_type=None, selector=None):\n    \"\"\"\n    Decorates a function and passes py-* events to the decorated function\n    The events might or not be an argument of the decorated function\n    \"\"\"\n\n    def decorator(func):\n\n        from pyscript.web import Element, ElementCollection\n\n        if isinstance(selector, str):\n            elements = document.querySelectorAll(selector)\n        # TODO: This is a hack that will be removed when pyscript becomes a package\n        #       and we can better manage the imports without circular dependencies\n        elif isinstance(selector, Element):\n            elements = [selector._dom_element]\n        elif isinstance(selector, ElementCollection):\n            elements = [el._dom_element for el in selector]\n        else:\n            if isinstance(selector, list):\n                elements = selector\n            else:\n                elements = [selector]\n\n        try:\n            sig = inspect.signature(func)\n            # Function doesn't receive events\n            if not sig.parameters:\n\n                def wrapper(*args, **kwargs):\n                    func()\n\n            else:\n                wrapper = func\n\n        except AttributeError:\n            # TODO: this is very ugly hack to get micropython working because inspect.signature\n            #       doesn't exist, but we need to actually properly replace inspect.signature.\n            #       It may be actually better to not try any magic for now and raise the error\n            def wrapper(*args, **kwargs):\n                try:\n                    return func(*args, **kwargs)\n                except TypeError as e:\n                    if \"takes\" in str(e) and \"positional arguments\" in str(e):\n                        return func()\n\n                    raise\n\n        for el in elements:\n            add_event_listener(el, event_type, wrapper)\n\n        return func\n\n    return decorator\n",
     "fetch.py": "import json\n\nimport js\nfrom pyscript.util import as_bytearray\n\n\n### wrap the response to grant Pythonic results\nclass _Response:\n    def __init__(self, response):\n        self._response = response\n\n    # grant access to response.ok and other fields\n    def __getattr__(self, attr):\n        return getattr(self._response, attr)\n\n    # exposed methods with Pythonic results\n    async def arrayBuffer(self):\n        buffer = await self._response.arrayBuffer()\n        # works in Pyodide\n        if hasattr(buffer, \"to_py\"):\n            return buffer.to_py()\n        # shims in MicroPython\n        return memoryview(as_bytearray(buffer))\n\n    async def blob(self):\n        return await self._response.blob()\n\n    async def bytearray(self):\n        buffer = await self._response.arrayBuffer()\n        return as_bytearray(buffer)\n\n    async def json(self):\n        return json.loads(await self.text())\n\n    async def text(self):\n        return await self._response.text()\n\n\n### allow direct await to _Response methods\nclass _DirectResponse:\n    @staticmethod\n    def setup(promise, response):\n        promise._response = _Response(response)\n        return promise._response\n\n    def __init__(self, promise):\n        self._promise = promise\n        promise._response = None\n        promise.arrayBuffer = self.arrayBuffer\n        promise.blob = self.blob\n        promise.bytearray = self.bytearray\n        promise.json = self.json\n        promise.text = self.text\n\n    async def _response(self):\n        if not self._promise._response:\n            await self._promise\n        return self._promise._response\n\n    async def arrayBuffer(self):\n        response = await self._response()\n        return await response.arrayBuffer()\n\n    async def blob(self):\n        response = await self._response()\n        return await response.blob()\n\n    async def bytearray(self):\n        response = await self._response()\n        return await response.bytearray()\n\n    async def json(self):\n        response = await self._response()\n        return await response.json()\n\n    async def text(self):\n        response = await self._response()\n        return await response.text()\n\n\ndef fetch(url, **kw):\n    # workaround Pyodide / MicroPython dict <-> js conversion\n    options = js.JSON.parse(json.dumps(kw))\n    awaited = lambda response, *args: _DirectResponse.setup(promise, response)\n    promise = js.fetch(url, options).then(awaited)\n    _DirectResponse(promise)\n    return promise\n",
     "ffi.py": "try:\n    import js\n    from pyodide.ffi import create_proxy as _cp\n    from pyodide.ffi import to_js as _py_tjs\n\n    from_entries = js.Object.fromEntries\n\n    def _tjs(value, **kw):\n        if not hasattr(kw, \"dict_converter\"):\n            kw[\"dict_converter\"] = from_entries\n        return _py_tjs(value, **kw)\n\nexcept:\n    from jsffi import create_proxy as _cp\n    from jsffi import to_js as _tjs\n\ncreate_proxy = _cp\nto_js = _tjs\n",
     "flatted.py": "# https://www.npmjs.com/package/flatted\n\nimport json as _json\n\n\nclass _Known:\n    def __init__(self):\n        self.key = []\n        self.value = []\n\n\nclass _String:\n    def __init__(self, value):\n        self.value = value\n\n\ndef _array_keys(value):\n    keys = []\n    i = 0\n    for _ in value:\n        keys.append(i)\n        i += 1\n    return keys\n\n\ndef _object_keys(value):\n    keys = []\n    for key in value:\n        keys.append(key)\n    return keys\n\n\ndef _is_array(value):\n    return isinstance(value, list) or isinstance(value, tuple)\n\n\ndef _is_object(value):\n    return isinstance(value, dict)\n\n\ndef _is_string(value):\n    return isinstance(value, str)\n\n\ndef _index(known, input, value):\n    input.append(value)\n    index = str(len(input) - 1)\n    known.key.append(value)\n    known.value.append(index)\n    return index\n\n\ndef _loop(keys, input, known, output):\n    for key in keys:\n        value = output[key]\n        if isinstance(value, _String):\n            _ref(key, input[int(value.value)], input, known, output)\n\n    return output\n\n\ndef _ref(key, value, input, known, output):\n    if _is_array(value) and not value in known:\n        known.append(value)\n        value = _loop(_array_keys(value), input, known, value)\n    elif _is_object(value) and not value in known:\n        known.append(value)\n        value = _loop(_object_keys(value), input, known, value)\n\n    output[key] = value\n\n\ndef _relate(known, input, value):\n    if _is_string(value) or _is_array(value) or _is_object(value):\n        try:\n            return known.value[known.key.index(value)]\n        except:\n            return _index(known, input, value)\n\n    return value\n\n\ndef _transform(known, input, value):\n    if _is_array(value):\n        output = []\n        for val in value:\n            output.append(_relate(known, input, val))\n        return output\n\n    if _is_object(value):\n        obj = {}\n        for key in value:\n            obj[key] = _relate(known, input, value[key])\n        return obj\n\n    return value\n\n\ndef _wrap(value):\n    if _is_string(value):\n        return _String(value)\n\n    if _is_array(value):\n        i = 0\n        for val in value:\n            value[i] = _wrap(val)\n            i += 1\n\n    elif _is_object(value):\n        for key in value:\n            value[key] = _wrap(value[key])\n\n    return value\n\n\ndef parse(value, *args, **kwargs):\n    json = _json.loads(value, *args, **kwargs)\n    wrapped = []\n    for value in json:\n        wrapped.append(_wrap(value))\n\n    input = []\n    for value in wrapped:\n        if isinstance(value, _String):\n            input.append(value.value)\n        else:\n            input.append(value)\n\n    value = input[0]\n\n    if _is_array(value):\n        return _loop(_array_keys(value), input, [value], value)\n\n    if _is_object(value):\n        return _loop(_object_keys(value), input, [value], value)\n\n    return value\n\n\ndef stringify(value, *args, **kwargs):\n    known = _Known()\n    input = []\n    output = []\n    i = int(_index(known, input, value))\n    while i < len(input):\n        output.append(_transform(known, input, input[i]))\n        i += 1\n    return _json.dumps(output, *args, **kwargs)\n",
     "magic_js.py": "import json\nimport sys\n\nimport js as globalThis\nfrom polyscript import config as _config\nfrom polyscript import js_modules\nfrom pyscript.util import NotSupported\n\nRUNNING_IN_WORKER = not hasattr(globalThis, \"document\")\n\nconfig = json.loads(globalThis.JSON.stringify(_config))\n\n\n# allow `from pyscript.js_modules.xxx import yyy`\nclass JSModule:\n    def __init__(self, name):\n        self.name = name\n\n    def __getattr__(self, field):\n        # avoid pyodide looking for non existent fields\n        if not field.startswith(\"_\"):\n            return getattr(getattr(js_modules, self.name), field)\n\n\n# generate N modules in the system that will proxy the real value\nfor name in globalThis.Reflect.ownKeys(js_modules):\n    sys.modules[f\"pyscript.js_modules.{name}\"] = JSModule(name)\nsys.modules[\"pyscript.js_modules\"] = js_modules\n\nif RUNNING_IN_WORKER:\n    import polyscript\n\n    PyWorker = NotSupported(\n        \"pyscript.PyWorker\",\n        \"pyscript.PyWorker works only when running in the main thread\",\n    )\n\n    try:\n        import js\n\n        window = polyscript.xworker.window\n        document = window.document\n        js.document = document\n        # this is the same as js_import on main and it lands modules on main\n        js_import = window.Function(\n            \"return (...urls) => Promise.all(urls.map((url) => import(url)))\"\n        )()\n    except:\n        message = \"Unable to use `window` or `document` -> https://docs.pyscript.net/latest/faq/#sharedarraybuffer\"\n        globalThis.console.warn(message)\n        window = NotSupported(\"pyscript.window\", message)\n        document = NotSupported(\"pyscript.document\", message)\n        js_import = None\n\n    sync = polyscript.xworker.sync\n\n    # in workers the display does not have a default ID\n    # but there is a sync utility from xworker\n    def current_target():\n        return polyscript.target\n\nelse:\n    import _pyscript\n    from _pyscript import PyWorker, js_import\n\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        \"pyscript.sync\", \"pyscript.sync works only when running in a worker\"\n    )\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
     "storage.py": "from polyscript import storage as _storage\nfrom pyscript.flatted import parse as _parse\nfrom pyscript.flatted import stringify as _stringify\n\n\n# convert a Python value into an IndexedDB compatible entry\ndef _to_idb(value):\n    if value is None:\n        return _stringify([\"null\", 0])\n    if isinstance(value, (bool, float, int, str, list, dict, tuple)):\n        return _stringify([\"generic\", value])\n    if isinstance(value, bytearray):\n        return _stringify([\"bytearray\", [v for v in value]])\n    if isinstance(value, memoryview):\n        return _stringify([\"memoryview\", [v for v in value]])\n    raise TypeError(f\"Unexpected value: {value}\")\n\n\n# convert an IndexedDB compatible entry into a Python value\ndef _from_idb(value):\n    (\n        kind,\n        result,\n    ) = _parse(value)\n    if kind == \"null\":\n        return None\n    if kind == \"generic\":\n        return result\n    if kind == \"bytearray\":\n        return bytearray(result)\n    if kind == \"memoryview\":\n        return memoryview(bytearray(result))\n    return value\n\n\nclass Storage(dict):\n    def __init__(self, store):\n        super().__init__({k: _from_idb(v) for k, v in store.entries()})\n        self.__store__ = store\n\n    def __delitem__(self, attr):\n        self.__store__.delete(attr)\n        super().__delitem__(attr)\n\n    def __setitem__(self, attr, value):\n        self.__store__.set(attr, _to_idb(value))\n        super().__setitem__(attr, value)\n\n    def clear(self):\n        self.__store__.clear()\n        super().clear()\n\n    async def sync(self):\n        await self.__store__.sync()\n\n\nasync def storage(name=\"\", storage_class=Storage):\n    if not name:\n        raise ValueError(\"The storage name must be defined\")\n    return storage_class(await _storage(f\"@pyscript/{name}\"))\n",
     "util.py": "import js\n\n\ndef as_bytearray(buffer):\n    ui8a = js.Uint8Array.new(buffer)\n    size = ui8a.length\n    ba = bytearray(size)\n    for i in range(0, size):\n        ba[i] = ui8a[i]\n    return ba\n\n\nclass NotSupported:\n    \"\"\"\n    Small helper that raises exceptions if you try to get/set any attribute on\n    it.\n    \"\"\"\n\n    def __init__(self, name, error):\n        object.__setattr__(self, \"name\", name)\n        object.__setattr__(self, \"error\", error)\n\n    def __repr__(self):\n        return f\"<NotSupported {self.name} [{self.error}]>\"\n\n    def __getattr__(self, attr):\n        raise AttributeError(self.error)\n\n    def __setattr__(self, attr, value):\n        raise AttributeError(self.error)\n\n    def __call__(self, *args):\n        raise TypeError(self.error)\n",
-    "web": {
-      "__init__.py": "from pyscript import document\nfrom pyscript.web.elements import Element, ElementCollection\n\n\nclass DOM:\n    def __init__(self):\n        self.body = Element.from_dom_element(document.body)\n        self.head = Element.from_dom_element(document.head)\n\n    def __getitem__(self, selector):\n        return self.find(selector)\n\n    def find(self, selector):\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in document.querySelectorAll(selector)\n            ]\n        )\n\n\ndom = DOM()\n",
-      "elements.py": "try:\n    from typing import Any\n\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\n\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\nfrom pyscript import document\n\n\nclass Element:\n    @classmethod\n    def from_dom_element(cls, dom_element):\n        \"\"\"Create an instance of a subclass of `Element` for a DOM element.\"\"\"\n\n        element_cls = ELEMENT_CLASSES_BY_TAG_NAME.get(dom_element.tagName.lower())\n\n        # For any unknown elements (custom tags etc.) create an instance of this\n        # class ('Element').\n        if not element_cls:\n            element_cls = cls\n\n        return element_cls(dom_element=dom_element)\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(\n            type(self).__name__.replace(\"_\", \"\")\n        )\n\n        self._parent = None\n        self._classes = Classes(self)\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def __getattr__(self, name):\n        # This allows us to get attributes on the underlying DOM element that clash\n        # with Python keywords or built-ins (e.g. the output element has an\n        # attribute `for` which is a Python keyword, so you can access it on the\n        # Element instance via `for_`).\n        if name.endswith(\"_\"):\n            name = name[:-1]\n\n        return getattr(self._dom_element, name)\n\n    def __setattr__(self, name, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # underlying DOM element. BUT, we don't use the usual Python pattern where\n        # we set attributes on the element itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if name.startswith(\"_\"):\n            super().__setattr__(name, value)\n\n        else:\n            # This allows us to set attributes on the underlying DOM element that clash\n            # with Python keywords or built-ins (e.g. the output element has an\n            # attribute `for` which is a Python keyword, so you can access it on the\n            # Element instance via `for_`).\n            if name.endswith(\"_\"):\n                name = name[:-1]\n\n            setattr(self._dom_element, name, value)\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        if isinstance(style, dict):\n            self.style.set(**style)\n\n        elif style is not None:\n            raise ValueError(\n                f\"Style should be a dictionary, received {style} \"\n                f\"(type {type(style)}) instead.\"\n            )\n\n        self._set_dom_properties(**kwargs)\n\n    def _set_dom_properties(self, **kwargs):\n        \"\"\"Set the specified DOM properties.\n\n        Args:\n            **kwargs: The properties to set\n        \"\"\"\n        for name, value in kwargs.items():\n            setattr(self, name, value)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    @property\n    def children(self):\n        return ElementCollection(\n            [Element.from_dom_element(el) for el in self._dom_element.children]\n        )\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._dom_element.parentElement:\n            self._parent = Element.from_dom_element(self._dom_element.parentElement)\n\n        return self._parent\n\n    @property\n    def style(self):\n        return self._style\n\n    def append(self, child):\n        if isinstance(child, Element):\n            self._dom_element.appendChild(child._dom_element)\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self._dom_element.appendChild(el._dom_element)\n\n        else:\n            # In this case we know it's not an Element or an ElementCollection, so we\n            # guess that it's either a DOM element or NodeList returned via the ffi.\n            try:\n                # First, we try to see if it's an element by accessing the 'tagName'\n                # attribute.\n                child.tagName\n                self._dom_element.appendChild(child)\n\n            except AttributeError:\n                try:\n                    # Ok, it's not an element, so let's see if it's a NodeList by\n                    # accessing the 'length' attribute.\n                    child.length\n                    for element_ in child:\n                        self._dom_element.appendChild(element_)\n\n                except AttributeError:\n                    # Nope! This is not an element or a NodeList.\n                    raise TypeError(\n                        f'Element \"{child}\" is a proxy object, \"'\n                        f\"but not a valid element or a NodeList.\"\n                    )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = Element.from_dom_element(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\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        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in self._dom_element.querySelectorAll(selector)\n            ]\n        )\n\n    def show_me(self):\n        \"\"\"Scroll the element into view.\"\"\"\n        self._dom_element.scrollIntoView()\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, *class_names):\n        for class_name in class_names:\n            if class_name in self:\n                self.remove(class_name)\n\n            else:\n                self.add(class_name)\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>\n    element.\n\n    It allows to access to add and remove <option>s by using the `add` and `remove`\n    methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\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\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._dom_element\n\n        self._element._dom_element.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._dom_element.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 [\n            Element.from_dom_element(opt) for opt in self._element._dom_element.options\n        ]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._dom_element.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 Style:\n    \"\"\"A dict-like interface to an element's css style.\"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        self._style = self._element._dom_element.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, **kwargs):\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    \"\"\"Base class for elements that can contain other elements.\"\"\"\n\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n\n# Classes for every element type. If the element type (e.g. \"input\") clashes with\n# either a Python keyword or common symbol, then we suffix the class name with an \"_\"\n# (e.g. \"input_\").\n\n\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        download_link = a(download=filename, href=self._dom_element.toDataURL())\n\n        # Adding the link to the DOM is recommended for browser compatibility to make\n        # sure that the click works.\n        self.append(download_link)\n\n        download_link._dom_element.click()\n\n    def draw(self, what, width=None, height=None):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        ctx = self._dom_element.getContext(\"2d\")\n        if width or height:\n            ctx.drawImage(what, 0, 0, width, height)\n\n        else:\n            ctx.drawImage(what, 0, 0)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param\"\"\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Capture a snapshot (i.e. a single frame) of a video to a canvas.\n\n        Inputs:\n\n            * to: the canvas to save the video frame to (if None, one is created).\n            * width: width of the snapshot (defaults to the video width).\n            * height: height of the snapshot (defaults to the video height).\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        width = width if width is not None else self.videoWidth\n        height = height if height is not None else self.videoHeight\n\n        if to is None:\n            to = canvas(width=width, height=height)\n\n        elif isinstance(to, Element):\n            if to.tag != \"canvas\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to = canvas(dom_element=to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)  # NOQA\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n            to = canvas(dom_element=nodelist[0])\n\n        to.draw(self, width, height)\n\n        return to\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n\nclass ClassesCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, *class_names):\n        for element in self._collection:\n            element.classes.toggle(*class_names)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\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 __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\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._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM elements.\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\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\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 query selector.\n        return self.find(key)\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return (\n            f\"{self.__class__.__name__} (length: {len(self._elements)}) \"\n            f\"{self._elements}\"\n        )\n\n    def __getattr__(self, item):\n        return self._get_attribute(item)\n\n    def __setattr__(self, key, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # elements in the collection. BUT, we don't use the usual Python pattern where\n        # we set attributes on the collection itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if key.startswith(\"_\"):\n            super().__setattr__(key, value)\n\n        else:\n            self._set_attribute(key, value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def style(self):\n        return self._style\n\n    def find(self, selector):\n        elements = []\n        for element in self._elements:\n            elements.extend(element.find(selector))\n\n        return ElementCollection(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\n# fmt: off\nELEMENT_CLASSES = [\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Lookup table to get an element class by its tag name.\nELEMENT_CLASSES_BY_TAG_NAME = {\n    cls.__name__.replace(\"_\", \"\"): cls for cls in ELEMENT_CLASSES\n}\n"
-    },
+    "web.py": "\"\"\"Lightweight interface to the DOM and HTML elements.\"\"\"\n\n# `when` is not used in this module. It is imported here save the user an additional\n# import (i.e. they can get what they need from `pyscript.web`).\nfrom pyscript import document, when  # NOQA\n\n\ndef wrap_dom_element(dom_element):\n    \"\"\"Wrap an existing DOM element in an instance of a subclass of `Element`.\n\n    This is just a convenience function to avoid having to import the `Element` class\n    and use its class method.\n    \"\"\"\n\n    return Element.wrap_dom_element(dom_element)\n\n\nclass Element:\n    # A lookup table to get an `Element` subclass by tag name. Used when wrapping an\n    # existing DOM element.\n    element_classes_by_tag_name = {}\n\n    @classmethod\n    def get_tag_name(cls):\n        \"\"\"Return the HTML tag name for the class.\n\n        For classes that have a trailing underscore (because they clash with a Python\n        keyword or built-in), we remove it to get the tag name. e.g. for the `input_`\n        class, the tag name is `input`.\n\n        \"\"\"\n        return cls.__name__.replace(\"_\", \"\")\n\n    @classmethod\n    def register_element_classes(cls, element_classes):\n        \"\"\"Register an iterable of element classes.\"\"\"\n        for element_class in element_classes:\n            tag_name = element_class.get_tag_name()\n            cls.element_classes_by_tag_name[tag_name] = element_class\n\n    @classmethod\n    def unregister_element_classes(cls, element_classes):\n        \"\"\"Unregister an iterable of element classes.\"\"\"\n        for element_class in element_classes:\n            tag_name = element_class.get_tag_name()\n            cls.element_classes_by_tag_name.pop(tag_name, None)\n\n    @classmethod\n    def wrap_dom_element(cls, dom_element):\n        \"\"\"Wrap an existing DOM element in an instance of a subclass of `Element`.\n\n        We look up the `Element` subclass by the DOM element's tag name. For any unknown\n        elements (custom tags etc.) use *this* class (`Element`).\n        \"\"\"\n        element_cls = cls.element_classes_by_tag_name.get(\n            dom_element.tagName.lower(), cls\n        )\n\n        return element_cls(dom_element=dom_element)\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(\n            type(self).get_tag_name()\n        )\n\n        # A set-like interface to the element's `classList`.\n        self._classes = Classes(self)\n\n        # A dict-like interface to the element's `style` attribute.\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    def __getitem__(self, key):\n        \"\"\"Get an item within the element's children.\n\n        If `key` is an integer or a slice we use it to index/slice the element's\n        children. Otherwise, we use `key` as a query selector.\n        \"\"\"\n        if isinstance(key, int) or isinstance(key, slice):\n            return self.children[key]\n\n        return self.find(key)\n\n    def __getattr__(self, name):\n        # This allows us to get attributes on the underlying DOM element that clash\n        # with Python keywords or built-ins (e.g. the output element has an\n        # attribute `for` which is a Python keyword, so you can access it on the\n        # Element instance via `for_`).\n        if name.endswith(\"_\"):\n            name = name[:-1]\n\n        return getattr(self._dom_element, name)\n\n    def __setattr__(self, name, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # underlying DOM element. BUT, we don't use the usual Python pattern where\n        # we set attributes on the element itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if name.startswith(\"_\"):\n            super().__setattr__(name, value)\n\n        else:\n            # This allows us to set attributes on the underlying DOM element that clash\n            # with Python keywords or built-ins (e.g. the output element has an\n            # attribute `for` which is a Python keyword, so you can access it on the\n            # Element instance via `for_`).\n            if name.endswith(\"_\"):\n                name = name[:-1]\n\n            setattr(self._dom_element, name, value)\n\n    @property\n    def children(self):\n        \"\"\"Return the element's children as an `ElementCollection`.\"\"\"\n        return ElementCollection.wrap_dom_elements(self._dom_element.children)\n\n    @property\n    def classes(self):\n        \"\"\"Return the element's `classList` as a `Classes` instance.\"\"\"\n        return self._classes\n\n    @property\n    def parent(self):\n        \"\"\"Return the element's `parent `Element`.\"\"\"\n        if self._dom_element.parentElement is None:\n            return None\n\n        return Element.wrap_dom_element(self._dom_element.parentElement)\n\n    @property\n    def style(self):\n        \"\"\"Return the element's `style` attribute as a `Style` instance.\"\"\"\n        return self._style\n\n    def append(self, *items):\n        \"\"\"Append the specified items to the element.\"\"\"\n        for item in items:\n            if isinstance(item, Element):\n                self._dom_element.appendChild(item._dom_element)\n\n            elif isinstance(item, ElementCollection):\n                for element in item:\n                    self._dom_element.appendChild(element._dom_element)\n\n            # We check for list/tuple here and NOT for any iterable as it will match\n            # a JS Nodelist which is handled explicitly below.\n            # NodeList.\n            elif isinstance(item, list) or isinstance(item, tuple):\n                for child in item:\n                    self.append(child)\n\n            else:\n                # In this case we know it's not an Element or an ElementCollection, so\n                # we guess that it's either a DOM element or NodeList returned via the\n                # ffi.\n                try:\n                    # First, we try to see if it's an element by accessing the 'tagName'\n                    # attribute.\n                    item.tagName\n                    self._dom_element.appendChild(item)\n\n                except AttributeError:\n                    try:\n                        # Ok, it's not an element, so let's see if it's a NodeList by\n                        # accessing the 'length' attribute.\n                        item.length\n                        for element_ in item:\n                            self._dom_element.appendChild(element_)\n\n                    except AttributeError:\n                        # Nope! This is not an element or a NodeList.\n                        raise TypeError(\n                            f'Element \"{item}\" is a proxy object, \"'\n                            f\"but not a valid element or a NodeList.\"\n                        )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = Element.wrap_dom_element(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\n\n    def find(self, selector):\n        \"\"\"Find all elements that match the specified selector.\n\n        Return the results as a (possibly empty) `ElementCollection`.\n        \"\"\"\n        return ElementCollection.wrap_dom_elements(\n            self._dom_element.querySelectorAll(selector)\n        )\n\n    def show_me(self):\n        \"\"\"Convenience method for 'element.scrollIntoView()'.\"\"\"\n        self._dom_element.scrollIntoView()\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        if style:\n            self.style.set(**style)\n\n        for name, value in kwargs.items():\n            setattr(self, name, value)\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        \"\"\"Add one or more classes to the element.\"\"\"\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        \"\"\"Check if the element has the specified class.\"\"\"\n        return class_name in self\n\n    def remove(self, *class_names):\n        \"\"\"Remove one or more classes from the element.\"\"\"\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        \"\"\"Replace one of the element's classes with another.\"\"\"\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, *class_names):\n        \"\"\"Toggle one or more of the element's classes.\"\"\"\n        for class_name in class_names:\n            if class_name in self:\n                self.remove(class_name)\n\n            else:\n                self.add(class_name)\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        \"\"\"Return the element's options as an `Options\"\"\"\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>.\n\n    It allows access to add and remove <option>s by using the `add`, `remove` and\n    `clear` methods.\n    \"\"\"\n\n    def __init__(self, element):\n        self._element = element\n\n    def __getitem__(self, key):\n        return self.options[key]\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    @property\n    def options(self):\n        \"\"\"Return the list of options.\"\"\"\n        return [Element.wrap_dom_element(o) for o in self._element._dom_element.options]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option.\"\"\"\n        return self.options[self._element._dom_element.selectedIndex]\n\n    def add(self, value=None, html=None, text=None, before=None, **kwargs):\n        \"\"\"Add a new option to the element\"\"\"\n        if value is not None:\n            kwargs[\"value\"] = value\n\n        if html is not None:\n            kwargs[\"innerHTML\"] = html\n\n        if text is not None:\n            kwargs[\"text\"] = text\n\n        new_option = option(**kwargs)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._dom_element\n\n        self._element._dom_element.add(new_option._dom_element, before)\n\n    def clear(self):\n        \"\"\"Remove all options.\"\"\"\n        while len(self) > 0:\n            self.remove(0)\n\n    def remove(self, index):\n        \"\"\"Remove the option at the specified index.\"\"\"\n        self._element._dom_element.remove(index)\n\n\nclass Style:\n    \"\"\"A dict-like interface to an element's `style` attribute.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._style = self._element._dom_element.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        \"\"\"Remove a CSS property from the element.\"\"\"\n        self._style.removeProperty(key)\n\n    def set(self, **kwargs):\n        \"\"\"Set one or more CSS properties on the element.\"\"\"\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    \"\"\"Base class for elements that can contain other elements.\"\"\"\n\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n    def __iter__(self):\n        yield from self.children\n\n\nclass ClassesCollection:\n    \"\"\"A set-like interface to the classes of the elements in a collection.\"\"\"\n\n    def __init__(self, collection):\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        \"\"\"Add one or more classes to the elements in the collection.\"\"\"\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        \"\"\"Check if any element in the collection has the specified class.\"\"\"\n        return class_name in self\n\n    def remove(self, *class_names):\n        \"\"\"Remove one or more classes from the elements in the collection.\"\"\"\n\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        \"\"\"Replace one of the classes in the elements in the collection with another.\"\"\"\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, *class_names):\n        \"\"\"Toggle one or more classes on the elements in the collection.\"\"\"\n        for element in self._collection:\n            element.classes.toggle(*class_names)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\n\n\nclass StyleCollection:\n    \"\"\"A dict-like interface to the styles of the elements in a collection.\"\"\"\n\n    def __init__(self, collection):\n        self._collection = collection\n\n    def __getitem__(self, key):\n        return [element.style[key] for element in self._collection._elements]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\n\n    def remove(self, key):\n        \"\"\"Remove a CSS property from the elements in the collection.\"\"\"\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    @classmethod\n    def wrap_dom_elements(cls, dom_elements):\n        \"\"\"Wrap an iterable of dom_elements in an `ElementCollection`.\"\"\"\n\n        return cls(\n            [Element.wrap_dom_element(dom_element) for dom_element in dom_elements]\n        )\n\n    def __init__(self, elements: [Element]):\n        self._elements = elements\n        self._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM elements.\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def __getitem__(self, key):\n        \"\"\"Get an item in the collection.\n\n        If `key` is an integer or a slice we use it to index/slice the collection.\n        Otherwise, we use `key` as a query selector.\n        \"\"\"\n        if isinstance(key, int):\n            return self._elements[key]\n\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        return self.find(key)\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return (\n            f\"{self.__class__.__name__} (length: {len(self._elements)}) \"\n            f\"{self._elements}\"\n        )\n\n    def __getattr__(self, name):\n        return [getattr(element, name) for element in self._elements]\n\n    def __setattr__(self, name, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # elements in the collection. BUT, we don't use the usual Python pattern where\n        # we set attributes on the collection itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if name.startswith(\"_\"):\n            super().__setattr__(name, value)\n\n        else:\n            for element in self._elements:\n                setattr(element, name, value)\n\n    @property\n    def classes(self):\n        \"\"\"Return the classes of the elements in the collection as a `ClassesCollection`.\"\"\"\n        return self._classes\n\n    @property\n    def elements(self):\n        \"\"\"Return the elements in the collection as a list.\"\"\"\n        return self._elements\n\n    @property\n    def style(self):\n        \"\"\"\"\"\"\n        return self._style\n\n    def find(self, selector):\n        \"\"\"Find all elements that match the specified selector.\n\n        Return the results as a (possibly empty) `ElementCollection`.\n        \"\"\"\n        elements = []\n        for element in self._elements:\n            elements.extend(element.find(selector))\n\n        return ElementCollection(elements)\n\n\n# Classes for every HTML element. If the element tag name (e.g. \"input\") clashes with\n# either a Python keyword or common symbol, then we suffix the class name with an \"_\"\n# (e.g. the class for the \"input\" element is \"input_\").\n\n\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    def download(self, filename: str = \"snapped.png\"):\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        download_link = a(download=filename, href=self._dom_element.toDataURL())\n\n        # Adding the link to the DOM is recommended for browser compatibility to make\n        # sure that the click works.\n        self.append(download_link)\n\n        download_link._dom_element.click()\n\n    def draw(self, what, width=None, height=None):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        ctx = self._dom_element.getContext(\"2d\")\n        if width or height:\n            ctx.drawImage(what, 0, 0, width, height)\n\n        else:\n            ctx.drawImage(what, 0, 0)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param\"\"\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Capture a snapshot (i.e. a single frame) of a video to a canvas.\n\n        Inputs:\n\n            * to: the canvas to save the video frame to (if None, one is created).\n            * width: width of the snapshot (defaults to the video width).\n            * height: height of the snapshot (defaults to the video height).\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        width = width if width is not None else self.videoWidth\n        height = height if height is not None else self.videoHeight\n\n        if to is None:\n            to = canvas(width=width, height=height)\n\n        elif isinstance(to, Element):\n            if to.tag != \"canvas\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to = canvas(dom_element=to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)  # NOQA\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n            to = canvas(dom_element=nodelist[0])\n\n        to.draw(self, width, height)\n\n        return to\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n\n# fmt: off\nELEMENT_CLASSES = [\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Register all the default (aka \"built-in\") Element classes.\nElement.register_element_classes(ELEMENT_CLASSES)\n\n\nclass Page:\n    \"\"\"Represents the whole page.\"\"\"\n\n    def __init__(self):\n        self.html = Element.wrap_dom_element(document.documentElement)\n        self.body = Element.wrap_dom_element(document.body)\n        self.head = Element.wrap_dom_element(document.head)\n\n    def __getitem__(self, selector):\n        \"\"\"Get an item on the page.\n\n        We don't index/slice the page like we do with `Element` and `ElementCollection`\n        as it is a bit muddier what the ideal behavior should be. Instead, we simply\n        use this as a convenience method to `find` elements on the page.\n        \"\"\"\n        return self.find(selector)\n\n    @property\n    def title(self):\n        \"\"\"Return the page title.\"\"\"\n        return document.title\n\n    @title.setter\n    def title(self, value):\n        \"\"\"Set the page title.\"\"\"\n        document.title = value\n\n    def append(self, *items):\n        \"\"\"Shortcut for `page.body.append`.\"\"\"\n        self.body.append(*items)\n\n    def find(self, selector):  # NOQA\n        \"\"\"Find all elements that match the specified selector.\n\n        Return the results as a (possibly empty) `ElementCollection`.\n        \"\"\"\n        return ElementCollection.wrap_dom_elements(document.querySelectorAll(selector))\n\n\npage = Page()\n",
     "websocket.py": "import js\nfrom pyscript.util import as_bytearray\n\ncode = \"code\"\nprotocols = \"protocols\"\nreason = \"reason\"\n\n\nclass EventMessage:\n    def __init__(self, event):\n        self._event = event\n\n    def __getattr__(self, attr):\n        value = getattr(self._event, attr)\n\n        if attr == \"data\" and not isinstance(value, str):\n            if hasattr(value, \"to_py\"):\n                return value.to_py()\n            # shims in MicroPython\n            return memoryview(as_bytearray(value))\n\n        return value\n\n\nclass WebSocket(object):\n    CONNECTING = 0\n    OPEN = 1\n    CLOSING = 2\n    CLOSED = 3\n\n    def __init__(self, **kw):\n        url = kw[\"url\"]\n        if protocols in kw:\n            socket = js.WebSocket.new(url, kw[protocols])\n        else:\n            socket = js.WebSocket.new(url)\n        object.__setattr__(self, \"_ws\", socket)\n\n        for t in [\"onclose\", \"onerror\", \"onmessage\", \"onopen\"]:\n            if t in kw:\n                socket[t] = kw[t]\n\n    def __getattr__(self, attr):\n        return getattr(self._ws, attr)\n\n    def __setattr__(self, attr, value):\n        if attr == \"onmessage\":\n            self._ws[attr] = lambda e: value(EventMessage(e))\n        else:\n            self._ws[attr] = value\n\n    def close(self, **kw):\n        if code in kw and reason in kw:\n            self._ws.close(kw[code], kw[reason])\n        elif code in kw:\n            self._ws.close(kw[code])\n        else:\n            self._ws.close()\n\n    def send(self, data):\n        if isinstance(data, str):\n            self._ws.send(data)\n        else:\n            buffer = js.Uint8Array.new(len(data))\n            for pos, b in enumerate(data):\n                buffer[pos] = b\n            self._ws.send(buffer)\n",
     "workers.py": "import js as _js\nfrom polyscript import workers as _workers\n\n_get = _js.Reflect.get\n\n\ndef _set(script, name, value=\"\"):\n    script.setAttribute(name, value)\n\n\n# this solves an inconsistency between Pyodide and MicroPython\n# @see https://github.com/pyscript/pyscript/issues/2106\nclass _ReadOnlyProxy:\n    def __getitem__(self, name):\n        return _get(_workers, name)\n\n    def __getattr__(self, name):\n        return _get(_workers, name)\n\n\nworkers = _ReadOnlyProxy()\n\n\nasync def create_named_worker(src=\"\", name=\"\", config=None, type=\"py\"):\n    from json import dumps\n\n    if not src:\n        raise ValueError(\"Named workers require src\")\n\n    if not name:\n        raise ValueError(\"Named workers require a name\")\n\n    s = _js.document.createElement(\"script\")\n    s.type = type\n    s.src = src\n    _set(s, \"worker\")\n    _set(s, \"name\", name)\n\n    if config:\n        _set(s, \"config\", isinstance(config, str) and config or dumps(config))\n\n    _js.document.body.append(s)\n    return await workers[name]\n"
   }

package/types/stdlib/pyscript.d.ts

@@ -9,10 +9,7 @@ declare namespace _default {
         "magic_js.py": string;
         "storage.py": string;
         "util.py": string;
-        web: {
-            "__init__.py": string;
-            "elements.py": string;
-        };
+        "web.py": string;
         "websocket.py": string;
         "workers.py": string;
     };