@pyscript/core 0.3.7 → 0.3.9

package/src/3rd-party/xterm_addon-fit.js

@@ -5,4 +5,3 @@
  * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
  */
 var e,t,r={exports:{}};self;var s=r.exports=(e=t={},Object.defineProperty(e,"__esModule",{value:!0}),e.FitAddon=void 0,e.FitAddon=class{activate(e){this._terminal=e}dispose(){}fit(){const e=this.proposeDimensions();if(!e||!this._terminal||isNaN(e.cols)||isNaN(e.rows))return;const t=this._terminal._core;this._terminal.rows===e.rows&&this._terminal.cols===e.cols||(t._renderService.clear(),this._terminal.resize(e.cols,e.rows))}proposeDimensions(){if(!this._terminal)return;if(!this._terminal.element||!this._terminal.element.parentElement)return;const e=this._terminal._core,t=e._renderService.dimensions;if(0===t.css.cell.width||0===t.css.cell.height)return;const r=0===this._terminal.options.scrollback?0:e.viewport.scrollBarWidth,s=window.getComputedStyle(this._terminal.element.parentElement),i=parseInt(s.getPropertyValue("height")),o=Math.max(0,parseInt(s.getPropertyValue("width"))),n=window.getComputedStyle(this._terminal.element),l=i-(parseInt(n.getPropertyValue("padding-top"))+parseInt(n.getPropertyValue("padding-bottom"))),a=o-(parseInt(n.getPropertyValue("padding-right"))+parseInt(n.getPropertyValue("padding-left")))-r;return{cols:Math.max(2,Math.floor(a/t.css.cell.width)),rows:Math.max(1,Math.floor(l/t.css.cell.height))}}},t),i=r.exports.FitAddon,o=r.exports.__esModule;export{i as FitAddon,o as __esModule,s as default};
-//# sourceMappingURL=/sm/953d1f83f6be91dd2caca418b17a24b185a9453fac166d91d6521988e6344577.map

package/src/config.js

@@ -3,15 +3,17 @@
  * to use as base config for all py-script elements, importing
  * also a queue of plugins *before* the interpreter (if any) resolves.
  */
-import { $ } from "basic-devtools";
+import { $$ } from "basic-devtools";
 
 import TYPES from "./types.js";
 import allPlugins from "./plugins.js";
 import { robustFetch as fetch, getText } from "./fetch.js";
 import { ErrorCode } from "./exceptions.js";
 
+const { BAD_CONFIG, CONFLICTING_CODE } = ErrorCode;
+
 const badURL = (url, expected = "") => {
-    let message = `(${ErrorCode.BAD_CONFIG}): Invalid URL: ${url}`;
+    let message = `(${BAD_CONFIG}): Invalid URL: ${url}`;
     if (expected) message += `\nexpected ${expected} content`;
     throw new Error(message);
 };
@@ -41,8 +43,10 @@ const configDetails = async (config, type) => {
     return { json, toml: toml || (!json && !!text), text, url };
 };
 
+const conflictError = (reason) => new Error(`(${CONFLICTING_CODE}): ${reason}`);
+
 const syntaxError = (type, url, { message }) => {
-    let str = `(${ErrorCode.BAD_CONFIG}): Invalid ${type}`;
+    let str = `(${BAD_CONFIG}): Invalid ${type}`;
     if (url) str += ` @ ${url}`;
     return new SyntaxError(`${str}\n${message}`);
 };
@@ -56,27 +60,49 @@ for (const [TYPE] of TYPES) {
     /** @type {any} The PyScript configuration parsed from the JSON or TOML object*. May be any of the return types of JSON.parse() or toml-j0.4's parse() ( {number | string | boolean | null | object | Array} ) */
     let parsed;
 
-    /** @type {SyntaxError | undefined} The error thrown when parsing the PyScript config, if any.*/
+    /** @type {Error | undefined} The error thrown when parsing the PyScript config, if any.*/
     let error;
 
     let config,
         type,
-        pyConfig = $(`${TYPE}-config`);
-    if (pyConfig) {
-        config = pyConfig.getAttribute("src") || pyConfig.textContent;
-        type = pyConfig.getAttribute("type");
-    } else {
-        pyConfig = $(
+        pyElement,
+        pyConfigs = $$(`${TYPE}-config`),
+        attrConfigs = $$(
             [
                 `script[type="${TYPE}"][config]:not([worker])`,
                 `${TYPE}-script[config]:not([worker])`,
             ].join(","),
         );
-        if (pyConfig) config = pyConfig.getAttribute("config");
+
+    // throw an error if there are multiple <py-config> or <mpy-config>
+    if (pyConfigs.length > 1) {
+        error = conflictError(`Too many ${TYPE}-config`);
+    } else {
+        // throw an error if there are <x-config> and config="x" attributes
+        if (pyConfigs.length && attrConfigs.length) {
+            error = conflictError(
+                `Ambiguous ${TYPE}-config VS config attribute`,
+            );
+        } else if (pyConfigs.length) {
+            [pyElement] = pyConfigs;
+            config = pyElement.getAttribute("src") || pyElement.textContent;
+            type = pyElement.getAttribute("type");
+        } else if (attrConfigs.length) {
+            [pyElement, ...attrConfigs] = attrConfigs;
+            config = pyElement.getAttribute("config");
+            // throw an error if dirrent scripts use different configs
+            if (
+                attrConfigs.some((el) => el.getAttribute("config") !== config)
+            ) {
+                error = conflictError(
+                    "Unable to use different configs on main",
+                );
+            }
+        }
     }
 
     // catch possible fetch errors
-    if (config) {
+    if (!error && config) {
         try {
             const { json, toml, text, url } = await configDetails(config, type);
             config = text;

package/src/core.css

@@ -4,3 +4,41 @@ mpy-script,
 mpy-config {
     display: none;
 }
+
+/* PyEditor */
+.py-editor-box,
+.mpy-editor-box {
+    padding: 0.5rem;
+}
+.py-editor-input,
+.mpy-editor-input {
+    position: relative;
+}
+.py-editor-box::before,
+.mpy-editor-box::before {
+    content: attr(data-env);
+    display: block;
+    font-size: x-small;
+    text-align: end;
+}
+.py-editor-output,
+.mpy-editor-output {
+    white-space: pre;
+}
+.py-editor-run-button,
+.mpy-editor-run-button {
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.25s;
+    z-index: 1;
+}
+.py-editor-box:hover .py-editor-run-button,
+.mpy-editor-box:hover .mpy-editor-run-button,
+.py-editor-run-button:focus,
+.py-editor-run-button:disabled,
+.mpy-editor-run-button:focus,
+.mpy-editor-run-button:disabled {
+    opacity: 1;
+}

package/src/exceptions.js

@@ -5,7 +5,7 @@ const CLOSEBUTTON =
 
 /**
  * These error codes are used to identify the type of error that occurred.
- * @see https://docs.pyscript.net/latest/reference/exceptions.html?highlight=errors
+ * @see https://pyscript.github.io/docs/latest/reference/exceptions.html?highlight=errors
  */
 export const ErrorCode = {
     GENERIC: "PY0000", // Use this only for development then change to a more specific error code

package/src/hooks.js

@@ -50,7 +50,7 @@ const inputFailure = `
     def input(prompt=""):
         raise Exception("\\n           ".join([
             "input() doesn't work when PyScript runs in the main thread.",
-            "Consider using the worker attribute: https://docs.pyscript.net/2023.11.2/user-guide/workers/"
+            "Consider using the worker attribute: https://pyscript.github.io/docs/2023.11.2/user-guide/workers/"
         ]))
 
     builtins.input = input

package/src/plugins/py-editor.js

@@ -0,0 +1,229 @@
+// PyScript py-editor plugin
+import { Hook, XWorker, dedent } from "polyscript/exports";
+import { TYPES } from "../core.js";
+
+const RUN_BUTTON = `<svg style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>`;
+
+let id = 0;
+const getID = (type) => `${type}-editor-${id++}`;
+
+const envs = new Map();
+
+const hooks = {
+    worker: {
+        // works on both Pyodide and MicroPython
+        onReady: ({ runAsync, io }, { sync }) => {
+            io.stdout = (line) => sync.write(line);
+            io.stderr = (line) => sync.writeErr(line);
+            sync.revoke();
+            sync.runAsync = runAsync;
+        },
+    },
+};
+
+async function execute({ currentTarget }) {
+    const { env, pySrc, outDiv } = this;
+
+    currentTarget.disabled = true;
+    outDiv.innerHTML = "";
+
+    if (!envs.has(env)) {
+        const srcLink = URL.createObjectURL(new Blob([""]));
+        const xworker = XWorker.call(new Hook(null, hooks), srcLink, {
+            type: this.interpreter,
+        });
+
+        const { sync } = xworker;
+        const { promise, resolve } = Promise.withResolvers();
+        envs.set(env, promise);
+        sync.revoke = () => {
+            URL.revokeObjectURL(srcLink);
+            resolve(xworker);
+        };
+    }
+
+    // wait for the env then set the target div
+    // before executing the current code
+    envs.get(env).then((xworker) => {
+        xworker.onerror = ({ error }) => {
+            outDiv.innerHTML += `<span style='color:red'>${
+                error.message || error
+            }</span>\n`;
+            console.error(error);
+        };
+
+        const enable = () => {
+            currentTarget.disabled = false;
+        };
+        const { sync } = xworker;
+        sync.write = (str) => {
+            outDiv.innerText += `${str}\n`;
+        };
+        sync.writeErr = (str) => {
+            outDiv.innerHTML += `<span style='color:red'>${str}</span>\n`;
+        };
+        sync.runAsync(pySrc).then(enable, enable);
+    });
+}
+
+const makeRunButton = (listener, type) => {
+    const runButton = document.createElement("button");
+    runButton.className = `absolute ${type}-editor-run-button`;
+    runButton.innerHTML = RUN_BUTTON;
+    runButton.setAttribute("aria-label", "Python Script Run Button");
+    runButton.addEventListener("click", listener);
+    return runButton;
+};
+
+const makeEditorDiv = (listener, type) => {
+    const editorDiv = document.createElement("div");
+    editorDiv.className = `${type}-editor-input`;
+    editorDiv.setAttribute("aria-label", "Python Script Area");
+
+    const runButton = makeRunButton(listener, type);
+    const editorShadowContainer = document.createElement("div");
+
+    // avoid outer elements intercepting key events (reveal as example)
+    editorShadowContainer.addEventListener("keydown", (event) => {
+        event.stopPropagation();
+    });
+
+    editorDiv.append(runButton, editorShadowContainer);
+
+    return editorDiv;
+};
+
+const makeOutDiv = (type) => {
+    const outDiv = document.createElement("div");
+    outDiv.className = `${type}-editor-output`;
+    outDiv.id = `${getID(type)}-output`;
+    return outDiv;
+};
+
+const makeBoxDiv = (listener, type) => {
+    const boxDiv = document.createElement("div");
+    boxDiv.className = `${type}-editor-box`;
+
+    const editorDiv = makeEditorDiv(listener, type);
+    const outDiv = makeOutDiv(type);
+    boxDiv.append(editorDiv, outDiv);
+
+    return [boxDiv, outDiv];
+};
+
+const init = async (script, type, interpreter) => {
+    const [
+        { basicSetup, EditorView },
+        { Compartment },
+        { python },
+        { indentUnit },
+        { keymap },
+        { defaultKeymap },
+    ] = await Promise.all([
+        // TODO: find a way to actually produce these bundles locally
+        import(/* webpackIgnore: true */ "../3rd-party/codemirror.js"),
+        import(/* webpackIgnore: true */ "../3rd-party/codemirror_state.js"),
+        import(
+            /* webpackIgnore: true */ "../3rd-party/codemirror_lang-python.js"
+        ),
+        import(/* webpackIgnore: true */ "../3rd-party/codemirror_language.js"),
+        import(/* webpackIgnore: true */ "../3rd-party/codemirror_view.js"),
+        import(/* webpackIgnore: true */ "../3rd-party/codemirror_commands.js"),
+    ]);
+
+    const selector = script.getAttribute("target");
+
+    let target;
+    if (selector) {
+        target =
+            document.getElementById(selector) ||
+            document.querySelector(selector);
+        if (!target) throw new Error(`Unknown target ${selector}`);
+    } else {
+        target = document.createElement(`${type}-editor`);
+        target.style.display = "block";
+        script.after(target);
+    }
+
+    if (!target.id) target.id = getID(type);
+    if (!target.hasAttribute("exec-id")) target.setAttribute("exec-id", 0);
+    if (!target.hasAttribute("root")) target.setAttribute("root", target.id);
+
+    const env = `${interpreter}-${script.getAttribute("env") || getID(type)}`;
+    const context = {
+        interpreter,
+        env,
+        get pySrc() {
+            return editor.state.doc.toString();
+        },
+        get outDiv() {
+            return outDiv;
+        },
+    };
+
+    // @see https://github.com/JeffersGlass/mkdocs-pyscript/blob/main/mkdocs_pyscript/js/makeblocks.js
+    const listener = execute.bind(context);
+    const [boxDiv, outDiv] = makeBoxDiv(listener, type);
+    boxDiv.dataset.env = script.hasAttribute("env") ? env : interpreter;
+
+    const inputChild = boxDiv.querySelector(`.${type}-editor-input > div`);
+    const parent = inputChild.attachShadow({ mode: "open" });
+    // avoid inheriting styles from the outer component
+    parent.innerHTML = `<style> :host { all: initial; }</style>`;
+
+    target.appendChild(boxDiv);
+
+    const doc = dedent(script.textContent).trim();
+
+    // preserve user indentation, if any
+    const indentation = /^(\s+)/m.test(doc) ? RegExp.$1 : "    ";
+
+    const editor = new EditorView({
+        extensions: [
+            indentUnit.of(indentation),
+            new Compartment().of(python()),
+            keymap.of([
+                ...defaultKeymap,
+                { key: "Ctrl-Enter", run: listener, preventDefault: true },
+                { key: "Cmd-Enter", run: listener, preventDefault: true },
+                { key: "Shift-Enter", run: listener, preventDefault: true },
+            ]),
+            basicSetup,
+        ],
+        parent,
+        doc,
+    });
+
+    editor.focus();
+};
+
+// avoid too greedy MutationObserver operations at distance
+let timeout = 0;
+
+// reset interval value then check for new scripts
+const resetTimeout = () => {
+    timeout = 0;
+    pyEditor();
+};
+
+// triggered both ASAP on the living DOM and via MutationObserver later
+const pyEditor = async () => {
+    if (timeout) return;
+    timeout = setTimeout(resetTimeout, 250);
+    for (const [type, interpreter] of TYPES) {
+        const selector = `script[type="${type}-editor"]`;
+        for (const script of document.querySelectorAll(selector)) {
+            // avoid any further bootstrap
+            script.type += "-active";
+            await init(script, type, interpreter);
+        }
+    }
+};
+
+new MutationObserver(pyEditor).observe(document, {
+    childList: true,
+    subtree: true,
+});
+
+// try to check the current document ASAP
+export default pyEditor();

package/src/plugins.js

@@ -2,5 +2,6 @@
 export default {
     ["deprecations-manager"]: () => import(/* webpackIgnore: true */ "./plugins/deprecations-manager.js"),
     error: () => import(/* webpackIgnore: true */ "./plugins/error.js"),
+    ["py-editor"]: () => import(/* webpackIgnore: true */ "./plugins/py-editor.js"),
     ["py-terminal"]: () => import(/* webpackIgnore: true */ "./plugins/py-terminal.js"),
 };

package/src/stdlib/pyscript/magic_js.py

@@ -1,11 +1,11 @@
 import js as globalThis
 from polyscript import js_modules
-
 from pyscript.util import NotSupported
 
 RUNNING_IN_WORKER = not hasattr(globalThis, "document")
 
 if RUNNING_IN_WORKER:
+    import js
     import polyscript
 
     PyWorker = NotSupported(
@@ -14,6 +14,7 @@ if RUNNING_IN_WORKER:
     )
     window = polyscript.xworker.window
     document = window.document
+    js.document = document
     sync = polyscript.xworker.sync
 
     # in workers the display does not have a default ID

package/src/stdlib/pyscript.js

@@ -4,10 +4,10 @@ export default {
     "__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.display import HTML, display\nfrom pyscript.magic_js import (\n    RUNNING_IN_WORKER,\n    PyWorker,\n    current_target,\n    document,\n    js_modules,\n    sync,\n    window,\n)\n\ntry:\n    from pyscript.event_handling import when\nexcept:\n    from pyscript.util import NotSupported\n\n    when = NotSupported(\n        \"pyscript.when\", \"pyscript.when currently not available with this interpreter\"\n    )\n",
     "display.py": "import base64\nimport html\nimport io\nimport re\n\nfrom pyscript.magic_js import current_target, document, window\n\n_MIME_METHODS = {\n    \"__repr__\": \"text/plain\",\n    \"_repr_html_\": \"text/html\",\n    \"_repr_markdown_\": \"text/markdown\",\n    \"_repr_svg_\": \"image/svg+xml\",\n    \"_repr_pdf_\": \"application/pdf\",\n    \"_repr_jpeg_\": \"image/jpeg\",\n    \"_repr_png_\": \"image/png\",\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    elif not isinstance(target, str):\n        raise TypeError(f\"target must be str or None, not {target.__class__.__name__}\")\n    elif target == \"\":\n        raise ValueError(\"Cannot have an empty target\")\n    elif target.startswith(\"#\"):\n        # note: here target is str and not None!\n        # align with @when behavior\n        target = target[1:]\n\n    element = document.getElementById(target)\n\n    # If target cannot be found on the page, a ValueError is raised\n    if element is None:\n        raise ValueError(\n            f\"Invalid selector with id={target}. Cannot be found in the page.\"\n        )\n\n    # if element is a <script type=\"py\">, it has a 'target' attribute which\n    # points to the visual element holding the displayed values. In that case,\n    # use that.\n    if element.tagName == \"SCRIPT\" and hasattr(element, \"target\"):\n        element = element.target\n\n    for v in values:\n        if not append:\n            element.replaceChildren()\n        _write(element, v, append=append)\n",
     "event_handling.py": "import inspect\n\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": "import js as globalThis\nfrom polyscript import js_modules\n\nfrom pyscript.util import NotSupported\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    )\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\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        \"pyscript.sync\", \"pyscript.sync works only when running in a worker\"\n    )\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
+    "magic_js.py": "import js as globalThis\nfrom polyscript import js_modules\nfrom pyscript.util import NotSupported\n\nRUNNING_IN_WORKER = not hasattr(globalThis, \"document\")\n\nif RUNNING_IN_WORKER:\n    import js\n    import polyscript\n\n    PyWorker = NotSupported(\n        \"pyscript.PyWorker\",\n        \"pyscript.PyWorker works only when running in the main thread\",\n    )\n    window = polyscript.xworker.window\n    document = window.document\n    js.document = 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\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        \"pyscript.sync\", \"pyscript.sync works only when running in a worker\"\n    )\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
     "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        object.__setattr__(self, \"name\", name)\n        object.__setattr__(self, \"error\", error)\n\n    def __repr__(self):\n        return f\"<NotSupported {self.name} [{self.error}]>\"\n\n    def __getattr__(self, attr):\n        raise AttributeError(self.error)\n\n    def __setattr__(self, attr, value):\n        raise AttributeError(self.error)\n\n    def __call__(self, *args):\n        raise TypeError(self.error)\n"
   },
   "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\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    @property\n    def value(self):\n        return self._js.value\n\n    @value.setter\n    def value(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"value\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.value = value\n\n    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\nclass StyleProxy(dict):\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    @cached_property\n    def _style(self):\n        return self._element._js.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kws):\n        for k, v in kws.items():\n            self._element._js.style.setProperty(k, v)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following prperties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._js.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._js.style.visibility = value\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self.style = StyleCollection(self)\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a selector\n        # TODO: Write tests!\n        elements = self._element.querySelectorAll(key)\n        return ElementCollection([Element(el) for el in elements])\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n    @property\n    def html(self):\n        return self._get_attribute(\"html\")\n\n    @html.setter\n    def html(self, value):\n        self._set_attribute(\"html\", value)\n\n    @property\n    def value(self):\n        return self._get_attribute(\"value\")\n\n    @value.setter\n    def value(self, value):\n        self._set_attribute(\"value\", value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n\nclass DomScope:\n    def __getattr__(self, __name: str) -> 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_, classes=None, html=None):\n        return super().create(type_, is_child=False, classes=classes, html=html)\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"
+    "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\nalert = window.alert\n\n\nclass BaseElement:\n    def __init__(self, js_element):\n        self._js = js_element\n        self._parent = None\n        self.style = StyleProxy(self)\n        self._proxies = {}\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, BaseElement) and obj._js == self._js\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._js.parentElement:\n            self._parent = self.__class__(self._js.parentElement)\n\n        return self._parent\n\n    @property\n    def __class(self):\n        return self.__class__ if self.__class__ != PyDom else Element\n\n    def create(self, type_, is_child=True, classes=None, html=None, label=None):\n        js_el = document.createElement(type_)\n        element = self.__class(js_el)\n\n        if classes:\n            for class_ in classes:\n                element.add_class(class_)\n\n        if html is not None:\n            element.html = html\n\n        if label is not None:\n            element.label = label\n\n        if is_child:\n            self.append(element)\n\n        return element\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        elements = self._js.querySelectorAll(selector)\n        if not elements:\n            return None\n        return ElementCollection([Element(el) for el in elements])\n\n\nclass Element(BaseElement):\n    @property\n    def children(self):\n        return [self.__class__(el) for el in self._js.children]\n\n    def append(self, child):\n        # TODO: this is Pyodide specific for now!!!!!!\n        # if we get passed a JSProxy Element directly we just map it to the\n        # higher level Python element\n        if isinstance(child, JsProxy):\n            return self.append(Element(child))\n\n        elif isinstance(child, Element):\n            self._js.appendChild(child._js)\n\n            return child\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self.append(el)\n\n    # -------- Pythonic Interface to Element -------- #\n    @property\n    def html(self):\n        return self._js.innerHTML\n\n    @html.setter\n    def html(self, value):\n        self._js.innerHTML = value\n\n    @property\n    def content(self):\n        # TODO: This breaks with with standard template elements. Define how to best\n        #       handle this specifica use case. Just not support for now?\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return None\n        return self._js.innerHTML\n\n    @content.setter\n    def content(self, value):\n        # TODO: (same comment as above)\n        if self._js.tagName == \"TEMPLATE\":\n            warnings.warn(\n                \"Content attribute not supported for template elements.\", stacklevel=2\n            )\n            return\n\n        display(value, target=self.id)\n\n    @property\n    def id(self):\n        return self._js.id\n\n    @id.setter\n    def id(self, value):\n        self._js.id = value\n\n    @property\n    def options(self):\n        if \"options\" in self._proxies:\n            return self._proxies[\"options\"]\n\n        if not self._js.tagName.lower() in {\"select\", \"datalist\", \"optgroup\"}:\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no options attribute.\"\n            )\n        self._proxies[\"options\"] = OptionsProxy(self)\n        return self._proxies[\"options\"]\n\n    @property\n    def value(self):\n        return self._js.value\n\n    @value.setter\n    def value(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"value\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.value = value\n\n    @property\n    def selected(self):\n        return self._js.selected\n\n    @selected.setter\n    def selected(self, value):\n        # in order to avoid confusion to the user, we don't allow setting the\n        # value of elements that don't have a value attribute\n        if not hasattr(self._js, \"selected\"):\n            raise AttributeError(\n                f\"Element {self._js.tagName} has no value attribute. If you want to \"\n                \"force a value attribute, set it directly using the `_js.value = <value>` \"\n                \"javascript API attribute instead.\"\n            )\n        self._js.selected = value\n\n    def clone(self, new_id=None):\n        clone = Element(self._js.cloneNode(True))\n        clone.id = new_id\n\n        return clone\n\n    def remove_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.remove(*classname)\n        else:\n            classList.remove(classname)\n        return self\n\n    def add_class(self, classname):\n        classList = self._js.classList\n        if isinstance(classname, list):\n            classList.add(*classname)\n        else:\n            self._js.classList.add(classname)\n        return self\n\n    @property\n    def classes(self):\n        classes = self._js.classList.values()\n        return [x for x in classes]\n\n    def show_me(self):\n        self._js.scrollIntoView()\n\n\nclass OptionsProxy:\n    \"\"\"This class represents the options of a select element. It\n    allows to access to add and remove options by using the `add` and `remove` methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        if self._element._js.tagName.lower() != \"select\":\n            raise AttributeError(\n                f\"Element {self._element._js.tagName} has no options attribute.\"\n            )\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n        # create the option element and set the attributes\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._js\n\n        self._element._js.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._js.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [Element(opt) for opt in self._element._js.options]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._js.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass StyleProxy(dict):\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    @cached_property\n    def _style(self):\n        return self._element._js.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kws):\n        for k, v in kws.items():\n            self._element._js.style.setProperty(k, v)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following prperties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._js.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._js.style.visibility = value\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self.style = StyleCollection(self)\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a selector\n        # TODO: Write tests!\n        elements = self._element.querySelectorAll(key)\n        return ElementCollection([Element(el) for el in elements])\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying JS element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n    @property\n    def html(self):\n        return self._get_attribute(\"html\")\n\n    @html.setter\n    def html(self, value):\n        self._set_attribute(\"html\", value)\n\n    @property\n    def value(self):\n        return self._get_attribute(\"value\")\n\n    @value.setter\n    def value(self, value):\n        self._set_attribute(\"value\", value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n\nclass DomScope:\n    def __getattr__(self, __name: str) -> 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_, classes=None, html=None):\n        return super().create(type_, is_child=False, classes=classes, html=html)\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

@@ -14,6 +14,7 @@ class BaseElement:
         self._js = js_element
         self._parent = None
         self.style = StyleProxy(self)
+        self._proxies = {}
 
     def __eq__(self, obj):
         """Check if the element is the same as the other element by comparing
@@ -129,6 +130,18 @@ class Element(BaseElement):
     def id(self, value):
         self._js.id = value
 
+    @property
+    def options(self):
+        if "options" in self._proxies:
+            return self._proxies["options"]
+
+        if not self._js.tagName.lower() in {"select", "datalist", "optgroup"}:
+            raise AttributeError(
+                f"Element {self._js.tagName} has no options attribute."
+            )
+        self._proxies["options"] = OptionsProxy(self)
+        return self._proxies["options"]
+
     @property
     def value(self):
         return self._js.value
@@ -145,6 +158,22 @@ class Element(BaseElement):
             )
         self._js.value = value
 
+    @property
+    def selected(self):
+        return self._js.selected
+
+    @selected.setter
+    def selected(self, value):
+        # in order to avoid confusion to the user, we don't allow setting the
+        # value of elements that don't have a value attribute
+        if not hasattr(self._js, "selected"):
+            raise AttributeError(
+                f"Element {self._js.tagName} has no value attribute. If you want to "
+                "force a value attribute, set it directly using the `_js.value = <value>` "
+                "javascript API attribute instead."
+            )
+        self._js.selected = value
+
     def clone(self, new_id=None):
         clone = Element(self._js.cloneNode(True))
         clone.id = new_id
@@ -176,6 +205,77 @@ class Element(BaseElement):
         self._js.scrollIntoView()
 
 
+class OptionsProxy:
+    """This class represents the options of a select element. It
+    allows to access to add and remove options by using the `add` and `remove` methods.
+    """
+
+    def __init__(self, element: Element) -> None:
+        self._element = element
+        if self._element._js.tagName.lower() != "select":
+            raise AttributeError(
+                f"Element {self._element._js.tagName} has no options attribute."
+            )
+
+    def add(
+        self,
+        value: Any = None,
+        html: str = None,
+        text: str = None,
+        before: Element | int = None,
+        **kws,
+    ) -> None:
+        """Add a new option to the select element"""
+        # create the option element and set the attributes
+        option = document.createElement("option")
+        if value is not None:
+            kws["value"] = value
+        if html is not None:
+            option.innerHTML = html
+        if text is not None:
+            kws["text"] = text
+
+        for key, value in kws.items():
+            option.setAttribute(key, value)
+
+        if before:
+            if isinstance(before, Element):
+                before = before._js
+
+        self._element._js.add(option, before)
+
+    def remove(self, item: int) -> None:
+        """Remove the option at the specified index"""
+        self._element._js.remove(item)
+
+    def clear(self) -> None:
+        """Remove all the options"""
+        for i in range(len(self)):
+            self.remove(0)
+
+    @property
+    def options(self):
+        """Return the list of options"""
+        return [Element(opt) for opt in self._element._js.options]
+
+    @property
+    def selected(self):
+        """Return the selected option"""
+        return self.options[self._element._js.selectedIndex]
+
+    def __iter__(self):
+        yield from self.options
+
+    def __len__(self):
+        return len(self.options)
+
+    def __repr__(self):
+        return f"{self.__class__.__name__} (length: {len(self)}) {self.options}"
+
+    def __getitem__(self, key):
+        return self.options[key]
+
+
 class StyleProxy(dict):
     def __init__(self, element: Element) -> None:
         self._element = element

package/src/stdlib.js

@@ -33,9 +33,13 @@ const write = (base, literal) => {
 
 write(".", pyscript);
 
-python.push("del _Path");
-python.push("del _path");
-python.push("del _os");
+// in order to fix js.document in the Worker case
+// we need to bootstrap pyscript module ASAP
+python.push("import pyscript as _pyscript");
+
+python.push(
+    ...["_Path", "_path", "_os", "_pyscript"].map((ref) => `del ${ref}`),
+);
 python.push("\n");
 
 export default python.join("\n");

package/types/3rd-party/codemirror.d.ts

@@ -0,0 +1 @@
+export * from "codemirror";

package/types/3rd-party/codemirror_commands.d.ts

@@ -0,0 +1 @@
+export * from "@codemirror/commands";

package/types/3rd-party/codemirror_lang-python.d.ts

@@ -0,0 +1 @@
+export * from "@codemirror/lang-python";