Merge branch 'main' into poc_ui_blocks

for more information, see https://pre-commit.ci

pyscript.core/src/stdlib.js

@@ -37,7 +37,7 @@ const python = [
     "_path = None",
 ];
 
-const ignore = new Ignore(python, "./pyweb");
+const ignore = new Ignore(python, "-");
 
 const write = (base, literal) => {
     for (const [key, value] of entries(literal)) {

pyscript.core/src/stdlib/pyscript/event_handling.py

@@ -47,13 +47,14 @@ def when(event_type=None, selector=None):
                 wrapper = func
 
         except AttributeError:
-            # TODO: this is currently an quick hack to get micropython working but we need
-            #       to actually properly replace inspect.signature with something else
+            # TODO: this is very ugly hack to get micropython working because inspect.signature
+            #       doesn't exist, but we need to actually properly replace inspect.signature.
+            #       It may be actually better to not try any magic for now and raise the error
             def wrapper(*args, **kwargs):
                 try:
                     return func(*args, **kwargs)
                 except TypeError as e:
-                    if "takes 0 positional arguments" in str(e):
+                    if "takes" in str(e) and "positional arguments" in str(e):
                         return func()
 
                     raise

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

@@ -1 +1,2 @@
+from .pydom import JSProperty
 from .pydom import dom as pydom

pyscript.core/src/stdlib/pyweb/pydom.py

@@ -1,3 +1,5 @@
+import inspect
+
 try:
     from typing import Any
 except ImportError:
@@ -34,6 +36,23 @@ from pyscript import display, document, window
 alert = window.alert
 
 
+class JSProperty:
+    """JS property descriptor that directly maps to the property with the same
+    name in the underlying JS component."""
+
+    def __init__(self, name: str, allow_nones: bool = False):
+        self.name = name
+        self.allow_nones = allow_nones
+
+    def __get__(self, obj, objtype=None):
+        return getattr(obj._js, self.name)
+
+    def __set__(self, obj, value):
+        if not self.allow_nones and value is None:
+            return
+        setattr(obj._js, self.name, value)
+
+
 class BaseElement:
     def __init__(self, js_element):
         self._js = js_element
@@ -104,7 +123,7 @@ class Element(BaseElement):
         # 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):
+        if inspect.isclass(JsProxy) and isinstance(child, JsProxy):
             return self.append(Element(child))
 
         elif isinstance(child, Element):

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

@@ -0,0 +1 @@
+from . import elements

pyscript.core/src/stdlib/pyweb/ui/elements.py

@@ -0,0 +1,947 @@
+import inspect
+import sys
+
+from pyscript import document, when, window
+from pyweb import JSProperty, pydom
+
+#: A flag to show if MicroPython is the current Python interpreter.
+is_micropython = "MicroPython" in sys.version
+
+
+def getmembers_static(cls):
+    """Cross-interpreter implementation of inspect.getmembers_static."""
+
+    if is_micropython:  # pragma: no cover
+        return [(name, getattr(cls, name)) for name, _ in inspect.getmembers(cls)]
+
+    return inspect.getmembers_static(cls)
+
+
+class ElementBase(pydom.Element):
+    tag = "div"
+
+    # GLOBAL ATTRIBUTES
+    # These are attribute that all elements have (this list is a subset of the official one)
+    # We are trying to capture the most used ones
+    accesskey = JSProperty("accesskey")
+    autofocus = JSProperty("autofocus")
+    autocapitalize = JSProperty("autocapitalize")
+    className = JSProperty("className")
+    contenteditable = JSProperty("contenteditable")
+    draggable = JSProperty("draggable")
+    enterkeyhint = JSProperty("enterkeyhint")
+    hidden = JSProperty("hidden")
+    id = JSProperty("id")
+    lang = JSProperty("lang")
+    nonce = JSProperty("nonce")
+    part = JSProperty("part")
+    popover = JSProperty("popover")
+    slot = JSProperty("slot")
+    spellcheck = JSProperty("spellcheck")
+    tabindex = JSProperty("tabindex")
+    title = JSProperty("title")
+    translate = JSProperty("translate")
+    virtualkeyboardpolicy = JSProperty("virtualkeyboardpolicy")
+
+    def __init__(self, style=None, **kwargs):
+        super().__init__(document.createElement(self.tag))
+
+        # set all the style properties provided in input
+        if isinstance(style, dict):
+            for key, value in style.items():
+                self.style[key] = value
+        elif style is None:
+            pass
+        else:
+            raise ValueError(
+                f"Style should be a dictionary, received {style} (type {type(style)}) instead."
+            )
+
+        # IMPORTANT!!! This is used to auto-harvest all input arguments and set them as properties
+        self._init_properties(**kwargs)
+
+    def _init_properties(self, **kwargs):
+        """Set all the properties (of type JSProperties) provided in input as properties
+        of the class instance.
+
+        Args:
+            **kwargs: The properties to set
+        """
+        # Look at all the properties of the class and see if they were provided in kwargs
+        for attr_name, attr in getmembers_static(self.__class__):
+            # For each one, actually check if it is a property of the class and set it
+            if isinstance(attr, JSProperty) and attr_name in kwargs:
+                try:
+                    setattr(self, attr_name, kwargs[attr_name])
+                except Exception as e:
+                    print(f"Error setting {attr_name} to {kwargs[attr_name]}: {e}")
+                    raise
+
+
+class TextElementBase(ElementBase):
+    def __init__(self, content=None, style=None, **kwargs):
+        super().__init__(style=style, **kwargs)
+
+        # If it's an element, append the element
+        if isinstance(content, pydom.Element):
+            self.append(content)
+        # If it's a list of elements
+        elif isinstance(content, list):
+            for item in content:
+                self.append(item)
+        # If the content wasn't set just ignore
+        elif content is None:
+            pass
+        else:
+            # Otherwise, set content as the html of the element
+            self.html = content
+
+
+# IMPORTANT: For all HTML components defined below, we are not mapping all
+# available attributes, just the global and the most common ones.
+# If you need to access a specific attribute, you can always use the `_js.<attribute>`
+class a(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"""
+
+    tag = "a"
+
+    download = JSProperty("download")
+    href = JSProperty("href")
+    referrerpolicy = JSProperty("referrerpolicy")
+    rel = JSProperty("rel")
+    target = JSProperty("target")
+    type = JSProperty("type")
+
+
+class abbr(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr"""
+
+    tag = "abbr"
+
+
+class address(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address"""
+
+    tag = "address"
+
+
+class area(ElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area"""
+
+    tag = "area"
+
+    alt = JSProperty("alt")
+    coords = JSProperty("coords")
+    download = JSProperty("download")
+    href = JSProperty("href")
+    ping = JSProperty("ping")
+    referrerpolicy = JSProperty("referrerpolicy")
+    rel = JSProperty("rel")
+    shape = JSProperty("shape")
+    target = JSProperty("target")
+
+
+class article(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"""
+
+    tag = "article"
+
+
+class aside(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"""
+
+    tag = "aside"
+
+
+class audio(ElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"""
+
+    tag = "audio"
+
+    autoplay = JSProperty("autoplay")
+    controls = JSProperty("controls")
+    controlslist = JSProperty("controlslist")
+    crossorigin = JSProperty("crossorigin")
+    disableremoteplayback = JSProperty("disableremoteplayback")
+    loop = JSProperty("loop")
+    muted = JSProperty("muted")
+    preload = JSProperty("preload")
+    src = JSProperty("src")
+
+
+class b(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b"""
+
+    tag = "b"
+
+
+class blockquote(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"""
+
+    tag = "blockquote"
+
+    cite = JSProperty("cite")
+
+
+class br(ElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br"""
+
+    tag = "br"
+
+
+class button(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"""
+
+    tag = "button"
+
+    autofocus = JSProperty("autofocus")
+    disabled = JSProperty("disabled")
+    form = JSProperty("form")
+    formaction = JSProperty("formaction")
+    formenctype = JSProperty("formenctype")
+    formmethod = JSProperty("formmethod")
+    formnovalidate = JSProperty("formnovalidate")
+    formtarget = JSProperty("formtarget")
+    name = JSProperty("name")
+    type = JSProperty("type")
+    value = JSProperty("value")
+
+
+class canvas(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"""
+
+    tag = "canvas"
+
+    height = JSProperty("height")
+    width = JSProperty("width")
+
+
+class caption(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption"""
+
+    tag = "caption"
+
+
+class cite(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite"""
+
+    tag = "cite"
+
+
+class code(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code"""
+
+    tag = "code"
+
+
+class data(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data"""
+
+    tag = "data"
+
+    value = JSProperty("value")
+
+
+class datalist(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"""
+
+    tag = "datalist"
+
+
+class dd(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd"""
+
+    tag = "dd"
+
+
+class del_(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del"""
+
+    tag = "del"
+
+    cite = JSProperty("cite")
+    datetime = JSProperty("datetime")
+
+
+class details(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"""
+
+    tag = "details"
+
+    open = JSProperty("open")
+
+
+class dialog(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"""
+
+    tag = "dialog"
+
+    open = JSProperty("open")
+
+
+class div(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"""
+
+    tag = "div"
+
+
+class dl(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl"""
+
+    tag = "dl"
+
+    value = JSProperty("value")
+
+
+class dt(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt"""
+
+    tag = "dt"
+
+
+class em(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em"""
+
+    tag = "em"
+
+
+class embed(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed"""
+
+    tag = "embed"
+
+    height = JSProperty("height")
+    src = JSProperty("src")
+    type = JSProperty("type")
+    width = JSProperty("width")
+
+
+class fieldset(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset"""
+
+    tag = "fieldset"
+
+    disabled = JSProperty("disabled")
+    form = JSProperty("form")
+    name = JSProperty("name")
+
+
+class figcaption(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption"""
+
+    tag = "figcaption"
+
+
+class figure(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure"""
+
+    tag = "figure"
+
+
+class footer(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer"""
+
+    tag = "footer"
+
+
+class form(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"""
+
+    tag = "form"
+
+    accept_charset = JSProperty("accept-charset")
+    action = JSProperty("action")
+    autocapitalize = JSProperty("autocapitalize")
+    autocomplete = JSProperty("autocomplete")
+    enctype = JSProperty("enctype")
+    name = JSProperty("name")
+    method = JSProperty("method")
+    nonvalidate = JSProperty("nonvalidate")
+    rel = JSProperty("rel")
+    target = JSProperty("target")
+
+
+class h1(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1"""
+
+    tag = "h1"
+
+
+class h2(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2"""
+
+    tag = "h2"
+
+
+class h3(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3"""
+
+    tag = "h3"
+
+
+class h4(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4"""
+
+    tag = "h4"
+
+
+class h5(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5"""
+
+    tag = "h5"
+
+
+class h6(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6"""
+
+    tag = "h6"
+
+
+class header(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"""
+
+    tag = "header"
+
+
+class hgroup(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup"""
+
+    tag = "hgroup"
+
+
+class hr(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"""
+
+    tag = "hr"
+
+
+class i(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i"""
+
+    tag = "i"
+
+
+class iframe(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe"""
+
+    tag = "iframe"
+
+    allow = JSProperty("allow")
+    allowfullscreen = JSProperty("allowfullscreen")
+    height = JSProperty("height")
+    loading = JSProperty("loading")
+    name = JSProperty("name")
+    referrerpolicy = JSProperty("referrerpolicy")
+    sandbox = JSProperty("sandbox")
+    src = JSProperty("src")
+    srcdoc = JSProperty("srcdoc")
+    width = JSProperty("width")
+
+
+class img(ElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"""
+
+    tag = "img"
+
+    alt = JSProperty("alt")
+    crossorigin = JSProperty("crossorigin")
+    decoding = JSProperty("decoding")
+    fetchpriority = JSProperty("fetchpriority")
+    height = JSProperty("height")
+    ismap = JSProperty("ismap")
+    loading = JSProperty("loading")
+    referrerpolicy = JSProperty("referrerpolicy")
+    sizes = JSProperty("sizes")
+    src = JSProperty("src")
+    width = JSProperty("width")
+
+
+# NOTE: Input is a reserved keyword in Python, so we use input_ instead
+class input_(ElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"""
+
+    tag = "input"
+
+    accept = JSProperty("accept")
+    alt = JSProperty("alt")
+    autofocus = JSProperty("autofocus")
+    capture = JSProperty("capture")
+    checked = JSProperty("checked")
+    dirname = JSProperty("dirname")
+    disabled = JSProperty("disabled")
+    form = JSProperty("form")
+    formaction = JSProperty("formaction")
+    formenctype = JSProperty("formenctype")
+    formmethod = JSProperty("formmethod")
+    formnovalidate = JSProperty("formnovalidate")
+    formtarget = JSProperty("formtarget")
+    height = JSProperty("height")
+    list = JSProperty("list")
+    max = JSProperty("max")
+    maxlength = JSProperty("maxlength")
+    min = JSProperty("min")
+    minlength = JSProperty("minlength")
+    multiple = JSProperty("multiple")
+    name = JSProperty("name")
+    pattern = JSProperty("pattern")
+    placeholder = JSProperty("placeholder")
+    popovertarget = JSProperty("popovertarget")
+    popovertargetaction = JSProperty("popovertargetaction")
+    readonly = JSProperty("readonly")
+    required = JSProperty("required")
+    size = JSProperty("size")
+    src = JSProperty("src")
+    step = JSProperty("step")
+    type = JSProperty("type")
+    value = JSProperty("value")
+    width = JSProperty("width")
+
+
+class ins(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins"""
+
+    tag = "ins"
+
+    cite = JSProperty("cite")
+    datetime = JSProperty("datetime")
+
+
+class kbd(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd"""
+
+    tag = "kbd"
+
+
+class label(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"""
+
+    tag = "label"
+
+    for_ = JSProperty("for")
+
+
+class legend(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend"""
+
+    tag = "legend"
+
+
+class li(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"""
+
+    tag = "li"
+
+    value = JSProperty("value")
+
+
+class link(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"""
+
+    tag = "link"
+
+    as_ = JSProperty("as")
+    crossorigin = JSProperty("crossorigin")
+    disabled = JSProperty("disabled")
+    fetchpriority = JSProperty("fetchpriority")
+    href = JSProperty("href")
+    imagesizes = JSProperty("imagesizes")
+    imagesrcset = JSProperty("imagesrcset")
+    integrity = JSProperty("integrity")
+    media = JSProperty("media")
+    rel = JSProperty("rel")
+    referrerpolicy = JSProperty("referrerpolicy")
+    sizes = JSProperty("sizes")
+    title = JSProperty("title")
+    type = JSProperty("type")
+
+
+class main(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"""
+
+    tag = "main"
+
+
+class map_(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map"""
+
+    tag = "map"
+
+    name = JSProperty("name")
+
+
+class mark(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark"""
+
+    tag = "mark"
+
+
+class menu(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"""
+
+    tag = "menu"
+
+
+class meter(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter"""
+
+    tag = "meter"
+
+    form = JSProperty("form")
+    high = JSProperty("high")
+    low = JSProperty("low")
+    max = JSProperty("max")
+    min = JSProperty("min")
+    optimum = JSProperty("optimum")
+    value = JSProperty("value")
+
+
+class nav(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"""
+
+    tag = "nav"
+
+
+class object_(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object"""
+
+    tag = "object"
+
+    data = JSProperty("data")
+    form = JSProperty("form")
+    height = JSProperty("height")
+    name = JSProperty("name")
+    type = JSProperty("type")
+    usemap = JSProperty("usemap")
+    width = JSProperty("width")
+
+
+class ol(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol"""
+
+    tag = "ol"
+
+    reversed = JSProperty("reversed")
+    start = JSProperty("start")
+    type = JSProperty("type")
+
+
+class optgroup(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup"""
+
+    tag = "optgroup"
+
+    disabled = JSProperty("disabled")
+    label = JSProperty("label")
+
+
+class option(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"""
+
+    tag = "option"
+
+    disabled = JSProperty("value")
+    label = JSProperty("label")
+    selected = JSProperty("selected")
+    value = JSProperty("value")
+
+
+class output(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output"""
+
+    tag = "output"
+
+    for_ = JSProperty("for")
+    form = JSProperty("form")
+    name = JSProperty("name")
+
+
+class p(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"""
+
+    tag = "p"
+
+
+class picture(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture"""
+
+    tag = "picture"
+
+
+class pre(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"""
+
+    tag = "pre"
+
+
+class progress(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"""
+
+    tag = "progress"
+
+    max = JSProperty("max")
+    value = JSProperty("value")
+
+
+class q(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"""
+
+    tag = "q"
+
+    cite = JSProperty("cite")
+
+
+class s(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s"""
+
+    tag = "s"
+
+
+class script(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"""
+
+    tag = "script"
+
+    # Let's add async manually since it's a reserved keyword in Python
+    async_ = JSProperty("async")
+    blocking = JSProperty("blocking")
+    crossorigin = JSProperty("crossorigin")
+    defer = JSProperty("defer")
+    fetchpriority = JSProperty("fetchpriority")
+    integrity = JSProperty("integrity")
+    nomodule = JSProperty("nomodule")
+    nonce = JSProperty("nonce")
+    referrerpolicy = JSProperty("referrerpolicy")
+    src = JSProperty("src")
+    type = JSProperty("type")
+
+
+class section(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"""
+
+    tag = "section"
+
+
+class select(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select"""
+
+    tag = "select"
+
+
+class small(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small"""
+
+    tag = "small"
+
+
+class source(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source"""
+
+    tag = "source"
+
+    media = JSProperty("media")
+    sizes = JSProperty("sizes")
+    src = JSProperty("src")
+    srcset = JSProperty("srcset")
+    type = JSProperty("type")
+
+
+class span(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"""
+
+    tag = "span"
+
+
+class strong(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong"""
+
+    tag = "strong"
+
+
+class style(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style"""
+
+    tag = "style"
+
+    blocking = JSProperty("blocking")
+    media = JSProperty("media")
+    nonce = JSProperty("nonce")
+    title = JSProperty("title")
+
+
+class sub(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub"""
+
+    tag = "sub"
+
+
+class summary(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"""
+
+    tag = "summary"
+
+
+class sup(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup"""
+
+    tag = "sup"
+
+
+class table(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"""
+
+    tag = "table"
+
+
+class tbody(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody"""
+
+    tag = "tbody"
+
+
+class td(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"""
+
+    tag = "td"
+
+    colspan = JSProperty("colspan")
+    headers = JSProperty("headers")
+    rowspan = JSProperty("rowspan")
+
+
+class template(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"""
+
+    tag = "template"
+
+    shadowrootmode = JSProperty("shadowrootmode")
+
+
+class textarea(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"""
+
+    tag = "textarea"
+
+    autocapitalize = JSProperty("autocapitalize")
+    autocomplete = JSProperty("autocomplete")
+    autofocus = JSProperty("autofocus")
+    cols = JSProperty("cols")
+    dirname = JSProperty("dirname")
+    disabled = JSProperty("disabled")
+    form = JSProperty("form")
+    maxlength = JSProperty("maxlength")
+    minlength = JSProperty("minlength")
+    name = JSProperty("name")
+    placeholder = JSProperty("placeholder")
+    readonly = JSProperty("readonly")
+    required = JSProperty("required")
+    rows = JSProperty("rows")
+    spellcheck = JSProperty("spellcheck")
+    wrap = JSProperty("wrap")
+
+
+class tfoot(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot"""
+
+    tag = "tfoot"
+
+
+class th(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"""
+
+    tag = "th"
+
+
+class thead(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead"""
+
+    tag = "thead"
+
+
+class time(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time"""
+
+    tag = "time"
+
+    datetime = JSProperty("datetime")
+
+
+class title(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title"""
+
+    tag = "title"
+
+
+class tr(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr"""
+
+    tag = "tr"
+
+    abbr = JSProperty("abbr")
+    colspan = JSProperty("colspan")
+    headers = JSProperty("headers")
+    rowspan = JSProperty("rowspan")
+    scope = JSProperty("scope")
+
+
+class track(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track"""
+
+    tag = "track"
+
+    default = JSProperty("default")
+    kind = JSProperty("kind")
+    label = JSProperty("label")
+    src = JSProperty("src")
+    srclang = JSProperty("srclang")
+
+
+class u(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u"""
+
+    tag = "u"
+
+
+class ul(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"""
+
+    tag = "ul"
+
+
+class var(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var"""
+
+    tag = "var"
+
+
+class video(TextElementBase):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"""
+
+    tag = "video"
+
+    autoplay = JSProperty("autoplay")
+    controls = JSProperty("controls")
+    crossorigin = JSProperty("crossorigin")
+    disablepictureinpicture = JSProperty("disablepictureinpicture")
+    disableremoteplayback = JSProperty("disableremoteplayback")
+    height = JSProperty("height")
+    loop = JSProperty("loop")
+    muted = JSProperty("muted")
+    playsinline = JSProperty("playsinline")
+    poster = JSProperty("poster")
+    preload = JSProperty("preload")
+    src = JSProperty("src")
+    width = JSProperty("width")
+
+
+# Custom Elements
+class grid(TextElementBase):
+    tag = "div"
+
+    def __init__(self, layout, content=None, gap=None, **kwargs):
+        super().__init__(content, **kwargs)
+        self.style["display"] = "grid"
+        self.style["grid-template-columns"] = layout
+
+        # TODO: This should be a property
+        if not gap is None:
+            self.style["gap"] = gap

pyscript.core/test/pydom.html

@@ -8,7 +8,7 @@
   <script type="module" src="../dist/core.js"></script>
 </head>
 <body>
-  <script type="py" src="pydom.py"></script>
+  <script type="mpy" src="pydom.py"></script>
 
   <button id="just-a-button">Click For Time</button>
   <button id="color-button">Click For Color</button>

pyscript.core/test/pydom.py

@@ -1,10 +1,13 @@
 import random
+import sys
 import time
 from datetime import datetime as dt
 
 from pyscript import display, when
 from pyweb import pydom
 
+display(sys.version, target="system-info")
+
 
 @when("click", "#just-a-button")
 def on_click():

pyscript.core/test/pydom_mp.html

@@ -10,6 +10,8 @@
 <body>
   <script type="mpy" src="pydom.py"></script>
 
+  <div id="system-info"></div>
+
   <button id="just-a-button">Click For Time</button>
   <button id="color-button">Click For Color</button>
   <button id="color-reset-button">Reset Color</button>

pyscript.core/test/ui/demo.py

@@ -0,0 +1,251 @@
+try:
+    from textwrap import dedent
+except ImportError:
+    dedent = lambda x: x
+
+import examples
+import shoelace
+import styles
+from markdown import markdown
+from pyscript import when, window
+from pyweb import pydom
+from pyweb.ui import elements as el
+from pyweb.ui.elements import a, button, div, grid, h1, h2, h3
+
+MAIN_PAGE_MARKDOWN = dedent(
+    """
+    ## What is pyweb.ui?
+    Pyweb UI is a totally immagnary exercise atm but..... imagine it is a Python library that allows you to create
+                            web applications using Python only.
+
+    It is based on base HTML/JS components but is extensible, for instance, it can have a [Shoelace](https://shoelace.style/) backend...
+
+    PyWeb is a Python library that allows you to create web applications using Python only.
+
+    ## What can I do with Pyweb.ui?
+
+    You can create web applications using Python only.
+    """
+)
+
+# First thing we do is to load all the external resources we need
+shoelace.load_resources()
+
+
+# Let's define some convenience functions first
+def create_component_details(component_label, component):
+    """Create a component details card.
+
+    Args:
+        component (str): The name of the component to create.
+
+    Returns:
+        the component created
+
+    """
+    # Get the example from the examples catalog
+    example = component["instance"]
+    details = (
+        getattr(example, "__doc__", "")
+        or f"Details missing for component {component_label}"
+    )
+
+    return div(
+        [
+            # Title and description (description is picked from the class docstring)
+            h1(component_label),
+            markdown(details),
+            # Example section
+            h2("Example:"),
+            create_component_example(component["instance"], component["code"]),
+        ],
+        style={"margin": "20px"},
+    )
+
+
+def add_component_section(component_label, component, parent_div):
+    """Create a link to a component and add it to the left panel.
+
+    Args:
+        component (str): The name of the component to add.
+
+    Returns:
+        the component created
+
+    """
+    # Create the component link element
+    div_ = div(
+        a(component_label, href="#"),
+        style={"display": "block", "text-align": "center", "margin": "auto"},
+    )
+
+    # Create a handler that opens the component details when the link is clicked
+    @when("click", div_)
+    def _change():
+        new_main = create_component_details(component_label, component)
+        main_area.html = ""
+        main_area.append(new_main)
+
+    # Add the new link element to the parent div (left panel)
+    parent_div.append(div_)
+    return div_
+
+
+def create_component_example(widget, code):
+    """Create a grid div with the widget on the left side and the relate code
+    on the right side.
+
+    Args:
+        widget (ElementBase): The widget to add to the grid.
+        code (str): The code to add to the grid.
+
+    Returns:
+        the grid created
+
+    """
+    # Create the grid that splits the window in two columns (25% and 75%)
+    grid_ = grid("29% 2% 74%")
+
+    # Add the widget
+    grid_.append(div(widget, style=styles.STYLE_EXAMPLE_INSTANCE))
+
+    # Add the code div
+    widget_code = markdown(dedent(f"""```python\n{code}\n```"""))
+    grid_.append(shoelace.Divider(vertical=True))
+    grid_.append(div(widget_code, style=styles.STYLE_CODE_BLOCK))
+
+    return grid_
+
+
+def create_main_area():
+    """Create the main area of the right side of page, with the description of the
+    demo itself and how to use it.
+
+    Returns:
+        the main area
+
+    """
+    div_ = div(
+        [
+            h1("Welcome to PyWeb UI!", style={"text-align": "center"}),
+            markdown(MAIN_PAGE_MARKDOWN),
+        ]
+    )
+
+    main = el.main(
+        style={
+            "padding-top": "4rem",
+            "padding-bottom": "7rem",
+            "max-width": "52rem",
+            "margin-left": "auto",
+            "margin-right": "auto",
+            "padding-left": "1.5rem",
+            "padding-right": "1.5rem",
+            "width": "100%",
+        }
+    )
+    main.append(div_)
+
+    return main
+
+
+def create_basic_components_page(label, kit_name):
+    """Create the basic components page.
+
+    Returns:
+        the main area
+
+    """
+    div_ = div(h2(label))
+
+    for component_label, component in examples.kits[kit_name].items():
+        div_.append(h3(component_label))
+        div_.append(create_component_example(component["instance"], component["code"]))
+
+    return div_
+
+
+# ********** CREATE ALL THE LAYOUT **********
+
+main_grid = grid("140px 20px auto", style={"min-height": "100%"})
+
+# ********** MAIN PANEL **********
+main_area = create_main_area()
+
+
+def write_to_main(content):
+    main_area.html = ""
+    main_area.append(content)
+
+
+def restore_home():
+    write_to_main(create_main_area())
+
+
+def basic_components():
+    write_to_main(
+        create_basic_components_page(label="Basic Components", kit_name="elements")
+    )
+    # Make sure we highlight the code
+    window.hljs.highlightAll()
+
+
+def markdown_components():
+    write_to_main(create_basic_components_page(label="", kit_name="markdown"))
+
+
+def create_new_section(title, parent_div):
+    basic_components_text = h3(
+        title, style={"text-align": "left", "margin": "20px auto 0"}
+    )
+    parent_div.append(basic_components_text)
+    parent_div.append(
+        shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"})
+    )
+    return basic_components_text
+
+
+# ********** LEFT PANEL **********
+left_div = div()
+left_panel_title = h1(
+    "PyWeb.UI", style={"text-align": "center", "margin": "20px auto 30px"}
+)
+left_div.append(left_panel_title)
+left_div.append(shoelace.Divider(style={"margin-bottom": "30px"}))
+# Let's map the creation of the main area to when the user clocks on "Components"
+when("click", left_panel_title)(restore_home)
+
+# BASIC COMPONENTS
+basic_components_text = h3(
+    "Basic Components",
+    style={"text-align": "left", "margin": "20px auto 0", "cursor": "pointer"},
+)
+left_div.append(basic_components_text)
+left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
+# Let's map the creation of the main area to when the user clocks on "Components"
+when("click", basic_components_text)(basic_components)
+
+# MARKDOWN COMPONENTS
+markdown_title = create_new_section("Markdown", left_div)
+when("click", markdown_title)(markdown_components)
+
+
+# SHOELACE COMPONENTS
+shoe_components_text = h3(
+    "Shoe Components", style={"text-align": "left", "margin": "20px auto 0"}
+)
+left_div.append(shoe_components_text)
+left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
+
+# Create the links to the components on th left panel
+print("SHOELACE EXAMPLES", examples.kits["shoelace"])
+for component_label, component in examples.kits["shoelace"].items():
+    add_component_section(component_label, component, left_div)
+
+left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
+left_div.append(a("Gallery", href="gallery.html", style={"text-align": "left"}))
+# ********** ADD LEFT AND MAIN PANEL TO MAIN **********
+main_grid.append(left_div)
+main_grid.append(shoelace.Divider(vertical=True))
+main_grid.append(main_area)
+pydom.body.append(main_grid)

pyscript.core/test/ui/examples.py

@@ -0,0 +1,300 @@
+from markdown import markdown
+from pyscript import when, window
+from pyweb import pydom
+from pyweb.ui.elements import (
+    a,
+    br,
+    button,
+    code,
+    div,
+    grid,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    img,
+    input_,
+    p,
+    small,
+    strong,
+)
+from shoelace import (
+    Alert,
+    Button,
+    Card,
+    CopyButton,
+    Details,
+    Dialog,
+    Divider,
+    Icon,
+    Radio,
+    RadioGroup,
+    Range,
+    Rating,
+    RelativeTime,
+    Skeleton,
+    Spinner,
+    Switch,
+    Tag,
+    Textarea,
+)
+
+LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+details_code = """
+LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+Details(LOREM_IPSUM, summary="Try me")
+"""
+example_dialog_close_btn = Button("Close")
+example_dialog = Dialog(div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me")
+example_dialog_btn = Button("Open Dialog")
+
+
+def toggle_dialog():
+    example_dialog.open = not (example_dialog.open)
+
+
+when("click", example_dialog_btn)(toggle_dialog)
+when("click", example_dialog_close_btn)(toggle_dialog)
+
+pydom.body.append(example_dialog)
+
+
+# ELEMENTS
+
+# Button
+btn = button("Click me!")
+when("click", btn)(lambda: window.alert("Clicked!"))
+
+# Inputs
+inputs_div = div()
+inputs_code = []
+for input_type in [
+    "text",
+    "password",
+    "email",
+    "number",
+    "date",
+    "time",
+    "color",
+    "range",
+]:
+    inputs_div.append(input_(type=input_type, style={"display": "block"}))
+    inputs_code.append(f"input_(type='{input_type}')")
+
+
+headers_div = div()
+headers_code = []
+for header in [h1, h2, h3, h4, h5, h6]:
+    headers_div.append(header(f"{header.tag.upper()} header"))
+    headers_code.append(f'{header.tag}("{header.tag.upper()} header")')
+headers_code = "\n".join(headers_code)
+
+rich_input = input_(
+    type="text",
+    name="some name",
+    autofocus=True,
+    pattern="\w{3,16}",
+    placeholder="add text with > 3 chars",
+    required=True,
+    size="20",
+)
+inputs_div.append(rich_input)
+inputs_code.append("# You can create inputs with more options like")
+inputs_code.append("# this by passing properties as kwargs")
+inputs_code.append(
+    "input_(type='text', name='some name', autofocus=True, pattern='\\w{3,16}', placeholder='add text with > 3 chars', required=True, size='20')"
+)
+inputs_code = "\n".join(inputs_code)
+
+MARKDOWN_EXAMPLE = """# This is a header
+
+This is a ~~paragraph~~ text with **bold** and *italic* text in it!
+"""
+
+kits = {
+    "shoelace": {
+        "Alert": {
+            "instance": Alert(
+                "This is a standard alert. You can customize its content and even the icon."
+            ),
+            "code": "Alert('This is a standard alert. You can customize its content and even the icon.'",
+        },
+        "Icon": {
+            "instance": Icon(name="heart"),
+            "code": 'Icon(name="heart")',
+        },
+        "Button": {
+            "instance": Button("Try me"),
+            "code": 'Button("Try me")',
+        },
+        "Card": {
+            "instance": Card(
+                p("This is a cool card!"),
+                image="https://pyscript.net/assets/images/pyscript-sticker-black.svg",
+                footer=div([Button("More Info"), Rating()]),
+            ),
+            "code": """
+Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=div([Button("More Info"), Rating()]))
+""",
+        },
+        "Details": {
+            "instance": Details(LOREM_IPSUM, summary="Try me"),
+            "code": 'Details(LOREM_IPSUM, summary="Try me")',
+        },
+        "Dialog": {
+            "instance": example_dialog_btn,
+            "code": 'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")',
+        },
+        "Divider": {
+            "instance": Divider(),
+            "code": "Divider()",
+        },
+        "Rating": {
+            "instance": Rating(),
+            "code": "Rating()",
+        },
+        "Radio": {
+            "instance": Radio("Option 42"),
+            "code": code('Radio("Option 42")'),
+        },
+        "Radio Group": {
+            "instance": RadioGroup(
+                [
+                    Radio("radio 1", name="radio 1", value=1, style={"margin": "20px"}),
+                    Radio("radio 2", name="radio 2", value=2, style={"margin": "20px"}),
+                    Radio("radio 3", name="radio 3", value=3, style={"margin": "20px"}),
+                ],
+                label="Select an option",
+            ),
+            "code": code(
+                """
+                RadioGroup([Radio("radio 1", name="radio 1", value=1, style={"margin": "20px"}),
+                                     Radio("radio 2", name="radio 2", value=2, style={"margin": "20px"}),
+                                     Radio("radio 3", name="radio 3", value=3, style={"margin": "20px"})],
+                                    label="Select an option"),"""
+            ),
+        },
+        "CopyButton": {
+            "instance": CopyButton(
+                value="PyShoes!",
+                copy_label="Copy me!",
+                sucess_label="Copied, check your clipboard!",
+                error_label="Oops, something went wrong!",
+                feedback_timeout=2000,
+                tooltip_placement="top",
+            ),
+            "code": 'CopyButton(value="PyShoes!", copy_label="Copy me!", sucess_label="Copied, check your clipboard!", error_label="Oops, something went wrong!", feedback_timeout=2000, tooltip_placement="top")',
+        },
+        "Skeleton": {
+            "instance": Skeleton(effect="pulse"),
+            "code": "Skeleton(effect='pulse')",
+        },
+        "Spinner": {
+            "instance": Spinner(),
+            "code": "Spinner()",
+        },
+        "Switch": {
+            "instance": Switch(name="switch", size="large"),
+            "code": 'Switch(name="switch", size="large")',
+        },
+        "Textarea": {
+            "instance": Textarea(
+                name="textarea",
+                label="Textarea",
+                size="medium",
+                help_text="This is a textarea",
+                resize="auto",
+            ),
+            "code": 'Textarea(name="textarea", label="Textarea", size="medium", help_text="This is a textarea", resize="auto")',
+        },
+        "Tag": {
+            "instance": Tag("Tag", variant="primary", size="medium"),
+            "code": 'Tag("Tag", variant="primary", size="medium")',
+        },
+        "Range": {
+            "instance": Range(min=0, max=100, value=50),
+            "code": "Range(min=0, max=100, value=50)",
+        },
+        "RelativeTime": {
+            "instance": RelativeTime(date="2021-01-01T00:00:00Z"),
+            "code": 'RelativeTime(date="2021-01-01T00:00:00Z")',
+        },
+        # "SplitPanel": {
+        #     "instance": SplitPanel(
+        #         div("First panel"), div("Second panel"), orientation="vertical"
+        #     ),
+        #     "code": code(
+        #         'SplitPanel(div("First panel"), div("Second panel"), orientation="vertical")'
+        #     ),
+        # },
+    },
+    "elements": {
+        "button": {
+            "instance": btn,
+            "code": """btn = button("Click me!")
+when('click', btn)(lambda: window.alert("Clicked!"))
+parentdiv.append(btn)
+""",
+        },
+        "div": {
+            "instance": div(
+                "This is a div",
+                style={
+                    "text-align": "center",
+                    "margin": "0 auto",
+                    "background-color": "cornsilk",
+                },
+            ),
+            "code": 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})',
+        },
+        "input": {"instance": inputs_div, "code": inputs_code},
+        "grid": {
+            "instance": grid(
+                "30% 70%",
+                [
+                    div("This is a grid", style={"background-color": "lightblue"}),
+                    p("with 2 elements", style={"background-color": "lightyellow"}),
+                ],
+            ),
+            "code": 'grid([div("This is a grid")])',
+        },
+        "headers": {"instance": headers_div, "code": headers_code},
+        "a": {
+            "instance": a(
+                "Click here for something awesome",
+                href="https://pyscript.net",
+                target="_blank",
+            ),
+            "code": 'a("Click here for something awesome", href="https://pyscript.net", target="_blank")',
+        },
+        "br": {
+            "instance": div([p("This is a paragraph"), br(), p("with a line break")]),
+            "code": 'div([p("This is a paragraph"), br(), p("with a line break")])',
+        },
+        "img": {
+            "instance": img(src="./giphy_winner.gif", style={"max-width": "200px"}),
+            "code": 'img(src="./giphy_winner.gif", style={"max-width": "200px"})',
+        },
+        "code": {
+            "instance": code("print('Hello, World!')"),
+            "code": "code(\"print('Hello, World!')\")",
+        },
+        "p": {"instance": p("This is a paragraph"), "code": 'p("This is a paragraph")'},
+        "small": {
+            "instance": small("This is a small text"),
+            "code": 'small("This is a small text")',
+        },
+        "strong": {
+            "instance": strong("This is a strong text"),
+            "code": 'strong("This is a strong text")',
+        },
+    },
+    "markdown": {
+        "markdown": {
+            "instance": markdown(MARKDOWN_EXAMPLE),
+            "code": f'markdown("""{MARKDOWN_EXAMPLE}""")',
+        },
+    },
+}

pyscript.core/test/ui/gallery.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>PyDom UI</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+
+        <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/lib/marked.umd.min.js"></script>
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+        <!-- and it's easy to individually load additional languages -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+
+        <script>hljs.highlightAll();</script>
+
+        <style>
+            body {
+                font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+            }
+        </style>
+    </head>
+
+    <body>
+        <script type="mpy" src="./gallery.py" config="./pyscript.toml"></script>
+    </body>
+</html>

pyscript.core/test/ui/gallery.py

@@ -0,0 +1,180 @@
+try:
+    from textwrap import dedent
+except ImportError:
+    dedent = lambda x: x
+
+import inspect
+
+import shoelace
+import styles
+import tictactoe
+from markdown import markdown
+from pyscript import when, window
+from pyweb import pydom
+from pyweb.ui import elements as el
+
+MAIN_PAGE_MARKDOWN = dedent(
+    """
+    This gallery is a collection of demos using the PyWeb.UI library. There are meant
+    to be examples of how to use the library to create GUI applications using Python
+    only.
+
+    ## How to use the gallery
+
+    Simply click on the demo you want to see and the details will appear on the right
+    """
+)
+
+# First thing we do is to load all the external resources we need
+shoelace.load_resources()
+
+
+def add_demo(demo_name, demo_creator_cb, parent_div, source=None):
+    """Create a link to a component and add it to the left panel.
+
+    Args:
+        component (str): The name of the component to add.
+
+    Returns:
+        the component created
+
+    """
+    # Create the component link element
+    div = el.div(el.a(demo_name, href="#"), style=styles.STYLE_LEFT_PANEL_LINKS)
+
+    # Create a handler that opens the component details when the link is clicked
+    @when("click", div)
+    def _change():
+        if source:
+            demo_div = el.grid("50% 50%")
+            demo_div.append(demo_creator_cb())
+            widget_code = markdown(dedent(f"""```python\n{source}\n```"""))
+            demo_div.append(el.div(widget_code, style=styles.STYLE_CODE_BLOCK))
+        else:
+            demo_div = demo_creator_cb()
+        demo_div.style["margin"] = "20px"
+        write_to_main(demo_div)
+        window.hljs.highlightAll()
+
+    # Add the new link element to the parent div (left panel)
+    parent_div.append(div)
+    return div
+
+
+def create_main_area():
+    """Create the main area of the right side of page, with the description of the
+    demo itself and how to use it.
+
+    Returns:
+        the main area
+
+    """
+    return el.div(
+        [
+            el.h1("PyWeb UI Gallery", style={"text-align": "center"}),
+            markdown(MAIN_PAGE_MARKDOWN),
+        ]
+    )
+
+
+def create_markdown_app():
+    """Create the basic components page.
+
+    Returns:
+        the main area
+
+    """
+    translate_button = shoelace.Button("Convert", variant="primary")
+    markdown_txt_area = shoelace.TextArea(label="Use this to write your Markdown")
+    result_div = el.div(style=styles.STYLE_MARKDOWN_RESULT)
+
+    @when("click", translate_button)
+    def translate_markdown():
+        result_div.html = markdown(markdown_txt_area.value).html
+
+    return el.div(
+        [
+            el.h2("Markdown"),
+            markdown_txt_area,
+            translate_button,
+            result_div,
+        ],
+        style={"margin": "20px"},
+    )
+
+
+# ********** MAIN PANEL **********
+main_area = create_main_area()
+
+
+def write_to_main(content):
+    main_area.html = ""
+    main_area.append(content)
+
+
+def restore_home():
+    write_to_main(create_main_area())
+
+
+def create_new_section(title, parent_div):
+    basic_components_text = el.h3(
+        title, style={"text-align": "left", "margin": "20px auto 0"}
+    )
+    parent_div.append(basic_components_text)
+    parent_div.append(
+        shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"})
+    )
+    return basic_components_text
+
+
+# ********** LEFT PANEL **********
+left_panel_title = el.h1("PyWeb.UI", style=styles.STYLE_LEFT_PANEL_TITLE)
+left_div = el.div(
+    [
+        left_panel_title,
+        shoelace.Divider(style={"margin-bottom": "30px"}),
+        el.h3("Demos", style=styles.STYLE_LEFT_PANEL_TITLE),
+    ]
+)
+
+# Let's map the creation of the main area to when the user clocks on "Components"
+when("click", left_panel_title)(restore_home)
+
+# ------ ADD DEMOS ------
+markdown_source = """
+translate_button = shoelace.Button("Convert", variant="primary")
+markdown_txt_area = shoelace.TextArea(label="Markdown",
+    help_text="Write your Mardown here and press convert to see the result",
+)
+result_div = el.div(style=styles.STYLE_MARKDOWN_RESULT)
+@when("click", translate_button)
+def translate_markdown():
+    result_div.html = markdown(markdown_txt_area.value).html
+
+el.div([
+    el.h2("Markdown"),
+    markdown_txt_area,
+    translate_button,
+    result_div,
+])
+"""
+add_demo("Markdown", create_markdown_app, left_div, source=markdown_source)
+add_demo(
+    "Tic Tac Toe",
+    tictactoe.create_tic_tac_toe,
+    left_div,
+    source=inspect.getsource(tictactoe),
+)
+
+left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
+left_div.append(el.a("Examples", href="/test/ui/", style={"text-align": "left"}))
+
+# ********** CREATE ALL THE LAYOUT **********
+grid = el.grid("minmax(100px, 200px) 20px auto", style={"min-height": "100%"})
+grid.append(left_div)
+grid.append(shoelace.Divider(vertical=True))
+grid.append(main_area)
+
+pydom.body.append(grid)
+pydom.body.append(el.a("Back to the main page", href="/test/ui/", target="_blank"))
+pydom.body.append(el.a("Hidden!!!", href="/test/ui/", target="_blank", hidden=True))

pyscript.core/test/ui/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>PyDom UI</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+
+        <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/lib/marked.umd.min.js"></script>
+
+
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+        <!-- and it's easy to individually load additional languages -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+        <!-- SHOWLACE CUSTOM CSS -->
+        <style>
+        </style>
+
+        <style>
+            body {
+                font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+            }
+
+            input:invalid {
+                background-color: lightpink;
+            }
+
+        </style>
+    </head>
+
+    <body>
+        <script type="mpy" src="./demo.py" config="./pyscript.toml"></script>
+    </body>
+</html>

pyscript.core/test/ui/pyscript.toml

@@ -0,0 +1,8 @@
+packages = []
+
+[files]
+"./examples.py" = "./examples.py"
+"./tictactoe.py" = "./tictactoe.py"
+"./styles.py" = "./styles.py"
+"./shoelace.py" = "./shoelace.py"
+"./markdown.py" = "./markdown.py"

pyscript.core/tests/integration/test_00_support.py

@@ -186,12 +186,12 @@ class TestSupport(PyScriptTest):
         #
         msg = str(exc.value)
         expected = textwrap.dedent(
-            """
+            f"""
             JS errors found: 2
             Error: error 1
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             Error: error 2
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             """
         ).strip()
         assert re.search(expected, msg)
@@ -217,12 +217,12 @@ class TestSupport(PyScriptTest):
         #
         msg = str(exc.value)
         expected = textwrap.dedent(
-            """
+            f"""
             JS errors found: 2
             Error: NOT expected 2
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             Error: NOT expected 4
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             """
         ).strip()
         assert re.search(expected, msg)
@@ -243,15 +243,15 @@ class TestSupport(PyScriptTest):
         #
         msg = str(exc.value)
         expected = textwrap.dedent(
-            """
+            f"""
             The following JS errors were expected but could not be found:
                 - this is not going to be found
             ---
             The following JS errors were raised but not expected:
             Error: error 1
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             Error: error 2
-                at https://fake_server/mytest.html:.*
+                at {self.http_server_addr}/mytest.html:.*
             """
         ).strip()
         assert re.search(expected, msg)
@@ -471,6 +471,8 @@ class TestSupport(PyScriptTest):
         Test that we capture a 404 in loading a page that does not exist.
         """
         self.goto("this_url_does_not_exist.html")
-        assert [
-            "Failed to load resource: the server responded with a status of 404 (Not Found)"
-        ] == self.console.all.lines
+        if self.dev_server:
+            error = "Failed to load resource: the server responded with a status of 404 (File not found)"
+        else:
+            error = "Failed to load resource: the server responded with a status of 404 (Not Found)"
+        assert [error] == self.console.all.lines

pyscript.core/tests/integration/test_pyweb.py

@@ -0,0 +1,605 @@
+import re
+
+import pytest
+
+from .support import PyScriptTest, only_main, skip_worker
+
+DEFAULT_ELEMENT_ATTRIBUTES = {
+    "accesskey": "s",
+    "autocapitalize": "off",
+    "autofocus": True,
+    "contenteditable": True,
+    "draggable": True,
+    "enterkeyhint": "go",
+    "hidden": False,
+    "id": "whateverid",
+    "lang": "br",
+    "nonce": "123",
+    "part": "part1:exposed1",
+    "popover": True,
+    "slot": "slot1",
+    "spellcheck": False,
+    "tabindex": 3,
+    "title": "whatevertitle",
+    "translate": "no",
+    "virtualkeyboardpolicy": "manual",
+}
+
+INTERPRETERS = ["py", "mpy"]
+
+
+@pytest.fixture(params=INTERPRETERS)
+def interpreter(request):
+    return request.param
+
+
+class TestElements(PyScriptTest):
+    """Test all elements in the pyweb.ui.elements module.
+
+    This class tests all elements in the pyweb.ui.elements module. It creates
+    an element of each type, both executing in the main thread and in a worker.
+    It runs each test for each interpreter defined in `INTERPRETERS`
+
+    Each individual element test looks for the element properties, sets a value
+    on each the supported properties and checks if the element was created correctly
+    and all it's properties were set correctly.
+    """
+
+    @property
+    def expected_missing_file_errors(self):
+        # In fake server conditions this test will not throw an error due to missing files.
+        # If we want to skip the test, use:
+        # pytest.skip("Skipping: fake server doesn't throw 404 errors on missing local files.")
+        return (
+            [
+                "Failed to load resource: the server responded with a status of 404 (File not found)"
+            ]
+            if self.dev_server
+            else []
+        )
+
+    def _create_el_and_basic_asserts(
+        self,
+        el_type,
+        el_text=None,
+        interpreter="py",
+        properties=None,
+        expected_errors=None,
+        additional_selector_rules=None,
+    ):
+        """Create an element with all its properties set, by running <script type=<interpreter> ... >
+        , and check if the element was created correctly and all its properties were set correctly.
+        """
+        expected_errors = expected_errors or []
+        if not properties:
+            properties = {}
+
+        def parse_value(v):
+            if isinstance(v, bool):
+                return str(v)
+
+            return f"'{v}'"
+
+        attributes = ""
+        if el_text:
+            attributes += f'"{el_text}",'
+
+        if properties:
+            attributes += ", ".join(
+                [f"{k}={parse_value(v)}" for k, v in properties.items()]
+            )
+
+        # Let's make sure the body of the page is clean first
+        body = self.page.locator("body")
+        assert body.inner_html() == ""
+
+        # Let's make sure the element is not in the page
+        element = self.page.locator(el_type)
+        assert not element.count()
+
+        # Let's create the element
+        code_ = f"""
+                from pyscript import when
+            <script type="{interpreter}">
+                from pyweb import pydom
+                from pyweb.ui.elements import {el_type}
+                el = {el_type}({attributes})
+                pydom.body.append(el)
+            </script>
+            """
+        self.pyscript_run(code_)
+
+        # Let's keep the tag in 2 variables, one for the selector and another to
+        # check the return tag from the selector
+        locator_type = el_tag = el_type[:-1] if el_type.endswith("_") else el_type
+        if additional_selector_rules:
+            locator_type += f"{additional_selector_rules}"
+
+        el = self.page.locator(locator_type)
+        tag = el.evaluate("node => node.tagName")
+        assert tag == el_tag.upper()
+        if el_text:
+            assert el.inner_html() == el_text
+            assert el.text_content() == el_text
+
+        # if we expect specific errors, check that they are in the console
+        if expected_errors:
+            for error in expected_errors:
+                assert error in self.console.error.lines
+        else:
+            # if we don't expect errors, check that there are no errors
+            assert self.console.error.lines == []
+
+        if properties:
+            for k, v in properties.items():
+                actual_val = el.evaluate(f"node => node.{k}")
+                assert actual_val == v
+        return el
+
+    def test_a(self, interpreter):
+        a = self._create_el_and_basic_asserts("a", "click me", interpreter)
+        assert a.text_content() == "click me"
+
+    def test_abbr(self, interpreter):
+        abbr = self._create_el_and_basic_asserts(
+            "abbr", "some text", interpreter=interpreter
+        )
+        assert abbr.text_content() == "some text"
+
+    def test_address(self, interpreter):
+        address = self._create_el_and_basic_asserts("address", "some text", interpreter)
+        assert address.text_content() == "some text"
+
+    def test_area(self, interpreter):
+        properties = {
+            "shape": "poly",
+            "coords": "129,0,260,95,129,138",
+            "href": "https://developer.mozilla.org/docs/Web/HTTP",
+            "target": "_blank",
+            "alt": "HTTP",
+        }
+        # TODO: Check why click times out
+        self._create_el_and_basic_asserts(
+            "area", interpreter=interpreter, properties=properties
+        )
+
+    def test_article(self, interpreter):
+        self._create_el_and_basic_asserts("article", "some text", interpreter)
+
+    def test_aside(self, interpreter):
+        self._create_el_and_basic_asserts("aside", "some text", interpreter)
+
+    def test_audio(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "audio",
+            interpreter=interpreter,
+            properties={"src": "http://localhost:8080/somefile.ogg", "controls": True},
+            expected_errors=self.expected_missing_file_errors,
+        )
+
+    def test_b(self, interpreter):
+        self._create_el_and_basic_asserts("aside", "some text", interpreter)
+
+    def test_blockquote(self, interpreter):
+        self._create_el_and_basic_asserts("blockquote", "some text", interpreter)
+
+    def test_br(self, interpreter):
+        self._create_el_and_basic_asserts("br", interpreter=interpreter)
+
+    def test_element_button(self, interpreter):
+        button = self._create_el_and_basic_asserts("button", "click me", interpreter)
+        assert button.inner_html() == "click me"
+
+    def test_element_button_attributes(self, interpreter):
+        button = self._create_el_and_basic_asserts(
+            "button", "click me", interpreter, None
+        )
+        assert button.inner_html() == "click me"
+
+    def test_canvas(self, interpreter):
+        properties = {
+            "height": 100,
+            "width": 120,
+        }
+        # TODO: Check why click times out
+        self._create_el_and_basic_asserts(
+            "canvas", "alt text for canvas", interpreter, properties=properties
+        )
+
+    def test_caption(self, interpreter):
+        self._create_el_and_basic_asserts("caption", "some text", interpreter)
+
+    def test_cite(self, interpreter):
+        self._create_el_and_basic_asserts("cite", "some text", interpreter)
+
+    def test_code(self, interpreter):
+        self._create_el_and_basic_asserts("code", "import pyweb", interpreter)
+
+    def test_data(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "data", "some text", interpreter, properties={"value": "123"}
+        )
+
+    def test_datalist(self, interpreter):
+        self._create_el_and_basic_asserts("datalist", "some items", interpreter)
+
+    def test_dd(self, interpreter):
+        self._create_el_and_basic_asserts("dd", "some text", interpreter)
+
+    def test_del_(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "del_", "some text", interpreter, properties={"cite": "http://example.com/"}
+        )
+
+    def test_details(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "details", "some text", interpreter, properties={"open": True}
+        )
+
+    def test_dialog(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "dialog", "some text", interpreter, properties={"open": True}
+        )
+
+    def test_div(self, interpreter):
+        div = self._create_el_and_basic_asserts("div", "click me", interpreter)
+        assert div.inner_html() == "click me"
+
+    def test_dl(self, interpreter):
+        self._create_el_and_basic_asserts("dl", "some text", interpreter)
+
+    def test_dt(self, interpreter):
+        self._create_el_and_basic_asserts("dt", "some text", interpreter)
+
+    def test_em(self, interpreter):
+        self._create_el_and_basic_asserts("em", "some text", interpreter)
+
+    def test_embed(self, interpreter):
+        # NOTE: Types actually matter and embed expects a string for height and width
+        #       while other elements expect an int
+
+        # TODO: It's important that we add typing soon to help with the user experience
+        properties = {
+            "src": "http://localhost:8080/somefile.ogg",
+            "type": "video/ogg",
+            "width": "250",
+            "height": "200",
+        }
+        self._create_el_and_basic_asserts(
+            "embed",
+            interpreter=interpreter,
+            properties=properties,
+            expected_errors=self.expected_missing_file_errors,
+        )
+
+    def test_fieldset(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "fieldset", "some text", interpreter, properties={"name": "some name"}
+        )
+
+    def test_figcaption(self, interpreter):
+        self._create_el_and_basic_asserts("figcaption", "some text", interpreter)
+
+    def test_figure(self, interpreter):
+        self._create_el_and_basic_asserts("figure", "some text", interpreter)
+
+    def test_footer(self, interpreter):
+        self._create_el_and_basic_asserts("footer", "some text", interpreter)
+
+    def test_form(self, interpreter):
+        properties = {
+            "action": "https://example.com/submit",
+            "method": "post",
+            "name": "some name",
+            "autocomplete": "on",
+            "rel": "external",
+        }
+        self._create_el_and_basic_asserts(
+            "form", "some text", interpreter, properties=properties
+        )
+
+    def test_h1(self, interpreter):
+        self._create_el_and_basic_asserts("h1", "some text", interpreter)
+
+    def test_h2(self, interpreter):
+        self._create_el_and_basic_asserts("h2", "some text", interpreter)
+
+    def test_h3(self, interpreter):
+        self._create_el_and_basic_asserts("h3", "some text", interpreter)
+
+    def test_h4(self, interpreter):
+        self._create_el_and_basic_asserts("h4", "some text", interpreter)
+
+    def test_h5(self, interpreter):
+        self._create_el_and_basic_asserts("h5", "some text", interpreter)
+
+    def test_h6(self, interpreter):
+        self._create_el_and_basic_asserts("h6", "some text", interpreter)
+
+    def test_header(self, interpreter):
+        self._create_el_and_basic_asserts("header", "some text", interpreter)
+
+    def test_hgroup(self, interpreter):
+        self._create_el_and_basic_asserts("hgroup", "some text", interpreter)
+
+    def test_hr(self, interpreter):
+        self._create_el_and_basic_asserts("hr", interpreter=interpreter)
+
+    def test_i(self, interpreter):
+        self._create_el_and_basic_asserts("i", "some text", interpreter)
+
+    def test_iframe(self, interpreter):
+        # TODO: same comment about defining the right types
+        properties = {
+            "src": "http://localhost:8080/somefile.html",
+            "width": "250",
+            "height": "200",
+        }
+        self._create_el_and_basic_asserts(
+            "iframe",
+            interpreter,
+            properties=properties,
+            expected_errors=self.expected_missing_file_errors,
+        )
+
+    def test_img(self, interpreter):
+        properties = {
+            "src": "http://localhost:8080/somefile.png",
+            "alt": "some image",
+            "width": 250,
+            "height": 200,
+        }
+        self._create_el_and_basic_asserts(
+            "img",
+            interpreter=interpreter,
+            properties=properties,
+            expected_errors=self.expected_missing_file_errors,
+        )
+
+    def test_input(self, interpreter):
+        # TODO: we need multiple input tests
+        properties = {
+            "type": "text",
+            "value": "some value",
+            "name": "some name",
+            "autofocus": True,
+            "pattern": "[A-Za-z]{3}",
+            "placeholder": "some placeholder",
+            "required": True,
+            "size": 20,
+        }
+        self._create_el_and_basic_asserts(
+            "input_", interpreter=interpreter, properties=properties
+        )
+
+    def test_ins(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "ins", "some text", interpreter, properties={"cite": "http://example.com/"}
+        )
+
+    def test_kbd(self, interpreter):
+        self._create_el_and_basic_asserts("kbd", "some text", interpreter)
+
+    def test_label(self, interpreter):
+        self._create_el_and_basic_asserts("label", "some text", interpreter)
+
+    def test_legend(self, interpreter):
+        self._create_el_and_basic_asserts("legend", "some text", interpreter)
+
+    def test_li(self, interpreter):
+        self._create_el_and_basic_asserts("li", "some text", interpreter)
+
+    def test_link(self, interpreter):
+        properties = {
+            "href": "http://localhost:8080/somefile.css",
+            "rel": "stylesheet",
+            "type": "text/css",
+        }
+        self._create_el_and_basic_asserts(
+            "link",
+            interpreter=interpreter,
+            properties=properties,
+            expected_errors=self.expected_missing_file_errors,
+            additional_selector_rules="[href='http://localhost:8080/somefile.css']",
+        )
+
+    def test_main(self, interpreter):
+        self._create_el_and_basic_asserts("main", "some text", interpreter)
+
+    def test_map(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "map_", "some text", interpreter, properties={"name": "somemap"}
+        )
+
+    def test_mark(self, interpreter):
+        self._create_el_and_basic_asserts("mark", "some text", interpreter)
+
+    def test_menu(self, interpreter):
+        self._create_el_and_basic_asserts("menu", "some text", interpreter)
+
+    def test_meter(self, interpreter):
+        properties = {
+            "value": 50,
+            "min": 0,
+            "max": 100,
+            "low": 30,
+            "high": 80,
+            "optimum": 50,
+        }
+        self._create_el_and_basic_asserts(
+            "meter", "some text", interpreter, properties=properties
+        )
+
+    def test_nav(self, interpreter):
+        self._create_el_and_basic_asserts("nav", "some text", interpreter)
+
+    def test_object(self, interpreter):
+        properties = {
+            "data": "http://localhost:8080/somefile.swf",
+            "type": "application/x-shockwave-flash",
+            "width": "250",
+            "height": "200",
+        }
+        self._create_el_and_basic_asserts(
+            "object_",
+            interpreter=interpreter,
+            properties=properties,
+        )
+
+    def test_ol(self, interpreter):
+        self._create_el_and_basic_asserts("ol", "some text", interpreter)
+
+    def test_optgroup(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "optgroup", "some text", interpreter, properties={"label": "some label"}
+        )
+
+    def test_option(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "option", "some text", interpreter, properties={"value": "some value"}
+        )
+
+    def test_output(self, interpreter):
+        self._create_el_and_basic_asserts("output", "some text", interpreter)
+
+    def test_p(self, interpreter):
+        self._create_el_and_basic_asserts("p", "some text", interpreter)
+
+    def test_picture(self, interpreter):
+        self._create_el_and_basic_asserts("picture", "some text", interpreter)
+
+    def test_pre(self, interpreter):
+        self._create_el_and_basic_asserts("pre", "some text", interpreter)
+
+    def test_progress(self, interpreter):
+        properties = {
+            "value": 50,
+            "max": 100,
+        }
+        self._create_el_and_basic_asserts(
+            "progress", "some text", interpreter, properties=properties
+        )
+
+    def test_q(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "q", "some text", interpreter, properties={"cite": "http://example.com/"}
+        )
+
+    def test_s(self, interpreter):
+        self._create_el_and_basic_asserts("s", "some text", interpreter)
+
+    # def test_script(self):
+    #     self._create_el_and_basic_asserts("script", "some text")
+
+    def test_section(self, interpreter):
+        self._create_el_and_basic_asserts("section", "some text", interpreter)
+
+    def test_select(self, interpreter):
+        self._create_el_and_basic_asserts("select", "some text", interpreter)
+
+    def test_small(self, interpreter):
+        self._create_el_and_basic_asserts("small", "some text", interpreter)
+
+    def test_source(self, interpreter):
+        properties = {
+            "src": "http://localhost:8080/somefile.ogg",
+            "type": "audio/ogg",
+        }
+        self._create_el_and_basic_asserts(
+            "source",
+            interpreter=interpreter,
+            properties=properties,
+        )
+
+    def test_span(self, interpreter):
+        self._create_el_and_basic_asserts("span", "some text", interpreter)
+
+    def test_strong(self, interpreter):
+        self._create_el_and_basic_asserts("strong", "some text", interpreter)
+
+    def test_style(self, interpreter):
+        self._create_el_and_basic_asserts(
+            "style",
+            "body {background-color: red;}",
+            interpreter,
+        )
+
+    def test_sub(self, interpreter):
+        self._create_el_and_basic_asserts("sub", "some text", interpreter)
+
+    def test_summary(self, interpreter):
+        self._create_el_and_basic_asserts("summary", "some text", interpreter)
+
+    def test_sup(self, interpreter):
+        self._create_el_and_basic_asserts("sup", "some text", interpreter)
+
+    def test_table(self, interpreter):
+        self._create_el_and_basic_asserts("table", "some text", interpreter)
+
+    def test_tbody(self, interpreter):
+        self._create_el_and_basic_asserts("tbody", "some text", interpreter)
+
+    def test_td(self, interpreter):
+        self._create_el_and_basic_asserts("td", "some text", interpreter)
+
+    def test_template(self, interpreter):
+        # We are not checking the content of template since it's sort of
+        # special element
+        self._create_el_and_basic_asserts("template", interpreter=interpreter)
+
+    def test_textarea(self, interpreter):
+        self._create_el_and_basic_asserts("textarea", "some text", interpreter)
+
+    def test_tfoot(self, interpreter):
+        self._create_el_and_basic_asserts("tfoot", "some text", interpreter)
+
+    def test_th(self, interpreter):
+        self._create_el_and_basic_asserts("th", "some text", interpreter)
+
+    def test_thead(self, interpreter):
+        self._create_el_and_basic_asserts("thead", "some text", interpreter)
+
+    def test_time(self, interpreter):
+        self._create_el_and_basic_asserts("time", "some text", interpreter)
+
+    def test_title(self, interpreter):
+        self._create_el_and_basic_asserts("title", "some text", interpreter)
+
+    def test_tr(self, interpreter):
+        self._create_el_and_basic_asserts("tr", "some text", interpreter)
+
+    def test_track(self, interpreter):
+        properties = {
+            "src": "http://localhost:8080/somefile.vtt",
+            "kind": "subtitles",
+            "srclang": "en",
+            "label": "English",
+        }
+        self._create_el_and_basic_asserts(
+            "track",
+            interpreter=interpreter,
+            properties=properties,
+        )
+
+    def test_u(self, interpreter):
+        self._create_el_and_basic_asserts("u", "some text", interpreter)
+
+    def test_ul(self, interpreter):
+        self._create_el_and_basic_asserts("ul", "some text", interpreter)
+
+    def test_var(self, interpreter):
+        self._create_el_and_basic_asserts("var", "some text", interpreter)
+
+    def test_video(self, interpreter):
+        properties = {
+            "src": "http://localhost:8080/somefile.ogg",
+            "controls": True,
+            "width": 250,
+            "height": 200,
+        }
+        self._create_el_and_basic_asserts(
+            "video",
+            interpreter=interpreter,
+            properties=properties,
+            expected_errors=self.expected_missing_file_errors,
+        )

pyscript.core/types/stdlib/pyscript.d.ts

@@ -13,6 +13,10 @@ declare namespace _default {
         "__init__.py": string;
         "media.py": string;
         "pydom.py": string;
+        ui: {
+            "__init__.py": string;
+            "elements.py": string;
+        };
     };
 }
 export default _default;