Update GH actions to node 20 and Python env for PyMinifier. (#2166)

* Update GH actions to node 20 and Python env for PyMinifier.

* Fix spaces.

* Fix test.yml

* [pre-commit.ci] auto fixes from pre-commit.com hooks

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

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -11,7 +11,9 @@ body:
 
         There will always be more issues than there is time to do them, and so we will need to selectively close issues that don't provide enough information, so we can focus our time on helping people like you who fill out the issue form completely. Thank you for your collaboration!
 
-        There are also already a lot of open issues, so please take 2 minutes and search through existing ones to see if what you are experiencing already exists
+        There are also already a lot of open issues, so please take 2 minutes and search through existing ones to see if what you are experiencing already exists.
+
+        Finally, if you are opening **a bug report related to PyScript.com** please [use this repository instead](https://github.com/anaconda/pyscript-dot-com-issues/issues/new/choose).
 
         Thanks for helping PyScript be amazing. We are nothing without people like you helping build a better community 💐!
   - type: checkboxes

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# Keep GitHub Actions up to date with GitHub's Dependabot...
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/keeping-your-actions-up-to-date-with-dependabot
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#package-ecosystem
+version: 2
+updates:
+    - package-ecosystem: github-actions
+      directory: /
+      groups:
+          github-actions:
+              patterns:
+                  - "*" # Group all Actions updates into a single larger pull request
+      schedule:
+          interval: weekly

.github/workflows/prepare-release.yml

@@ -17,12 +17,27 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Install node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: 20.x
+
+            - name: Python venv
+              run: python -m venv env
+
+            - name: Activate Python
+              run: source env/bin/activate
+
+            - name: Update pip
+              run: pip install --upgrade pip
+
+            - name: Install PyMinifier
+              run: pip install --ignore-requires-python python-minifier
+
+            - name: Install Setuptools
+              run: pip install setuptools
 
             - name: Cache node modules
-              uses: actions/cache@v3
+              uses: actions/cache@v4
               env:
                   cache-name: cache-node-modules
               with:
@@ -48,7 +63,7 @@ jobs:
               run: zip -r -q ./build.zip ./dist
 
             - name: Prepare Release
-              uses: softprops/action-gh-release@v1
+              uses: softprops/action-gh-release@v2
               with:
                   draft: true
                   prerelease: true

.github/workflows/publish-release.yml

@@ -19,12 +19,27 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Install node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: 20.x
+
+            - name: Python venv
+              run: python -m venv env
+
+            - name: Activate Python
+              run: source env/bin/activate
+
+            - name: Update pip
+              run: pip install --upgrade pip
+
+            - name: Install PyMinifier
+              run: pip install --ignore-requires-python python-minifier
+
+            - name: Install Setuptools
+              run: pip install setuptools
 
             - name: Cache node modules
-              uses: actions/cache@v3
+              uses: actions/cache@v4
               env:
                   cache-name: cache-node-modules
               with:
@@ -46,6 +61,10 @@ jobs:
               working-directory: .
               run: sed 's#_PATH_#https://pyscript.net/releases/${{ github.ref_name }}/#' ./public/index.html > ./pyscript.core/dist/index.html
 
+            - name: Generate release.tar from snapshot and put it in dist/
+              working-directory: .
+              run: tar -cvf ../release.tar * && mv ../release.tar .
+
             - name: Configure AWS credentials
               uses: aws-actions/configure-aws-credentials@v4
               with:

.github/workflows/publish-snapshot.yml

@@ -23,12 +23,27 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Install node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: 20.x
+
+            - name: Python venv
+              run: python -m venv env
+
+            - name: Activate Python
+              run: source env/bin/activate
+
+            - name: Update pip
+              run: pip install --upgrade pip
+
+            - name: Install PyMinifier
+              run: pip install --ignore-requires-python python-minifier
+
+            - name: Install Setuptools
+              run: pip install setuptools
 
             - name: Cache node modules
-              uses: actions/cache@v3
+              uses: actions/cache@v4
               env:
                   cache-name: cache-node-modules
               with:

.github/workflows/publish-unstable.yml

@@ -24,12 +24,27 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Install node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: 20.x
+
+            - name: Python venv
+              run: python -m venv env
+
+            - name: Activate Python
+              run: source env/bin/activate
+
+            - name: Update pip
+              run: pip install --upgrade pip
+
+            - name: Install PyMinifier
+              run: pip install --ignore-requires-python python-minifier
+
+            - name: Install Setuptools
+              run: pip install setuptools
 
             - name: Cache node modules
-              uses: actions/cache@v3
+              uses: actions/cache@v4
               env:
                   cache-name: cache-node-modules
               with:

.github/workflows/test.yml

@@ -37,12 +37,12 @@ jobs:
               run: git log --graph -3
 
             - name: Install node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 20.x
 
             - name: Cache node modules
-              uses: actions/cache@v3
+              uses: actions/cache@v4
               env:
                   cache-name: cache-node-modules
               with:
@@ -55,7 +55,7 @@ jobs:
                       ${{ runner.os }}-
 
             - name: setup Miniconda
-              uses: conda-incubator/setup-miniconda@v2
+              uses: conda-incubator/setup-miniconda@v3
 
             - name: Create and activate virtual environment
               run: |
@@ -76,7 +76,7 @@ jobs:
               run: |
                   make test-integration
 
-            - uses: actions/upload-artifact@v3
+            - uses: actions/upload-artifact@v4
               with:
                   name: pyscript
                   path: |
@@ -84,7 +84,7 @@ jobs:
                   if-no-files-found: error
                   retention-days: 7
 
-            - uses: actions/upload-artifact@v3
+            - uses: actions/upload-artifact@v4
               if: success() || failure()
               with:
                   name: test_results

.github/workflows/test_report.yml

@@ -8,7 +8,7 @@ jobs:
     report:
         runs-on: ubuntu-latest-8core
         steps:
-            - uses: dorny/test-reporter@v1.6.0
+            - uses: dorny/test-reporter@v1.9.0
               with:
                   artifact: test_results
                   name: Test reports

.gitignore

@@ -142,6 +142,7 @@ coverage/
 test_results
 
 # @pyscript/core npm artifacts
+pyscript.core/test-results/*
 pyscript.core/core.*
 pyscript.core/dist
 pyscript.core/dist.zip

.pre-commit-config.yaml

@@ -7,7 +7,7 @@ ci:
 default_stages: [commit]
 repos:
     - repo: https://github.com/pre-commit/pre-commit-hooks
-      rev: v4.5.0
+      rev: v4.6.0
       hooks:
           - id: check-builtin-literals
           - id: check-case-conflict
@@ -25,13 +25,13 @@ repos:
           - id: trailing-whitespace
 
     - repo: https://github.com/psf/black
-      rev: 23.11.0
+      rev: 24.8.0
       hooks:
           - id: black
             exclude: pyscript\.core/src/stdlib/pyscript/__init__\.py
 
     - repo: https://github.com/codespell-project/codespell
-      rev: v2.2.6
+      rev: v2.3.0
       hooks:
           - id: codespell # See 'pyproject.toml' for args
             exclude: \.js\.map$
@@ -46,7 +46,7 @@ repos:
             args: [--tab-width, "4"]
 
     - repo: https://github.com/pycqa/isort
-      rev: 5.12.0
+      rev: 5.13.2
       hooks:
           - id: isort
             name: isort (python)

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Release Notes
 
+## 2024.05.21
+
+### Features
+
+### Bug fixes
+
+### Enhancements
+
+-   `py-editor` run buttons now display a spinner when disabled, which occurs when the editor is running code.
+
 ## 2023.05.01
 
 ### Features

CONTRIBUTING.md

@@ -59,9 +59,9 @@ If you would like to contribute to PyScript, but you aren't sure where to begin,
 
 ## Setting up your local environment and developing
 
-If you would like to contribute to PyScript, you will need to set up a local development environment. The [following instructions](https://pyscript.github.io/docs/latest/development/setting-up-environment.html) will help you get started.
+If you would like to contribute to PyScript, you will need to set up a local development environment. The [following instructions](https://docs.pyscript.net/latest/contributing/#set-up-your-development-environment) will help you get started.
 
-You can also read about PyScript's [development process](https://pyscript.github.io/docs/latest/development/developing.html) to learn how to contribute code to PyScript, how to run tests and what's the PR etiquette of the community!
+You can also read about PyScript's [development process](https://docs.pyscript.net/latest/developers/) to learn how to contribute code to PyScript, how to run tests and what's the PR etiquette of the community!
 
 ## License terms for contributions
 
@@ -79,3 +79,103 @@ The Project abides by the Organization's [trademark policy](https://github.com/p
 
 Part of MVG-0.1-beta.
 Made with love by GitHub. Licensed under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by-sa/4.0/).
+
+# Quick guide to pytest
+
+We make heavy usage of pytest. Here is a quick guide and collection of useful options:
+
+-   To run all tests in the current directory and subdirectories: pytest
+
+-   To run tests in a specific directory or file: pytest path/to/dir/test_foo.py
+
+-   -s: disables output capturing
+
+-   --pdb: in case of exception, enter a (Pdb) prompt so that you can inspect what went wrong.
+
+-   -v: verbose mode
+
+-   -x: stop the execution as soon as one test fails
+
+-   -k foo: run only the tests whose full name contains foo
+
+-   -k 'foo and bar'
+
+-   -k 'foo and not bar'
+
+## Running integration tests under pytest
+
+make test is useful to run all the tests, but during the development is useful to have more control on how tests are run. The following guide assumes that you are in the directory pyscriptjs/tests/integration/.
+
+### To run all the integration tests, single or multi core
+
+$ pytest -xv
+...
+
+test_00_support.py::TestSupport::test_basic[chromium] PASSED [ 0%]
+test_00_support.py::TestSupport::test_console[chromium] PASSED [ 1%]
+test_00_support.py::TestSupport::test_check_js_errors_simple[chromium] PASSED [ 2%]
+test_00_support.py::TestSupport::test_check_js_errors_expected[chromium] PASSED [ 3%]
+test_00_support.py::TestSupport::test_check_js_errors_expected_but_didnt_raise[chromium] PASSED [ 4%]
+test_00_support.py::TestSupport::test_check_js_errors_multiple[chromium] PASSED [ 5%]
+...
+
+-x means "stop at the first failure". -v means "verbose", so that you can see all the test names one by one. We try to keep tests in a reasonable order, from most basic to most complex. This way, if you introduced some bug in very basic things, you will notice immediately.
+
+If you have the pytest-xdist plugin installed, you can run all the integration tests on 4 cores in parallel:
+
+$ pytest -n 4
+
+### To run a single test, headless
+
+$ pytest test_01_basic.py -k test_pyscript_hello -s
+...
+[ 0.00 page.goto ] pyscript_hello.html
+[ 0.01 request ] 200 - fake_server - http://fake_server/pyscript_hello.html
+...
+[ 0.17 console.info ] [py-loader] Downloading pyodide-x.y.z...
+[ 0.18 request ] 200 - CACHED - https://cdn.jsdelivr.net/pyodide/vx.y.z/full/pyodide.js
+...
+[ 3.59 console.info ] [pyscript/main] PyScript page fully initialized
+[ 3.60 console.log ] hello pyscript
+
+-k selects tests by pattern matching as described above. -s instructs pytest to show the output to the terminal instead of capturing it. In the output you can see various useful things, including network requests and JS console messages.
+
+### To run a single test, headed
+
+$ pytest test_01_basic.py -k test_pyscript_hello -s --headed
+...
+
+Same as above, but with --headed the browser is shown in a window, and you can interact with it. The browser uses a fake server, which means that HTTP requests are cached.
+
+Unfortunately, in this mode source maps does not seem to work, and you cannot debug the original typescript source code. This seems to be a bug in playwright, for which we have a workaround:
+
+$ pytest test_01_basic.py -k test_pyscript_hello -s --headed --no-fake-server
+...
+
+As the name implies, -no-fake-server disables the fake server: HTTP requests are not cached, but source-level debugging works.
+
+Finally:
+
+$ pytest test_01_basic.py -k test_pyscript_hello -s --dev
+...
+
+--dev implies --headed --no-fake-server. In addition, it also automatically open chrome dev tools.
+
+### To run only main thread or worker tests
+
+By default, we run each test twice: one with execution_thread = "main" and one with execution_thread = "worker". If you want to run only half of them, you can use -m:
+
+$ pytest -m main # run only the tests in the main thread
+$ pytest -m worker # ron only the tests in the web worker
+
+## Fake server, HTTP cache
+
+By default, our test machinery uses a playwright router which intercepts and cache HTTP requests, so that for example you don't have to download pyodide again and again. This also enables the possibility of running tests in parallel on multiple cores.
+
+The cache is stored using the pytest-cache plugin, which means that it survives across sessions.
+
+If you want to temporarily disable the cache, the easiest thing is to use --no-fake-server, which bypasses it completely.
+
+If you want to clear the cache, you can use the special option --clear-http-cache:
+
+NOTE: this works only if you are inside tests/integration, or if you explicitly specify tests/integration from the command line. This is due to how pytest decides to search for and load the various conftest.py.

LICENSE

@@ -186,7 +186,11 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+
+   Copyright (c) 2022-present, PyScript Development Team
+
+   Originated at Anaconda, Inc. in 2022
+
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -38,11 +38,11 @@ To try PyScript, import the appropriate pyscript files into the `<head>` tag of
 <head>
     <link
         rel="stylesheet"
-        href="https://pyscript.net/releases/2023.11.2/core.css"
+        href="https://pyscript.net/releases/2024.6.2/core.css"
     />
     <script
         type="module"
-        src="https://pyscript.net/releases/2023.11.2/core.js"
+        src="https://pyscript.net/releases/2024.6.2/core.js"
     ></script>
 </head>
 <body>
@@ -67,10 +67,29 @@ Check out the [official docs](https://docs.pyscript.net/) for more detailed docu
 
 ## How to Contribute
 
-Read the [contributing guide](CONTRIBUTING.md) to learn about our development process, reporting bugs and improvements, creating issues and asking questions.
+Read the [contributing guide](https://docs.pyscript.net/latest/contributing/) to learn about our development process, reporting bugs and improvements, creating issues and asking questions.
 
-Check out the [developing process](https://pyscript.github.io/docs/latest/contributing) documentation for more information on how to setup your development environment.
+Check out the [developing process](https://docs.pyscript.net/latest/developers/) documentation for more information on how to setup your development environment.
 
 ## Governance
 
 The [PyScript organization governance](https://github.com/pyscript/governance) is documented in a separate repository.
+
+## Release
+
+To cut a new release of PyScript simply
+[add a new release](https://github.com/pyscript/pyscript/releases) while
+remembering to write a comprehensive changelog. A [GitHub action](https://github.com/pyscript/pyscript/blob/main/.github/workflows/publish-release.yml)
+will kick in and ensure the release is described and deployed to a URL with the
+pattern: https://pyscript.net/releases/YYYY.M.v/ (year/month/version - as per
+our [CalVer](https://calver.org/) versioning scheme).
+
+Then, the following three separate repositories need updating:
+
+-   [Documentation](https://github.com/pyscript/docs) - Change the `version.json`
+    file in the root of the directory and then `node version-update.js`.
+-   [Homepage](https://github.com/pyscript/pyscript.net) - Ensure the version
+    referenced in `index.html` is the latest version.
+-   [PSDC](https://pyscript.com) - Use discord or Anaconda Slack (if you work at
+    Anaconda) to let the PSDC team know there's a new version, so they can update
+    their project templates.

pyscript.core/.eslintrc.cjs

@@ -1,26 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: "eslint:recommended",
-    overrides: [
-        {
-            env: {
-                node: true,
-            },
-            files: [".eslintrc.{js,cjs}"],
-            parserOptions: {
-                sourceType: "script",
-            },
-        },
-    ],
-    parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-    },
-    ignorePatterns: ["3rd-party"],
-    rules: {
-        "no-implicit-globals": ["error"],
-    },
-};

pyscript.core/.npmignore

@@ -1,10 +0,0 @@
-.eslintrc.cjs
-.pytest_cache/
-node_modules/
-rollup/
-test/
-tests/
-src/stdlib/_pyscript
-src/stdlib/pyscript.py
-package-lock.json
-tsconfig.json

pyscript.core/README.md

@@ -12,7 +12,7 @@ Clone this repository then run `npm install` within its folder.
 
 Use `npm run build` to create all artifacts and _dist_ files.
 
-Use `npm run server` to test locally, via the `http://localhost:8080/test/` url, smoke tests or to test manually anything you'd like to check.
+Use `npm run server` to test locally, via the `http://localhost:8080/tests/` url, smoke tests or to test manually anything you'd like to check.
 
 ### Artifacts
 

pyscript.core/eslint.config.mjs

@@ -0,0 +1,22 @@
+import globals from "globals";
+import js from "@eslint/js";
+
+export default [
+    js.configs.recommended,
+    {
+        ignores: ["**/3rd-party/"],
+    },
+    {
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            globals: {
+                ...globals.browser,
+                ...globals.es2021,
+            },
+        },
+        rules: {
+            "no-implicit-globals": ["error"],
+        },
+    },
+];

pyscript.core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pyscript/core",
-    "version": "0.3.14",
+    "version": "0.5.12",
     "type": "module",
     "description": "PyScript",
     "module": "./index.js",
@@ -8,6 +8,15 @@
     "jsdelivr": "./jsdelivr.js",
     "browser": "./index.js",
     "main": "./index.js",
+    "files": [
+        "./dist/",
+        "./src/",
+        "./types/",
+        "./index.js",
+        "./jsdelivr.js",
+        "LICENSE",
+        "README.md"
+    ],
     "exports": {
         ".": {
             "types": "./types/core.d.ts",
@@ -16,17 +25,23 @@
         "./css": {
             "import": "./dist/core.css"
         },
+        "./storage": {
+            "import": "./dist/storage.js"
+        },
         "./package.json": "./package.json"
     },
     "scripts": {
-        "server": "npx static-handler --coi .",
-        "build": "npm run build:3rd-party && npm run build:stdlib && npm run build:plugins && npm run build:core && eslint src/ && npm run ts && npm run test:mpy",
+        "server": "echo \"➡️  TESTS @ $(tput bold)http://localhost:8080/tests/$(tput sgr0)\"; npx static-handler --coi .",
+        "build": "export ESLINT_USE_FLAT_CONFIG=true;npm run build:3rd-party && npm run build:stdlib && npm run build:plugins && npm run build:core && npm run build:tests-index && if [ -z \"$NO_MIN\" ]; then eslint src/ && npm run ts && npm run test:integration; fi",
         "build:core": "rm -rf dist && rollup --config rollup/core.config.js && cp src/3rd-party/*.css dist/",
+        "build:flatted": "node rollup/flatted.cjs",
         "build:plugins": "node rollup/plugins.cjs",
         "build:stdlib": "node rollup/stdlib.cjs",
         "build:3rd-party": "node rollup/3rd-party.cjs",
+        "build:tests-index": "node rollup/build_test_index.cjs",
         "clean:3rd-party": "rm src/3rd-party/*.js && rm src/3rd-party/*.css",
-        "test:mpy": "static-handler --coi . 2>/dev/null & SH_PID=$!; EXIT_CODE=0; playwright test --fully-parallel test/ || EXIT_CODE=$?; kill $SH_PID 2>/dev/null; exit $EXIT_CODE",
+        "test:integration": "static-handler --coi . 2>/dev/null & SH_PID=$!; EXIT_CODE=0; playwright test --fully-parallel tests/integration.spec.js || EXIT_CODE=$?; kill $SH_PID 2>/dev/null; exit $EXIT_CODE",
+        "test:ws": "bun tests/ws/index.js & playwright test tests/ws.spec.js",
         "dev": "node dev.cjs",
         "release": "npm run build && npm run zip",
         "size": "echo -e \"\\033[1mdist/*.js file size\\033[0m\"; for js in $(ls dist/*.js); do cat $js | brotli > ._; echo -e \"\\033[2m$js:\\033[0m $(du -h --apparent-size ._ | sed -e 's/[[:space:]]*._//')\"; rm ._; done",
@@ -41,32 +56,37 @@
     "license": "APACHE-2.0",
     "dependencies": {
         "@ungap/with-resolvers": "^0.1.0",
+        "@webreflection/idb-map": "^0.3.1",
         "basic-devtools": "^0.1.6",
-        "polyscript": "^0.6.8",
+        "polyscript": "^0.15.6",
+        "sabayon": "^0.5.2",
         "sticky-module": "^0.1.1",
         "to-json-callback": "^0.1.1",
         "type-checked-collections": "^0.1.7"
     },
     "devDependencies": {
-        "@codemirror/commands": "^6.3.2",
-        "@codemirror/lang-python": "^6.1.3",
-        "@codemirror/language": "^6.9.3",
-        "@codemirror/state": "^6.3.3",
-        "@codemirror/view": "^6.22.3",
-        "@playwright/test": "^1.40.1",
-        "@rollup/plugin-commonjs": "^25.0.7",
+        "@codemirror/commands": "^6.6.1",
+        "@codemirror/lang-python": "^6.1.6",
+        "@codemirror/language": "^6.10.2",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/view": "^6.33.0",
+        "@playwright/test": "1.45.3",
+        "@rollup/plugin-commonjs": "^26.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@webreflection/toml-j0.4": "^1.1.3",
-        "@xterm/addon-fit": "^0.9.0-beta.1",
-        "chokidar": "^3.5.3",
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/addon-web-links": "^0.11.0",
+        "bun": "^1.1.27",
+        "chokidar": "^4.0.0",
         "codemirror": "^6.0.1",
-        "eslint": "^8.56.0",
-        "rollup": "^4.9.1",
+        "eslint": "^9.10.0",
+        "flatted": "^3.3.1",
+        "rollup": "^4.21.3",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-string": "^3.0.0",
-        "static-handler": "^0.4.3",
-        "typescript": "^5.3.3",
+        "static-handler": "^0.5.3",
+        "typescript": "^5.6.2",
         "xterm": "^5.3.0",
         "xterm-readline": "^1.1.1"
     },

pyscript.core/rollup/3rd-party.cjs

@@ -51,6 +51,9 @@ const modules = {
     "xterm_addon-fit.js": fetch(`${CDN}/@xterm/addon-fit/+esm`).then((b) =>
         b.text(),
     ),
+    "xterm_addon-web-links.js": fetch(
+        `${CDN}/@xterm/addon-web-links/+esm`,
+    ).then((b) => b.text()),
     "xterm.css": fetch(`${CDN}/xterm@${v("xterm")}/css/xterm.min.css`).then(
         (b) => b.text(),
     ),

pyscript.core/rollup/build_test_index.cjs

@@ -0,0 +1,73 @@
+const { join } = require("node:path");
+const { lstatSync, readdirSync, writeFileSync } = require("node:fs");
+
+// folders to not consider while crawling
+const EXCLUDE_DIR = new Set(["ws"]);
+
+const TEST_DIR = join(__dirname, "..", "tests");
+
+const TEST_INDEX = join(TEST_DIR, "index.html");
+
+const crawl = (path, tree = {}) => {
+    for (const file of readdirSync(path)) {
+        const current = join(path, file);
+        if (current === TEST_INDEX) continue;
+        if (lstatSync(current).isDirectory()) {
+            if (EXCLUDE_DIR.has(file)) continue;
+            const sub = {};
+            tree[file] = sub;
+            crawl(current, sub);
+            if (!Reflect.ownKeys(sub).length) {
+                delete tree[file];
+            }
+        } else if (file.endsWith(".html")) {
+            const name = file === "index.html" ? "." : file.slice(0, -5);
+            tree[name] = current.replace(TEST_DIR, "");
+        }
+    }
+    return tree;
+};
+
+const createList = (tree) => {
+    const ul = ["<ul>"];
+    for (const [key, value] of Object.entries(tree)) {
+        ul.push("<li>");
+        if (typeof value === "string") {
+            ul.push(`<a href=".${value}">${key}<small>.html</small></a>`);
+        } else {
+            if ("." in value) {
+                ul.push(`<strong><a href=".${value["."]}">${key}</a></strong>`);
+                delete value["."];
+            } else {
+                ul.push(`<strong><span>${key}</span></strong>`);
+            }
+            if (Reflect.ownKeys(value).length) ul.push(createList(value));
+        }
+        ul.push("</li>");
+    }
+    ul.push("</ul>");
+    return ul.join("");
+};
+
+writeFileSync(
+    TEST_INDEX,
+    `<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PyScript tests</title>
+        <style>
+            body { font-family: sans-serif; }
+            a {
+                display: block;
+                transition: opacity .3s;
+            }
+            a, span { opacity: .7; }
+            a:hover { opacity: 1; }
+        </style>
+    </head>
+    <body>${createList(crawl(TEST_DIR))}</body>
+</html>
+`,
+);

pyscript.core/rollup/core.config.js

@@ -40,4 +40,17 @@ export default [
             warn(warning);
         },
     },
+    {
+        input: "./src/storage.js",
+        plugins: plugins.concat(
+            process.env.NO_MIN
+                ? [nodeResolve(), commonjs()]
+                : [nodeResolve(), commonjs(), terser()],
+        ),
+        output: {
+            esModule: true,
+            dir: "./dist",
+            sourcemap: true,
+        },
+    },
 ];

pyscript.core/rollup/flatted.cjs

@@ -0,0 +1,17 @@
+const { writeFileSync, readFileSync } = require("node:fs");
+const { join } = require("node:path");
+
+const flatted = "# https://www.npmjs.com/package/flatted\n\n";
+const source = join(
+    __dirname,
+    "..",
+    "node_modules",
+    "flatted",
+    "python",
+    "flatted.py",
+);
+const dest = join(__dirname, "..", "src", "stdlib", "pyscript", "flatted.py");
+
+const clear = (str) => String(str).replace(/^#.*/gm, "").trimStart();
+
+writeFileSync(dest, flatted + clear(readFileSync(source)));

pyscript.core/rollup/stdlib.cjs

@@ -4,13 +4,27 @@ const {
     statSync,
     writeFileSync,
 } = require("node:fs");
+
+const { spawnSync } = require("node:child_process");
+
 const { join } = require("node:path");
 
 const crawl = (path, json) => {
     for (const file of readdirSync(path)) {
         const full = join(path, file);
-        if (/\.py$/.test(file)) json[file] = readFileSync(full).toString();
-        else if (statSync(full).isDirectory() && !file.endsWith("_"))
+        if (/\.py$/.test(file)) {
+            if (process.env.NO_MIN) json[file] = readFileSync(full).toString();
+            else {
+                const {
+                    output: [error, result],
+                } = spawnSync("pyminify", [
+                    "--remove-literal-statements",
+                    full,
+                ]);
+                if (error) process.exit(1);
+                json[file] = result.toString();
+            }
+        } else if (statSync(full).isDirectory() && !file.endsWith("_"))
             crawl(full, (json[file] = {}));
     }
 };

pyscript.core/src/config.js

@@ -45,6 +45,8 @@ const configDetails = async (config, type) => {
 
 const conflictError = (reason) => new Error(`(${CONFLICTING_CODE}): ${reason}`);
 
+const relative_url = (url, base = location.href) => new URL(url, base).href;
+
 const syntaxError = (type, url, { message }) => {
     let str = `(${BAD_CONFIG}): Invalid ${type}`;
     if (url) str += ` @ ${url}`;
@@ -63,6 +65,9 @@ for (const [TYPE] of TYPES) {
     /** @type {Error | undefined} The error thrown when parsing the PyScript config, if any.*/
     let error;
 
+    /** @type {string | undefined} The `configURL` field to normalize all config operations as opposite of guessing it once resolved */
+    let configURL;
+
     let config,
         type,
         pyElement,
@@ -105,6 +110,7 @@ for (const [TYPE] of TYPES) {
     if (!error && config) {
         try {
             const { json, toml, text, url } = await configDetails(config, type);
+            if (url) configURL = relative_url(url);
             config = text;
             if (json || type === "json") {
                 try {
@@ -146,7 +152,7 @@ for (const [TYPE] of TYPES) {
     // assign plugins as Promise.all only if needed
     plugins = Promise.all(toBeAwaited);
 
-    configs.set(TYPE, { config: parsed, plugins, error });
+    configs.set(TYPE, { config: parsed, configURL, plugins, error });
 }
 
-export default configs;
+export { configs, relative_url };

pyscript.core/src/core.css

@@ -42,3 +42,34 @@ mpy-config {
 .mpy-editor-run-button:disabled {
     opacity: 1;
 }
+
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+.py-editor-run-button:disabled > *,
+.mpy-editor-run-button:disabled > * {
+    display: none; /* hide all the child elements of the run button when it is disabled */
+}
+.py-editor-run-button:disabled,
+.mpy-editor-run-button:disabled {
+    border-width: 0;
+}
+.py-editor-run-button:disabled::before,
+.mpy-editor-run-button:disabled::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 100%;
+    left: 100%;
+    width: 20px;
+    height: 20px;
+    margin-top: -23px; /* hardcoded value to center the spinner on the run button */
+    margin-left: -26px; /* hardcoded value to center the spinner on the run button */
+    border-radius: 50%;
+    border: 2px solid #aaa;
+    border-top-color: #000;
+    background-color: #fff;
+    animation: spinner 0.6s linear infinite;
+}

pyscript.core/src/core.js

@@ -12,6 +12,7 @@ import {
     define,
     defineProperty,
     dispatch,
+    isSync,
     queryTarget,
     unescape,
     whenDefined,
@@ -19,20 +20,56 @@ import {
 
 import "./all-done.js";
 import TYPES from "./types.js";
-import configs from "./config.js";
+import { configs, relative_url } from "./config.js";
 import sync from "./sync.js";
 import bootstrapNodeAndPlugins from "./plugins-helper.js";
 import { ErrorCode } from "./exceptions.js";
 import { robustFetch as fetch, getText } from "./fetch.js";
-import { hooks, main, worker, codeFor, createFunction } from "./hooks.js";
+import {
+    hooks,
+    main,
+    worker,
+    codeFor,
+    createFunction,
+    inputFailure,
+} from "./hooks.js";
+
+import { stdlib, optional } from "./stdlib.js";
+export { stdlib, optional, inputFailure };
 
 // generic helper to disambiguate between custom element and script
 const isScript = ({ tagName }) => tagName === "SCRIPT";
 
+// Used to create either Pyodide or MicroPython workers
+// with the PyScript module available within the code
+const [PyWorker, MPWorker] = [...TYPES.entries()].map(
+    ([TYPE, interpreter]) =>
+        /**
+         * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.
+         * @param {string} file the python file to run ina worker.
+         * @param {{config?: string | object, async?: boolean}} [options] optional configuration for the worker.
+         * @returns {Promise<Worker & {sync: object}>}
+         */
+        async function PyScriptWorker(file, options) {
+            await configs.get(TYPE).plugins;
+            const xworker = XWorker.call(
+                new Hook(null, hooked.get(TYPE)),
+                file,
+                {
+                    ...options,
+                    type: interpreter,
+                },
+            );
+            assign(xworker.sync, sync);
+            return xworker.ready;
+        },
+);
+
 // avoid multiple initialization of the same library
 const [
     {
         PyWorker: exportedPyWorker,
+        MPWorker: exportedMPWorker,
         hooks: exportedHooks,
         config: exportedConfig,
         whenDefined: exportedWhenDefined,
@@ -40,6 +77,7 @@ const [
     alreadyLive,
 ] = stickyModule("@pyscript/core", {
     PyWorker,
+    MPWorker,
     hooks,
     config: {},
     whenDefined,
@@ -47,12 +85,17 @@ const [
 
 export {
     TYPES,
+    relative_url,
     exportedPyWorker as PyWorker,
+    exportedMPWorker as MPWorker,
     exportedHooks as hooks,
     exportedConfig as config,
     exportedWhenDefined as whenDefined,
 };
 
+export const offline_interpreter = (config) =>
+    config?.interpreter && relative_url(config.interpreter);
+
 const hooked = new Map();
 
 for (const [TYPE, interpreter] of TYPES) {
@@ -64,7 +107,7 @@ for (const [TYPE, interpreter] of TYPES) {
         else dispatch(element, TYPE, "done");
     };
 
-    const { config, plugins, error } = configs.get(TYPE);
+    const { config, configURL, plugins, error } = configs.get(TYPE);
 
     // create a unique identifier when/if needed
     let id = 0;
@@ -116,6 +159,7 @@ for (const [TYPE, interpreter] of TYPES) {
         // enrich the Python env with some JS utility for main
         interpreter.registerJsModule("_pyscript", {
             PyWorker,
+            js_import: (...urls) => Promise.all(urls.map((url) => import(url))),
             get target() {
                 return isScript(currentElement)
                     ? currentElement.target.id
@@ -137,7 +181,7 @@ for (const [TYPE, interpreter] of TYPES) {
             // specific main and worker hooks
             const hooks = {
                 main: {
-                    ...codeFor(main),
+                    ...codeFor(main, TYPE),
                     async onReady(wrap, element) {
                         registerModule(wrap);
 
@@ -159,15 +203,13 @@ for (const [TYPE, interpreter] of TYPES) {
                         }
 
                         if (isScript(element)) {
-                            const {
-                                attributes: { async: isAsync, target },
-                            } = element;
-                            const hasTarget = !!target?.value;
-                            const show = hasTarget
-                                ? queryTarget(element, target.value)
+                            const isAsync = !isSync(element);
+                            const target = element.getAttribute("target");
+                            const show = target
+                                ? queryTarget(element, target)
                                 : document.createElement("script-py");
 
-                            if (!hasTarget) {
+                            if (!target) {
                                 const { head, body } = document;
                                 if (head.contains(element)) body.append(show);
                                 else element.after(show);
@@ -234,7 +276,7 @@ for (const [TYPE, interpreter] of TYPES) {
                     },
                 },
                 worker: {
-                    ...codeFor(worker),
+                    ...codeFor(worker, TYPE),
                     // these are lazy getters that returns a composition
                     // of the current hooks or undefined, if no hook is present
                     get onReady() {
@@ -259,10 +301,11 @@ for (const [TYPE, interpreter] of TYPES) {
 
             define(TYPE, {
                 config,
+                configURL,
                 interpreter,
                 hooks,
                 env: `${TYPE}-script`,
-                version: config?.interpreter,
+                version: offline_interpreter(config),
                 onerror(error, element) {
                     errors.set(element, error);
                 },
@@ -287,7 +330,7 @@ for (const [TYPE, interpreter] of TYPES) {
                     async connectedCallback() {
                         if (!this.executed) {
                             this.executed = true;
-                            const isAsync = this.hasAttribute("async");
+                            const isAsync = !isSync(this);
                             const { io, run, runAsync } = await this._wrap
                                 .promise;
                             this.srcCode = await fetchSource(
@@ -313,24 +356,3 @@ for (const [TYPE, interpreter] of TYPES) {
     // export the used config without allowing leaks through it
     exportedConfig[TYPE] = structuredClone(config);
 }
-
-/**
- * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.
- * @param {string} file the python file to run ina worker.
- * @param {{config?: string | object, async?: boolean}} [options] optional configuration for the worker.
- * @returns {Worker & {sync: ProxyHandler<object>}}
- */
-function PyWorker(file, options) {
-    const hooks = hooked.get("py");
-    // this propagates pyscript worker hooks without needing a pyscript
-    // bootstrap + it passes arguments and it defaults to `pyodide`
-    // as the interpreter to use in the worker, as all hooks assume that
-    // and as `pyodide` is the only default interpreter that can deal with
-    // all the features we need to deliver pyscript out there.
-    const xworker = XWorker.call(new Hook(null, hooks), file, {
-        type: "pyodide",
-        ...options,
-    });
-    assign(xworker.sync, sync);
-    return xworker;
-}

pyscript.core/src/fetch.js

@@ -1,7 +1,10 @@
 import { FetchError, ErrorCode } from "./exceptions.js";
-import { getText } from "polyscript/exports";
 
-export { getText };
+/**
+ * @param {Response} response
+ * @returns
+ */
+export const getText = (response) => response.text();
 
 /**
  * This is a fetch wrapper that handles any non 200 responses and throws a

pyscript.core/src/hooks.js

@@ -2,7 +2,7 @@ import { typedSet } from "type-checked-collections";
 import { dedent } from "polyscript/exports";
 import toJSONCallback from "to-json-callback";
 
-import stdlib from "./stdlib.js";
+import { stdlib, optional } from "./stdlib.js";
 
 export const main = (name) => hooks.main[name];
 export const worker = (name) => hooks.worker[name];
@@ -15,10 +15,11 @@ const code = (hooks, branch, key, lib) => {
     };
 };
 
-export const codeFor = (branch) => {
+export const codeFor = (branch, type) => {
+    const pylib = type === "mpy" ? stdlib.replace(optional, "") : stdlib;
     const hooks = {};
-    code(hooks, branch, `codeBeforeRun`, stdlib);
-    code(hooks, branch, `codeBeforeRunAsync`, stdlib);
+    code(hooks, branch, `codeBeforeRun`, pylib);
+    code(hooks, branch, `codeBeforeRunAsync`, pylib);
     code(hooks, branch, `codeAfterRun`);
     code(hooks, branch, `codeAfterRunAsync`);
     return hooks;
@@ -45,7 +46,7 @@ export const createFunction = (self, name) => {
 const SetFunction = typedSet({ typeof: "function" });
 const SetString = typedSet({ typeof: "string" });
 
-const inputFailure = `
+export const inputFailure = `
     import builtins
     def input(prompt=""):
         raise Exception("\\n           ".join([

pyscript.core/src/plugins/py-editor.js

@@ -1,6 +1,7 @@
 // PyScript py-editor plugin
-import { Hook, XWorker, dedent } from "polyscript/exports";
-import { TYPES } from "../core.js";
+import { Hook, XWorker, dedent, defineProperties } from "polyscript/exports";
+import { TYPES, offline_interpreter, relative_url, stdlib } from "../core.js";
+import { notify } from "./error.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>`;
 
@@ -8,30 +9,73 @@ let id = 0;
 const getID = (type) => `${type}-editor-${id++}`;
 
 const envs = new Map();
+const configs = new Map();
 
 const hooks = {
     worker: {
+        codeBeforeRun: () => stdlib,
         // works on both Pyodide and MicroPython
         onReady: ({ runAsync, io }, { sync }) => {
-            io.stdout = (line) => sync.write(line);
-            io.stderr = (line) => sync.writeErr(line);
+            io.stdout = io.buffered(sync.write);
+            io.stderr = io.buffered(sync.writeErr);
             sync.revoke();
             sync.runAsync = runAsync;
         },
     },
 };
 
+const validate = (config, result) => {
+    if (typeof result === "boolean") throw `Invalid source: ${config}`;
+    return result;
+};
+
 async function execute({ currentTarget }) {
     const { env, pySrc, outDiv } = this;
+    const hasRunButton = !!currentTarget;
 
-    currentTarget.disabled = true;
-    outDiv.innerHTML = "";
+    if (hasRunButton) {
+        currentTarget.disabled = true;
+        outDiv.innerHTML = "";
+    }
 
     if (!envs.has(env)) {
         const srcLink = URL.createObjectURL(new Blob([""]));
-        const xworker = XWorker.call(new Hook(null, hooks), srcLink, {
+        const details = {
             type: this.interpreter,
-        });
+            serviceWorker: this.serviceWorker,
+        };
+        const { config } = this;
+        if (config) {
+            // verify that config can be parsed and used
+            try {
+                details.configURL = relative_url(config);
+                if (config.endsWith(".toml")) {
+                    const [{ parse }, toml] = await Promise.all([
+                        import(
+                            /* webpackIgnore: true */ "../3rd-party/toml.js"
+                        ),
+                        fetch(config).then((r) => r.ok && r.text()),
+                    ]);
+                    details.config = parse(validate(config, toml));
+                } else if (config.endsWith(".json")) {
+                    const json = await fetch(config).then(
+                        (r) => r.ok && r.json(),
+                    );
+                    details.config = validate(config, json);
+                } else {
+                    details.configURL = relative_url("./config.txt");
+                    details.config = JSON.parse(config);
+                }
+                details.version = offline_interpreter(details.config);
+            } catch (error) {
+                notify(error);
+                return;
+            }
+        } else {
+            details.config = {};
+        }
+
+        const xworker = XWorker.call(new Hook(null, hooks), srcLink, details);
 
         const { sync } = xworker;
         const { promise, resolve } = Promise.withResolvers();
@@ -44,43 +88,60 @@ async function execute({ currentTarget }) {
 
     // wait for the env then set the target div
     // before executing the current code
-    envs.get(env).then((xworker) => {
+    return envs.get(env).then((xworker) => {
         xworker.onerror = ({ error }) => {
-            outDiv.innerHTML += `<span style='color:red'>${
-                error.message || error
-            }</span>\n`;
+            if (hasRunButton) {
+                outDiv.insertAdjacentHTML(
+                    "beforeend",
+                    `<span style='color:red'>${
+                        error.message || error
+                    }</span>\n`,
+                );
+            }
             console.error(error);
         };
 
         const enable = () => {
-            currentTarget.disabled = false;
+            if (hasRunButton) currentTarget.disabled = false;
         };
         const { sync } = xworker;
         sync.write = (str) => {
-            outDiv.innerText += `${str}\n`;
+            if (hasRunButton) outDiv.innerText += `${str}\n`;
+            else console.log(str);
         };
         sync.writeErr = (str) => {
-            outDiv.innerHTML += `<span style='color:red'>${str}</span>\n`;
+            if (hasRunButton) {
+                outDiv.insertAdjacentHTML(
+                    "beforeend",
+                    `<span style='color:red'>${str}</span>\n`,
+                );
+            } else {
+                notify(str);
+                console.error(str);
+            }
         };
         sync.runAsync(pySrc).then(enable, enable);
     });
 }
 
-const makeRunButton = (listener, type) => {
+const makeRunButton = (handler, 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);
+    runButton.addEventListener("click", async (event) => {
+        runButton.blur();
+        await handler.handleEvent(event);
+    });
     return runButton;
 };
 
-const makeEditorDiv = (listener, type) => {
+const makeEditorDiv = (handler, type) => {
     const editorDiv = document.createElement("div");
     editorDiv.className = `${type}-editor-input`;
     editorDiv.setAttribute("aria-label", "Python Script Area");
 
-    const runButton = makeRunButton(listener, type);
+    const runButton = makeRunButton(handler, type);
     const editorShadowContainer = document.createElement("div");
 
     // avoid outer elements intercepting key events (reveal as example)
@@ -100,15 +161,15 @@ const makeOutDiv = (type) => {
     return outDiv;
 };
 
-const makeBoxDiv = (listener, type) => {
+const makeBoxDiv = (handler, type) => {
     const boxDiv = document.createElement("div");
     boxDiv.className = `${type}-editor-box`;
 
-    const editorDiv = makeEditorDiv(listener, type);
+    const editorDiv = makeEditorDiv(handler, type);
     const outDiv = makeOutDiv(type);
     boxDiv.append(editorDiv, outDiv);
 
-    return [boxDiv, outDiv];
+    return [boxDiv, outDiv, editorDiv.querySelector("button")];
 };
 
 const init = async (script, type, interpreter) => {
@@ -118,9 +179,8 @@ const init = async (script, type, interpreter) => {
         { python },
         { indentUnit },
         { keymap },
-        { defaultKeymap },
+        { defaultKeymap, indentWithTab },
     ] = 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(
@@ -131,9 +191,136 @@ const init = async (script, type, interpreter) => {
         import(/* webpackIgnore: true */ "../3rd-party/codemirror_commands.js"),
     ]);
 
-    const selector = script.getAttribute("target");
+    let isSetup = script.hasAttribute("setup");
+    const hasConfig = script.hasAttribute("config");
+    const serviceWorker = script.getAttribute("service-worker");
+    const env = `${interpreter}-${script.getAttribute("env") || getID(type)}`;
+
+    // helps preventing too lazy ServiceWorker initialization on button run
+    if (serviceWorker) {
+        new XWorker("data:application/javascript,postMessage(0)", {
+            type: "dummy",
+            serviceWorker,
+        }).onmessage = ({ target }) => target.terminate();
+    }
+
+    if (hasConfig && configs.has(env)) {
+        throw new SyntaxError(
+            configs.get(env)
+                ? `duplicated config for env: ${env}`
+                : `unable to add a config to the env: ${env}`,
+        );
+    }
+
+    configs.set(env, hasConfig);
+
+    let source = script.textContent;
+
+    // verify the src points to a valid file that can be parsed
+    const { src } = script;
+    if (src) {
+        try {
+            source = validate(
+                src,
+                await fetch(src).then((b) => b.ok && b.text()),
+            );
+        } catch (error) {
+            notify(error);
+            return;
+        }
+    }
+
+    const context = {
+        // allow the listener to be overridden at distance
+        handleEvent: execute,
+        serviceWorker,
+        interpreter,
+        env,
+        config: hasConfig && script.getAttribute("config"),
+        get pySrc() {
+            return isSetup ? source : editor.state.doc.toString();
+        },
+        get outDiv() {
+            return isSetup ? null : outDiv;
+        },
+    };
 
     let target;
+    defineProperties(script, {
+        target: { get: () => target },
+        handleEvent: {
+            get: () => context.handleEvent,
+            set: (callback) => {
+                // do not bother with logic if it was set back as its original handler
+                if (callback === execute) context.handleEvent = execute;
+                // in every other case be sure that if the listener override returned
+                // `false` nothing happens, otherwise keep doing what it always did
+                else {
+                    context.handleEvent = async (event) => {
+                        // trap the currentTarget ASAP (if any)
+                        // otherwise it gets lost asynchronously
+                        const { currentTarget } = event;
+                        // augment a code snapshot before invoking the override
+                        defineProperties(event, {
+                            code: { value: context.pySrc },
+                        });
+                        // avoid executing the default handler if the override returned `false`
+                        if ((await callback(event)) !== false)
+                            await execute.call(context, { currentTarget });
+                    };
+                }
+            },
+        },
+        code: {
+            get: () => context.pySrc,
+            set: (insert) => {
+                if (isSetup) return;
+                editor.update([
+                    editor.state.update({
+                        changes: {
+                            from: 0,
+                            to: editor.state.doc.length,
+                            insert,
+                        },
+                    }),
+                ]);
+            },
+        },
+        process: {
+            /**
+             * Simulate a setup node overriding the source to evaluate.
+             * @param {string} code the Python code to evaluate.
+             * @returns {Promise<...>} fulfill once code has been evaluated.
+             */
+            value(code) {
+                const wasSetup = isSetup;
+                const wasSource = source;
+                isSetup = true;
+                source = code;
+                const restore = () => {
+                    isSetup = wasSetup;
+                    source = wasSource;
+                };
+                return context
+                    .handleEvent({ currentTarget: null })
+                    .then(restore, restore);
+            },
+        },
+    });
+
+    const notifyEditor = () => {
+        const event = new Event(`${type}-editor`, { bubbles: true });
+        script.dispatchEvent(event);
+    };
+
+    if (isSetup) {
+        await context.handleEvent({ currentTarget: null });
+        notifyEditor();
+        return;
+    }
+
+    const selector = script.getAttribute("target");
+
     if (selector) {
         target =
             document.getElementById(selector) ||
@@ -149,21 +336,8 @@ const init = async (script, type, interpreter) => {
     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);
+    const [boxDiv, outDiv, runButton] = makeBoxDiv(context, type);
     boxDiv.dataset.env = script.hasAttribute("env") ? env : interpreter;
 
     const inputChild = boxDiv.querySelector(`.${type}-editor-input > div`);
@@ -176,8 +350,9 @@ const init = async (script, type, interpreter) => {
     const doc = dedent(script.textContent).trim();
 
     // preserve user indentation, if any
-    const indentation = /^(\s+)/m.test(doc) ? RegExp.$1 : "    ";
+    const indentation = /^([ \t]+)/m.test(doc) ? RegExp.$1 : "    ";
 
+    const listener = () => runButton.click();
     const editor = new EditorView({
         extensions: [
             indentUnit.of(indentation),
@@ -187,19 +362,27 @@ const init = async (script, type, interpreter) => {
                 { key: "Ctrl-Enter", run: listener, preventDefault: true },
                 { key: "Cmd-Enter", run: listener, preventDefault: true },
                 { key: "Shift-Enter", run: listener, preventDefault: true },
+                // @see https://codemirror.net/examples/tab/
+                indentWithTab,
             ]),
             basicSetup,
         ],
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
         parent,
         doc,
     });
 
     editor.focus();
+    notifyEditor();
 };
 
 // avoid too greedy MutationObserver operations at distance
 let timeout = 0;
 
+// avoid delayed initialization
+let queue = Promise.resolve();
+
 // reset interval value then check for new scripts
 const resetTimeout = () => {
     timeout = 0;
@@ -207,17 +390,20 @@ const resetTimeout = () => {
 };
 
 // triggered both ASAP on the living DOM and via MutationObserver later
-const pyEditor = async () => {
+const pyEditor = () => {
     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
+            // avoid any further bootstrap by changing the type as active
             script.type += "-active";
-            await init(script, type, interpreter);
+            // don't await in here or multiple calls might happen
+            // while the first script is being initialized
+            queue = queue.then(() => init(script, type, interpreter));
         }
     }
+    return queue;
 };
 
 new MutationObserver(pyEditor).observe(document, {

pyscript.core/src/plugins/py-terminal.js

@@ -1,11 +1,13 @@
 // PyScript py-terminal plugin
-import { TYPES, hooks } from "../core.js";
+import { TYPES, relative_url } from "../core.js";
 import { notify } from "./error.js";
-import { defineProperty } from "polyscript/exports";
+import { customObserver } from "polyscript/exports";
 
-const SELECTOR = [...TYPES.keys()]
-    .map((type) => `script[type="${type}"][terminal],${type}-script[terminal]`)
-    .join(",");
+// will contain all valid selectors
+const SELECTORS = [];
+
+// avoid processing same elements twice
+const processed = new WeakSet();
 
 // show the error on main and
 // stops the module from keep executing
@@ -14,139 +16,45 @@ const notifyAndThrow = (message) => {
     throw new Error(message);
 };
 
-const pyTerminal = async () => {
-    const terminals = document.querySelectorAll(SELECTOR);
+const onceOnMain = ({ attributes: { worker } }) => !worker;
 
-    // no results will look further for runtime nodes
-    if (!terminals.length) return;
+let addStyle = true;
 
-    // if we arrived this far, let's drop the MutationObserver
-    // as we only support one terminal per page (right now).
-    mo.disconnect();
+for (const type of TYPES.keys()) {
+    const selector = `script[type="${type}"][terminal],${type}-script[terminal]`;
+    SELECTORS.push(selector);
+    customObserver.set(selector, async (element) => {
+        // we currently support only one terminal on main as in "classic"
+        const terminals = document.querySelectorAll(SELECTORS.join(","));
+        if ([].filter.call(terminals, onceOnMain).length > 1)
+            notifyAndThrow("You can use at most 1 main terminal");
 
-    // we currently support only one terminal as in "classic"
-    if (terminals.length > 1) notifyAndThrow("You can use at most 1 terminal.");
-
-    const [element] = terminals;
-    // hopefully to be removed in the near future!
-    if (element.matches('script[type="mpy"],mpy-script'))
-        notifyAndThrow("Unsupported terminal.");
-
-    // import styles lazily
-    document.head.append(
-        Object.assign(document.createElement("link"), {
-            rel: "stylesheet",
-            href: new URL("./xterm.css", import.meta.url),
-        }),
-    );
-
-    // lazy load these only when a valid terminal is found
-    const [{ Terminal }, { Readline }, { FitAddon }] = await Promise.all([
-        import(/* webpackIgnore: true */ "../3rd-party/xterm.js"),
-        import(/* webpackIgnore: true */ "../3rd-party/xterm-readline.js"),
-        import(/* webpackIgnore: true */ "../3rd-party/xterm_addon-fit.js"),
-    ]);
-
-    const readline = new Readline();
-
-    // common main thread initialization for both worker
-    // or main case, bootstrapping the terminal on its target
-    const init = (options) => {
-        let target = element;
-        const selector = element.getAttribute("target");
-        if (selector) {
-            target =
-                document.getElementById(selector) ||
-                document.querySelector(selector);
-            if (!target) throw new Error(`Unknown target ${selector}`);
-        } else {
-            target = document.createElement("py-terminal");
-            target.style.display = "block";
-            element.after(target);
+        // import styles lazily
+        if (addStyle) {
+            addStyle = false;
+            document.head.append(
+                Object.assign(document.createElement("link"), {
+                    rel: "stylesheet",
+                    href: relative_url("./xterm.css", import.meta.url),
+                }),
+            );
         }
-        const terminal = new Terminal({
-            theme: {
-                background: "#191A19",
-                foreground: "#F5F2E7",
-            },
-            ...options,
-        });
-        const fitAddon = new FitAddon();
-        terminal.loadAddon(fitAddon);
-        terminal.loadAddon(readline);
-        terminal.open(target);
-        fitAddon.fit();
-        terminal.focus();
-        defineProperty(element, "terminal", { value: terminal });
-    };
 
-    // branch logic for the worker
-    if (element.hasAttribute("worker")) {
-        // when the remote thread onReady triggers:
-        // setup the interpreter stdout and stderr
-        const workerReady = ({ interpreter }, { sync }) => {
-            sync.pyterminal_drop_hooks();
-            const decoder = new TextDecoder();
-            let data = "";
-            const generic = {
-                isatty: true,
-                write(buffer) {
-                    data = decoder.decode(buffer);
-                    sync.pyterminal_write(data);
-                    return buffer.length;
-                },
-            };
-            interpreter.setStdout(generic);
-            interpreter.setStderr(generic);
-            interpreter.setStdin({
-                isatty: true,
-                stdin: () => sync.pyterminal_read(data),
-            });
-        };
+        if (processed.has(element)) return;
+        processed.add(element);
 
-        // add a hook on the main thread to setup all sync helpers
-        // also bootstrapping the XTerm target on main
-        hooks.main.onWorker.add(function worker(_, xworker) {
-            hooks.main.onWorker.delete(worker);
-            init({
-                disableStdin: false,
-                cursorBlink: true,
-                cursorStyle: "block",
-            });
-            xworker.sync.pyterminal_read = readline.read.bind(readline);
-            xworker.sync.pyterminal_write = readline.write.bind(readline);
-            // allow a worker to drop main thread hooks ASAP
-            xworker.sync.pyterminal_drop_hooks = () => {
-                hooks.worker.onReady.delete(workerReady);
-            };
-        });
+        const bootstrap = (module) => module.default(element);
 
-        // setup remote thread JS/Python code for whenever the
-        // worker is ready to become a terminal
-        hooks.worker.onReady.add(workerReady);
-    } else {
-        // in the main case, just bootstrap XTerm without
-        // allowing any input as that's not possible / awkward
-        hooks.main.onReady.add(function main({ io }) {
-            console.warn("py-terminal is read only on main thread");
-            hooks.main.onReady.delete(main);
-            init({
-                disableStdin: true,
-                cursorBlink: false,
-                cursorStyle: "underline",
-            });
-            io.stdout = (value) => {
-                readline.write(`${value}\n`);
-            };
-            io.stderr = (error) => {
-                readline.write(`${error.message || error}\n`);
-            };
-        });
-    }
-};
-
-const mo = new MutationObserver(pyTerminal);
-mo.observe(document, { childList: true, subtree: true });
-
-// try to check the current document ASAP
-export default pyTerminal();
+        // we can't be smart with template literals for the dynamic import
+        // or bundlers are incapable of producing multiple files around
+        if (type === "mpy") {
+            await import(/* webpackIgnore: true */ "./py-terminal/mpy.js").then(
+                bootstrap,
+            );
+        } else {
+            await import(/* webpackIgnore: true */ "./py-terminal/py.js").then(
+                bootstrap,
+            );
+        }
+    });
+}

pyscript.core/src/plugins/py-terminal/mpy.js

@@ -0,0 +1,252 @@
+// PyScript pyodide terminal plugin
+import { hooks, inputFailure } from "../../core.js";
+import { defineProperties } from "polyscript/exports";
+
+const bootstrapped = new WeakSet();
+
+// this callback will be serialized as string and it never needs
+// to be invoked multiple times. Each xworker here is bootstrapped
+// only once thanks to the `sync.is_pyterminal()` check.
+const workerReady = ({ interpreter, io, run, type }, { sync }) => {
+    if (type !== "mpy" || !sync.is_pyterminal()) return;
+
+    const { pyterminal_ready, pyterminal_read, pyterminal_write } = sync;
+
+    interpreter.registerJsModule("_pyscript_input", {
+        input: pyterminal_read,
+    });
+
+    run(
+        [
+            "from _pyscript_input import input",
+            "from polyscript import currentScript as _",
+            "__terminal__ = _.terminal",
+            "del _",
+        ].join(";"),
+    );
+
+    const missingReturn = new Uint8Array([13]);
+    io.stdout = (buffer) => {
+        if (buffer[0] === 10) pyterminal_write(missingReturn);
+        pyterminal_write(buffer);
+    };
+    io.stderr = (error) => {
+        pyterminal_write(String(error.message || error));
+    };
+
+    // tiny shim of the code module with only interact
+    // to bootstrap a REPL like environment
+    interpreter.registerJsModule("code", {
+        interact() {
+            const encoder = new TextEncoderStream();
+            encoder.readable.pipeTo(
+                new WritableStream({
+                    write(buffer) {
+                        for (const c of buffer) interpreter.replProcessChar(c);
+                    },
+                }),
+            );
+
+            const writer = encoder.writable.getWriter();
+            sync.pyterminal_stream_write = (buffer) => writer.write(buffer);
+
+            interpreter.replInit();
+        },
+    });
+
+    pyterminal_ready();
+};
+
+export default async (element) => {
+    // lazy load these only when a valid terminal is found
+    const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
+        import(/* webpackIgnore: true */ "../../3rd-party/xterm.js"),
+        import(/* webpackIgnore: true */ "../../3rd-party/xterm_addon-fit.js"),
+        import(
+            /* webpackIgnore: true */ "../../3rd-party/xterm_addon-web-links.js"
+        ),
+    ]);
+
+    const terminalOptions = {
+        disableStdin: false,
+        cursorBlink: true,
+        cursorStyle: "block",
+    };
+
+    let stream;
+
+    // common main thread initialization for both worker
+    // or main case, bootstrapping the terminal on its target
+    const init = () => {
+        let target = element;
+        const selector = element.getAttribute("target");
+        if (selector) {
+            target =
+                document.getElementById(selector) ||
+                document.querySelector(selector);
+            if (!target) throw new Error(`Unknown target ${selector}`);
+        } else {
+            target = document.createElement("py-terminal");
+            target.style.display = "block";
+            element.after(target);
+        }
+        const terminal = new Terminal({
+            theme: {
+                background: "#191A19",
+                foreground: "#F5F2E7",
+            },
+            ...terminalOptions,
+        });
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+        terminal.loadAddon(new WebLinksAddon());
+        terminal.open(target);
+        fitAddon.fit();
+        terminal.focus();
+        defineProperties(element, {
+            terminal: { value: terminal },
+            process: {
+                value: async (code) => {
+                    for (const line of code.split(/(?:\r\n|\r|\n)/)) {
+                        await stream.write(`${line}\r`);
+                    }
+                },
+            },
+        });
+        return terminal;
+    };
+
+    // branch logic for the worker
+    if (element.hasAttribute("worker")) {
+        // add a hook on the main thread to setup all sync helpers
+        // also bootstrapping the XTerm target on main *BUT* ...
+        hooks.main.onWorker.add(function worker(_, xworker) {
+            // ... as multiple workers will add multiple callbacks
+            // be sure no xworker is ever initialized twice!
+            if (bootstrapped.has(xworker)) return;
+            bootstrapped.add(xworker);
+
+            // still cleanup this callback for future scripts/workers
+            hooks.main.onWorker.delete(worker);
+
+            const terminal = init();
+
+            const { sync } = xworker;
+
+            // handle the read mode on input
+            let promisedChunks = null;
+            let readChunks = "";
+
+            sync.is_pyterminal = () => true;
+
+            // put the terminal in a read-only state
+            // frees the worker on \r
+            sync.pyterminal_read = (buffer) => {
+                terminal.write(buffer);
+                promisedChunks = Promise.withResolvers();
+                return promisedChunks.promise;
+            };
+
+            // write if not reading input
+            sync.pyterminal_write = (buffer) => {
+                if (!promisedChunks) terminal.write(buffer);
+            };
+
+            // add the onData terminal listener which forwards to the worker
+            // everything typed in a queued char-by-char way
+            sync.pyterminal_ready = () => {
+                let queue = Promise.resolve();
+                stream = {
+                    write: (buffer) =>
+                        (queue = queue.then(() =>
+                            sync.pyterminal_stream_write(buffer),
+                        )),
+                };
+                terminal.onData((buffer) => {
+                    if (promisedChunks) {
+                        // handle backspace on input
+                        if (buffer === "\x7f") {
+                            // avoid over-greedy backspace
+                            if (readChunks.length) {
+                                readChunks = readChunks.slice(0, -1);
+                                // override previous char position
+                                // put an empty space to clear the char
+                                // move back position again
+                                buffer = "\b \b";
+                            } else buffer = "";
+                        } else readChunks += buffer;
+                        if (buffer) {
+                            terminal.write(buffer);
+                            if (readChunks.endsWith("\r")) {
+                                terminal.write("\n");
+                                promisedChunks.resolve(readChunks.slice(0, -1));
+                                promisedChunks = null;
+                                readChunks = "";
+                            }
+                        }
+                    } else {
+                        stream.write(buffer);
+                    }
+                });
+            };
+        });
+
+        // setup remote thread JS/Python code for whenever the
+        // worker is ready to become a terminal
+        hooks.worker.onReady.add(workerReady);
+    } else {
+        // ⚠️ In an ideal world the inputFailure should never be used on main.
+        //    However, Pyodide still can't compete with MicroPython REPL mode
+        //    so while it's OK to keep that entry on main as default, we need
+        //    to remove it ASAP from `mpy` use cases, otherwise MicroPython would
+        //    also throw whenever an `input(...)` is required / digited.
+        hooks.main.codeBeforeRun.delete(inputFailure);
+
+        // in the main case, just bootstrap XTerm without
+        // allowing any input as that's not possible / awkward
+        hooks.main.onReady.add(function main({ interpreter, io, run, type }) {
+            if (type !== "mpy") return;
+
+            hooks.main.onReady.delete(main);
+
+            const terminal = init();
+
+            const missingReturn = new Uint8Array([13]);
+            io.stdout = (buffer) => {
+                if (buffer[0] === 10) terminal.write(missingReturn);
+                terminal.write(buffer);
+            };
+
+            // expose the __terminal__ one-off reference
+            globalThis.__py_terminal__ = terminal;
+            run(
+                [
+                    "from js import prompt as input",
+                    "from js import __py_terminal__ as __terminal__",
+                ].join(";"),
+            );
+            delete globalThis.__py_terminal__;
+
+            // NOTE: this is NOT the same as the one within
+            //       the onWorkerReady callback!
+            interpreter.registerJsModule("code", {
+                interact() {
+                    const encoder = new TextEncoderStream();
+                    encoder.readable.pipeTo(
+                        new WritableStream({
+                            write(buffer) {
+                                for (const c of buffer)
+                                    interpreter.replProcessChar(c);
+                            },
+                        }),
+                    );
+
+                    stream = encoder.writable.getWriter();
+                    terminal.onData((buffer) => stream.write(buffer));
+
+                    interpreter.replInit();
+                },
+            });
+        });
+    }
+};

pyscript.core/src/plugins/py-terminal/py.js

@@ -0,0 +1,179 @@
+// PyScript py-terminal plugin
+import { hooks } from "../../core.js";
+import { defineProperties } from "polyscript/exports";
+
+const bootstrapped = new WeakSet();
+
+// this callback will be serialized as string and it never needs
+// to be invoked multiple times. Each xworker here is bootstrapped
+// only once thanks to the `sync.is_pyterminal()` check.
+const workerReady = ({ interpreter, io, run, type }, { sync }) => {
+    if (type !== "py" || !sync.is_pyterminal()) return;
+
+    run(
+        [
+            "from polyscript import currentScript as _",
+            "__terminal__ = _.terminal",
+            "del _",
+        ].join(";"),
+    );
+
+    let data = "";
+    const { pyterminal_read, pyterminal_write } = sync;
+    const decoder = new TextDecoder();
+    const generic = {
+        isatty: false,
+        write(buffer) {
+            data = decoder.decode(buffer);
+            pyterminal_write(data);
+            return buffer.length;
+        },
+    };
+
+    io.stderr = (error) => {
+        pyterminal_write(String(error.message || error));
+    };
+
+    interpreter.setStdout(generic);
+    interpreter.setStderr(generic);
+    interpreter.setStdin({
+        isatty: false,
+        stdin: () => pyterminal_read(data),
+    });
+};
+
+export default async (element) => {
+    // lazy load these only when a valid terminal is found
+    const [{ Terminal }, { Readline }, { FitAddon }, { WebLinksAddon }] =
+        await Promise.all([
+            import(/* webpackIgnore: true */ "../../3rd-party/xterm.js"),
+            import(
+                /* webpackIgnore: true */ "../../3rd-party/xterm-readline.js"
+            ),
+            import(
+                /* webpackIgnore: true */ "../../3rd-party/xterm_addon-fit.js"
+            ),
+            import(
+                /* webpackIgnore: true */ "../../3rd-party/xterm_addon-web-links.js"
+            ),
+        ]);
+
+    const readline = new Readline();
+
+    // common main thread initialization for both worker
+    // or main case, bootstrapping the terminal on its target
+    const init = (options) => {
+        let target = element;
+        const selector = element.getAttribute("target");
+        if (selector) {
+            target =
+                document.getElementById(selector) ||
+                document.querySelector(selector);
+            if (!target) throw new Error(`Unknown target ${selector}`);
+        } else {
+            target = document.createElement("py-terminal");
+            target.style.display = "block";
+            element.after(target);
+        }
+        const terminal = new Terminal({
+            theme: {
+                background: "#191A19",
+                foreground: "#F5F2E7",
+            },
+            ...options,
+        });
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+        terminal.loadAddon(readline);
+        terminal.loadAddon(new WebLinksAddon());
+        terminal.open(target);
+        fitAddon.fit();
+        terminal.focus();
+        defineProperties(element, {
+            terminal: { value: terminal },
+            process: {
+                value: async (code) => {
+                    for (const line of code.split(/(?:\r\n|\r|\n)/)) {
+                        terminal.paste(`${line}`);
+                        terminal.write("\r\n");
+                        do {
+                            await new Promise((resolve) =>
+                                setTimeout(resolve, 0),
+                            );
+                        } while (!readline.activeRead?.resolve);
+                        readline.activeRead.resolve(line);
+                    }
+                },
+            },
+        });
+        return terminal;
+    };
+
+    // branch logic for the worker
+    if (element.hasAttribute("worker")) {
+        // add a hook on the main thread to setup all sync helpers
+        // also bootstrapping the XTerm target on main *BUT* ...
+        hooks.main.onWorker.add(function worker(_, xworker) {
+            // ... as multiple workers will add multiple callbacks
+            // be sure no xworker is ever initialized twice!
+            if (bootstrapped.has(xworker)) return;
+            bootstrapped.add(xworker);
+
+            // still cleanup this callback for future scripts/workers
+            hooks.main.onWorker.delete(worker);
+
+            init({
+                disableStdin: false,
+                cursorBlink: true,
+                cursorStyle: "block",
+            });
+
+            xworker.sync.is_pyterminal = () => true;
+            xworker.sync.pyterminal_read = readline.read.bind(readline);
+            xworker.sync.pyterminal_write = readline.write.bind(readline);
+        });
+
+        // setup remote thread JS/Python code for whenever the
+        // worker is ready to become a terminal
+        hooks.worker.onReady.add(workerReady);
+    } else {
+        // in the main case, just bootstrap XTerm without
+        // allowing any input as that's not possible / awkward
+        hooks.main.onReady.add(function main({ interpreter, io, run, type }) {
+            if (type !== "py") return;
+
+            console.warn("py-terminal is read only on main thread");
+            hooks.main.onReady.delete(main);
+
+            // on main, it's easy to trash and clean the current terminal
+            globalThis.__py_terminal__ = init({
+                disableStdin: true,
+                cursorBlink: false,
+                cursorStyle: "underline",
+            });
+            run("from js import __py_terminal__ as __terminal__");
+            delete globalThis.__py_terminal__;
+
+            io.stderr = (error) => {
+                readline.write(String(error.message || error));
+            };
+
+            let data = "";
+            const decoder = new TextDecoder();
+            const generic = {
+                isatty: false,
+                write(buffer) {
+                    data = decoder.decode(buffer);
+                    readline.write(data);
+                    return buffer.length;
+                },
+            };
+            interpreter.setStdout(generic);
+            interpreter.setStderr(generic);
+            interpreter.setStdin({
+                isatty: false,
+                stdin: () => readline.read(data),
+            });
+        });
+    }
+};

pyscript.core/src/stdlib.js

@@ -8,6 +8,27 @@
 
 import pyscript from "./stdlib/pyscript.js";
 
+class Ignore extends Array {
+    #add = false;
+    #paths;
+    #array;
+    constructor(array, ...paths) {
+        super();
+        this.#array = array;
+        this.#paths = paths;
+    }
+    push(...values) {
+        if (this.#add) super.push(...values);
+        return this.#array.push(...values);
+    }
+    path(path) {
+        for (const _path of this.#paths) {
+            // bails out at the first `true` value
+            if ((this.#add = path.startsWith(_path))) break;
+        }
+    }
+}
+
 const { entries } = Object;
 
 const python = [
@@ -16,16 +37,19 @@ const python = [
     "_path = None",
 ];
 
+const ignore = new Ignore(python, "-");
+
 const write = (base, literal) => {
     for (const [key, value] of entries(literal)) {
-        python.push(`_path = _Path("${base}/${key}")`);
+        ignore.path(`${base}/${key}`);
+        ignore.push(`_path = _Path("${base}/${key}")`);
         if (typeof value === "string") {
             const code = JSON.stringify(value);
-            python.push(`_path.write_text(${code})`);
+            ignore.push(`_path.write_text(${code},encoding="utf-8")`);
         } else {
             // @see https://github.com/pyscript/pyscript/pull/1813#issuecomment-1781502909
-            python.push(`if not _os.path.exists("${base}/${key}"):`);
-            python.push("    _path.mkdir(parents=True, exist_ok=True)");
+            ignore.push(`if not _os.path.exists("${base}/${key}"):`);
+            ignore.push("    _path.mkdir(parents=True, exist_ok=True)");
             write(`${base}/${key}`, value);
         }
     }
@@ -42,4 +66,5 @@ python.push(
 );
 python.push("\n");
 
-export default python.join("\n");
+export const stdlib = python.join("\n");
+export const optional = ignore.join("\n");

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

@@ -29,20 +29,31 @@
 #     pyscript.magic_js. This is the blessed way to access them from pyscript,
 #     as it works transparently in both the main thread and worker cases.
 
+from polyscript import lazy_py_modules as py_import
 from pyscript.display import HTML, display
+from pyscript.fetch import fetch
 from pyscript.magic_js import (
     RUNNING_IN_WORKER,
     PyWorker,
+    config,
     current_target,
     document,
+    js_import,
     js_modules,
     sync,
     window,
 )
+from pyscript.storage import Storage, storage
+from pyscript.websocket import WebSocket
+
+if not RUNNING_IN_WORKER:
+    from pyscript.workers import create_named_worker, workers
 
 try:
     from pyscript.event_handling import when
 except:
+    # TODO: should we remove this? Or at the very least, we should capture
+    # the traceback otherwise it's very hard to debug
     from pyscript.util import NotSupported
 
     when = NotSupported(

pyscript.core/src/stdlib/pyscript/display.py

@@ -6,17 +6,17 @@ import re
 from pyscript.magic_js import current_target, document, window
 
 _MIME_METHODS = {
-    "__repr__": "text/plain",
-    "_repr_html_": "text/html",
-    "_repr_markdown_": "text/markdown",
-    "_repr_svg_": "image/svg+xml",
-    "_repr_pdf_": "application/pdf",
-    "_repr_jpeg_": "image/jpeg",
-    "_repr_png_": "image/png",
-    "_repr_latex": "text/latex",
-    "_repr_json_": "application/json",
-    "_repr_javascript_": "application/javascript",
     "savefig": "image/png",
+    "_repr_javascript_": "application/javascript",
+    "_repr_json_": "application/json",
+    "_repr_latex": "text/latex",
+    "_repr_png_": "image/png",
+    "_repr_jpeg_": "image/jpeg",
+    "_repr_pdf_": "application/pdf",
+    "_repr_svg_": "image/svg+xml",
+    "_repr_markdown_": "text/markdown",
+    "_repr_html_": "text/html",
+    "__repr__": "text/plain",
 }
 
 
@@ -99,7 +99,7 @@ def _format_mime(obj):
         format_dict = mimebundle
 
     output, not_available = None, []
-    for method, mime_type in reversed(_MIME_METHODS.items()):
+    for method, mime_type in _MIME_METHODS.items():
         if mime_type in format_dict:
             output = format_dict[mime_type]
         else:

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

@@ -1,6 +1,14 @@
 import inspect
 
-from pyodide.ffi.wrappers import add_event_listener
+try:
+    from pyodide.ffi.wrappers import add_event_listener
+
+except ImportError:
+
+    def add_event_listener(el, event_type, func):
+        el.addEventListener(event_type, func)
+
+
 from pyscript.magic_js import document
 
 
@@ -11,35 +19,58 @@ def when(event_type=None, selector=None):
     """
 
     def decorator(func):
+
+        from pyscript.web import Element, ElementCollection
+
         if isinstance(selector, str):
             elements = document.querySelectorAll(selector)
+        # TODO: This is a hack that will be removed when pyscript becomes a package
+        #       and we can better manage the imports without circular dependencies
+        elif isinstance(selector, Element):
+            elements = [selector._dom_element]
+        elif isinstance(selector, ElementCollection):
+            elements = [el._dom_element for el in selector]
         else:
-            # TODO: This is a hack that will be removed when pyscript becomes a package
-            #       and we can better manage the imports without circular dependencies
-            from pyweb import pydom
-
-            if isinstance(selector, pydom.Element):
-                elements = [selector._js]
-            elif isinstance(selector, pydom.ElementCollection):
-                elements = [el._js for el in selector]
+            if isinstance(selector, list):
+                elements = selector
             else:
-                raise ValueError(
-                    f"Invalid selector: {selector}. Selector must"
-                    " be a string, a pydom.Element or a pydom.ElementCollection."
-                )
+                elements = [selector]
 
-        sig = inspect.signature(func)
-        # Function doesn't receive events
-        if not sig.parameters:
+        try:
+            sig = inspect.signature(func)
+            # Function doesn't receive events
+            if not sig.parameters:
 
+                # Function is async: must be awaited
+                if inspect.iscoroutinefunction(func):
+
+                    async def wrapper(*args, **kwargs):
+                        await func()
+
+                else:
+
+                    def wrapper(*args, **kwargs):
+                        func()
+
+            else:
+                wrapper = func
+
+        except AttributeError:
+            # 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):
-                func()
+                try:
+                    return func(*args, **kwargs)
+                except TypeError as e:
+                    if "takes" in str(e) and "positional arguments" in str(e):
+                        return func()
+
+                    raise
+
+        for el in elements:
+            add_event_listener(el, event_type, wrapper)
 
-            for el in elements:
-                add_event_listener(el, event_type, wrapper)
-        else:
-            for el in elements:
-                add_event_listener(el, event_type, func)
         return func
 
     return decorator

pyscript.core/src/stdlib/pyscript/fetch.py

@@ -0,0 +1,87 @@
+import json
+
+import js
+from pyscript.util import as_bytearray
+
+
+### wrap the response to grant Pythonic results
+class _Response:
+    def __init__(self, response):
+        self._response = response
+
+    # grant access to response.ok and other fields
+    def __getattr__(self, attr):
+        return getattr(self._response, attr)
+
+    # exposed methods with Pythonic results
+    async def arrayBuffer(self):
+        buffer = await self._response.arrayBuffer()
+        # works in Pyodide
+        if hasattr(buffer, "to_py"):
+            return buffer.to_py()
+        # shims in MicroPython
+        return memoryview(as_bytearray(buffer))
+
+    async def blob(self):
+        return await self._response.blob()
+
+    async def bytearray(self):
+        buffer = await self._response.arrayBuffer()
+        return as_bytearray(buffer)
+
+    async def json(self):
+        return json.loads(await self.text())
+
+    async def text(self):
+        return await self._response.text()
+
+
+### allow direct await to _Response methods
+class _DirectResponse:
+    @staticmethod
+    def setup(promise, response):
+        promise._response = _Response(response)
+        return promise._response
+
+    def __init__(self, promise):
+        self._promise = promise
+        promise._response = None
+        promise.arrayBuffer = self.arrayBuffer
+        promise.blob = self.blob
+        promise.bytearray = self.bytearray
+        promise.json = self.json
+        promise.text = self.text
+
+    async def _response(self):
+        if not self._promise._response:
+            await self._promise
+        return self._promise._response
+
+    async def arrayBuffer(self):
+        response = await self._response()
+        return await response.arrayBuffer()
+
+    async def blob(self):
+        response = await self._response()
+        return await response.blob()
+
+    async def bytearray(self):
+        response = await self._response()
+        return await response.bytearray()
+
+    async def json(self):
+        response = await self._response()
+        return await response.json()
+
+    async def text(self):
+        response = await self._response()
+        return await response.text()
+
+
+def fetch(url, **kw):
+    # workaround Pyodide / MicroPython dict <-> js conversion
+    options = js.JSON.parse(json.dumps(kw))
+    awaited = lambda response, *args: _DirectResponse.setup(promise, response)
+    promise = js.fetch(url, options).then(awaited)
+    _DirectResponse(promise)
+    return promise

pyscript.core/src/stdlib/pyscript/ffi.py

@@ -0,0 +1,18 @@
+try:
+    import js
+    from pyodide.ffi import create_proxy as _cp
+    from pyodide.ffi import to_js as _py_tjs
+
+    from_entries = js.Object.fromEntries
+
+    def _tjs(value, **kw):
+        if not hasattr(kw, "dict_converter"):
+            kw["dict_converter"] = from_entries
+        return _py_tjs(value, **kw)
+
+except:
+    from jsffi import create_proxy as _cp
+    from jsffi import to_js as _tjs
+
+create_proxy = _cp
+to_js = _tjs

pyscript.core/src/stdlib/pyscript/flatted.py

@@ -0,0 +1,148 @@
+# https://www.npmjs.com/package/flatted
+
+import json as _json
+
+
+class _Known:
+    def __init__(self):
+        self.key = []
+        self.value = []
+
+
+class _String:
+    def __init__(self, value):
+        self.value = value
+
+
+def _array_keys(value):
+    keys = []
+    i = 0
+    for _ in value:
+        keys.append(i)
+        i += 1
+    return keys
+
+
+def _object_keys(value):
+    keys = []
+    for key in value:
+        keys.append(key)
+    return keys
+
+
+def _is_array(value):
+    return isinstance(value, list) or isinstance(value, tuple)
+
+
+def _is_object(value):
+    return isinstance(value, dict)
+
+
+def _is_string(value):
+    return isinstance(value, str)
+
+
+def _index(known, input, value):
+    input.append(value)
+    index = str(len(input) - 1)
+    known.key.append(value)
+    known.value.append(index)
+    return index
+
+
+def _loop(keys, input, known, output):
+    for key in keys:
+        value = output[key]
+        if isinstance(value, _String):
+            _ref(key, input[int(value.value)], input, known, output)
+
+    return output
+
+
+def _ref(key, value, input, known, output):
+    if _is_array(value) and not value in known:
+        known.append(value)
+        value = _loop(_array_keys(value), input, known, value)
+    elif _is_object(value) and not value in known:
+        known.append(value)
+        value = _loop(_object_keys(value), input, known, value)
+
+    output[key] = value
+
+
+def _relate(known, input, value):
+    if _is_string(value) or _is_array(value) or _is_object(value):
+        try:
+            return known.value[known.key.index(value)]
+        except:
+            return _index(known, input, value)
+
+    return value
+
+
+def _transform(known, input, value):
+    if _is_array(value):
+        output = []
+        for val in value:
+            output.append(_relate(known, input, val))
+        return output
+
+    if _is_object(value):
+        obj = {}
+        for key in value:
+            obj[key] = _relate(known, input, value[key])
+        return obj
+
+    return value
+
+
+def _wrap(value):
+    if _is_string(value):
+        return _String(value)
+
+    if _is_array(value):
+        i = 0
+        for val in value:
+            value[i] = _wrap(val)
+            i += 1
+
+    elif _is_object(value):
+        for key in value:
+            value[key] = _wrap(value[key])
+
+    return value
+
+
+def parse(value, *args, **kwargs):
+    json = _json.loads(value, *args, **kwargs)
+    wrapped = []
+    for value in json:
+        wrapped.append(_wrap(value))
+
+    input = []
+    for value in wrapped:
+        if isinstance(value, _String):
+            input.append(value.value)
+        else:
+            input.append(value)
+
+    value = input[0]
+
+    if _is_array(value):
+        return _loop(_array_keys(value), input, [value], value)
+
+    if _is_object(value):
+        return _loop(_object_keys(value), input, [value], value)
+
+    return value
+
+
+def stringify(value, *args, **kwargs):
+    known = _Known()
+    input = []
+    output = []
+    i = int(_index(known, input, value))
+    while i < len(input):
+        output.append(_transform(known, input, input[i]))
+        i += 1
+    return _json.dumps(output, *args, **kwargs)

pyscript.core/src/stdlib/pyscript/magic_js.py

@@ -1,14 +1,18 @@
+import json
 import sys
 
 import js as globalThis
+from polyscript import config as _config
 from polyscript import js_modules
 from pyscript.util import NotSupported
 
 RUNNING_IN_WORKER = not hasattr(globalThis, "document")
 
+config = json.loads(globalThis.JSON.stringify(_config))
+
 
 # allow `from pyscript.js_modules.xxx import yyy`
-class JSModule(object):
+class JSModule:
     def __init__(self, name):
         self.name = name
 
@@ -24,16 +28,30 @@ for name in globalThis.Reflect.ownKeys(js_modules):
 sys.modules["pyscript.js_modules"] = js_modules
 
 if RUNNING_IN_WORKER:
-    import js
     import polyscript
 
     PyWorker = NotSupported(
         "pyscript.PyWorker",
         "pyscript.PyWorker works only when running in the main thread",
     )
-    window = polyscript.xworker.window
-    document = window.document
-    js.document = document
+
+    try:
+        import js
+
+        window = polyscript.xworker.window
+        document = window.document
+        js.document = document
+        # this is the same as js_import on main and it lands modules on main
+        js_import = window.Function(
+            "return (...urls) => Promise.all(urls.map((url) => import(url)))"
+        )()
+    except:
+        message = "Unable to use `window` or `document` -> https://docs.pyscript.net/latest/faq/#sharedarraybuffer"
+        globalThis.console.warn(message)
+        window = NotSupported("pyscript.window", message)
+        document = NotSupported("pyscript.document", message)
+        js_import = None
+
     sync = polyscript.xworker.sync
 
     # in workers the display does not have a default ID
@@ -43,7 +61,7 @@ if RUNNING_IN_WORKER:
 
 else:
     import _pyscript
-    from _pyscript import PyWorker
+    from _pyscript import PyWorker, js_import
 
     window = globalThis
     document = globalThis.document

pyscript.core/src/stdlib/pyscript/storage.py

@@ -0,0 +1,60 @@
+from polyscript import storage as _storage
+from pyscript.flatted import parse as _parse
+from pyscript.flatted import stringify as _stringify
+
+
+# convert a Python value into an IndexedDB compatible entry
+def _to_idb(value):
+    if value is None:
+        return _stringify(["null", 0])
+    if isinstance(value, (bool, float, int, str, list, dict, tuple)):
+        return _stringify(["generic", value])
+    if isinstance(value, bytearray):
+        return _stringify(["bytearray", [v for v in value]])
+    if isinstance(value, memoryview):
+        return _stringify(["memoryview", [v for v in value]])
+    raise TypeError(f"Unexpected value: {value}")
+
+
+# convert an IndexedDB compatible entry into a Python value
+def _from_idb(value):
+    (
+        kind,
+        result,
+    ) = _parse(value)
+    if kind == "null":
+        return None
+    if kind == "generic":
+        return result
+    if kind == "bytearray":
+        return bytearray(result)
+    if kind == "memoryview":
+        return memoryview(bytearray(result))
+    return value
+
+
+class Storage(dict):
+    def __init__(self, store):
+        super().__init__({k: _from_idb(v) for k, v in store.entries()})
+        self.__store__ = store
+
+    def __delitem__(self, attr):
+        self.__store__.delete(attr)
+        super().__delitem__(attr)
+
+    def __setitem__(self, attr, value):
+        self.__store__.set(attr, _to_idb(value))
+        super().__setitem__(attr, value)
+
+    def clear(self):
+        self.__store__.clear()
+        super().clear()
+
+    async def sync(self):
+        await self.__store__.sync()
+
+
+async def storage(name="", storage_class=Storage):
+    if not name:
+        raise ValueError("The storage name must be defined")
+    return storage_class(await _storage(f"@pyscript/{name}"))

pyscript.core/src/stdlib/pyscript/util.py

@@ -1,3 +1,15 @@
+import js
+
+
+def as_bytearray(buffer):
+    ui8a = js.Uint8Array.new(buffer)
+    size = ui8a.length
+    ba = bytearray(size)
+    for i in range(0, size):
+        ba[i] = ui8a[i]
+    return ba
+
+
 class NotSupported:
     """
     Small helper that raises exceptions if you try to get/set any attribute on

pyscript.core/src/stdlib/pyscript/websocket.py

@@ -0,0 +1,69 @@
+import js
+from pyscript.ffi import create_proxy
+from pyscript.util import as_bytearray
+
+code = "code"
+protocols = "protocols"
+reason = "reason"
+
+
+class EventMessage:
+    def __init__(self, event):
+        self._event = event
+
+    def __getattr__(self, attr):
+        value = getattr(self._event, attr)
+
+        if attr == "data" and not isinstance(value, str):
+            if hasattr(value, "to_py"):
+                return value.to_py()
+            # shims in MicroPython
+            return memoryview(as_bytearray(value))
+
+        return value
+
+
+class WebSocket(object):
+    CONNECTING = 0
+    OPEN = 1
+    CLOSING = 2
+    CLOSED = 3
+
+    def __init__(self, **kw):
+        url = kw["url"]
+        if protocols in kw:
+            socket = js.WebSocket.new(url, kw[protocols])
+        else:
+            socket = js.WebSocket.new(url)
+        object.__setattr__(self, "_ws", socket)
+
+        for t in ["onclose", "onerror", "onmessage", "onopen"]:
+            if t in kw:
+                # Pyodide fails at setting socket[t] directly
+                setattr(socket, t, create_proxy(kw[t]))
+
+    def __getattr__(self, attr):
+        return getattr(self._ws, attr)
+
+    def __setattr__(self, attr, value):
+        if attr == "onmessage":
+            self._ws[attr] = lambda e: value(EventMessage(e))
+        else:
+            self._ws[attr] = value
+
+    def close(self, **kw):
+        if code in kw and reason in kw:
+            self._ws.close(kw[code], kw[reason])
+        elif code in kw:
+            self._ws.close(kw[code])
+        else:
+            self._ws.close()
+
+    def send(self, data):
+        if isinstance(data, str):
+            self._ws.send(data)
+        else:
+            buffer = js.Uint8Array.new(len(data))
+            for pos, b in enumerate(data):
+                buffer[pos] = b
+            self._ws.send(buffer)

pyscript.core/src/stdlib/pyscript/workers.py

@@ -0,0 +1,43 @@
+import js as _js
+from polyscript import workers as _workers
+
+_get = _js.Reflect.get
+
+
+def _set(script, name, value=""):
+    script.setAttribute(name, value)
+
+
+# this solves an inconsistency between Pyodide and MicroPython
+# @see https://github.com/pyscript/pyscript/issues/2106
+class _ReadOnlyProxy:
+    def __getitem__(self, name):
+        return _get(_workers, name)
+
+    def __getattr__(self, name):
+        return _get(_workers, name)
+
+
+workers = _ReadOnlyProxy()
+
+
+async def create_named_worker(src="", name="", config=None, type="py"):
+    from json import dumps
+
+    if not src:
+        raise ValueError("Named workers require src")
+
+    if not name:
+        raise ValueError("Named workers require a name")
+
+    s = _js.document.createElement("script")
+    s.type = type
+    s.src = src
+    _set(s, "worker")
+    _set(s, "name", name)
+
+    if config:
+        _set(s, "config", isinstance(config, str) and config or dumps(config))
+
+    _js.document.body.append(s)
+    return await workers[name]

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

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

pyscript.core/src/storage.js

@@ -0,0 +1,72 @@
+import { ArrayBuffer, TypedArray } from "sabayon/shared";
+import IDBMapSync from "@webreflection/idb-map/sync";
+import { parse, stringify } from "flatted";
+
+const to_idb = (value) => {
+    if (value == null) return stringify(["null", 0]);
+    /* eslint-disable no-fallthrough */
+    switch (typeof value) {
+        case "object": {
+            if (value instanceof TypedArray)
+                return stringify(["memoryview", [...value]]);
+            if (value instanceof ArrayBuffer)
+                return stringify(["bytearray", [...new Uint8Array(value)]]);
+        }
+        case "string":
+        case "number":
+        case "boolean":
+            return stringify(["generic", value]);
+        default:
+            throw new TypeError(`Unexpected value: ${String(value)}`);
+    }
+};
+
+const from_idb = (value) => {
+    const [kind, result] = parse(value);
+    if (kind === "null") return null;
+    if (kind === "generic") return result;
+    if (kind === "bytearray") return new Uint8Array(value).buffer;
+    if (kind === "memoryview") return new Uint8Array(value);
+    return value;
+};
+
+// this export simulate pyscript.storage exposed in the Python world
+export const storage = async (name) => {
+    if (!name) throw new SyntaxError("The storage name must be defined");
+
+    const store = new IDBMapSync(`@pyscript/${name}`);
+    const map = new Map();
+    await store.sync();
+    for (const [k, v] of store.entries()) map.set(k, from_idb(v));
+
+    const clear = () => {
+        map.clear();
+        store.clear();
+    };
+
+    const sync = async () => {
+        await store.sync();
+    };
+
+    return new Proxy(map, {
+        ownKeys: (map) => [...map.keys()],
+        has: (map, name) => map.has(name),
+        get: (map, name) => {
+            if (name === "clear") return clear;
+            if (name === "sync") return sync;
+            return map.get(name);
+        },
+        set: (map, name, value) => {
+            map.set(name, value);
+            store.set(name, to_idb(value));
+            return true;
+        },
+        deleteProperty: (map, name) => {
+            if (map.has(name)) {
+                map.delete(name);
+                store.delete(name);
+            }
+            return true;
+        },
+    });
+};

pyscript.core/src/sync.js

@@ -1,4 +1,7 @@
 export default {
+    // allow pyterminal checks to bootstrap
+    is_pyterminal: () => false,
+
     /**
      * 'Sleep' for the given number of seconds. Used to implement Python's time.sleep in Worker threads.
      * @param {number} seconds The number of seconds to sleep.

pyscript.core/test/async.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <link rel="stylesheet" href="../dist/core.css">
-        <script type="module" src="../dist/core.js"></script>
-    </head>
-    <body>
-        <py-script async>
-            import asyncio
-            print('foo')
-            await asyncio.sleep(1)
-            print('bar')
-        </py-script>
-    </body>
-</html>

pyscript.core/test/config-url.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PyScript Next Plugin</title>
-  <link rel="stylesheet" href="../dist/core.css">
-  <script type="module" src="../dist/core.js"></script>
-  <py-config src="bad.toml" type="toml"></py-config>
-</head>
-</html>

pyscript.core/test/error.js

@@ -1,39 +0,0 @@
-// PyScript Error Plugin
-import { hooks } from '@pyscript/core';
-
-hooks.onBeforeRun.add(function override(pyScript) {
-  // be sure this override happens only once
-  hooks.onBeforeRun.delete(override);
-
-  // trap generic `stderr` to propagate to it regardless
-  const { stderr } = pyScript.io;
-
-  // override it with our own logic
-  pyScript.io.stderr = (...args) => {
-    // grab the message of the first argument (Error)
-    const [ { message } ] = args;
-    // show it
-    notify(message);
-    // still let other plugins or PyScript itself do the rest
-    return stderr(...args);
-  };
-});
-
-// Error hook utilities
-
-// Custom function to show notifications
-function notify(message) {
-  const div = document.createElement('div');
-  div.textContent = message;
-  div.style.cssText = `
-    border: 1px solid red;
-    background: #ffdddd;
-    color: black;
-    font-family: courier, monospace;
-    white-space: pre;
-    overflow-x: auto;
-    padding: 8px;
-    margin-top: 8px;
-  `;
-  document.body.append(div);
-}

pyscript.core/test/mpy.spec.js

@@ -1,53 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('MicroPython display', async ({ page }) => {
-  await page.goto('http://localhost:8080/test/mpy.html');
-  await page.waitForSelector('html.done.worker');
-  const body = await page.evaluate(() => document.body.innerText);
-  await expect(body.trim()).toBe([
-    'M-PyScript Main 1',
-    'M-PyScript Main 2',
-    'M-PyScript Worker',
-  ].join('\n'));
-});
-
-test('MicroPython hooks', async ({ page }) => {
-  const logs = [];
-  page.on('console', msg => {
-    const text = msg.text();
-    if (!text.startsWith('['))
-      logs.push(text);
-  });
-  await page.goto('http://localhost:8080/test/hooks.html');
-  await page.waitForSelector('html.done.worker');
-  await expect(logs.join('\n')).toBe([
-    'main onReady',
-    'main onBeforeRun',
-    'main codeBeforeRun',
-    'actual code in main',
-    'main codeAfterRun',
-    'main onAfterRun',
-    'worker onReady',
-    'worker onBeforeRun',
-    'worker codeBeforeRun',
-    'actual code in worker',
-    'worker codeAfterRun',
-    'worker onAfterRun',
-  ].join('\n'));
-});
-
-test('MicroPython + Pyodide js_modules', async ({ page }) => {
-  const logs = [];
-  page.on('console', msg => {
-    const text = msg.text();
-    if (!text.startsWith('['))
-      logs.push(text);
-  });
-  await page.goto('http://localhost:8080/test/js_modules.html');
-  await page.waitForSelector('html.done');
-  await expect(logs.length).toBe(6);
-  await expect(logs[0]).toBe(logs[1]);
-  await expect(logs[1]).toBe(logs[2]);
-  await expect(logs[3]).toBe(logs[4]);
-  await expect(logs[4]).toBe(logs[5]);
-});

pyscript.core/test/py-terminal.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PyTerminal</title>
-        <link rel="stylesheet" href="../dist/core.css">
-        <script type="module" src="../dist/core.js"></script>
-        <style>.xterm { padding: .5rem; }</style>
-    </head>
-    <body>
-        <script type="py">
-            def greetings(event):
-                print('hello world')
-        </script>
-        <py-script worker terminal>
-            import sys
-            from pyscript import display, document
-            display("Hello", "PyScript Next - PyTerminal", append=False)
-            print("this should go to the terminal")
-            print("another line")
-
-            # this works as expected
-            print("this goes to stderr", file=sys.stderr)
-            document.addEventListener('click', lambda event: print(event.type));
-        </py-script>
-        <button id="my-button" py-click="greetings">Click me</button>
-    </body>
-</html>

pyscript.core/test/pydom.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PyScript Next Plugin</title>
-  <link rel="stylesheet" href="../dist/core.css">
-  <script type="module" src="../dist/core.js"></script>
-</head>
-<body>
-  <script type="py" src="pydom.py"></script>
-
-  <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>
-
-  <div id="result"></div>
-</body>
-</html>

pyscript.core/test/pydom.py

@@ -1,27 +0,0 @@
-import random
-from datetime import datetime as dt
-
-from pyscript import display
-from pyweb import pydom
-from pyweb.base import when
-
-
-@when("click", "#just-a-button")
-def on_click(event):
-    print(f"Hello from Python! {dt.now()}")
-    display(f"Hello from Python! {dt.now()}", append=False, target="result")
-
-
-@when("click", "#color-button")
-def on_color_click(event):
-    print("1")
-    btn = pydom["#result"]
-    print("2")
-    btn.style["background-color"] = f"#{random.randrange(0x1000000):06x}"
-
-
-def reset_color():
-    pydom["#result"].style["background-color"] = "white"
-
-
-# btn_reset = pydom["#color-reset-button"][0].when('click', reset_color)

pyscript.core/tests/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PyScript tests</title>
+        <style>
+            body { font-family: sans-serif; }
+            a {
+                display: block;
+                transition: opacity .3s;
+            }
+            a, span { opacity: .7; }
+            a:hover { opacity: 1; }
+        </style>
+    </head>
+    <body><ul><li><strong><a href="./config/index.html">config</a></strong><ul><li><a href="./config/ambiguous-config.html">ambiguous-config<small>.html</small></a></li><li><a href="./config/same-config.html">same-config<small>.html</small></a></li><li><a href="./config/too-many-config.html">too-many-config<small>.html</small></a></li><li><a href="./config/too-many-py-config.html">too-many-py-config<small>.html</small></a></li></ul></li><li><strong><a href="./issue-7015/index.html">issue-7015</a></strong></li><li><strong><span>js-integration</span></strong><ul><li><a href="./js-integration/async-listener.html">async-listener<small>.html</small></a></li><li><a href="./js-integration/config-url.html">config-url<small>.html</small></a></li><li><strong><a href="./js-integration/fetch/index.html">fetch</a></strong></li><li><a href="./js-integration/ffi.html">ffi<small>.html</small></a></li><li><a href="./js-integration/hooks.html">hooks<small>.html</small></a></li><li><strong><a href="./js-integration/issue-2093/index.html">issue-2093</a></strong></li><li><a href="./js-integration/js-storage.html">js-storage<small>.html</small></a></li><li><a href="./js-integration/js_modules.html">js_modules<small>.html</small></a></li><li><strong><a href="./js-integration/loader/index.html">loader</a></strong></li><li><a href="./js-integration/mpy.html">mpy<small>.html</small></a></li><li><a href="./js-integration/py-terminal-main.html">py-terminal-main<small>.html</small></a></li><li><a href="./js-integration/py-terminal-worker.html">py-terminal-worker<small>.html</small></a></li><li><a href="./js-integration/py-terminal.html">py-terminal<small>.html</small></a></li><li><a href="./js-integration/py-terminals.html">py-terminals<small>.html</small></a></li><li><a href="./js-integration/storage.html">storage<small>.html</small></a></li><li><strong><a href="./js-integration/workers/index.html">workers</a></strong><ul><li><a href="./js-integration/workers/named.html">named<small>.html</small></a></li></ul></li></ul></li><li><strong><a href="./manual/index.html">manual</a></strong><ul><li><a href="./manual/all-done.html">all-done<small>.html</small></a></li><li><a href="./manual/async.html">async<small>.html</small></a></li><li><a href="./manual/camera.html">camera<small>.html</small></a></li><li><a href="./manual/click.html">click<small>.html</small></a></li><li><a href="./manual/code-a-part.html">code-a-part<small>.html</small></a></li><li><a href="./manual/combo.html">combo<small>.html</small></a></li><li><a href="./manual/config.html">config<small>.html</small></a></li><li><a href="./manual/create-element.html">create-element<small>.html</small></a></li><li><a href="./manual/dialog.html">dialog<small>.html</small></a></li><li><a href="./manual/display.html">display<small>.html</small></a></li><li><a href="./manual/error.html">error<small>.html</small></a></li><li><a href="./manual/html-decode.html">html-decode<small>.html</small></a></li><li><a href="./manual/input.html">input<small>.html</small></a></li><li><a href="./manual/interpreter.html">interpreter<small>.html</small></a></li><li><a href="./manual/multi.html">multi<small>.html</small></a></li><li><a href="./manual/multiple-editors.html">multiple-editors<small>.html</small></a></li><li><a href="./manual/no-error.html">no-error<small>.html</small></a></li><li><a href="./manual/py-editor-failure.html">py-editor-failure<small>.html</small></a></li><li><a href="./manual/py-editor.html">py-editor<small>.html</small></a></li><li><a href="./manual/py_modules.html">py_modules<small>.html</small></a></li><li><a href="./manual/split-config.html">split-config<small>.html</small></a></li><li><a href="./manual/target.html">target<small>.html</small></a></li><li><a href="./manual/test_display_HTML.html">test_display_HTML<small>.html</small></a></li><li><a href="./manual/test_when.html">test_when<small>.html</small></a></li><li><a href="./manual/worker.html">worker<small>.html</small></a></li></ul></li><li><strong><a href="./no_sab/index.html">no_sab</a></strong></li><li><strong><a href="./piratical/index.html">piratical</a></strong></li><li><strong><a href="./py-editor/index.html">py-editor</a></strong><ul><li><a href="./py-editor/issue-2056.html">issue-2056<small>.html</small></a></li><li><a href="./py-editor/service-worker.html">service-worker<small>.html</small></a></li></ul></li><li><strong><a href="./py-terminals/index.html">py-terminals</a></strong><ul><li><a href="./py-terminals/no-repl.html">no-repl<small>.html</small></a></li><li><a href="./py-terminals/repl.html">repl<small>.html</small></a></li></ul></li><li><strong><a href="./pyscript_dom/index.html">pyscript_dom</a></strong></li><li><strong><a href="./service-worker/index.html">service-worker</a></strong></li><li><strong><a href="./ui/index.html">ui</a></strong><ul><li><a href="./ui/gallery.html">gallery<small>.html</small></a></li></ul></li></ul></body>
+</html>

pyscript.core/tests/integration.spec.js

@@ -0,0 +1,116 @@
+import { test, expect } from '@playwright/test';
+
+test('MicroPython display', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/mpy.html');
+  await page.waitForSelector('html.done.worker');
+  const body = await page.evaluate(() => document.body.innerText);
+  await expect(body.trim()).toBe([
+    'M-PyScript Main 1',
+    'M-PyScript Main 2',
+    'M-PyScript Worker',
+  ].join('\n'));
+});
+
+test('MicroPython hooks', async ({ page }) => {
+  const logs = [];
+  page.on('console', msg => {
+    const text = msg.text();
+    if (!text.startsWith('['))
+      logs.push(text);
+  });
+  await page.goto('http://localhost:8080/tests/js-integration/hooks.html');
+  await page.waitForSelector('html.done.worker');
+  await expect(logs.join('\n')).toBe([
+    'main onReady',
+    'main onBeforeRun',
+    'main codeBeforeRun',
+    'actual code in main',
+    'main codeAfterRun',
+    'main onAfterRun',
+    'worker onReady',
+    'worker onBeforeRun',
+    'worker codeBeforeRun',
+    'actual code in worker',
+    'worker codeAfterRun',
+    'worker onAfterRun',
+  ].join('\n'));
+});
+
+test('MicroPython + Pyodide js_modules', async ({ page }) => {
+  const logs = [];
+  page.on('console', msg => {
+    const text = msg.text();
+    if (!text.startsWith('['))
+      logs.push(text);
+  });
+  await page.goto('http://localhost:8080/tests/js-integration/js_modules.html');
+  await page.waitForSelector('html.done');
+  await expect(logs.length).toBe(6);
+  await expect(logs[0]).toBe(logs[1]);
+  await expect(logs[1]).toBe(logs[2]);
+  await expect(logs[3]).toBe(logs[4]);
+  await expect(logs[4]).toBe(logs[5]);
+});
+
+test('MicroPython + configURL', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/config-url.html');
+  await page.waitForSelector('html.main.worker');
+});
+
+test('Pyodide + terminal on Main', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/py-terminal-main.html');
+  await page.waitForSelector('html.ok');
+});
+
+
+test('Pyodide + terminal on Worker', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/py-terminal-worker.html');
+  await page.waitForSelector('html.ok');
+});
+
+test('Pyodide + multiple terminals via Worker', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/py-terminals.html');
+  await page.waitForSelector('html.first.second');
+});
+
+test('MicroPython + Pyodide fetch', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/fetch/index.html');
+  await page.waitForSelector('html.mpy.py');
+});
+
+test('MicroPython + Pyodide ffi', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/ffi.html');
+  await page.waitForSelector('html.mpy.py');
+});
+
+test('MicroPython + Storage', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/storage.html');
+  await page.waitForSelector('html.ok');
+});
+
+test('MicroPython + JS Storage', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/js-storage.html');
+  await page.waitForSelector('html.ok');
+});
+
+test('MicroPython + workers', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/workers/index.html');
+  await page.waitForSelector('html.mpy.py');
+});
+
+test('MicroPython Editor setup error', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/issue-2093/index.html');
+  await page.waitForSelector('html.errored');
+});
+
+test('MicroPython async @when listener', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/async-listener.html');
+  await page.waitForSelector('html.ok');
+});
+
+test('Pyodide loader', async ({ page }) => {
+  await page.goto('http://localhost:8080/tests/js-integration/loader/index.html');
+  await page.waitForSelector('html.ok');
+  const body = await page.evaluate(() => document.body.textContent);
+  await expect(body.includes('Loaded Pyodide')).toBe(true);
+});

pyscript.core/tests/integration/support.py

@@ -17,6 +17,7 @@ from playwright.sync_api import Error as PlaywrightError
 
 ROOT = py.path.local(__file__).dirpath("..", "..", "..")
 BUILD = ROOT.join("pyscript.core").join("dist")
+TEST = ROOT.join("pyscript.core").join("tests")
 
 
 def params_with_marks(params):
@@ -206,6 +207,14 @@ class PyScriptTest:
         self.tmpdir = tmpdir
         # create a symlink to BUILD inside tmpdir
         tmpdir.join("build").mksymlinkto(BUILD)
+        # create a symlink ALSO to dist folder so we can run the tests in
+        # the test folder
+        tmpdir.join("dist").mksymlinkto(BUILD)
+        # create a symlink to TEST inside tmpdir so we can run tests in that
+        # manual test folder
+        tmpdir.join("tests").mksymlinkto(TEST)
+
+        # create a symlink to the favicon, so that we can use it in the HTML
         self.tmpdir.chdir()
         self.tmpdir.join("favicon.ico").write("")
         self.logger = logger

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_01_basic.py

@@ -97,7 +97,7 @@ class TestBasic(PyScriptTest):
     def test_input_exception(self):
         self.pyscript_run(
             """
-            <script type="py">
+            <script type="py" async="false">
                 input("what's your name?")
             </script>
             """

pyscript.core/tests/integration/test_02_display.py

@@ -43,12 +43,12 @@ class TestDisplay(PyScriptTest):
     def test_consecutive_display(self):
         self.pyscript_run(
             """
-            <script type="py">
+            <script type="py" async="false">
                 from pyscript import display
                 display('hello 1')
             </script>
             <p>hello 2</p>
-            <script type="py">
+            <script type="py" async="false">
                 from pyscript import display
                 display('hello 3')
             </script>
@@ -177,16 +177,16 @@ class TestDisplay(PyScriptTest):
     def test_consecutive_display_target(self):
         self.pyscript_run(
             """
-            <script type="py" id="first">
+            <script type="py" id="first" async="false">
                 from pyscript import display
                 display('hello 1')
             </script>
                 <p>hello in between 1 and 2</p>
-            <script type="py" id="second">
+            <script type="py" id="second" async="false">
                 from pyscript import display
                 display('hello 2', target="second")
             </script>
-            <script type="py" id="third">
+            <script type="py" id="third" async="false">
                 from pyscript import display
                 display('hello 3')
             </script>

pyscript.core/tests/integration/test_integration.py

@@ -0,0 +1,29 @@
+from .support import PyScriptTest, with_execution_thread
+
+
+@with_execution_thread(None)
+class TestSmokeTests(PyScriptTest):
+    """
+    Each example requires the same three tests:
+        - Test that the initial markup loads properly (currently done by
+          testing the <title> tag's content)
+        - Testing that pyscript is loading properly
+        - Testing that the page contains appropriate content after rendering
+    """
+
+    def test_pydom(self):
+        # Test the full pydom test suite by running it in the browser
+        self.goto("tests/pyscript_dom/index.html?-v&-s")
+        assert self.page.title() == "PyDom Test Suite"
+
+        # wait for the test suite to finish
+        self.wait_for_console(
+            "============================= test session starts =============================="
+        )
+
+        self.assert_no_banners()
+
+        results = self.page.inner_html("#tests-terminal")
+        assert results
+        assert "PASSED" in results
+        assert "FAILED" not in results

pyscript.core/tests/integration/test_py_terminal.py

@@ -7,6 +7,7 @@ from .support import PageErrors, PyScriptTest, only_worker, skip_worker
 
 
 class TestPyTerminal(PyScriptTest):
+    @skip_worker("We do support multiple worker terminal now")
     def test_multiple_terminals(self):
         """
         Multiple terminals are not currently supported
@@ -19,9 +20,9 @@ class TestPyTerminal(PyScriptTest):
             wait_for_pyscript=False,
             check_js_errors=False,
         )
-        assert self.assert_banner_message("You can use at most 1 terminal")
+        assert self.assert_banner_message("You can use at most 1 main terminal")
 
-        with pytest.raises(PageErrors, match="You can use at most 1 terminal"):
+        with pytest.raises(PageErrors, match="You can use at most 1 main terminal"):
             self.check_js_errors()
 
     # TODO: interactive shell still unclear

pyscript.core/tests/integration/test_pyweb.py

@@ -0,0 +1,804 @@
+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 pyscript.web import page, {el_type}
+                el = {el_type}({attributes})
+                page.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("b", "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,
+        )
+
+    def test_append_py_element(self, interpreter):
+        # 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("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript.web import page, div, p
+
+                el = div("{div_text_content}")
+                child = p('{p_text_content}')
+                el.append(child)
+                page.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
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        assert el.text_content() == f"{div_text_content}{p_text_content}"
+
+        assert (
+            el.evaluate("node => node.children.length") == 1
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == f"{div_text_content}{p_text_content}"
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+    def test_append_proxy_element(self, interpreter):
+        # 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("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript import document
+                from pyscript.web import page, div, p
+
+                el = div("{div_text_content}")
+                child = document.createElement('P')
+                child.textContent = '{p_text_content}'
+                el.append(child)
+                page.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
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        assert el.text_content() == f"{div_text_content}{p_text_content}"
+
+        assert (
+            el.evaluate("node => node.children.length") == 1
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == f"{div_text_content}{p_text_content}"
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+    def test_append_py_elementcollection(self, interpreter):
+        # 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("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        p2_text_content = "not me!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript.web import page, div, p, ElementCollection
+
+                el = div("{div_text_content}")
+                child1 = p('{p_text_content}')
+                child2 = p('{p2_text_content}', id='child2')
+                collection = ElementCollection([child1, child2])
+                el.append(collection)
+                page.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
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        parent_full_content = f"{div_text_content}{p_text_content}{p2_text_content}"
+        assert el.text_content() == parent_full_content
+
+        assert (
+            el.evaluate("node => node.children.length") == 2
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+        assert el.evaluate("node => node.children[1].tagName") == "P"
+        assert el.evaluate("node => node.children[1].id") == "child2"
+        assert (
+            el.evaluate("node => node.children[1].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[1].textContent") == p2_text_content
+
+    def test_append_js_element_nodelist(self, interpreter):
+        # 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("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        p2_text_content = "not me!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript import document
+                from pyscript.web import page, div, p, ElementCollection
+
+                el = div("{div_text_content}")
+                child1 = p('{p_text_content}')
+                child2 = p('{p2_text_content}', id='child2')
+
+                page.body.append(child1)
+                page.body.append(child2)
+
+                nodes = document.querySelectorAll('p')
+                el.append(nodes)
+
+                page.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
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        parent_full_content = f"{div_text_content}{p_text_content}{p2_text_content}"
+        assert el.text_content() == parent_full_content
+
+        assert (
+            el.evaluate("node => node.children.length") == 2
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+        assert el.evaluate("node => node.children[1].tagName") == "P"
+        assert el.evaluate("node => node.children[1].id") == "child2"
+        assert (
+            el.evaluate("node => node.children[1].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[1].textContent") == p2_text_content

pyscript.core/tests/issue-7015/config.toml

@@ -0,0 +1,4 @@
+packages = [
+  "https://cdn.holoviz.org/panel/wheels/bokeh-3.5.0-py3-none-any.whl",
+  "https://cdn.holoviz.org/panel/1.5.0-b.2/dist/wheels/panel-1.5.0b2-py3-none-any.whl"
+]

pyscript.core/tests/issue-7015/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.0.js"></script>
+        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.5.0.min.js"></script>
+        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.5.0.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/panel.min.js"></script>
+        <script type="module" src="../../dist/core.js"></script>
+    </head>
+    <body>
+      <script type="py" src="main.py" config="config.toml" worker></script>
+      <div id="simple_app"></div>
+    </body>
+</html>

pyscript.core/tests/issue-7015/main.py

@@ -0,0 +1,12 @@
+import panel as pn
+
+pn.extension(sizing_mode="stretch_width")
+
+slider = pn.widgets.FloatSlider(start=0, end=10, name="amplitude")
+
+
+def callback(new):
+    return f"Amplitude is: {new}"
+
+
+pn.Row(slider, pn.bind(callback, slider)).servable(target="simple_app")

pyscript.core/tests/js-integration/async-listener.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../dist/core.css">
+    <script type="module" src="../../dist/core.js"></script>
+</head>
+<body>
+  <script type="mpy">
+    from pyscript import window, document, fetch, when
+
+    @when('click', '#click')
+    async def click(event):
+      text = await fetch(window.location.href).text()
+      document.getElementById('output').append(text)
+      document.documentElement.classList.add('ok')
+
+    document.getElementById('click').click()
+  </script>
+  <button id="click">click</button>
+  <pre id="output"></pre>
+</body>
+</html>

pyscript.core/tests/js-integration/config-url.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PyScript Next Plugin</title>
+  <link rel="stylesheet" href="../../dist/core.css">
+  <script type="module" src="../../dist/core.js"></script>
+  <mpy-config src="config-url/config.json"></mpy-config>
+  <script type="mpy">
+    from pyscript import config
+    if config["files"]["{TO}"] != "./runtime":
+        raise Exception("wrong config tree")
+
+    from runtime import test
+  </script>
+  <script type="mpy" worker>
+    from pyscript import config
+    if config["files"]["{TO}"] != "./runtime":
+        raise Exception("wrong config tree")
+
+    from runtime import test
+  </script>
+</head>
+</html>

pyscript.core/tests/js-integration/config-url/config.json

@@ -0,0 +1,7 @@
+{
+    "files":{
+        "{FROM}": "./src",
+        "{TO}": "./runtime",
+        "{FROM}/test.py": "{TO}/test.py"
+    }
+}

pyscript.core/tests/js-integration/config-url/src/test.py

@@ -0,0 +1,8 @@
+from pyscript import RUNNING_IN_WORKER, document
+
+classList = document.documentElement.classList
+
+if RUNNING_IN_WORKER:
+    classList.add("worker")
+else:
+    classList.add("main")

pyscript.core/tests/js-integration/fetch/index.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="../../../dist/core.css">
+    </head>
+    <body>
+      <script type="module">
+        import fetch from 'https://esm.run/@webreflection/fetch';
+
+        globalThis.fetch_text = await fetch("config.json").text();
+        globalThis.fetch_json = JSON.stringify(await fetch("config.json").json());
+        globalThis.fetch_buffer = new Uint8Array((await fetch("config.json").arrayBuffer())).length;
+
+        document.head.appendChild(
+          Object.assign(
+            document.createElement('script'),
+            {
+              type: 'module',
+              src: '../../../dist/core.js'
+            }
+          )
+        );
+      </script>
+      <script type="mpy" async>
+        import js, json
+        from pyscript import document, fetch
+
+        fetch_text = await (await fetch("config.json")).text()
+        if (fetch_text != js.fetch_text):
+          raise Exception("fetch_text")
+
+        fetch_text = await fetch("config.json").text()
+        if (fetch_text != js.fetch_text):
+          raise Exception("fetch_text")
+
+        fetch_json = await (await fetch("config.json")).json()
+        if (json.dumps(fetch_json).replace(" ", "") != js.fetch_json):
+          raise Exception("fetch_json")
+
+        fetch_json = await fetch("config.json").json()
+        if (json.dumps(fetch_json).replace(" ", "") != js.fetch_json):
+          raise Exception("fetch_json")
+
+        fetch_buffer = await (await fetch("config.json")).arrayBuffer()
+        if (len(fetch_buffer) != js.fetch_buffer):
+          raise Exception("fetch_buffer")
+
+        fetch_buffer = await fetch("config.json").arrayBuffer()
+        if (len(fetch_buffer) != js.fetch_buffer):
+          raise Exception("fetch_buffer")
+
+        print(await (await fetch("config.json")).bytearray())
+        print(await (await fetch("config.json")).blob())
+
+        if (await fetch("shenanigans.nope")).ok == False:
+          document.documentElement.classList.add('mpy')
+      </script>
+      <script type="py" async>
+        import js, json
+        from pyscript import document, fetch
+
+        fetch_text = await (await fetch("config.json")).text()
+        if (fetch_text != js.fetch_text):
+          raise Exception("fetch_text")
+
+        fetch_text = await fetch("config.json").text()
+        if (fetch_text != js.fetch_text):
+          raise Exception("fetch_text")
+
+        fetch_json = await (await fetch("config.json")).json()
+        if (json.dumps(fetch_json).replace(" ", "") != js.fetch_json):
+          raise Exception("fetch_json")
+
+        fetch_json = await fetch("config.json").json()
+        if (json.dumps(fetch_json).replace(" ", "") != js.fetch_json):
+          raise Exception("fetch_json")
+
+        fetch_buffer = await (await fetch("config.json")).arrayBuffer()
+        if (len(fetch_buffer) != js.fetch_buffer):
+          raise Exception("fetch_buffer")
+
+        fetch_buffer = await fetch("config.json").arrayBuffer()
+        if (len(fetch_buffer) != js.fetch_buffer):
+          raise Exception("fetch_buffer")
+
+        print(await (await fetch("config.json")).bytearray())
+        print(await (await fetch("config.json")).blob())
+
+        if (await fetch("shenanigans.nope")).ok == False:
+          document.documentElement.classList.add('py')
+      </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/ffi.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyScript FFI</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+    </head>
+    <body>
+      <script type="mpy">
+          from pyscript import document
+          from pyscript.ffi import to_js
+          document.documentElement.classList.add(
+            to_js({"ok": "mpy"}).ok
+          )
+      </script>
+      <script type="py">
+          from pyscript import document
+          from pyscript.ffi import to_js
+          document.documentElement.classList.add(
+            to_js({"ok": "py"}).ok
+          )
+      </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/hooks.html

@@ -4,13 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PyScript Next Plugin Bug?</title>
-  <link rel="stylesheet" href="../dist/core.css">
+  <link rel="stylesheet" href="../../dist/core.css">
   <script type="module">
     addEventListener('mpy:done', () => {
       document.documentElement.classList.add('done');
     });
 
-    import { hooks } from "../dist/core.js";
+    import { hooks } from "../../dist/core.js";
 
     // Main
     hooks.main.onReady.add((wrap, element) => {
@@ -48,12 +48,12 @@
   </script>
 </head>
 <body>
-  <script type="mpy" worker>
+  <script type="mpy" async="false" worker>
     from pyscript import document
     print("actual code in worker")
     document.documentElement.classList.add('worker')
   </script>
-  <script type="mpy">
+  <script type="mpy" async="false">
     print("actual code in main")
   </script>
 </body>

pyscript.core/tests/js-integration/issue-2093/error.js

@@ -0,0 +1,6 @@
+const { error } = console;
+
+console.error = (...args) => {
+  error(...args);
+  document.documentElement.classList.add('errored');
+};

pyscript.core/tests/js-integration/issue-2093/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="../../../dist/core.css">
+        <script type="module" src="./error.js"></script>
+        <script type="module" src="../../../dist/core.js"></script>
+    </head>
+    <body>
+      <script type="mpy-editor" setup>
+        print("Hello Editor")
+        raise Exception("failure")
+      </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/js-storage.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../dist/core.css">
+    <script type="module">
+      import { storage } from '../../dist/storage.js';
+
+      const store = await storage('js-storage');
+      store.test = [1, 2, 3].map(String);
+      await store.sync();
+
+      // be sure the store is not empty before bootstrap
+      import('../../dist/core.js');
+    </script>
+</head>
+<body>
+  <script type="mpy">
+    from pyscript import storage, document
+
+    store = await storage("js-storage")
+
+    if ",".join(store["test"]) == "1,2,3":
+        document.documentElement.classList.add("ok")
+  </script>
+</body>
+</html>

pyscript.core/tests/js-integration/js_modules.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../dist/core.css">
-    <script type="module" src="../dist/core.js"></script>
+    <link rel="stylesheet" href="../../dist/core.css">
+    <script type="module" src="../../dist/core.js"></script>
 </head>
 <body>
     <mpy-config>

pyscript.core/tests/js-integration/loader/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../../../dist/core.css">
+  <script type="module">
+    import '../../../dist/core.js';
+
+    addEventListener('py:progress', ({ detail }) => {
+      document.body.append(
+        detail,
+        document.createElement('br'),
+      );
+    });
+  </script>
+</head>
+<body>
+  <py-config>
+    packages = ["matplotlib"]
+  </py-config>
+  <script type="py" worker>
+    from pyscript import document
+    from sys import version
+    document.body.append(document.createElement('hr'), version)
+    document.documentElement.classList.add('ok')
+  </script>
+</body>
+</html>

pyscript.core/tests/js-integration/mpy.html

@@ -9,8 +9,8 @@
                 document.documentElement.classList.add('done');
             });
         </script>
-        <link rel="stylesheet" href="../dist/core.css">
-        <script type="module" src="../dist/core.js"></script>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
     </head>
     <body>
         <script type="mpy">

pyscript.core/tests/js-integration/py-terminal-main.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyTerminal Main</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+        <style>.xterm { padding: .5rem; }</style>
+    </head>
+    <body>
+        <py-script src="terminal.py" terminal></py-script>
+    </body>
+</html>

pyscript.core/tests/js-integration/py-terminal-worker.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyTerminal Main</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+        <style>.xterm { padding: .5rem; }</style>
+    </head>
+    <body>
+        <script type="py" src="terminal.py" worker terminal></script>
+        <script type="mpy" src="terminal.py" worker terminal></script>
+    </body>
+</html>

pyscript.core/tests/js-integration/py-terminal.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyTerminal</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+        <style>.xterm { padding: .5rem; }</style>
+    </head>
+    <body>
+        <script type="mpy" worker terminal>
+            print("µpython")
+            import code
+            code.interact()
+        </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/py-terminals.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PyTerminal Main</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+        <style>.xterm { padding: .5rem; }</style>
+    </head>
+    <body>
+        <script type="mpy" worker terminal>
+            from pyscript import document
+            document.documentElement.classList.add("first")
+
+            import code
+            code.interact()
+        </script>
+        <script type="py" worker terminal>
+            from pyscript import document
+            document.documentElement.classList.add("second")
+
+            import code
+            code.interact()
+        </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/storage.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>@pyscript/core storage</title>
+        <link rel="stylesheet" href="../../dist/core.css">
+        <script type="module" src="../../dist/core.js"></script>
+    </head>
+    <body>
+        <script type="mpy" async>
+            from random import random
+            from pyscript import storage
+
+            store = await storage(name="test")
+
+            print("before", len(store))
+            for k in store:
+                if isinstance(store[k], memoryview):
+                    print(f"    {k}: {store[k].hex()} as hex()")
+                else:
+                    print(f"    {k}: {store[k]}")
+
+            store["ba"] = bytearray([0, 1, 2, 3, 4])
+            store["mv"] = memoryview(bytearray([5, 6, 7, 8, 9]))
+            store["random"] = ("some", random(), True)
+            store["key"] = "value"
+
+            print("now", len(store))
+            for k in store:
+                print(f"    {k}: {store[k]}")
+
+            del store["key"]
+            # store.clear()
+
+            print("after", len(store))
+            for k in store:
+                print(f"    {k}: {store[k]}")
+
+            await store.sync()
+
+            import js
+            js.document.documentElement.classList.add("ok")
+        </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/terminal.py

@@ -0,0 +1,8 @@
+from pyscript import document
+
+classList = document.documentElement.classList
+
+if not __terminal__:
+    classList.add("error")
+else:
+    classList.add("ok")

pyscript.core/tests/js-integration/workers/config.toml

@@ -0,0 +1,2 @@
+[files]
+"./test.py" = "./test.py"

pyscript.core/tests/js-integration/workers/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <script type="module" src="../../../dist/core.js"></script>
+    </head>
+    <body>
+        <script type="mpy" async>
+          from pyscript import create_named_worker
+
+          await create_named_worker("./worker.py", name="micropython_version", type="mpy")
+        </script>
+        <script type="mpy" config="./config.toml" async>
+          from test import test
+          await test("mpy")
+        </script>
+        <script type="py" config="./config.toml" async>
+          from test import test
+          await test("py")
+        </script>
+        <script type="py" name="pyodide_version" worker>
+          def pyodide_version():
+              import sys
+              return sys.version
+
+          __export__ = ['pyodide_version']
+        </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/workers/named.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>named workers</title>
+        <script type="module" src="../../../dist/core.js"></script>
+    </head>
+    <body>
+        <script type="mpy" async>
+            from pyscript import workers
+
+            await (await workers["mpy"]).greetings()
+            await (await workers["py"]).greetings()
+        </script>
+        <script type="mpy" worker name="mpy">
+            def greetings():
+                print("micropython")
+
+            __export__ = ['greetings']
+        </script>
+        <script type="py" worker name="py">
+            def greetings():
+                print("pyodide")
+
+            __export__ = ['greetings']
+        </script>
+    </body>
+</html>

pyscript.core/tests/js-integration/workers/test.py

@@ -0,0 +1,19 @@
+from pyscript import document, workers
+
+
+async def test(interpreter):
+    # accessed as item
+    named = await workers.micropython_version
+
+    version = await named.micropython_version()
+    document.body.append(version)
+    document.body.append(document.createElement("hr"))
+
+    # accessed as attribute
+    named = await workers["pyodide_version"]
+
+    version = await named.pyodide_version()
+    document.body.append(version)
+    document.body.append(document.createElement("hr"))
+
+    document.documentElement.classList.add(interpreter)