@pyscript/core 0.1.18 → 0.1.20

package/src/stdlib/pyscript/event_handling.py

@@ -0,0 +1,45 @@
+import inspect
+
+from pyodide.ffi.wrappers import add_event_listener
+from pyscript.magic_js import document
+
+
+def when(event_type=None, selector=None):
+    """
+    Decorates a function and passes py-* events to the decorated function
+    The events might or not be an argument of the decorated function
+    """
+
+    def decorator(func):
+        if isinstance(selector, str):
+            elements = document.querySelectorAll(selector)
+        else:
+            # TODO: This is a hack that will be removed when pyscript becomes a package
+            #       and we can better manage the imports without circular dependencies
+            from pyweb import pydom
+
+            if isinstance(selector, pydom.Element):
+                elements = [selector._js]
+            elif isinstance(selector, pydom.ElementCollection):
+                elements = [el._js for el in selector]
+            else:
+                raise ValueError(
+                    f"Invalid selector: {selector}. Selector must"
+                    " be a string, a pydom.Element or a pydom.ElementCollection."
+                )
+
+        sig = inspect.signature(func)
+        # Function doesn't receive events
+        if not sig.parameters:
+
+            def wrapper(*args, **kwargs):
+                func()
+
+            for el in elements:
+                add_event_listener(el, event_type, wrapper)
+        else:
+            for el in elements:
+                add_event_listener(el, event_type, func)
+        return func
+
+    return decorator

package/src/stdlib/pyscript/magic_js.py

@@ -0,0 +1,32 @@
+from pyscript.util import NotSupported
+import js as globalThis
+
+RUNNING_IN_WORKER = not hasattr(globalThis, "document")
+
+if RUNNING_IN_WORKER:
+    import polyscript
+
+    PyWorker = NotSupported(
+        'pyscript.PyWorker',
+        'pyscript.PyWorker works only when running in the main thread')
+    window = polyscript.xworker.window
+    document = window.document
+    sync = polyscript.xworker.sync
+
+    # in workers the display does not have a default ID
+    # but there is a sync utility from xworker
+    def current_target():
+        return polyscript.target
+
+else:
+    import _pyscript
+    from _pyscript import PyWorker
+    window = globalThis
+    document = globalThis.document
+    sync = NotSupported(
+        'pyscript.sync',
+        'pyscript.sync works only when running in a worker')
+
+    # in MAIN the current element target exist, just use it
+    def current_target():
+        return _pyscript.target

package/src/stdlib/pyscript/util.py

@@ -0,0 +1,22 @@
+class NotSupported:
+    """
+    Small helper that raises exceptions if you try to get/set any attribute on
+    it.
+    """
+
+    def __init__(self, name, error):
+        # we set attributes using self.__dict__ to bypass the __setattr__
+        self.__dict__['name'] = name
+        self.__dict__['error'] = error
+
+    def __repr__(self):
+        return f'<NotSupported {self.name} [{self.error}]>'
+
+    def __getattr__(self, attr):
+        raise AttributeError(self.error)
+
+    def __setattr__(self, attr, value):
+        raise AttributeError(self.error)
+
+    def __call__(self, *args):
+        raise TypeError(self.error)

package/src/stdlib/pyscript.js

@@ -1,9 +1,13 @@
 // ⚠️ This file is an artifact: DO NOT MODIFY
 export default {
-  "_pyscript": {
-    "__init__.py": "import js as window\n\nIS_WORKER = not hasattr(window, \"document\")\n\nif IS_WORKER:\n    from polyscript import xworker as _xworker\n\n    window = _xworker.window\n    document = window.document\n    sync = _xworker.sync\nelse:\n    document = window.document\n",
-    "display.py": "import base64\nimport html\nimport io\nimport re\n\nfrom . import document, window\n\n_MIME_METHODS = {\n    \"__repr__\": \"text/plain\",\n    \"_repr_html_\": \"text/html\",\n    \"_repr_markdown_\": \"text/markdown\",\n    \"_repr_svg_\": \"image/svg+xml\",\n    \"_repr_png_\": \"image/png\",\n    \"_repr_pdf_\": \"application/pdf\",\n    \"_repr_jpeg_\": \"image/jpeg\",\n    \"_repr_latex\": \"text/latex\",\n    \"_repr_json_\": \"application/json\",\n    \"_repr_javascript_\": \"application/javascript\",\n    \"savefig\": \"image/png\",\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 reversed(_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    element = document.getElementById(target)\n    for v in values:\n        _write(element, v, append=append)\n",
-    "event_handling.py": "import inspect\n\nfrom pyodide.ffi.wrappers import add_event_listener\nfrom pyscript 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        elements = document.querySelectorAll(selector)\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            for el in elements:\n                add_event_listener(el, event_type, wrapper)\n        else:\n            for el in elements:\n                add_event_listener(el, event_type, func)\n        return func\n\n    return decorator\n"
+  "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 pyscript.magic_js import RUNNING_IN_WORKER, window, document, sync\nfrom pyscript.display import HTML, display\nfrom pyscript.event_handling import when\n",
+    "display.py": "import base64\nimport html\nimport io\nimport re\n\nfrom pyscript.magic_js import document, window, current_target\n\n_MIME_METHODS = {\n    \"__repr__\": \"text/plain\",\n    \"_repr_html_\": \"text/html\",\n    \"_repr_markdown_\": \"text/markdown\",\n    \"_repr_svg_\": \"image/svg+xml\",\n    \"_repr_png_\": \"image/png\",\n    \"_repr_pdf_\": \"application/pdf\",\n    \"_repr_jpeg_\": \"image/jpeg\",\n    \"_repr_latex\": \"text/latex\",\n    \"_repr_json_\": \"application/json\",\n    \"_repr_javascript_\": \"application/javascript\",\n    \"savefig\": \"image/png\",\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 reversed(_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\n    element = document.getElementById(target)\n    for v in values:\n        _write(element, v, append=append)\n",
+    "event_handling.py": "import inspect\n\nfrom pyodide.ffi.wrappers import add_event_listener\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        if isinstance(selector, str):\n            elements = document.querySelectorAll(selector)\n        else:\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            from pyweb import pydom\n\n            if isinstance(selector, pydom.Element):\n                elements = [selector._js]\n            elif isinstance(selector, pydom.ElementCollection):\n                elements = [el._js for el in selector]\n            else:\n                raise ValueError(\n                    f\"Invalid selector: {selector}. Selector must\"\n                    \" be a string, a pydom.Element or a pydom.ElementCollection.\"\n                )\n\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            for el in elements:\n                add_event_listener(el, event_type, wrapper)\n        else:\n            for el in elements:\n                add_event_listener(el, event_type, func)\n        return func\n\n    return decorator\n",
+    "magic_js.py": "from pyscript.util import NotSupported\nimport js as globalThis\n\nRUNNING_IN_WORKER = not hasattr(globalThis, \"document\")\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    window = polyscript.xworker.window\n    document = window.document\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\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        'pyscript.sync',\n        'pyscript.sync works only when running in a worker')\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
+    "util.py": "class 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        # we set attributes using self.__dict__ to bypass the __setattr__\n        self.__dict__['name'] = name\n        self.__dict__['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"
   },
-  "pyscript.py": "# export only what we want to expose as `pyscript` module\n# but not what is WORKER/MAIN dependent\nfrom _pyscript import window, document, IS_WORKER\nfrom _pyscript.display import HTML, display as _display\nfrom _pyscript.event_handling import when\n\n# this part is needed to disambiguate between MAIN and WORKER\nif IS_WORKER:\n    # in workers the display does not have a default ID\n    # but there is a sync utility from xworker\n    import polyscript as _polyscript\n    from _pyscript import sync\n\n    def current_target():\n        return _polyscript.target\n\nelse:\n    # in MAIN both PyWorker and current element target exist\n    # so these are both exposed and the display will use,\n    # if not specified otherwise, such current element target\n    import _pyscript_js\n\n    PyWorker = _pyscript_js.PyWorker\n\n    def current_target():\n        return _pyscript_js.target\n\n\n# the display provides a handy default target either in MAIN or WORKER\ndef display(*values, target=None, append=True):\n    if target is None:\n        target = current_target()\n\n    return _display(*values, target=target, append=append)\n"
+  "pyweb": {
+    "pydom.py": "import sys\nimport warnings\nfrom functools import cached_property\nfrom typing import Any\n\nfrom pyodide.ffi import JsProxy\nfrom pyscript import display, document, window\n\n# from pyscript import when as _when\n\nalert = window.alert\n\n\nclass BaseElement:\n    def __init__(self, js_element):\n        self._js = js_element\n        self._parent = None\n        self.style = StyleProxy(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, BaseElement) and obj._js == self._js\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._js.parentElement:\n            self._parent = self.__class__(self._js.parentElement)\n\n        return self._parent\n\n    @property\n    def __class(self):\n        return self.__class__ if self.__class__ != PyDom else Element\n\n    def create(self, type_, is_child=True, classes=None, html=None, label=None):\n        js_el = document.createElement(type_)\n        element = self.__class(js_el)\n\n        if classes:\n            for class_ in classes:\n                element.add_class(class_)\n\n        if html is not None:\n            element.html = html\n\n        if label is not None:\n            element.label = label\n\n        if is_child:\n            self.append(element)\n\n        return element\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        elements = self._js.querySelectorAll(selector)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\nclass Element(BaseElement):\n    @property\n    def children(self):\n        return [self.__class__(el) for el in self._js.children]\n\n    def append(self, child):\n        # TODO: this is Pyodide specific for now!!!!!!\n        # if we get passed a JSProxy Element directly we just map it to the\n        # higher level Python element\n        if isinstance(child, JsProxy):\n            return self.append(Element(child))\n\n        elif isinstance(child, Element):\n            self._js.appendChild(child._js)\n\n            return child\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self.append(el)\n\n    # -------- Pythonic Interface to Element -------- #\n    @property\n    def html(self):\n        return self._js.innerHTML\n\n    @html.setter\n    def html(self, value):\n        self._js.innerHTML = value\n\n    @property\n    def content(self):\n        # TODO: This breaks with with standard template elements. Define how to best\n        #       handle this specifica use case. Just not support for now?\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return None\n        return self._js.innerHTML\n\n    @content.setter\n    def content(self, value):\n        # TODO: (same comment as above)\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return\n\n        display(value, target=self.id)\n\n    @property\n    def id(self):\n        return self._js.id\n\n    @id.setter\n    def id(self, value):\n        self._js.id = value\n\n    def clone(self, new_id=None):\n        clone = Element(self._js.cloneNode(True))\n        clone.id = new_id\n\n        return clone\n\n    def remove_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.remove(*classname)\n        else:\n            classList.remove(classname)\n        return self\n\n    def add_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.add(*classname)\n        else:\n            self._js.classList.add(classname)\n        return self\n\n    @property\n    def classes(self):\n        classes = self._js.classList.values()\n        return [x for x in classes]\n\n    def show_me(self):\n        self._js.scrollIntoView()\n\n    def when(self, event, handler):\n        document.when(event, selector=self)(handler)\n\n\nclass StyleProxy(dict):\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    @cached_property\n    def _style(self):\n        return self._element._js.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kws):\n        for k, v in kws.items():\n            self._element._js.style.setProperty(k, v)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following prperties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._js.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._js.style.visibility = value\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self.style = StyleCollection(self)\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a selector\n        # TODO: Write tests!\n        elements = self._element.querySelectorAll(key)\n        return ElementCollection([Element(el) for el in elements])\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n    @property\n    def html(self):\n        return self._get_attribute(\"html\")\n\n    @html.setter\n    def html(self, value):\n        self._set_attribute(\"html\", value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n\nclass DomScope:\n    def __getattr__(self, __name: str) -> Any:\n        element = document[f\"#{__name}\"]\n        if element:\n            return element[0]\n\n\nclass PyDom(BaseElement):\n    # Add objects we want to expose to the DOM namespace since this class instance is being\n    # remapped as \"the module\" itself\n    BaseElement = BaseElement\n    Element = Element\n    ElementCollection = ElementCollection\n\n    def __init__(self):\n        super().__init__(document)\n        self.ids = DomScope()\n        self.body = Element(document.body)\n        self.head = Element(document.head)\n\n    def create(self, type_, parent=None, classes=None, html=None):\n        return super().create(type_, is_child=False)\n\n    def __getitem__(self, key):\n        if isinstance(key, int):\n            indices = range(*key.indices(len(self.list)))\n            return [self.list[i] for i in indices]\n\n        elements = self._js.querySelectorAll(key)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\ndom = PyDom()\n\nsys.modules[__name__] = dom\n"
+  }
 };

package/src/stdlib/pyweb/pydom.py

@@ -0,0 +1,314 @@
+import sys
+import warnings
+from functools import cached_property
+from typing import Any
+
+from pyodide.ffi import JsProxy
+from pyscript import display, document, window
+
+# from pyscript import when as _when
+
+alert = window.alert
+
+
+class BaseElement:
+    def __init__(self, js_element):
+        self._js = js_element
+        self._parent = None
+        self.style = StyleProxy(self)
+
+    def __eq__(self, obj):
+        """Check if the element is the same as the other element by comparing
+        the underlying JS element"""
+        return isinstance(obj, BaseElement) and obj._js == self._js
+
+    @property
+    def parent(self):
+        if self._parent:
+            return self._parent
+
+        if self._js.parentElement:
+            self._parent = self.__class__(self._js.parentElement)
+
+        return self._parent
+
+    @property
+    def __class(self):
+        return self.__class__ if self.__class__ != PyDom else Element
+
+    def create(self, type_, is_child=True, classes=None, html=None, label=None):
+        js_el = document.createElement(type_)
+        element = self.__class(js_el)
+
+        if classes:
+            for class_ in classes:
+                element.add_class(class_)
+
+        if html is not None:
+            element.html = html
+
+        if label is not None:
+            element.label = label
+
+        if is_child:
+            self.append(element)
+
+        return element
+
+    def find(self, selector):
+        """Return an ElementCollection representing all the child elements that
+        match the specified selector.
+
+        Args:
+            selector (str): A string containing a selector expression
+
+        Returns:
+            ElementCollection: A collection of elements matching the selector
+        """
+        elements = self._js.querySelectorAll(selector)
+        if not elements:
+            return None
+        return ElementCollection([Element(el) for el in elements])
+
+
+class Element(BaseElement):
+    @property
+    def children(self):
+        return [self.__class__(el) for el in self._js.children]
+
+    def append(self, child):
+        # TODO: this is Pyodide specific for now!!!!!!
+        # if we get passed a JSProxy Element directly we just map it to the
+        # higher level Python element
+        if isinstance(child, JsProxy):
+            return self.append(Element(child))
+
+        elif isinstance(child, Element):
+            self._js.appendChild(child._js)
+
+            return child
+
+        elif isinstance(child, ElementCollection):
+            for el in child:
+                self.append(el)
+
+    # -------- Pythonic Interface to Element -------- #
+    @property
+    def html(self):
+        return self._js.innerHTML
+
+    @html.setter
+    def html(self, value):
+        self._js.innerHTML = value
+
+    @property
+    def content(self):
+        # TODO: This breaks with with standard template elements. Define how to best
+        #       handle this specifica use case. Just not support for now?
+        if self._js.tagName == "TEMPLATE":
+            warnings.warn(
+                "Content attribute not supported for template elements.", stacklevel=2
+            )
+            return None
+        return self._js.innerHTML
+
+    @content.setter
+    def content(self, value):
+        # TODO: (same comment as above)
+        if self._js.tagName == "TEMPLATE":
+            warnings.warn(
+                "Content attribute not supported for template elements.", stacklevel=2
+            )
+            return
+
+        display(value, target=self.id)
+
+    @property
+    def id(self):
+        return self._js.id
+
+    @id.setter
+    def id(self, value):
+        self._js.id = value
+
+    def clone(self, new_id=None):
+        clone = Element(self._js.cloneNode(True))
+        clone.id = new_id
+
+        return clone
+
+    def remove_class(self, classname):
+        classList = self._js.classList
+        if isinstance(classname, list):
+            classList.remove(*classname)
+        else:
+            classList.remove(classname)
+        return self
+
+    def add_class(self, classname):
+        classList = self._js.classList
+        if isinstance(classname, list):
+            classList.add(*classname)
+        else:
+            self._js.classList.add(classname)
+        return self
+
+    @property
+    def classes(self):
+        classes = self._js.classList.values()
+        return [x for x in classes]
+
+    def show_me(self):
+        self._js.scrollIntoView()
+
+    def when(self, event, handler):
+        document.when(event, selector=self)(handler)
+
+
+class StyleProxy(dict):
+    def __init__(self, element: Element) -> None:
+        self._element = element
+
+    @cached_property
+    def _style(self):
+        return self._element._js.style
+
+    def __getitem__(self, key):
+        return self._style.getPropertyValue(key)
+
+    def __setitem__(self, key, value):
+        self._style.setProperty(key, value)
+
+    def remove(self, key):
+        self._style.removeProperty(key)
+
+    def set(self, **kws):
+        for k, v in kws.items():
+            self._element._js.style.setProperty(k, v)
+
+    # CSS Properties
+    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2
+    # Following prperties automatically generated from the above reference using
+    # tools/codegen_css_proxy.py
+    @property
+    def visible(self):
+        return self._element._js.style.visibility
+
+    @visible.setter
+    def visible(self, value):
+        self._element._js.style.visibility = value
+
+
+class StyleCollection:
+    def __init__(self, collection: "ElementCollection") -> None:
+        self._collection = collection
+
+    def __get__(self, obj, objtype=None):
+        return obj._get_attribute("style")
+
+    def __getitem__(self, key):
+        return self._collection._get_attribute("style")[key]
+
+    def __setitem__(self, key, value):
+        for element in self._collection._elements:
+            element.style[key] = value
+
+    def remove(self, key):
+        for element in self._collection._elements:
+            element.style.remove(key)
+
+
+class ElementCollection:
+    def __init__(self, elements: [Element]) -> None:
+        self._elements = elements
+        self.style = StyleCollection(self)
+
+    def __getitem__(self, key):
+        # If it's an integer we use it to access the elements in the collection
+        if isinstance(key, int):
+            return self._elements[key]
+        # If it's a slice we use it to support slice operations over the elements
+        # in the collection
+        elif isinstance(key, slice):
+            return ElementCollection(self._elements[key])
+
+        # If it's anything else (basically a string) we use it as a selector
+        # TODO: Write tests!
+        elements = self._element.querySelectorAll(key)
+        return ElementCollection([Element(el) for el in elements])
+
+    def __len__(self):
+        return len(self._elements)
+
+    def __eq__(self, obj):
+        """Check if the element is the same as the other element by comparing
+        the underlying JS element"""
+        return isinstance(obj, ElementCollection) and obj._elements == self._elements
+
+    def _get_attribute(self, attr, index=None):
+        if index is None:
+            return [getattr(el, attr) for el in self._elements]
+
+        # As JQuery, when getting an attr, only return it for the first element
+        return getattr(self._elements[index], attr)
+
+    def _set_attribute(self, attr, value):
+        for el in self._elements:
+            setattr(el, attr, value)
+
+    @property
+    def html(self):
+        return self._get_attribute("html")
+
+    @html.setter
+    def html(self, value):
+        self._set_attribute("html", value)
+
+    @property
+    def children(self):
+        return self._elements
+
+    def __iter__(self):
+        yield from self._elements
+
+    def __repr__(self):
+        return f"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}"
+
+
+class DomScope:
+    def __getattr__(self, __name: str) -> Any:
+        element = document[f"#{__name}"]
+        if element:
+            return element[0]
+
+
+class PyDom(BaseElement):
+    # Add objects we want to expose to the DOM namespace since this class instance is being
+    # remapped as "the module" itself
+    BaseElement = BaseElement
+    Element = Element
+    ElementCollection = ElementCollection
+
+    def __init__(self):
+        super().__init__(document)
+        self.ids = DomScope()
+        self.body = Element(document.body)
+        self.head = Element(document.head)
+
+    def create(self, type_, parent=None, classes=None, html=None):
+        return super().create(type_, is_child=False)
+
+    def __getitem__(self, key):
+        if isinstance(key, int):
+            indices = range(*key.indices(len(self.list)))
+            return [self.list[i] for i in indices]
+
+        elements = self._js.querySelectorAll(key)
+        if not elements:
+            return None
+        return ElementCollection([Element(el) for el in elements])
+
+
+dom = PyDom()
+
+sys.modules[__name__] = dom

package/tests/integration/conftest.py

@@ -0,0 +1,184 @@
+import shutil
+import threading
+from http.server import HTTPServer as SuperHTTPServer
+from http.server import SimpleHTTPRequestHandler
+
+import pytest
+
+from .support import Logger
+
+
+def pytest_cmdline_main(config):
+    """
+    If we pass --clear-http-cache, we don't enter the main pytest logic, but
+    use our custom main instead
+    """
+
+    def mymain(config, session):
+        print()
+        print("-" * 20, "SmartRouter HTTP cache", "-" * 20)
+        # unfortunately pytest-cache doesn't offer a public API to selectively
+        # clear the cache, so we need to peek its internal. The good news is
+        # that pytest-cache is very old, stable and robust, so it's likely
+        # that this won't break anytime soon.
+        cache = config.cache
+        base = cache._cachedir.joinpath(cache._CACHE_PREFIX_VALUES, "pyscript")
+        if not base.exists():
+            print("No cache found, nothing to do")
+            return 0
+        #
+        print("Requests found in the cache:")
+        for f in base.rglob("*"):
+            if f.is_file():
+                # requests are saved in dirs named pyscript/http:/foo/bar, let's turn
+                # them into a proper url
+                url = str(f.relative_to(base))
+                url = url.replace(":/", "://")
+                print("    ", url)
+        shutil.rmtree(base)
+        print("Cache cleared")
+        return 0
+
+    if config.option.clear_http_cache:
+        from _pytest.main import wrap_session
+
+        return wrap_session(config, mymain)
+    return None
+
+
+def pytest_configure(config):
+    """
+    THIS IS A WORKAROUND FOR A pytest QUIRK!
+
+    At the moment of writing this conftest defines two new options, --dev and
+    --no-fake-server, but because of how pytest works, they are available only
+    if this is the "root conftest" for the test session.
+
+    This means that if you are in the pyscriptjs directory:
+
+    $ py.test                       # does NOT work
+    $ py.test tests/integration/    # works
+
+    This happens because there is also test py-unit directory, so in the first
+    case the "root conftest" would be tests/conftest.py (which doesn't exist)
+    instead of this.
+
+    There are various workarounds, but for now we can just detect it and
+    inform the user.
+
+    Related StackOverflow answer: https://stackoverflow.com/a/51733980
+    """
+    if not hasattr(config.option, "dev"):
+        msg = """
+        Running a bare "pytest" command from the pyscriptjs directory
+        is not supported. Please use one of the following commands:
+            - pytest tests/integration
+            - pytest tests/py-unit
+            - pytest tests/*
+            - cd tests/integration; pytest
+        """
+        pytest.fail(msg)
+    else:
+        if config.option.dev:
+            config.option.headed = True
+            config.option.no_fake_server = True
+
+
+@pytest.fixture(scope="session")
+def logger():
+    return Logger()
+
+
+def pytest_addoption(parser):
+    parser.addoption(
+        "--no-fake-server",
+        action="store_true",
+        help="Use a real HTTP server instead of http://fakeserver",
+    )
+    parser.addoption(
+        "--dev",
+        action="store_true",
+        help="Automatically open a devtools panel. Implies --headed and --no-fake-server",
+    )
+    parser.addoption(
+        "--clear-http-cache",
+        action="store_true",
+        help="Clear the cache of HTTP requests for SmartRouter",
+    )
+
+
+@pytest.fixture(scope="session")
+def browser_type_launch_args(request):
+    """
+    Override the browser_type_launch_args defined by pytest-playwright to
+    support --devtools.
+
+    NOTE: this has been tested with pytest-playwright==0.3.0. It might break
+    with newer versions of it.
+    """
+    # this calls the "original" fixture defined by pytest_playwright.py
+    launch_options = request.getfixturevalue("browser_type_launch_args")
+    if request.config.option.dev:
+        launch_options["devtools"] = True
+    return launch_options
+
+
+class DevServer(SuperHTTPServer):
+    """
+    Class for wrapper to run SimpleHTTPServer on Thread.
+    Ctrl +Only Thread remains dead when terminated with C.
+    Keyboard Interrupt passes.
+    """
+
+    def __init__(self, base_url, *args, **kwargs):
+        self.base_url = base_url
+        super().__init__(*args, **kwargs)
+
+    def run(self):
+        try:
+            self.serve_forever()
+        except KeyboardInterrupt:
+            pass
+        finally:
+            self.server_close()
+
+
+@pytest.fixture(scope="session")
+def dev_server(logger):
+    class MyHTTPRequestHandler(SimpleHTTPRequestHandler):
+        enable_cors_headers = True
+
+        @classmethod
+        def my_headers(cls):
+            if cls.enable_cors_headers:
+                return {
+                    "Cross-Origin-Embedder-Policy": "require-corp",
+                    "Cross-Origin-Opener-Policy": "same-origin",
+                }
+            return {}
+
+        def end_headers(self):
+            self.send_my_headers()
+            SimpleHTTPRequestHandler.end_headers(self)
+
+        def send_my_headers(self):
+            for k, v in self.my_headers().items():
+                self.send_header(k, v)
+
+        def log_message(self, fmt, *args):
+            logger.log("http_server", fmt % args, color="blue")
+
+    host, port = "localhost", 8080
+    base_url = f"http://{host}:{port}"
+
+    # serve_Run forever under thread
+    server = DevServer(base_url, (host, port), MyHTTPRequestHandler)
+
+    thread = threading.Thread(None, server.run)
+    thread.start()
+
+    yield server  # Transition to test here
+
+    # End thread
+    server.shutdown()
+    thread.join()