lay down the features page sections

* Added a first version of the PyScript Service Worker

* Fix typo as suggested

Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com>

---------

Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -2,7 +2,7 @@ name: Bug Report
 description: Create a report to help us improve
 labels: ["type: bug", "needs-triage"]
 body:
--   type: markdown
+  - type: markdown
     attributes:
       value: |
         Thanks for helping PyScript! 🐍
@@ -14,7 +14,7 @@ body:
         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
 
         Thanks for helping PyScript be amazing. We are nothing without people like you helping build a better community 💐!
--   type: checkboxes
+  - type: checkboxes
     id: checks
     attributes:
       label: Checklist
@@ -26,7 +26,7 @@ body:
           required: true
         - label: I already searched in Google and didn't find any good information or help
           required: true
--   type: textarea
+  - type: textarea
     id: what-happened
     attributes:
       label: What happened?
@@ -34,7 +34,7 @@ body:
       placeholder: Tell us what you see!
     validations:
       required: true
--   type: dropdown
+  - type: dropdown
     id: browsers
     attributes:
       label: What browsers are you seeing the problem on? (if applicable)
@@ -47,7 +47,7 @@ body:
         - Other
     validations:
       required: false
--   type: textarea
+  - type: textarea
     id: list
     attributes:
       label: Console info
@@ -56,7 +56,7 @@ body:
         - Chrome , Firefox, and Edge: Right-click on the page and select *Inspect*. Alternatively  you can press F12 on your keyboard.
         - Safari: Find instructions [here](https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac).
       render: shell
--   type: textarea
+  - type: textarea
     id: context
     attributes:
       label: Additional Context

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: true
 contact_links:
--   name: Question
-    url: https://community.anaconda.cloud/c/tech-topics/pyscript
+  - name: Feature Proposals
+    url: https://github.com/pyscript/pyscript/discussions/new?category=proposals
+    about: Create a feature request to make PyScript even better
+  - name: Questions
+    url: https://github.com/pyscript/pyscript/discussions/new?category=q-a
     about: For questions or discussions about pyscript

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,67 +0,0 @@
-name: Feature Request
-description: Create a feature request to make PyScript even better
-labels: ["type: enhancement", "needs-triage"]
-body:
--   type: markdown
-    attributes:
-        value: |
-            ### Thanks for helping PyScript! 🐍
-
-            Going through feature requests and issues takes up a lot of time, so please be so kind and take a few minutes to fill out all the areas to the best of your ability.
-
-            There will always be more great ideas than there is time to do them, and so we will need to selectively close issues that don't provide enough information, so everyone can focus our time on helping people like you who fill out the form completely. Thank you for your collaboration!
-
-            There are also already a lot of open requests, so please take 2 minutes and search through existing ones to see if your idea already exists. If you find something close, please upvote that request and comment.
-
-            Thanks for helping PyScript be amazing. We are nothing without people like you helping build a better community 💐!
-
-            ### Lets make sure you are in the right place. If you have an idea/request for:
-
-            - #### A specific package/library (such as pandas or scikit learn):
-
-              Search for that respective library on github repo or website. You will have much more success there.
-
-            - #### A general Python question/feature request:
-
-              Try out a forum post [here](https://discuss.python.org/c/users/7)
-
--   type: checkboxes
-    id: checks
-    attributes:
-        label: Checklist
-        description: Please confirm and check all the following options
-        options:
-        -   label: I added a descriptive title
-            required: true
-        -   label: I searched for other feature requests and couldn't find a duplicate (including also the ``type-feature`` tag)
-            required: true
-        -   label: I confirmed that it's not related to another project area (see the above section)
-            required: true
--   type: textarea
-    id: request-idea
-    attributes:
-        label: What is the idea?
-        description: Describe what the feature is and the desired state
-        placeholder: This feature would allow any user of PyScript to type in a simple command in the console and show all variables currently in use
-    validations:
-        required: true
--   type: textarea
-    id: why
-    attributes:
-        label: Why is this needed
-        description: |
-            Who would benefit from this and why would this add value to them? What problem does this solve?
-        placeholder: This would benefit users who would like to see what is being used so they can learn and debug faster
--   type: textarea
-    id: what
-    attributes:
-        label: What should happen?
-        description: |
-            What should be the user experience with the feature? Describe from a user perpective what they would do and see
-        placeholder: A user would type in ``PyScript debug`` in the browser console and see a list of all variables created.
--   type: textarea
-    id: context
-    attributes:
-        label: Additional Context
-        description: |
-            Is there any other information that you think would be valuable for the team to know?

.github/ISSUE_TEMPLATE/misc.yml

@@ -1,37 +0,0 @@
-name: Miscellaneous
-description: For issues that don't belong in other categories
-labels: ["type: misc", "needs-triage"]
-body:
--   type: markdown
-    attributes:
-        value: |
-            Thanks for helping PyScript! 🐍
-
-            This issue is for things that doesn't make sense to put into the other issue categories and we don't want it to get lost.
-
-            Going through issues takes up a lot of time, so please be so kind and take a few minutes to fill out all the areas to the best of your ability.
-
-            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
-
-            Thanks for helping PyScript be amazing. We are nothing without people like you helping build a better community 💐!
--   type: checkboxes
-    id: checks
-    attributes:
-        label: Checklist
-        description: Please confirm and check all the following options.
-        options:
-        -   label: I added a descriptive title
-            required: true
-        -   label: I searched for other issues and couldn't find a duplication
-            required: true
-        -   label: I already searched in Google and didn't find any good information or help
-            required: true
--   type: textarea
-    id: what
-    attributes:
-        label: What is the issue/comment/problem?
-        description: This is a miscellaneous issue so this could be just about anything. We simply ask that you provide as many details as you can to help spur discussion or the outcome you want.
-    validations:
-        required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+## Description
+
+<!--Please describe the changes in your pull request in few words here. -->
+
+## Changes
+
+<!-- List the changes done to fix a bug or introduce a new feature.Please note both user-facing changes and changes to internal API's here -->
+
+## Checklist
+
+<!-- Note: Only user-facing changes require a changelog entry. Internal-only API changes do not require a changelog entry. Changes in documentation do not require a changelog entry. -->
+
+-   [ ] All tests pass locally
+-   [ ] I have updated `docs/changelog.md`
+-   [ ] I have created documentation for this(if applicable)

.github/stale.yaml

@@ -1,26 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-
-# Issues with these labels will never be considered stale
-exemptLabels:
--   backlog
--   needs-triage
--   needs-work
--   epic
-
-# Label to use when marking an issue as stale
-staleLabel: stale
-
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-    This issue has been automatically marked as stale because it has not had
-    recent activity. It will be closed if no further activity occurs. Thank you
-    for your contributions.
-
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: >
-    This issue has been automatically closed because it has not had
-    recent activity. Thank you for your contributions.

.github/workflows/build-unstable.yml

@@ -1,4 +1,4 @@
-name: '[CI] Build Unstable'
+name: "[CI] Build Unstable"
 
 on:
     push: # Only run on merges into main that modify files under pyscriptjs/ and examples/
@@ -7,7 +7,7 @@ on:
         paths:
             - pyscriptjs/**
             - examples/**
-        -   .github/workflows/build-latest.yml # Test that workflow works when changed
+            - .github/workflows/build-unstable.yml # Test that workflow works when changed
 
     pull_request: # Run on any PR that modifies files under pyscriptjs/ and examples/
         branches:
@@ -28,7 +28,6 @@ jobs:
             MINICONDA_PYTHON_VERSION: py38
             MINICONDA_VERSION: 4.11.0
         steps:
-
             - name: Checkout
               uses: actions/checkout@v3
 
@@ -68,6 +67,9 @@ jobs:
             - name: Integration Tests
               run: make test-integration-parallel
 
+            - name: Examples Tests
+              run: make test-examples
+
             - uses: actions/upload-artifact@v3
               with:
                   name: pyscript
@@ -76,6 +78,45 @@ jobs:
                   if-no-files-found: error
                   retention-days: 7
 
+            - uses: actions/upload-artifact@v3
+              if: success() || failure()
+              with:
+                  name: test_results
+                  path: pyscriptjs/test_results
+                  if-no-files-found: error
+    eslint:
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: pyscriptjs
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+
+            - name: Cache node modules
+              uses: actions/cache@v3
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-build-${{ env.cache-name }}-
+                      ${{ runner.os }}-build-
+                      ${{ runner.os }}-
+
+            - name: npm install
+              run: npm install
+
+            - name: Eslint
+              run: npx eslint src -c .eslintrc.js
+
     Deploy:
         runs-on: ubuntu-latest
         needs: BuildAndTest

.github/workflows/docs-release.yml

@@ -1,4 +1,4 @@
-name: '[Docs] Build Release'
+name: "[Docs] Build Release"
 
 on:
     release:
@@ -13,7 +13,6 @@ jobs:
         env:
             SPHINX_HTML_BASE_URL: https://docs.pyscript.net/
         steps:
-
             - name: Checkout
               uses: actions/checkout@v3
               with:
@@ -26,7 +25,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}
@@ -50,9 +49,6 @@ jobs:
             - name: Copy redirect file
               run: aws s3 cp --quiet ./docs/_build/html/_static/redirect.html s3://docs.pyscript.net/index.html
 
-        # -   name: Delete release directory
-        #     run: aws s3 rm --recursive s3://docs.pyscript.net/${{ github.ref_name }}/
-
             - name: Sync to S3
               run: aws s3 sync --quiet ./docs/_build/html/ s3://docs.pyscript.net/${{ github.ref_name }}/
 

.github/workflows/docs-review.yml

@@ -1,9 +1,9 @@
-name: '[Docs] Build Review'
+name: "[Docs] Build Review"
 
 on:
     pull_request:
         branches:
-        -   '*'
+            - "*"
         paths:
             - docs/**
 
@@ -26,7 +26,6 @@ jobs:
         env:
             SPHINX_HTML_BASE_URL: https://docs.pyscript.net/
         steps:
-
             - name: Checkout
               uses: actions/checkout@v3
               with:
@@ -39,7 +38,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}
@@ -52,23 +51,3 @@ jobs:
               with:
                   name: pyscript-docs-review-${{ github.event.number }}
                   path: docs/_build/html/
-
-        # Deploy to S3
-        -   name: Configure AWS credentials
-            uses: aws-actions/configure-aws-credentials@v1.6.1
-            with:
-                aws-region: ${{ secrets.AWS_REGION }}
-                role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
-
-        -   name: Copy redirect file
-            run: aws s3 cp --quiet ./docs/_build/html/_static/redirect.html s3://docs.pyscript.net/index.html
-
-        -   name: Sync to S3
-            run: aws s3 sync --quiet ./docs/_build/html/ s3://docs.pyscript.net/review/${{ github.event.number }}/
-
-        -   name: Adding step summary
-            run: |
-                echo "### Review documentation" >> $GITHUB_STEP_SUMMARY
-                echo "As with any pull request, you can find the rendered documentation version for pull request ${{ github.event.number }} here:"
-                echo "" >> $GITHUB_STEP_SUMMARY # this is a blank line
-                echo "https://docs.pyscript.net/review/${{ github.event.number }}/" >> $GITHUB_STEP_SUMMARY

.github/workflows/docs-unstable.yml

@@ -1,4 +1,4 @@
-name: '[Docs] Build Latest'
+name: "[Docs] Build Latest"
 
 on:
     push:
@@ -16,7 +16,6 @@ jobs:
         env:
             SPHINX_HTML_BASE_URL: https://docs.pyscript.net/
         steps:
-
             - name: Checkout
               uses: actions/checkout@v3
               with:
@@ -29,7 +28,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}
@@ -50,6 +49,10 @@ jobs:
                   aws-region: ${{ secrets.AWS_REGION }}
                   role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
 
+              # Sync will only copy changed files
+            - name: Sync Error
+              run: aws s3 cp --quiet ./docs/_static/s3_error.html s3://docs.pyscript.net/error.html
+
               # Sync will only copy changed files
             - name: Sync to S3
               run: aws s3 sync --quiet ./docs/_build/html/ s3://docs.pyscript.net/unstable/

.github/workflows/prepare-release.yml

@@ -1,9 +1,9 @@
-name: '[CI] Prepare Release'
+name: "[CI] Prepare Release"
 
 on:
     push:
         tags:
-        -   '[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9]+'  # YYYY.MM.MICRO
+            - "[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9]+" # YYYY.MM.MICRO
 
 env:
     MINICONDA_PYTHON_VERSION: py38
@@ -17,7 +17,6 @@ jobs:
     build:
         runs-on: ubuntu-latest
         steps:
-
             - name: Checkout
               uses: actions/checkout@v3
 

.github/workflows/publish-release.yml

@@ -1,4 +1,4 @@
-name: '[CI] Publish Release'
+name: "[CI] Publish Release"
 
 on:
     release:
@@ -57,6 +57,7 @@ jobs:
                   role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
 
             - name: Sync to S3
-            run: | # Update /latest and create an explicitly versioned directory under releases/YYYY.MM.MICRO/
+              run:
+                  | # Update /latest and create an explicitly versioned directory under releases/YYYY.MM.MICRO/
                   aws s3 sync --quiet ./build/ s3://pyscript.net/latest/
                   aws s3 sync --quiet ./build/ s3://pyscript.net/releases/${{ github.ref_name }}/

.github/workflows/publish-snapshot.yml

@@ -1,11 +1,11 @@
-name: '[CI] Publish Snapshot'
+name: "[CI] Publish Snapshot"
 # Copy /unstable/ to /snapshots/2022.09.1.RC1/
 
 on:
     workflow_dispatch:
         inputs:
             snapshot_version:
-                description: 'The calver version of this snapshot: 2022.09.1 or 2022.09.1.RC1'
+                description: "The calver version of this snapshot: 2022.09.1 or 2022.09.1.RC1"
                 type: string
                 required: true
 

.github/workflows/sync-examples.yml

@@ -1,4 +1,4 @@
-name: '[CI] Sync Examples'
+name: "[CI] Sync Examples"
 
 on:
     release:
@@ -15,7 +15,6 @@ jobs:
                 working-directory: examples
 
         steps:
-
             # Deploy to S3
             - name: Checkout
               uses: actions/checkout@v3
@@ -24,6 +23,7 @@ jobs:
               with:
                   aws-region: ${{ secrets.AWS_REGION }}
                   role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
-        -   name: Sync to S3
+            - name:
+                  Sync to S3
                   # Sync outdated or new files, delete ones no longer in source
               run: aws s3 sync --quiet --delete . s3://pyscript.net/examples/ # Sync directory, delete what is not in source

.github/workflows/test-next.yml

@@ -0,0 +1,74 @@
+name: "[CI] Test Next"
+
+on:
+    push: # Only run on merges into main that modify files under pyscriptjs/ and examples/
+        branches:
+            - next
+        paths:
+            - pyscript.core/**
+            - .github/workflows/test-next.yml # Test that workflow works when changed
+
+    pull_request: # Run on any PR that modifies files under pyscriptjs/ and examples/
+        branches:
+            - next
+        paths:
+            - pyscript.core/**
+            - .github/workflows/test-next.yml # Test that workflow works when changed
+    workflow_dispatch:
+
+jobs:
+    TestNext:
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: pyscript.core
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.x
+
+            - name: Cache node modules
+              uses: actions/cache@v3
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-build-${{ env.cache-name }}-
+                      ${{ runner.os }}-build-
+                      ${{ runner.os }}-
+
+            # TODO: this will likely change soon to pyscript.next
+            # - name: install next deps
+            #   working-directory: pyscript.core
+            #   run: npm i; npx playwright install
+
+            # - name: build next
+            #   working-directory: pyscript.core
+            #   run: npm run build
+
+            # - name: Run next tests
+            #   working-directory: pyscript.core
+            #   run: npm run test
+
+            # TODO: DO we want to upload next yet?
+            # - uses: actions/upload-artifact@v3
+            #   with:
+            #       name: pyscript
+            #       path: |
+            #           pyscriptjs/build/
+            #       if-no-files-found: error
+            #       retention-days: 7
+
+            # - uses: actions/upload-artifact@v3
+            #   if: success() || failure()
+            #   with:
+            #       name: test_results
+            #       path: pyscriptjs/test_results
+            #       if-no-files-found: error

.github/workflows/test_report.yml

@@ -0,0 +1,16 @@
+name: Test Report
+on:
+    workflow_run:
+        workflows: ['\[CI\] Build Unstable']
+        types:
+            - completed
+jobs:
+    report:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: dorny/test-reporter@v1.6.0
+              with:
+                  artifact: test_results
+                  name: Test reports
+                  path: "*.xml"
+                  reporter: java-junit

.gitignore

@@ -73,6 +73,7 @@ instance/
 # Sphinx documentation
 docs/_build/
 docs/_env/
+newdocs/_env/
 
 # PyBuilder
 target/
@@ -138,3 +139,6 @@ dmypy.json
 node_modules/
 
 coverage/
+
+# junit xml for test results
+test_results

.pre-commit-config.yaml

@@ -1,9 +1,12 @@
 # This is the configuration for pre-commit, a local framework for managing pre-commit hooks
 #   Check out the docs at: https://pre-commit.com/
+ci:
+    skip: [eslint]
+    autoupdate_schedule: monthly
 
 default_stages: [commit]
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
+    - repo: https://github.com/pre-commit/pre-commit-hooks
       rev: v4.4.0
       hooks:
           - id: check-builtin-literals
@@ -11,79 +14,50 @@ repos:
           - id: check-docstring-first
           - id: check-executables-have-shebangs
           - id: check-json
-        exclude: tsconfig.json
+            exclude: tsconfig\.json
           - id: check-toml
           - id: check-xml
           - id: check-yaml
           - id: detect-private-key
           - id: end-of-file-fixer
-        exclude: \.min\.js$
+            exclude: pyscript\.core/core.*|\.min\.js$
           - id: trailing-whitespace
 
--   repo: https://github.com/PyCQA/bandit
-    rev: 1.7.4
+    - repo: https://github.com/charliermarsh/ruff-pre-commit
+      rev: v0.0.257
       hooks:
-    -   id: bandit
-        args:
-        -   --skip=B101,B201
+          - id: ruff
+            exclude: pyscript\.core/test|pyscript\.core/src/display.py
+            args: [--fix]
 
--   repo: https://github.com/psf/black
-    rev: 22.12.0
+    - repo: https://github.com/psf/black
+      rev: 23.1.0
       hooks:
           - id: black
 
-
--   repo: https://github.com/codespell-project/codespell
-    rev: v2.2.2
+    - repo: https://github.com/codespell-project/codespell
+      rev: v2.2.4
       hooks:
-    -   id: codespell  # See 'setup.cfg' for args
+          - id: codespell # See 'pyproject.toml' for args
+            exclude: \.js\.map$
+            additional_dependencies:
+                - tomli
 
--   repo: https://github.com/PyCQA/flake8
-    rev: 6.0.0
+    - repo: https://github.com/hoodmane/pyscript-prettier-precommit
+      rev: "v3.0.0-alpha.6"
       hooks:
-    -   id: flake8  # See 'setup.cfg' for args
-        additional_dependencies: [flake8-bugbear, flake8-comprehensions]
+          - id: prettier
+            exclude: pyscript\.core/test|pyscript\.core/core.*|pyscript\.core/types/|pyscript\.sw/
+            args: [--tab-width, "4"]
 
--   repo: https://github.com/pycqa/isort
-    rev: 5.11.1
-    hooks:
-    -   id: isort
-        name: isort (python)
-        args: [--profile, black]
-
--   repo: https://github.com/macisamuele/language-formatters-pre-commit-hooks
-    rev: v2.5.0
-    hooks:
-    -   id: pretty-format-yaml
-        args: [--autofix, --indent, '4']
-        exclude: .github/ISSUE_TEMPLATE/.*\.yml$
-
--   repo: https://github.com/asottile/pyupgrade
-    rev: v3.3.1
-    hooks:
-    -   id: pyupgrade
-        args:
-        -   --py310-plus
-
--   repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.29.0
+    - repo: https://github.com/pre-commit/mirrors-eslint
+      rev: v8.36.0
       hooks:
           - id: eslint
             files: pyscriptjs/src/.*\.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
             types: [file]
             additional_dependencies:
                 - eslint@8.25.0
-        -   typescript@4.8.4
-        -   '@typescript-eslint/eslint-plugin@5.39.0'
-        -   '@typescript-eslint/parser@5.39.0'
-
-# Commented out until mdformat-myst supports custom extensions
-# See https://github.com/executablebooks/mdformat-myst/pull/9
-# -   repo: https://github.com/executablebooks/mdformat
-#     rev: 0.7.14 # Use the ref you want to point at
-#     hooks:
-#     -   id: mdformat
-#         additional_dependencies:
-#         -   mdformat-gfm
-#         -   mdformat-myst
-#         -   mdformat-black
+                - typescript@5.0.4
+                - "@typescript-eslint/eslint-plugin@5.58.0"
+                - "@typescript-eslint/parser@5.58.0"

.prettierignore

@@ -0,0 +1,5 @@
+ISSUE_TEMPLATE
+*.min.*
+package-lock.json
+docs
+examples/panel.html

CONTRIBUTING.md

@@ -4,17 +4,24 @@ Thank you for wanting to contribute to the PyScript project!
 
 ## Table of contents
 
-* [Code of Conduct](#code-of-conduct)
-* [Contributing](#contributing)
-    * [Reporting bugs](#reporting-bugs)
-    * [Reporting security issues](#reporting-security-issues)
-    * [Asking questions](#asking-questions)
-    * [Setting up your local environment and developing](#setting-up-your-local-environment-and-developing)
-    * [Places to start](#places-to-start)
-    * [Submitting a change](#submitting-a-change)
-* [License terms for contributions](#license-terms-for-contributions)
-* [Becoming a maintainer](#becoming-a-maintainer)
-* [Trademarks](#trademarks)
+-   [Contributing to PyScript](#contributing-to-pyscript)
+    -   [Table of contents](#table-of-contents)
+-   [Code of Conduct](#code-of-conduct)
+-   [Contributing](#contributing)
+    -   [Reporting bugs](#reporting-bugs)
+    -   [Creating useful issues](#creating-useful-issues)
+    -   [Reporting security issues](#reporting-security-issues)
+    -   [Asking questions](#asking-questions)
+    -   [Setting up your local environment and developing](#setting-up-your-local-environment-and-developing)
+    -   [Developing](#developing)
+    -   [Rebasing changes](#rebasing-changes)
+    -   [Building the docs](#building-the-docs)
+    -   [Places to start](#places-to-start)
+    -   [Setting up your local environment and developing](#setting-up-your-local-environment-and-developing)
+    -   [Submitting a change](#submitting-a-change)
+-   [License terms for contributions](#license-terms-for-contributions)
+-   [Becoming a maintainer](#becoming-a-maintainer)
+-   [Trademarks](#trademarks)
 
 # Code of Conduct
 
@@ -28,10 +35,10 @@ Bugs are tracked on the [project issues page](https://github.com/pyscript/pyscri
 
 ## Creating useful issues
 
-* Use a clear and descriptive title.
-* Describe the specific steps that reproduce the problem with as many details as possible so that someone can verify the issue.
-* Describe the behavior you observed, and the behavior you had expected.
-* Include screenshots if they help make the issue clear.
+-   Use a clear and descriptive title.
+-   Describe the specific steps that reproduce the problem with as many details as possible so that someone can verify the issue.
+-   Describe the behavior you observed, and the behavior you had expected.
+-   Include screenshots if they help make the issue clear.
 
 ## Reporting security issues
 
@@ -43,18 +50,18 @@ If you have questions about the project, using PyScript, or anything else, pleas
 
 ## Places to start
 
-If you would like to contribute to PyScript, but you aren't sure where to begin, here are some suggestions.
+If you would like to contribute to PyScript, but you aren't sure where to begin, here are some suggestions:
 
-* **Read over the existing documentation.** Are there things missing, or could they be clearer? Make some changes/additions to those documents.
-* **Review the open issues.** Are they clear? Can you reproduce them? You can add comments, clarifications, or additions to those issues. If you think you have an idea of how to address the issue, submit a fix!
-* **Look over the open pull requests.** Do you have comments or suggestions for the proposed changes? Add them.
-* **Check out the examples.** Is there a use case that would be good to have sample code for? Create an example for it.
+-   **Read over the existing documentation.** Are there things missing, or could they be clearer? Make some changes/additions to those documents.
+-   **Review the open issues.** Are they clear? Can you reproduce them? You can add comments, clarifications, or additions to those issues. If you think you have an idea of how to address the issue, submit a fix!
+-   **Look over the open pull requests.** Do you have comments or suggestions for the proposed changes? Add them.
+-   **Check out the examples.** Is there a use case that would be good to have sample code for? Create an example for it.
 
 ## 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://docs.pyscript.net/latest/development/setting-up-environment.html) will help you get started.
 
-You can also read the [developing process](https://docs.pyscript.net/latest/development/developing.html) and how to rebase your branch with the latest changes.
+You can also read about PyScript's [development process](https://docs.pyscript.net/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!
 
 ## License terms for contributions
 
@@ -69,5 +76,6 @@ Contributors are invited to be maintainers of the project by demonstrating good
 The Project abides by the Organization's [trademark policy](https://github.com/pyscript/governance/blob/main/TRADEMARKS.md).
 
 ---
+
 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/).

GOVERNANCE.md

@@ -41,5 +41,6 @@ Any names, trademarks, logos, or goodwill developed by and associated with the P
 Amendments to this governance policy may be made by affirmative vote of 2/3 of all Maintainers, with approval by the Organization's Steering Committee.
 
 ---
+
 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/).

MAINTAINERS.md

@@ -9,15 +9,16 @@ This document lists the Maintainers of the Project. Maintainers may be added onc
 | Philipp Rudiger      | Anaconda, Inc    |
 | Peter Wang           | Anaconda, Inc    |
 | Kevin Goldsmith      | Anaconda, Inc    |
-| Mariana Meireles     | Anaconda, Inc    |
+| Mariana Meireles     |                  |
 | Nicholas H.Tollervey | Anaconda, Inc    |
 | Madhur Tandon        | Anaconda, Inc    |
 | Ted Patrick          | Anaconda, Inc    |
-| Jeff Glass           | ---              |
-| Paul Everitt         | ---              |
-| Fabio Rosado         | ---              |
+| Jeff Glass           |                  |
+| Paul Everitt         |                  |
+| Fabio Rosado         | Anaconda, Inc    |
+| Andrea Giammarchi    | Anaconda, Inc    |
 
-______________________________________________________________________
+---
 
 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/).

README.md

@@ -11,21 +11,24 @@ To get started see the [getting started tutorial](docs/tutorials/getting-started
 For examples see [here](examples).
 
 ### Longer Version
+
 PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.
 
 ## Try PyScript
 
-To try PyScript, import the appropriate pyscript files into the ```<head>``` tag of your html page with:
+To try PyScript, import the appropriate pyscript files into the `<head>` tag of your html page with:
+
 ```html
 <head>
-<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
-<script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
 </head>
 ```
+
 You can then use PyScript components in your html page. PyScript currently implements the following elements:
 
-* `<py-script>`: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
-* `<py-repl>`: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code
+-   `<py-script>`: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
+-   `<py-repl>`: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code
 
 Check out the [the examples directory](examples) folder for more examples on how to use it, all you need to do is open them in Chrome.
 
@@ -33,18 +36,20 @@ Check out the [the examples directory](examples) folder for more examples on how
 
 Read the [contributing guide](CONTRIBUTING.md) to learn about our development process, reporting bugs and improvements, creating issues and asking questions.
 
+Check out the [developing process](https://docs.pyscript.net/latest/development/developing.html) documentation for more information on how to setup your development environment.
+
 ## Resources
 
-* [Official docs](https://docs.pyscript.net)
-* [Discussion board](https://community.anaconda.cloud/c/tech-topics/pyscript)
-* [Home Page](https://pyscript.net/)
-* [Blog Post](https://engineering.anaconda.com/2022/04/welcome-pyscript.html)
-* [Discord Channel](https://discord.gg/BYB2kvyFwm)
+-   [Official docs](https://docs.pyscript.net)
+-   [Discussion board](https://community.anaconda.cloud/c/tech-topics/pyscript)
+-   [Home Page](https://pyscript.net/)
+-   [Blog Post](https://engineering.anaconda.com/2022/04/welcome-pyscript.html)
+-   [Discord Channel](https://discord.gg/BYB2kvyFwm)
 
 ## Notes
 
-* This is an extremely experimental project, so expect things to break!
-* PyScript has been only tested on Chrome at the moment.
+-   This is an extremely experimental project, so expect things to break!
+-   PyScript has been only tested on Chrome at the moment.
 
 ## Governance
 

TROUBLESHOOTING.md

@@ -3,7 +3,8 @@
 This page is meant for troubleshooting common problems with PyScript.
 
 ## Table of contents:
-* [Make Setup](#make-setup)
+
+-   [Make Setup](#make-setup)
 
 ## Make setup
 

docs/Makefile

@@ -30,7 +30,7 @@ shell:
 	@export CONDA_ENV_PROMPT='<{name}>'
 	@echo 'conda activate $(env)'
 
-htmlserve:
+htmlserve: html
 	@echo 'visit docs at http://localhost:8080'
 	python -m http.server -d "$(BUILDDIR)/html/" 8080
 

docs/README.md

@@ -29,3 +29,26 @@ static files like templates and themes, to build the static end result.
 ### Build
 
 To learn how to build the docs, head over the [CONTRIBUTING](../CONTRIBUTING.md) page.
+
+
+## Cross-referencing
+
+You can link to other pages in the documentation by using the `{doc}` role. For example, to link to the `docs/README.md` file, you would use:
+
+```markdown
+{doc}`docs/README.md`
+```
+
+You can also cross-reference the python glossary by using the `{term}` role. For example, to link to the `iterable` term, you would use:
+
+```markdown
+{term}`iterable`
+```
+
+You can also cross-reference functions, methods or data attributes by using the `{attr}` for example:
+
+```markdown
+{py:func}`repr`
+```
+
+This would link to the `repr` function in the python builtins.

docs/_static/examples/what-is-pyscript.html

@@ -3,6 +3,10 @@
       <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
       <script defer src="https://pyscript.net/latest/pyscript.js"></script>
       <style>
+        h1 {
+          color: #459db9;
+        }
+
         .pulse {
             animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }

docs/_static/s3_error.html

@@ -0,0 +1,4 @@
+<html><head><meta http-equiv="refresh" content="5; URL='/latest/'" /></head><body>
+    <h1>404 - File not found</h1>
+    <p>You will be redirected to the latest documentation in 5 seconds.</p>
+</body></html>

docs/changelog.md

@@ -0,0 +1,94 @@
+# Release Notes
+
+2023.XX.X
+=========
+
+
+Features
+--------
+
+- Added the `xterm` attribute to `py-config`. When set to `True` or `xterm`, an (output-only) [xterm.js](http://xtermjs.org/) terminal will be used in place of the default py-terminal.
+- The default version of Pyodide is now `0.23.2`. See the [Pyodide Changelog](https://pyodide.org/en/stable/project/changelog.html#version-0-23-2) for a detailed list of changes.
+- Added the `@when` decorator for attaching Python functions as event handlers
+- The `py-mount` attribute on HTML elements has been deprecated, and will be removed in a future release.
+
+
+### Runtime py- attributes
+
+- Added logic to react to `py-*` attributes changes, removal, `py-*` attributes added to already live nodes but also `py-*` attributes added or defined via injected nodes (either appended or via `innerHTML` operations). ([#1435](https://github.com/pyscript/pyscript/pull/1435))
+
+### <script type="py">
+- Added the ability to optionally use `<script type="py">`, `<script type="pyscript">` or `<script type="py-script">` instead of a `<py-script>` custom element, in order to tackle cases where the content of the `<py-script>` tag, inevitably parsed by browsers, could accidentally contain *HTML* able to break the surrounding page layout. ([#1396](https://github.com/pyscript/pyscript/pull/1396))
+
+### &lt;py-terminal&gt;
+- Added a `docked` field and attribute for the `<py-terminal>` custom element, enabled by default when the terminal is in `auto` mode, and able to dock the terminal at the bottom of the page with auto scroll on new code execution.
+
+### &lt;py-script&gt;
+- Restored the `output` attribute of `py-script` tags to route `sys.stdout` to a DOM element with the given ID. ([#1063](https://github.com/pyscript/pyscript/pull/1063))
+- Added a `stderr` attribute of `py-script` tags to route `sys.stderr` to a DOM element with the given ID. ([#1063](https://github.com/pyscript/pyscript/pull/1063))
+
+### &lt;py-repl&gt;
+- The `output` attribute of `py-repl` tags now specifies the id of the DOM element that `sys.stdout`, `sys.stderr`, and the results of a REPL execution are written to. It no longer affects the location of calls to `display()`
+- Added a `stderr` attribute of `py-repl` tags to route `sys.stderr` to a DOM element with the given ID. ([#1106](https://github.com/pyscript/pyscript/pull/1106))
+- Resored the `output-mode` attribute of `py-repl` tags. If `output-mode` == 'append', the DOM element where output is printed is _not_ cleared before writing new results.
+- Load code from the attribute src of py-repl and preload it into the corresponding py-repl tag by use the attribute `str` in your `py-repl` tag([#1292](https://github.com/pyscript/pyscript/pull/1292))
+
+### Plugins
+- Plugins may now implement the `beforePyReplExec()` and `afterPyReplExec()` hooks, which are called immediately before and after code in a `py-repl` tag is executed. ([#1106](https://github.com/pyscript/pyscript/pull/1106))
+
+### Web worker support
+- introduced the new experimental `execution_thread` config option: if you set `execution_thread = "worker"`, the python interpreter runs inside a web worker
+- worker support is still **very** experimental: not everything works, use it at your own risk
+
+Bug fixes
+---------
+
+- Fixes [#1280](https://github.com/pyscript/pyscript/issues/1280), which describes the errors on the PyRepl tests related to having auto-gen tags that shouldn't be there.
+
+Enhancements
+------------
+
+- Py-REPL tests now run on both osx and non osx OSs
+- migrated from *rollup* to *esbuild* to create artifacts
+- updated `@codemirror` dependency to its latest
+
+Docs
+----
+
+- Add docs for event handlers
+
+2023.01.1
+=========
+
+
+Features
+--------
+
+Bug fixes
+---------
+
+- Fixed an issue where `pyscript` would not be available when using the minified version of PyScript. ([#1054](https://github.com/pyscript/pyscript/pull/1054))
+- Fixed missing closing tag when rendering an image with `display`. ([#1058](https://github.com/pyscript/pyscript/pull/1058))
+- Fixed a bug where Python plugins methods were being executed twice. ([#1064](https://github.com/pyscript/pyscript/pull/1064))
+
+Enhancements
+------------
+
+- When adding a `py-` attribute to an element but didn't added an `id` attribute, PyScript will now generate a random ID for the element instead of throwing an error which caused the splash screen to not shutdown. ([#1122](https://github.com/pyscript/pyscript/pull/1122))
+- You can now disable the splashscreen by setting `enabled = false` in your `py-config` under the `[splashscreen]` configuration section. ([#1138](https://github.com/pyscript/pyscript/pull/1138))
+
+Documentation
+-------------
+
+- Fixed 'Direct usage of document is deprecated' warning in the getting started guide. ([#1052](https://github.com/pyscript/pyscript/pull/1052))
+- Added reference documentation for the `py-splashscreen` plugin ([#1138](https://github.com/pyscript/pyscript/pull/1138))
+- Adds doc for installing tests ([#1156](https://github.com/pyscript/pyscript/pull/1156))
+- Adds docs for custom Pyscript attributes (`py-*`) that allow you to add event listeners to an element ([#1125](https://github.com/pyscript/pyscript/pull/1125))
+
+Deprecations and Removals
+-------------------------
+
+- The py-config `runtimes` to specify an interpreter has been deprecated. The `interpreters` config should be used instead. ([#1082](https://github.com/pyscript/pyscript/pull/1082))
+- The attributes `pys-onClick` and `pys-onKeyDown` have been deprecated, but the warning was only shown in the console. An alert banner will now be shown on the page if the attributes are used. They will be removed in the next release. ([#1084](https://github.com/pyscript/pyscript/pull/1084))
+- The pyscript elements `py-button`, `py-inputbox`, `py-box` and `py-title` have now completed their deprecation cycle and have been removed. ([#1084](https://github.com/pyscript/pyscript/pull/1084))
+- The attributes `pys-onClick` and `pys-onKeyDown` have been removed. Use `py-click` and `py-keydown` instead ([#1361](https://github.com/pyscript/pyscript/pull/1361))

docs/conf.py

@@ -19,7 +19,7 @@ import os
 # -- Project information -----------------------------------------------------
 
 project = "PyScript"
-copyright = "(c) 2022, Anaconda, Inc."
+copyright = "(c) 2023, Anaconda, Inc."
 author = "Anaconda, Inc."
 language = "en"
 
@@ -36,8 +36,13 @@ extensions = [
     "sphinx_sitemap",
     "sphinxemoji.sphinxemoji",
     "sphinxcontrib.youtube",
+    "sphinx.ext.intersphinx",
 ]
 
+intersphinx_mapping = {
+    "python": ("https://docs.python.org/3.10", None),
+}
+
 # Add any paths that contain templates here, relative to this directory.
 templates_path = ["_templates"]
 

docs/development/deprecation-cycle.md

@@ -28,3 +28,11 @@ showWarning(`
     </p>
 `, "html")
 ```
+
+## Deprecation History
+
+This section tracks deprecations of specific features, both for historical record and to help the development team remember to actually remove deprecated features in future releases.
+
+|Attribute/Object/Functionality|Deprecated In|Removed In|
+|-|-|-|
+|`py-mount` attribute | (Release following 2023.03.1) | -|

docs/development/developing.md

@@ -1,6 +1,6 @@
-# Developing Process
+# Development Process
 
-This document is intended to help you get started developing for pyscript, it assumes that you have [setup your development environment](setting-up-environment.md).
+This document is intended to help you get started in developing software for the PyScript project. It assumes that you have [a working development environment](setting-up-environment.md). It also assumes you have a remote named `upstream` pointing to PyScript's repository and one named `origin` pointing to your own repository.
 
 * First, make sure you are using the latest version of the pyscript main branch
 
@@ -34,29 +34,57 @@ pre-commit install
 git checkout -b <your branch name>
 ```
 
-* Work on your change
+* Work on your changes
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; **NOTE**: If you are working on a python file, you may encounter linting issues when pre-commit runs. Pyscript uses [black](https://black.readthedocs.io/en/stable/) to fix any linting problems automatically. All you need to do is add the changes again and commit using your previous commit message (the previous one that failed didn't complete due to black formatting files).
 
 * Run tests before pushing the changes
 
 ```
-make tests
+make test
 ```
 
-* When you make changes locally, double check that your contribution follows the PyScript formatting rules by running `npm run lint`. Note that in this case you're looking for the errors, <u>**NOT**</u> the warnings (Unless the warning is created by a local change). If an error is found by lint you should fix it <u>**before**</u> creating a pull request
+To learn more about tests please refer to the session [Quick guide to pytest](## Quick guide to pytest).
 
+* When you make changes locally, double check that your contribution follows the PyScript formatting rules by running `npm run lint`. Note that in this case you're looking for the errors, <u>**NOT**</u> the warnings (Unless the warning is created by a local change). If an error is found by the linter you should fix it <u>**before**</u> creating a pull request.
 
-## Rebasing changes
+#### Rebasing changes
 
-Sometimes you might be asked to rebase main into your branch. Please refer to this [section on git rebase from GitHub docs](https://docs.github.com/en/get-started/using-git/about-git-rebase).
+Sometimes you might be asked to rebase the main branch into your local branch. Please refer to this [section on git rebase from GitHub docs](https://docs.github.com/en/get-started/using-git/about-git-rebase).
 
 If you need help with anything, feel free to reach out and ask for help!
 
 
-## pytest quick guide
+## Updating the changelog
 
-We make a heavy usage of `pytest`. Here is a quick guide and collection of
+As you work on your changes, please update the changelog file `changelog.md` with a short description of the changes you made. This will help us keep track of what has changed in each release.
+
+You can look at the [changelog](../changelog.md) for examples on how to add your changes to the changelog. But here's a quick example:
+
+```
+2023.02.01
+=========
+
+Bug fixes
+---------
+
+- Fixed a bug that was causing the app to crash when you tried to do something #PR_NUMBER
+
+Enhancements
+------------
+
+- Made awesome new feature #PR_NUMBER
+
+Documentation
+-------------
+
+- Added a new section to the docs #PR_NUMBER
+
+```
+
+## 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`
@@ -79,7 +107,7 @@ useful options:
 - `-k 'foo and not bar'`
 
 
-## Running integration tests under pytest
+### 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
@@ -118,8 +146,8 @@ $ 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-0.21.3...
-[  0.18 request         ] 200 - CACHED - https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js
+[  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
@@ -162,8 +190,18 @@ $ 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
 
-#### Fake server, HTTP cache
+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
@@ -179,25 +217,6 @@ If you want to temporarily disable the cache, the easiest thing is to use
 If you want to clear the cache, you can use the special option
 `--clear-http-cache`:
 
-```
-$ pytest --clear-http-cache
-...
--------------------- SmartRouter HTTP cache --------------------
-Requests found in the cache:
-     https://raw.githubusercontent.com/pyscript/pyscript/main/README.md
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/repodata.json
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.asm.js
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/micropip-0.1-py3-none-any.whl
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.asm.data
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.asm.wasm
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide_py.tar
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyparsing-3.0.9-py3-none-any.whl
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/distutils.tar
-     https://cdn.jsdelivr.net/pyodide/v0.21.3/full/packaging-21.3-py3-none-any.whl
-Cache cleared
-```
-
 **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`.

docs/development/setting-up-environment.md

@@ -1,69 +1,285 @@
 # Setting up your development environment
 
-* Fork the repository - [quicklink](https://github.com/pyscript/pyscript/fork)
+These steps will help you set up your development environment. We suggest completing each step before going to the next step, as some parts have dependencies on previous commands.
 
-* Clone your fork of the project
+## Prepare your repository
 
-```
+* Create a fork of the [PyScript github repository](https://github.com/pyscript/pyscript/fork) to your github.
+
+* In your development machine, clone your fork of PyScript. Use this command in your terminal.
+
+```sh
 git clone https://github.com/<your username>/pyscript
 ```
 
-* Add the original project as your upstream (this will allow you to pull the latest changes)
+* With the following command, add the original project as your upstream. This will allow you to pull the latest changes.
 
 ```sh
+git remote add upstream https://github.com/pyscript/pyscript.git
+git pull upstream main
+```
+
+* If the above fails, try this alternative:
+
+```sh
+git remote remove upstream
 git remote add upstream git@github.com:pyscript/pyscript.git
+git pull upstream main
 ```
 
-* cd into the `pyscriptjs` folder using the line below in your terminal (if your terminal is already in pyscript then use **cd pyscriptjs** instead)
+## Install the dependencies
 
-```
+* change directory into `pyscriptjs` using this command:
+
+```sh
 cd pyscript/pyscriptjs
 ```
 
-* Install the dependencies with the command below (you must have node >=16)
+We need to ensure that we have installed `conda`, `nodejs` >= 16 and `make`, before we can continue.
+
+* Install `conda` by downloading one of the following packages that include it [MiniConda](https://docs.conda.io/en/latest/miniconda.html) or [Anaconda](https://www.anaconda.com/download/).
+
+* Install `nodejs` with at least version 16. This can be downloaded at [https://nodejs.org](https://nodejs.org)
+
+* Ensure that `make` is available on your system:
+
+  * *Linux*. `make` is usually installed by default in most Linux distributions. In the case it is not installed, run the terminal command `sudo apt install make`.
+
+  * *OS X*. Install Apple Developer Tools. `make` is included in this package.
+
+  * *Windows*. It is recommended to use either Windows Subsystem for Linux (WSL) or GNUWin32 for installing `make`. Instructions can be found [in this StackOverflow question](https://stackoverflow.com/questions/32127524/how-to-install-and-use-make-in-windows).
+
+* The following command will download and install the rest of the PyScript dependencies:
 
 ```
 make setup
 ```
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; **NOTE**: If `make setup` gives a node/npm version required  error then go to [troubleshooting](https://github.com/pyscript/pyscript/blob/main/TROUBLESHOOTING.md)
 
-* You can also run the examples locally by running the command below in your terminal
+  * **NOTE**: If `make setup` gives an error on an incompatible version for node or npm, please refer to [troubleshooting](https://github.com/pyscript/pyscript/blob/main/TROUBLESHOOTING.md).
+
+## Activating the environment
+
+* After the above `make setup` command is completed, it will print out the command for activating the environment using the following format. Use this to work on the development environment:
+
+```
+conda activate <environment name>
+```
+
+## Deactivating the environment
+
+* To deactivate the environment, use the following command:
+```
+conda deactivate
+```
+
+
+# Running PyScript examples server
+
+The examples server is used to view and edit the example files.
+
+* change directory into `pyscriptjs` using this command:
+
+```sh
+cd pyscript/pyscriptjs
+```
+
+* To build the examples, run this command:
 
 ```
 make examples
 ```
 
-* Run ***npm run dev*** to build and run the dev server. This will also watch for changes and rebuild when a file is saved.
+* To serve the examples, run this command:
+
+```sh
+python -m http.server 8080 --directory examples
+```
+
+* Alternately, you can also run this command if conda is not activated:
+
+```sh
+conda run -p <environment name> python -m http.server 8080 --directory examples
+```
+
+* You can access the examples server by visiting the following url in your browser: [http://localhost:8080](http://localhost:8080)
+
+
+# Running the PyScript development server
+
+The PyScript development server will regularly check for any changes in the src directory. If any changes were detected, the server will rebuild itself to reflect the changes. This is useful for development with PyScript.
+
+* change directory into `pyscriptjs` using this command:
+
+```sh
+cd pyscript/pyscriptjs
+```
+
+* Use the following command to build and run the PyScript dev server.
 
 ```
 npm run dev
 ```
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; **NOTE**: To access your local build paste `http://localhost:8080` into your browser
 
+* You can access the PyScript development server by visiting the following url in your browser: [http://localhost:8080](http://localhost:8080)
 
-Now that node and npm have both been updated `make setup` should work, and you can continue [setting up your local environment](setting-up-environment.md) without problems (hopefully).
+# Setting up the test environment
 
+A key to good development is to perform tests before sending a Pull Request for your changes.
 
-## Setting up and building the docs
+## Install the dependencies
 
-To build the documentation locally first make sure you are in the `docs` directory.
+* change directory into `pyscriptjs` using this command:
 
-You'll need `make` and `conda` installed in your machine. The rest of the environment should be automatically download and created for you once you use the command:
+```sh
+cd pyscript/pyscriptjs
+```
+
+* The following command will download the dependencies needed for running the tests:
 
 ```
 make setup
 ```
 
-Use `conda activate $environment_name` to activate your environment.
+  * If you are not using a conda environment, or wish to install the dependencies manually, here are the packages needed:
+    * `pillow`
+    * `requests`
+    * `numpy`
+    * `playwright`
+    * `pytest-playwright`. Note that this is only available as a `pip` package.
 
-To add new information to the documentation make sure you conform with PyScript's code of conduct and with the general principles of Diataxis. Don't worry about reading too much on it, just do your best to keep your contributions on the correct axis.
+## Activating the environment
 
-Write your documentation files using [Markedly Structured Text](https://myst-parser.readthedocs.io/en/latest/syntax/optional.html), which is very similar to vanilla Markdown but with some addons to create the documentation infrastructure.
+* After the above `make setup` command is completed, it will print out the command for activating the environment using the following format:
 
-Once done, initialize a server to check your work:
+```
+conda activate <environment name>
+```
+
+## Deactivating the environment
+
+* To deactivate the environment, use the following command:
+```
+conda deactivate
+```
+
+## Running the tests
+
+* After setting up the test environment and while the environment is activated, you can run the tests with the following command:
+
+```
+make test
+```
+
+For more information about PyScript's testing framework, head over to the [development process](developing.md) page.
+
+# Setting up your documentation environment
+
+The documentation environment is separate from the development environment. It is used for updating and reviewing the documentation before deployment.
+
+## Installing the dependencies
+
+* change directory into the `docs` using this command:
+
+```sh
+cd pyscript/docs
+```
+
+* The following command will download, install the dependencies, and create the environment for you:
+
+```
+make setup
+```
+
+(activating-documentation-environment)=
+## Activating the environment
+
+* After the above `make setup` command is completed, it will print out the command for activating the environment using the following format:
+
+```
+conda activate <docs environment name>
+```
+
+Note that the docs environment path is different from the developer's environment path.
+
+## Deactivating the environment
+
+* To deactivate the environment, use the following command:
+```
+conda deactivate
+```
+
+## Contributing to the documentation
+
+* Before sending a pull request, we recommend that your documentation conforms with [PyScript's code of conduct](https://github.com/pyscript/governance/blob/main/CODE-OF-CONDUCT.md) and with the general principles of [Diataxis](https://diataxis.fr/). Don't worry about reading too much on it, just do your best to keep your contributions on the correct axis.
+
+* Write your documentation files using [Markedly Structured Text](https://myst-parser.readthedocs.io/en/latest/syntax/optional.html). This is similar to Markdown but with some addons to create the documentation infrastructure.
+
+## Reviewing your work
+
+* Before sending a Pull Request, review your work by starting the documentation server. To do this, use the following command:
 
 ```
 make livehtml
 ```
 
-Visible here: [http://127.0.0.1:8000](http://127.0.0.1:8000)
+You can visit the documentation server by opening a browser and visiting [http://127.0.0.1:8000](http://127.0.0.1:8000).
+
+* Alternately, you can open a static documentation server. Unlike the above, this will not automatically update any changes done after running this server. To see the changes done, you will need to manually stop and restart the server. To do this, use the following command:
+
+```
+make htmlserve
+```
+
+You can visit the documentation server by opening a browser and visiting [http://127.0.0.1:8080](http://127.0.0.1:8080).
+
+* To stop either server, press `ctrl+C` or `command+C` while the shell running the command is active.
+
+* Note: If the above make commands failed, you need to activate the documentation environment first before running any of the commands. Refer to [Activating the environment](#activating-documentation-environment) section above.
+
+# PyScript Demonstrator
+
+A simple webapp to demonstrate the capabilities of PyScript.
+
+## Getting started
+
+1. If you don't already have Node.js, install it. The official installer for the
+   LTS version of Node is available from [nodejs.org](https://nodejs.org/).
+
+2. If you don't already have Rollup, install it. Rollup can be installed as a
+   global resource using:
+
+       $ npm install --global rollup
+
+3. Install the demo apps requirements:
+
+       $ npm install
+
+4. Start the server:
+
+       $ npm run dev
+
+   This will compile the resources for the app, and start the development server.
+
+5. When the compilation completes, it will display something like:
+
+         Your application is ready~! 🚀
+
+         - Local:      http://localhost:8080
+         - Network:    Add `--host` to expose
+
+       ────────────────── LOGS ──────────────────
+
+   Once this is visible, open a browser at
+   [http://localhost:8080](http://localhost:8080). This will provide a list of
+   demos that you can run.
+
+## More information
+
+For more information:
+
+* [Discussion board](https://community.anaconda.cloud/c/tech-topics/pyscript)
+* [Home Page](https://pyscript.net/)
+* [Blog Post](https://engineering.anaconda.com/2022/04/welcome-pyscript.html)
+* [Discord Channel](https://discord.gg/BYB2kvyFwm)
+
+We use Discord as the main place for our discussions

docs/environment.yml

@@ -10,6 +10,7 @@ dependencies:
 -   sphinx-copybutton
 -   sphinx-design
 -   sphinx-togglebutton
+-   nodejs=16
 
 -   pip:
     -   sphinxemoji

docs/guides/custom-plugins.md

@@ -0,0 +1,225 @@
+# Creating custom pyscript plugins
+
+Pyscript has a few built-in plugins, but you can also create your own ones. This guide will show you how to develop both Javascript and Python plugins.
+
+```{warning}
+Pyscript plugins are currently under active development. The API is likely to go through breaking changes between releases.
+```
+
+You can add your custom plugins to the `<py-config>` tag on your page. For example:
+
+```html
+<py-config>
+    plugins = ["http://example.com/hello-world.py"]
+</py-config>
+```
+
+Currently, only single files with the extension `.py` and `.js` files can be used as plugins.
+
+## Python plugins
+
+Python plugins allow you to write plugins in pure Python. We first need to import `Plugin` from `pyscript` and create a new instance of it.
+
+```python
+from pyscript import Plugin
+
+plugin = Plugin("PyHelloWorld")
+```
+
+We can now create a new class containing our plugin code to add the text "Hello World" to the page.
+
+```python
+from pyscript import Plugin, js
+
+plugin = Plugin("PyHelloWorld")
+
+class PyHelloWorld:
+    def __init__(self, element):
+        self.element = element
+
+
+    def connect(self):
+        self.element.innerHTML = "<h1>Hello World!</h1>"
+```
+
+Let's now create our `index.html` page and add the plugin.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Python Plugin</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/unstable/pyscript.css" />
+        <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
+    </head>
+
+    <body>
+        <py-config>
+            plugins = ["./hello-world.py"]
+        </py-config>
+    </body>
+</html>
+```
+
+Now we need to start a live server to serve our page. You can use Python's `http.server` module for this.
+
+```bash
+python -m http.server
+```
+
+Now you can open your browser and go to `http://localhost:8000` to see the page. You might be surprised that the text "Hello World" is not on the page. This is because we need to do a few more things to make our plugin work.
+
+First, we must create a custom element that our plugin will use. We can use a decorator in our `PyHelloWorld` class.
+
+```python
+from pyscript import Plugin, js
+
+plugin = Plugin("PyHelloWorld")
+
+@plugin.register_custom_element("py-hello-world")
+class PyHelloWorld:
+    def __init__(self, element):
+        self.element = element
+
+    def connect(self):
+        self.element.innerHTML = "<div id='hello'>Hello World!</div>"
+```
+
+Now that we have registered our custom element, we can use the custom tag `<py-hello-world>` to add our plugin to the page.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Python Plugin</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/unstable/pyscript.css" />
+        <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
+    </head>
+
+    <body>
+        <py-config>
+            plugins = ["./hello-world.py"]
+        </py-config>
+
+        <py-hello-world></py-hello-world>
+    </body>
+</html>
+```
+
+Now, if you go to `http://localhost:8000` you should see the text "Hello World" on the page.
+
+Writing plugins in Python is an excellent way if you want to use PyScript's API's. However, if you want to write plugins in Javascript, you can do that too.
+
+## Javascript plugins
+
+Javascript plugins need to have a specific structure to be loaded by PyScript. The plugin export a default class with the following method, which may implement any, all, or none of the [Plugin lifecycle methods](https://github.com/pyscript/pyscript/blob/main/pyscriptjs/src/plugin.ts#L9-L65). These method will be called at the corresponding points in lifecycle of PyScript as it loads, configures itself and its Python interpreter, and executes `<py-script>` and `<py-repl>` tags.
+
+```{note}
+You need to specify the file extension `.js` when adding your custom plugin to the `<py-config>` tag.
+```
+
+### Creating a Hello World plugin
+
+Let's create a simple plugin that will add the text "Hello World" to the page. We will create a `hello-world.js` file and write the plugin class.
+
+```js
+export default class HelloWorldPlugin {
+ afterStartup(runtime) {
+ // Code goes here
+ }
+}
+```
+
+Now we need to add the code that will add the text to the page.
+
+```js
+export default class HelloWorldPlugin {
+    afterStartup(runtime) {
+        const elem = document.createElement("h1");
+        elem.innerText = "Hello World";
+        document.body.appendChild(elem);
+    }
+}
+```
+
+Finally, we need to add the plugin to our page's `<py-config>` tag.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Javascript Plugin</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/unstable/pyscript.css" />
+        <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
+    </head>
+
+    <body>
+        <py-config>
+            plugins = ["./hello-world.js"]
+        </py-config>
+    </body>
+</html>
+```
+
+Now we need to start a live server to serve our page. You can use Python's `http.server` module for this.
+
+```bash
+python -m http.server
+```
+
+Now you can open your browser and go to `http://localhost:8000` to see the page. You should see the text "Hello World" on the page.
+
+```{note}
+Because we are using a local file, you must start a live server. Otherwise, Pyscript will not be able to fetch the file.
+```
+
+### Expanding the Hello World plugin
+
+As you can see, we could build all our plugin logic inside the `afterStartup` method. You may also want to create a custom html element for your plugin. Let's see how we can do that.
+
+First, we need to create a custom html element. Let's start by creating our `PyHelloWorld` class that extends the `HTMLElement` class.
+
+
+```js
+class PyHelloWorld extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `<h1>Hello, world!</h1>`;
+        this.mount_name = this.id;
+    }
+}
+```
+
+We can now register our custom element in the `afterStartup` method of our `HelloWorldPlugin` class. We will also add the custom tag `py-hello-world` to the page.
+
+```js
+export default class HelloWorldPlugin {
+    afterStartup(runtime) {
+        // Create a custom element called <py-hello-world>
+        customElements.define("py-hello-world", PyHelloWorld);
+
+        // Add the custom element to the page so we can see it
+        const elem = document.createElement('py-hello-world');
+        document.body.append(elem);
+    }
+}
+```
+
+Now we can open our page and see the custom element on the page.
+
+By now, you should have a good idea for creating a custom plugin. Also, how powerful it can be to create custom elements that other users could use in their PyScript pages.

docs/guides/event-handlers.md

@@ -0,0 +1,179 @@
+# Event handlers in PyScript
+
+PyScript offer two ways to subscribe to Javascript event handlers:
+
+## Subscribe to event with `py-*` attributes
+
+The value of the attribute contains python code which will be executed when the event is fired. A very common pattern is to call a function which does further work, for example:
+
+```html
+<button id="noParam" py-click="say_hello_no_param()">
+ No Event - No Params py-click
+</button>
+<button id="withParam" py-click="say_hello_with_param('World')">
+ No Event - With Params py-click
+</button>
+```
+
+```python
+<py-script>
+    def say_hello_no_param():
+        print("Hello!")
+
+    def say_hello_with_param(name):
+        print("Hello " + name + "!")
+</py-script>
+```
+
+Note that py-\* attributes need a _function call_
+
+Supported py-\* attributes can be seen in the [PyScript API reference](<[../api-reference.md](https://github.com/pyscript/pyscript/blob/66b57bf812dcc472ed6ffee075ace5ced89bbc7c/pyscriptjs/src/components/pyscript.ts#L119-L260)>).
+
+## Subscribe to event with `addEventListener`
+
+You can also subscribe to an event using the `addEventListener` method of the DOM element. This is useful if you want to pass event object to the event handler.
+
+```html
+<button id="two">add_event_listener passes event</button>
+```
+
+```python
+<py-script>
+  from js import console, document
+  from pyodide.ffi.wrappers import add_event_listener
+
+  def hello_args(*args):
+    console.log(f"Hi! I got some args! {args}")
+
+  add_event_listener(document.getElementById("two"), "click", hello_args)
+</py-script>
+```
+
+or using the `addEventListener` method of the DOM element:
+
+```html
+<button id="three">add_event_listener passes event</button>
+```
+
+```python
+<py-script>
+  from js import console, document
+  from pyodide.ffi import create_proxy
+
+  def hello_args(*args):
+    console.log(f"Hi! I got some args! {args}")
+
+    document.getElementById("three").addEventListener("click", create_proxy(hello_args))
+</py-script>
+```
+
+or using the PyScript Element class:
+
+```html
+<button id="four">add_event_listener passes event</button>
+```
+
+```python
+<py-script>
+  from js import console
+  from pyodide.ffi import create_proxy
+
+  def hello_args(*args):
+    console.log(f"Hi! I got some args! {args}")
+
+  Element("four").element.addEventListener("click", create_proxy(hello_args))
+</py-script>
+```
+
+## JavaScript to PyScript and From PyScript to JavaScript
+
+If you're wondering about how to pass objects from JavaScript to PyScript and/or the other way around head over to the [Passing Objects](passing-objects.md) page.
+
+
+### Exporting all Global Python Objects
+
+We can use our new `createObject` function to "export" the entire Python global object dictionary as a JavaScript object:
+
+```python
+<py-script>
+    from js import createObject
+    from pyodide.ffi import create_proxy
+    createObject(create_proxy(globals()), "pyodideGlobals")
+</py-script>
+```
+
+This will make all Python global variables available in JavaScript with `pyodideGlobals.get('my_variable_name')`.
+
+(Since PyScript tags evaluate _after_ all JavaScript on the page, we can't just dump a `console.log(...)` into a `<script>` tag, since that tag will evaluate before any PyScript has a chance to. We need to delay accessing the Python variable in JavaScript until after the Python code has a chance to run. The following example uses a button with `id="do-math"` to achieve this, but any method would be valid.)
+
+```python
+<py-script>
+    # create some Python objects:
+    symbols = {'pi': 3.1415926, 'e': 2.7182818}
+
+    def rough_exponential(x):
+        return symbols['e']**x
+
+    class Circle():
+        def __init__(self, radius):
+            self.radius = radius
+
+        @property
+        def area:
+            return symbols['pi'] * self.radius**2
+</py-script>
+```
+
+```html
+<input type="button" value="Log Python Variables" id="do-mmath" />
+<script>
+ document.getElementById("do-math").addEventListener("click", () => {
+  const exp = pyodideGlobals.get("rough_exponential");
+  console.log("e squared is about ${exp(2)}");
+  const c = pyodideGlobals.get("Circle")(4);
+  console.log("The area of c is ${c.area}");
+ });
+</script>
+```
+
+### Exporting Individual Python Objects
+
+We can also export individual Python objects to the JavaScript global scope if we wish.
+
+(As above, the following example uses a button to delay the execution of the `<script>` until after the PyScript has run.)
+
+```python
+<py-script>
+    import js
+    from pyodide.ffi import create_proxy
+
+    # Create 3 python objects
+    language = "Python 3"
+    animals = ['dog', 'cat', 'bird']
+    multiply3 = lambda a, b, c: a * b * c
+
+    # js object can be named the same as Python objects...
+    js.createObject(language, "language")
+
+    # ...but don't have to be
+    js.createObject(create_proxy(animals), "animals_from_py")
+
+    # functions are objects too, in both Python and Javascript
+    js.createObject(create_proxy(multiply3), "multiply")
+</py-script>
+```
+
+```html
+<input type="button" value="Log Python Variables" id="log-python-variables" />
+<script>
+ document
+  .getElementById("log-python-variables")
+  .addEventListener("click", () => {
+   console.log(`Nice job using ${language}`);
+   for (const animal of animals_from_py) {
+    console.log(`Do you like ${animal}s? `);
+   }
+   console.log(`2 times 3 times 4 is ${multiply(2, 3, 4)}`);
+  });
+</script>
+```

docs/guides/http-requests.md

@@ -1,6 +1,6 @@
 # How to make HTTP requests using `PyScript`, in pure Python
 
-[Pyodide](https://pyodide.org), the runtime that underlies `PyScript`, does not have the `requests` module
+[Pyodide](https://pyodide.org), the interpreter that underlies `PyScript`, does not have the `requests` module
 (or other similar modules) available by default, which are traditionally used to make HTTP requests in Python.
 However, it is possible to make HTTP requests in Pyodide using the modern `JavaScript` `fetch` API
 ([docs](https://developer.mozilla.org/en-US/docs/Web/API/fetch)). This example shows how to make common HTTP request
@@ -35,7 +35,8 @@ for dealing with the response, such as `json()` or `status`. See the
 [FetchResponse documentation](https://pyodide.org/en/stable/usage/api/python-api/http.html#pyodide.http.FetchResponse)
 for more information.
 
-# Example
+## Example
+
 We will make async HTTP requests to [JSONPlaceholder](https://jsonplaceholder.typicode.com/)'s fake API using `pyfetch`.
 First we write a helper function in pure Python that makes a request and returns the response. This function
 makes it easier to make specific types of requests with the most common parameters.
@@ -70,6 +71,7 @@ async def request(url: str, method: str = "GET", body: Optional[str] = None,
     response = await pyfetch(url, **kwargs)
     return response
 ```
+
 This function is a wrapper for `pyfetch`, which is a wrapper for the `fetch` API. It is a coroutine function,
 so it must be awaited. It also has type hints, which are not required, but are useful for IDEs and other tools.
 The basic idea is that the `PyScript` will import and call this function, then await the response. Therefore,
@@ -160,7 +162,8 @@ concluding html code.
 The very first thing to notice is the `py-config` tag. This tag is used to import Python files into the `PyScript`.
 In this case, we are importing the `request.py` file, which contains the `request` function we wrote above.
 
-### `py-script` tag for making async HTTP requests.
+### `py-script` tag for making async HTTP requests
+
 Next, the `py-script` tag contains the actual Python code where we import `asyncio` and `json`,
 which are required or helpful for the `request` function.
 The `# GET`, `# POST`, `# PUT`, `# DELETE` blocks show examples of how to use the `request` function to make basic
@@ -169,6 +172,7 @@ HTTP requests. The `await` keyword is required not only for the `request` functi
 faster ones.
 
 ### HTTP Requests
+
 HTTP requests are a very common way to communicate with a server. They are used for everything from getting data from
 a database, to sending emails, to authorization, and more. Due to safety concerns, files loaded from the
 local file system are not accessible by `PyScript`. Therefore, the proper way to load data into `PyScript` is also
@@ -182,31 +186,38 @@ function or to `pyfetch`. See the
 HTTP requests are defined by standards-setting bodies in [RFC 1945](https://www.rfc-editor.org/info/rfc1945) and
 [RFC 9110](https://www.rfc-editor.org/info/rfc9110).
 
-# Conclusion
+## Conclusion
+
 This tutorial demonstrates how to make HTTP requests using `pyfetch` and the `FetchResponse` objects. Importing Python
 code/files into the `PyScript` using the `py-config` tag is also covered.
 
 Although a simple example, the principals here can be used to create complex web applications inside of `PyScript`,
 or load data into `PyScript` for use by an application, all served as a static HTML page, which is pretty amazing!
 
+## API Quick Reference
 
-# API Quick Reference
 ## pyodide.http.pyfetch
-### Usage
+
+### pyfetch Usage
+
 ```python
 await pyodide.http.pyfetch(url: str, **kwargs: Any) -> FetchResponse
 ```
+
 Use `pyfetch` to make HTTP requests in `PyScript`. This is a wrapper around the `fetch` API. Returns a `FetchResponse`.
 
 - [`pyfetch` Docs.](https://pyodide.org/en/stable/usage/api/python-api/http.html#pyodide.http.pyfetch)
 
 ## pyodide.http.FetchResponse
-### Usage
+
+### FetchResponse Usage
+
 ```python
 response: pyodide.http.FetchResponse = await <pyfetch call>
 status = response.status
 json = await response.json()
 ```
+
 Class for handling HTTP responses. This is a wrapper around the `JavaScript` fetch `Response`. Contains common (async)
 methods and properties for handling HTTP responses, such as `json()`, `url`, `status`, `headers`, etc.
 

docs/guides/index.md

@@ -17,4 +17,6 @@ caption: 'Contents:'
 passing-objects
 http-requests
 asyncio
+custom-plugins
+event-handlers
 ```

docs/guides/passing-objects.md

@@ -1,6 +1,6 @@
 # How to Pass Objects from PyScript to Javascript (and Vice Versa)
 
-[Pyodide](https://pyodide.org), the runtime that underlies PyScript, does a lot of work under the hood to translate objects between Python and JavaScript. This allows code in one language to access objects defined in the other.
+[Pyodide](https://pyodide.org), the interpreter that underlies PyScript, does a lot of work under the hood to translate objects between Python and JavaScript. This allows code in one language to access objects defined in the other.
 
 This guide discusses how to pass objects between JavaScript and Python within PyScript. For more details on how Pyodide handles translating and proxying objects between the two languages, see the [Pyodide Type Translations Page](https://pyodide.org/en/stable/usage/type-conversions.html).
 
@@ -36,7 +36,7 @@ We can use the syntax `from js import ...` to import JavaScript objects directly
 
 ### Using Pyodide's globals access
 
-The [PyScript JavaScript module](../reference/modules/pyscript.md)  exposes its underlying Pyodide runtime as `PyScript.runtime`, and maintains a reference to the [globals()](https://docs.python.org/3/library/functions.html#globals) dictionary of the Python namespace. Thus, any global variables in python are accessible in JavaScript at `PyScript.runtime.globals.get('my_variable_name')`
+The [PyScript JavaScript module](../reference/modules/pyscript.md)  exposes its underlying Pyodide interpreter as `PyScript.interpreter`, and maintains a reference to the [globals()](https://docs.python.org/3/library/functions.html#globals) dictionary of the Python namespace. Thus, any global variables in python are accessible in JavaScript at `PyScript.interpreter.globals.get('my_variable_name')`
 
 ```html
 <body>
@@ -45,7 +45,7 @@ The [PyScript JavaScript module](../reference/modules/pyscript.md)  exposes its
     <button onclick="showX()">Click Me to Get 'x' from Python</button>
     <script>
         function showX(){
-            console.log(`In Python right now, x = ${pyscript.runtime.globals.get('x')}`)
+            console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('x')}`)
         }
     </script>
 </body>
@@ -59,7 +59,7 @@ Since [everything is an object](https://docs.python.org/3/reference/datamodel.ht
     <button onclick="sortInPython(['Candy', 'Donut', 'Apple', 'Banana'])">Sort In Python And Log</button>
     <script>
         function sortInPython(data){
-            js_sorted = pyscript.runtime.globals.get('sorted') //grab python's 'sorted' function
+            js_sorted = pyscript.interpreter.globals.get('sorted') //grab python's 'sorted' function
             const sorted_data = js_sorted(data) //apply the function to the 'data' argument
             for (const item of sorted_data){
                 console.log(item)
@@ -71,7 +71,7 @@ Since [everything is an object](https://docs.python.org/3/reference/datamodel.ht
 
 ### Using JavaScript's eval()
 
-There may be some situations where it isn't possible or ideal to use `PyScript.runtime.globals.get()` to retrieve a variable from the Pyodide global dictionary. For example, some JavaScript frameworks may take a function/Callable as an html attribute in a context where code execution isn't allowed (i.e. `get()` fails). In these cases, you can create JavaScript proxies of Python objects more or less "manually" using [JavaScript's eval() function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval), which executes a string as code much like [Python's eval()](https://docs.python.org/3/library/functions.html#eval).
+There may be some situations where it isn't possible or ideal to use `PyScript.interpreter.globals.get()` to retrieve a variable from the Pyodide global dictionary. For example, some JavaScript frameworks may take a function/Callable as an html attribute in a context where code execution isn't allowed (i.e. `get()` fails). In these cases, you can create JavaScript proxies of Python objects more or less "manually" using [JavaScript's eval() function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval), which executes a string as code much like [Python's eval()](https://docs.python.org/3/library/functions.html#eval).
 
 First, we create a JS function `createObject` which takes an object and a string, then uses `eval()` to create a variable named after the string and bind it to that object. By calling this function from PyScript (where we have access to the Pyodide global namespace), we can bind JavaScript variables to Python objects without having direct access to that global namespace.
 

docs/index.md

@@ -2,11 +2,24 @@
 
 Welcome to the PyScript documentation!
 
-PyScript provides a way for you to run Python code directly in your browser, giving
-anyone the ability to program without infrastructure barriers. Add an interactive
-Python REPL directly to your website, share an interactive dashboard with a colleague
-as an HTML file, or create a client-side Python-powered web application. This documentation
-will show you how.
+PyScript is a programming platform that allows you to create web applications that run in the browser, using Python.
+That creates some really interesting benefits:
+
+* Using Python directly in the browser allows to create applications with an easier and more user friendly language
+* Scalability: since applications run directly in the browser and not on a server somewhere, servers don't need to
+scale as much if the number of users of an application grows exponentially
+* Shareability: applications can be shared as easily as sharing an URL. Can't get easier than that ;)
+* Multi-Platform support: since the browser is the underlying system where PyScript applications run, applications
+can run anywhere a modern browser is installed, on windows, linux, mac, mobile, or even a Tesla! :)
+* Security: since PyScript runs core in the Browser (via Web Assembly) in a sandbox fashion and the browsers offers
+a very strict level of security, code never have access files or part of the underlying system without user permission,
+making it a great option in terms of security.
+* User Friendly APIs: web APIs are very vast and, sometimes, complicated. PyScript offers smaller and more user friendly
+APIs for the most common use cases while also providing an option to access the full Web APIs as well.
+
+We hope you'll enjoy the project and create so many incredible things with it! To learn more, consult our documentation.
+
+
 
 ::::{grid} 2
 :gutter: 3
@@ -54,4 +67,5 @@ tutorials/index
 guides/index
 concepts/index
 reference/index
+changelog
 ```

docs/reference/API/attr_to_event.md

@@ -0,0 +1,85 @@
+# List of PyScript Attributes to Events:
+
+PyScript provides a convenient syntax for mapping JavaScript events to PyScript events, making it easy to connect events to HTML tags.
+
+For example, you can use the following code to connect the click event to a button:
+
+```
+<button id="py-click" py-click="foo()">Click me</button>
+```
+
+Here is a list of all the available event mappings:
+
+| PyScript Event Name | DOM Event Name |
+|-------------------|----------------|
+| py-afterprint     | afterprint     |
+| py-beforeprint    | beforeprint    |
+| py-beforeunload   | beforeunload   |
+| py-error          | error          |
+| py-hashchange     | hashchange     |
+| py-load           | load           |
+| py-message        | message        |
+| py-offline        | offline        |
+| py-online         | online         |
+| py-pagehide       | pagehide       |
+| py-pageshow       | pageshow       |
+| py-popstate       | popstate       |
+| py-resize         | resize         |
+| py-storage        | storage        |
+| py-unload         | unload         |
+| py-blur           | blur           |
+| py-change         | change         |
+| py-contextmenu    | contextmenu    |
+| py-focus          | focus          |
+| py-input          | input          |
+| py-invalid        | invalid        |
+| py-reset          | reset          |
+| py-search         | search         |
+| py-select         | select         |
+| py-submit         | submit         |
+| py-keydown        | keydown        |
+| py-keypress       | keypress       |
+| py-keyup          | keyup          |
+| py-click          | click          |
+| py-dblclick       | dblclick       |
+| py-mousedown      | mousedown      |
+| py-mousemove      | mousemove      |
+| py-mouseout       | mouseout       |
+| py-mouseover      | mouseover      |
+| py-mouseup        | mouseup        |
+| py-mousewheel     | mousewheel     |
+| py-wheel          | wheel          |
+| py-drag           | drag           |
+| py-dragend        | dragend        |
+| py-dragenter      | dragenter      |
+| py-dragleave      | dragleave      |
+| py-dragover       | dragover       |
+| py-dragstart      | dragstart      |
+| py-drop           | drop           |
+| py-scroll         | scroll         |
+| py-copy           | copy           |
+| py-cut            | cut            |
+| py-paste          | paste          |
+| py-abort          | abort          |
+| py-canplay        | canplay        |
+| py-canplaythrough | canplaythrough |
+| py-cuechange      | cuechange      |
+| py-durationchange | durationchange |
+| py-emptied        | emptied        |
+| py-ended          | ended          |
+| py-loadeddata     | loadeddata     |
+| py-loadedmetadata | loadedmetadata |
+| py-loadstart      | loadstart      |
+| py-pause          | pause          |
+| py-play           | play           |
+| py-playing        | playing        |
+| py-progress       | progress       |
+| py-ratechange     | ratechange     |
+| py-seeked         | seeked         |
+| py-seeking        | seeking        |
+| py-stalled        | stalled        |
+| py-suspend        | suspend        |
+| py-timeupdate     | timeupdate     |
+| py-volumechange   | volumechange   |
+| py-waiting        | waiting        |
+| py-toggle         | toggle         |

docs/reference/API/display.md

@@ -2,7 +2,8 @@
 
 ## Parameters
 
-`*values` - the objects to be displayed. String objects are output as-written. For non-string objects, the default content to display is the the object's `repr()`. Objects may implement the following methods to indicate that they should be displayed as a different MIME type. MIME types with a * indicate that the content will be wrapped in the appropriate html tags and attributes before output:
+`*values` - the objects to be displayed. String objects are output as-written. For non-string objects, the default content to display is the the object's {py:func}`repr`. Objects may implement the following methods to indicate that they should be displayed as a different MIME type. MIME types with a * indicate that the content will be wrapped in the appropriate html tags and attributes before output:
+
 
 | Method              | Inferred MIME type     |
 |---------------------|------------------------|
@@ -34,7 +35,7 @@ Display will throw an exception if the target is not clear. E.g. the following c
         # from event handlers
         display('hello')
 </py-script>
-<button id="my-button" py-onClick="display_hello()">Click me</button>
+<button id="my-button" py-click="display_hello()">Click me</button>
 ```
 
 Because it's considered unclear if the `hello` string should be displayed underneath the `<py-script>` tag or the `<button>` tag.
@@ -44,12 +45,11 @@ To write compliant code, make sure to specify the target using the `target` para
 ```html
 <py-script>
     def display_hello():
-        # this fails because we don't have any implicit target
-        # from event handlers
+        # this works because we give an explicit target
         display('hello', target="helloDiv")
 </py-script>
 <div id="helloDiv"></div>
-<button id="my-button" py-onClick="display_hello()">Click me</button>
+<button id="my-button" py-click="display_hello()">Click me</button>
 ```
 
 #### Using matplotlib with display

docs/reference/API/when.md

@@ -0,0 +1,51 @@
+# `@when`
+
+`@when(event_type:str = None, selector:str = None)`
+
+The `@when` decorator attaches the decorated function or Callable as an event handler for selected objects on the page. That is, when the named event is emitted by the selected DOM elements, the decorated Python function will be called.
+
+If the decorated function takes a single (non-self) argument, it will be passed the [Event object](https://developer.mozilla.org/en-US/docs/Web/API/Event) corresponding to the triggered event. If the function takes no (non-self) argument, it will be called with no arguments.
+
+## Parameters
+
+`event_type` - A string representing the event type to match against. This can be any of the [https://developer.mozilla.org/en-US/docs/Web/Events#event_listing](https://developer.mozilla.org/en-US/docs/Web/Events) that HTML elements may emit, as appropriate to their element type.
+
+`selector` = A string containing one or more [CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors). The selected DOM elements will have the decorated function attacehed as an event handler.
+
+## Examples:
+
+The following example prints "Hello, world!" whenever the button is clicked. It demonstrates using the `@when` decorator on a Callable which takes no arguments:
+
+```html
+<button id="my_btn">Click Me to Say Hi</button>
+<py-script>
+    from pyscript import when
+    @when("click", selector="#my_btn")
+    def say_hello():
+        print(f"Hello, world!")
+</py-script>
+```
+
+The following example includes three buttons - when any of the buttons is clicked, that button turns green, and the remaining two buttons turn red. This demonstrates using the `@when` decorator on a Callable which takes one argument, which is then passed the Event object from the associated event. When combined with the ability to look at other elements in on the page, this is quite a powerful feature.
+
+```html
+<div id="container">
+    <button>First</button>
+    <button>Second</button>
+    <button>Third</button>
+</div>
+<py-script>
+    from pyscript import when
+    import js
+
+    @when("click", selector="#container button")
+    def highlight(evt):
+        #Set the clicked button's background to green
+        evt.target.style.backgroundColor = 'green'
+
+        #Set the background of all buttons to red
+        other_buttons = (button for button in js.document.querySelectorAll('button') if button != evt.target)
+        for button in other_buttons:
+            button.style.backgroundColor = 'red'
+</py-script>
+```

docs/reference/elements/py-config.md

@@ -9,8 +9,8 @@ The `<py-config>` element should be placed within the `<body>` element.
 ## Attributes
 
 | attribute | type   | default | description                                                                                              |
-|-----------|--------|---------|---------------------------------------------------------------------------------------------------------|
-| **type**  | string | "toml"  | Syntax type of the `<py-config>`. Value can be `json` or `toml`. Default: "toml" if type is unspecifed. |
+|-----------|--------|---------|----------------------------------------------------------------------------------------------------------|
+| **type**  | string | "toml"  | Syntax type of the `<py-config>`. Value can be `json` or `toml`. Default: "toml" if type is unspecified. |
 | **src**   | url    |         | Source url to an external configuration file.                                                            |
 
 ## Examples
@@ -20,7 +20,7 @@ The `<py-config>` element should be placed within the `<body>` element.
 - `<py-config>` using TOML (default)
 
 ```{note}
-Reminder: when using TOML, any Arrays of Tables defined with double-brackets (like `[[runtimes]]` and `[[fetch]]` must come after individual keys (like `plugins = ...` and `packages=...`)
+Reminder: when using TOML, any Arrays of Tables defined with double-brackets (like `[[interpreters]]` and `[[fetch]]` must come after individual keys (like `plugins = ...` and `packages=...`)
 ```
 
 ```html
@@ -28,7 +28,7 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
   [splashscreen]
   autoclose = true
 
-  [[runtimes]]
+  [[interpreters]]
   src = "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/pyodide.js"
   name = "pyodide-0.21.2"
   lang = "python"
@@ -43,7 +43,7 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
     "splashscreen": {
       "autoclose": true
     },
-    "runtimes": [{
+    "interpreters": [{
       "src": "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/pyodide.js",
       "name": "pyodide-0.21.2",
       "lang": "python"
@@ -65,7 +65,7 @@ where `custom.toml` contains
 [splashscreen]
 autoclose = true
 
-[[runtimes]]
+[[interpreters]]
 src = "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/pyodide.js"
 name = "pyodide-0.21.2"
 lang = "python"
@@ -83,7 +83,7 @@ where `custom.json` contains
   "splashscreen": {
     "autoclose": true,
   },
-  "runtimes": [{
+  "interpreters": [{
     "src": "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/pyodide.js",
     "name": "pyodide-0.21.2",
     "lang": "python"
@@ -127,7 +127,7 @@ The keys supplied through `inline` override the values present in config supplie
 One can also declare dependencies so as to get access to many 3rd party OSS packages that are supported by PyScript.
 You can also link to `.whl` files directly on disk like in our [toga example](https://github.com/pyscript/pyscript/blob/main/examples/toga/freedom.html).
 
-Package dependencies in the `<py-config>` can be declared by using the direct link to the package URL (whl or any other format supported by the chosen runtime) or by just providing the package name [and version]. If only the name [and version] are provided, packages will be installed directly from what's provided by your runtime or from PyPI.
+Package dependencies in the `<py-config>` can be declared by using the direct link to the package URL (whl or any other format supported by the chosen interpreter) or by just providing the package name [and version]. If only the name [and version] are provided, packages will be installed directly from what's provided by your interpreter or from PyPI.
 
 NOTICE that only pure python packages from PyPI will work and packages with C dependencies will not. These need to be built specifically for WASM (please, consult the Pyodide project for more information about what's supported and on how to build packages with C dependencies)
 
@@ -246,7 +246,8 @@ The following optional values are supported by `<py-config>`:
 | `packages` | List of Packages | Dependencies on 3rd party OSS packages are specified here. The default value is an empty list. |
 | `fetch` | List of Stuff to fetch | Local Python modules OR resources from the internet are to be specified here using a Fetch Configuration, described below. The default value is an empty list. |
 | `plugins` | List of Plugins | List of Plugins are to be specified here. The default value is an empty list. |
-| `runtimes` | List of Runtimes | List of runtime configurations, described below. The default value contains a single Pyodide based runtime. |
+| `interpreters` | List of Interpreters| List of Interpreter configurations, described below. The default value contains a single Pyodide based interpreter. **Note:** Currently, only a single interpreter is supported. |
+| `runtimes`  {bdg-warning-line}`Deprecated`  | List of Runtimes | This value is deprecated, please use `interpreters`. List of runtime configurations, described below. The default value contains a single Pyodide based interpreter. |
 
 ### <a name="fetch">Fetch</a>
 
@@ -440,28 +441,33 @@ content/
 </py-script>
 ```
 
-### Runtime
+### Interpreter
+
+An interpreter configuration consists of the following:
 
-A runtime configuration consists of the following:
 | Value  | Type              | Description |
 |--------|-------------------|-------------|
-| `src`  | string (Required) | URL to the runtime source. |
-| `name` | string            | Name of the runtime. This field can be any string and is to be used by the application author for their own customization purposes |
-| `lang` | string            | Programming language supported by the runtime. This field can be used by the application author to provide clarification. It currently has no implications on how PyScript behaves. |
+| `src`  | string (Required) | URL to the interpreter source. |
+| `name` | string            | Name of the interpreter. This field can be any string and is to be used by the application author for their own customization purposes |
+| `lang` | string            | Programming language supported by the interpreter. This field can be used by the application author to provide clarification. It currently has no implications on how PyScript behaves. |
 
 #### Example
 
-- The default runtime is `pyodide`, another version of which can be specified as following
+- The default interpreter is `pyodide`, another version of which can be specified as following
 
 ```html
 <py-config>
-  [[runtimes]]
+  [[interpreters]]
   src = "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
   name = "pyodide-0.20.0"
   lang = "python"
 </py-config>
 ```
 
+```{note}
+Currently, PyScript supports a single interpreter, this may change in the future.
+```
+
 ## Supplying extra information (or metadata)
 
 Besides the above schema, a user can also supply any extra keys and values that are relevant as metadata information or perhaps are being used within the application.

docs/reference/elements/py-repl.md

@@ -5,26 +5,58 @@ The `<py-repl>` element provides a REPL(Read Eval Print Loop) to evaluate multi-
 ## Attributes
 
 | attribute         | type    | default | description                          |
-|-------------------|---------|---------|---------------------------------------|
+|-------------------|---------|---------|--------------------------------------|
 | **auto-generate** | boolean |         | Auto-generates REPL after evaluation |
-| **output**        | string  |         | The element to write output into      |
+| **output-mode**   | string  | ""      | Determines whether the output element is cleared prior to writing output |
+| **output**        | string  |         | The id of the element to write `stdout` and `stderr` to     |
+| **stderr**        | string  |         | The id of the element to write `stderr` to |
+| **src**           | string  |         | Resource to be preloaded into the REPL |
 
-### Examples
 
-#### `<py-repl>` element set to auto-generate
+### `auto-generate`
+If a \<py-repl\> tag has the `auto-generate` attribute, upon execution, another \<pr-repl\> tag will be created and added to the DOM as a sibling of the current tag.
+
+### `output-mode`
+By default, the element which displays the output from a REPL is cleared (`innerHTML` set to "") prior to each new execution of the REPL. If `output-mode` == "append", that element is not cleared, and the output is appended instead.
+
+### `output`
+The ID of an element in the DOM that `stdout` (e.g. `print()`), `stderr`, and the results of executing the repl are written to. Defaults to an automatically-generated \<div\> as the next sibling of the REPL itself.
+
+### `stderr`
+The ID of an element in the DOM that `stderr` will be written to. Defaults to None, though writes to `stderr` will still appear in the location specified by `output`.
+
+### `src`
+If a \<py-repl\> tag has the `src` attribute, during page initialization, resource in the `src` will be preloaded into the REPL. Please note that this will not run in advance. If there is content in the \<py-repl\> tag, it will be cleared and replaced with preloaded resource.
+
+## Examples
+
+### `<py-repl>` element set to auto-generate
 
 ```html
 <py-repl auto-generate="true"> </py-repl>
 ```
 
-#### `<py-repl>` element with output
+### `<py-repl>` element with output
+
+The following will write "Hello! World!" to the div with id `replOutput`.
 
 ```html
 <div id="replOutput"></div>
 <py-repl output="replOutput">
-    hello = "Hello world!"
+    print("Hello!")
+    hello = "World!"
     hello
 </py-repl>
 ```
 
-Note that if we `print` any element in the repl, the output will be printed in the [`py-terminal`](../plugins/py-terminal.md) if is enabled.
+Note that if we `print` from the REPL (or otherwise write to `sys.stdout`), the output will be printed in the [`py-terminal`](../plugins/py-terminal.md) if is enabled.
+
+### `<py-repl>` element with src
+Preload resource from src into the REPL
+```html
+<py-repl id="py-repl" output="replOutput" src="./src/py/py_code.py">
+    If a py-repl tag has the src attribute,
+    the content here will be cleared and replaced.
+</py-repl>
+<div id="replOutput"></div>
+```

docs/reference/elements/py-script.md

@@ -1,12 +1,27 @@
 # <py-script>
 
-The `<py-script>` element lets you execute multi-line Python scripts both inline and via a src attribute.
+The `<py-script>` element, also available as `<script type="py-script">`, lets you execute multi-line Python scripts both inline and via a src attribute.
 
 ## Attributes
 
 | attribute | type   | default | description                  |
-|-----------|------|---------|------------------------------|
-| **src**   | url  |         | Url of a python source file. |
+|-----------|--------|---------|------------------------------|
+| **src**   | url    |         | You don't need to add long python code in py-script, you can provide url of the python source file in the py-script tag with the `src` attribute. When a Python file is referred with the `src` attribute it is executed, and then added to the namespace where it was referred. |
+| **output**| string |         | The id of a DOM element to route `sys.stdout` and `stderr` to, in addition to sending it to the `<py-terminal>`|
+| **stderr**| string |         | The id of a DOM element to route just `sys.stderr` to, in addition to sending it to the `<py-terminal>`|
+
+### output
+
+If the `output` attribute is provided, any output to [sys.stdout](https://docs.python.org/3/library/sys.html#sys.stdout) or [sys.stderr](https://docs.python.org/3/library/sys.html#sys.stderr) is written to the DOM element with the ID matching the attribute. If no DOM element is found with a matching ID, a warning is shown. The msg is output to the `innerHTML` of the HTML Element, with newlines (`\n'`) converted to breaks (`<br/>`).
+
+This output is in addition to the output being written to the developer console and the `<py-terminal>` if it is being used.
+
+### stderr
+
+If the `stderr` attribute is provided, any output to [sys.stderr](https://docs.python.org/3/library/sys.html#sys.stderr) is written to the DOM element with the ID matching the attribute. If no DOM element is found with a matching ID, a warning is shown. The msg is output to the `innerHTML` of the HTML Element, with newlines (`\n'`) converted to breaks (`<br/>`).
+
+This output is in addition to the output being written to the developer console and the `<py-terminal>` if it is being used.
+
 
 ## Examples
 

docs/reference/exceptions.md

@@ -9,6 +9,8 @@ This reference guide contains the error codes you might find and a description o
 |------------|--------------------------------|--------------------|
 | PY1000     | Invalid configuration supplied | Confirm that your `py-config` tag is using a valid `TOML` or `JSON` syntax and is using the correct configuration type. |
 | PY1001     | Unable to install package(s)   | Confirm that the package contains a pure Python 3 wheel or the name of the package is correct. |
+| PY2000     | Invalid plugin file extension  | Only `.js` and `.py` files can be used when loading user plugins. Please confirm your path contains the file extension. |
+| PY2001     | Plugin doesn't contain a default export | Please add `export default` to the main plugin class. |
 | PY9000     | Top level await is deprecated  | Create a coroutine with your code and schedule it with `asyncio.ensure_future` or similar |
 
 
@@ -37,3 +39,14 @@ Pyscript cannot install the package(s) you specified in your `py-config` tag. Th
 - An error occurred while trying to install the package
 
 An error banner should appear on your page with the error code and a description of the error or a traceback. You can also check the developer console for more information.
+
+## PY2001
+
+Javascript plugins must export a default class. This is required for PyScript to be able to load the plugin. Please add `export default` to the main plugin class. For example:
+
+```js
+export default class HelloWorldPlugin {
+     afterStartup(runtime) {
+        console.log("Hello World from the plugin!");
+     }
+```

docs/reference/faq.md

@@ -155,6 +155,6 @@ Requests and Black do not work out of the box because they weren’t meant for t
 
 For Black, it’s a design choice that can be patched. This is currently being addressed by the team at Pyodide.
 
-Requests do not work because of the sockets issue (sockets and websockets are two different things) and requests are blocking—which you don’t want in the browser. It’ll require putting the runtime on a webworker and utilizing an assistant, but on the main thread it’s unlikely that it’ll work.
+Requests do not work because of the sockets issue (sockets and websockets are two different things) and requests are blocking—which you don’t want in the browser. It’ll require putting the interpreter on a webworker and utilizing an assistant, but on the main thread it’s unlikely that it’ll work.
 
 There are options as a path forward. For example, Requests can be leveraged using javascript libraries, or building a python async version of Requests API or a python wrapper for fetch (pyfetch), etc. The websockets library has a client side that could be made to work—given that it has all asynchronous APIs, there’s nothing fundamentally difficult about getting it to work.

docs/reference/modules/pyscript.md

@@ -1,6 +1,6 @@
 # pyscript
 
-The code underlying PyScript is a TypeScript/JavaScript module, which is loaded and executed by the browser. This is what loads when you include, for example, `<script defer src="https://pyscript.net/latest/pyscript.js">` in your HTML.
+The code underlying PyScript is a JavaScript module, which is loaded and executed by the browser. This is what loads when you include, for example, `<script defer src="https://pyscript.net/latest/pyscript.js">` in your HTML.
 
 The module is exported to the browser as `pyscript`. The exports from this module are:
 
@@ -15,35 +15,35 @@ Once `pyscript.js` has loaded, the version of PyScript that is currently running
 Object { year: 2022, month: 11, patch: 1, releaselevel: "dev" }
 ```
 
-## pyscript.runtime
+## pyscript.interpreter
 
-The RunTime object which is responsible for executing Python code in the Browser. Currently, all runtimes are assumed to be Pyodide runtimes, but there is flexibility to expand this to other web-based Python runtimes in future versions.
+The Interpreter object which is responsible for executing Python code in the Browser. Currently, all interpreters are assumed to be Pyodide interpreters, but there is flexibility to expand this to other web-based Python interpreters in future versions.
 
-The RunTime object has the following attributes
+The Interpreter object has the following attributes
 
 | attribute           | type                  | description                                                                     |
-|---------------------|---------------------|-----------------------------------------------------------------------------|
-| **src**             | string              | The URL from which the current runtime was fetched                          |
-| **interpreter**     | RuntimeInterpreter  | A reference to the runtime object itself                                    |
-| **globals**         | any                 | The globals dictionary of the runtime, if applicable/accessible             |
-| **name (optional)** | string              | A user-designated name for the runtime                                      |
-| **lang (optional)** | string              | A user-designation for the language the runtime runs ('Python', 'C++', etc) |
+|---------------------|-----------------------|---------------------------------------------------------------------------------|
+| **src**             | string                | The URL from which the current interpreter was fetched                          |
+| **interface**       | InterpreterInterface  | A reference to the interpreter object itself                                    |
+| **globals**         | any                   | The globals dictionary of the interpreter, if applicable/accessible             |
+| **name (optional)** | string                | A user-designated name for the interpreter                                      |
+| **lang (optional)** | string                | A user-designation for the language the interpreter runs ('Python', 'C++', etc) |
 
-### pyscript.runtime.src
+### pyscript.interpreter.src
 
-The URL from which the current runtime was fetched.
+The URL from which the current interpreter was fetched.
 
-### pyscript.runtime.interpreter
+### pyscript.interpreter.interface
 
-A reference to the Runtime wrapper that PyScript uses to execute code. object itself. This allows other frameworks, modules etc to interact with the same [(Pyodide) runtime instance](https://pyodide.org/en/stable/usage/api/js-api.html) that PyScript uses.
+A reference to the Interpreter wrapper that PyScript uses to execute code. object itself. This allows other frameworks, modules etc to interact with the same [(Pyodide) interpreter instance](https://pyodide.org/en/stable/usage/api/js-api.html) that PyScript uses.
 
-For example, assuming we've loaded Pyodide, we can access the methods of the Pyodide runtime as follows:
+For example, assuming we've loaded Pyodide, we can access the methods of the Pyodide interpreter as follows:
 
 ```html
 <button onclick="logFromPython()">Click Me to Run Some Python</button>
 <script>
     function logFromPython(){
-        pyscript.runtime.interpreter.runPython(`
+        pyscript.interpreter.interface.runPython(`
             animal = "Python"
             sound = "sss"
             console.warn(f"{animal}s go " + sound * 5)
@@ -52,9 +52,9 @@ For example, assuming we've loaded Pyodide, we can access the methods of the Pyo
 </script>
 ```
 
-### pyscript.runtime.globals
+### pyscript.interpreter.globals
 
-A proxy for the runtime's `globals()` dictionary. For example:
+A proxy for the interpreter's `globals()` dictionary. For example:
 
 ```html
 <body>
@@ -63,15 +63,15 @@ A proxy for the runtime's `globals()` dictionary. For example:
     <button onclick="showX()">Click Me to Get 'x' from Python</button>
     <script>
         function showX(){
-            console.log(`In Python right now, x = ${pyscript.runtime.globals.get('x')}`)
+            console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('x')}`)
         }
     </script>
 </body>
 ```
-### pyscript.runtime.name
+### pyscript.interpreter.name
 
-A user-supplied string for the runtime given at its creation. For user reference only - does not affect the operation of the runtime or PyScript.
+A user-supplied string for the interpreter given at its creation. For user reference only - does not affect the operation of the interpreter or PyScript.
 
-### PyScript.runtime.lang
+### PyScript.interpreter.lang
 
-A user-supplied string for the language the runtime uses given at its creation. For user reference only - does not affect the operation of the runtime or PyScript.
+A user-supplied string for the language the interpreter uses given at its creation. For user reference only - does not affect the operation of the interpreter or PyScript.

docs/reference/plugins/py-splashscreen.md

@@ -0,0 +1,65 @@
+
+# <py-splashscreen>
+
+This is one of the core plugins in PyScript, which is active by default. The splashscreen is the first thing you see when you open a page with Pyscript while it is loading itself and all the necessary resources.
+
+## Configuration
+
+You can control how `<py-splashscreen>` behaves by setting the value of the  `splashscreen` configuration in your `<py-config>`.
+
+
+| parameter   | default   | description |
+|-------------|-----------|-------------|
+| `autoclose` | `true`    | Whether to close the splashscreen automatically when the page is ready or not |
+| `enabled`   | `true`    | Whether to show the splashscreen or not |
+
+### Examples
+
+#### Disabling the splashscreen
+
+If you don't want the splashscreen to show and log any loading messages, you can disable it by setting the splashscreen option `enabled` to `false`.
+
+```html
+<py-config>
+    [splashscreen]
+        enabled = false
+</py-config>
+```
+
+#### Disabling autoclose
+
+If you want to keep the splashscreen open even after the page is ready, you can disable autoclose by setting `autoclose` to `false`.
+
+```html
+<py-config>
+    [splashscreen]
+        autoclose = false
+</py-config>
+```
+
+## Adding custom messages
+
+You can add custom messages to the splashscreen. This is useful if you want to show the user that something is happening in the background for your PyScript app.
+
+There are two ways to add your custom messages to the splashscreen, either by dispatching a new custom event, `py-status-message` to the document:
+
+
+```js
+document.dispatchEvent(new CustomEvent("py-status-message", {detail: "Hello, world!"}))
+```
+
+Or by using the `log` method of the `py-splashscreen` tag directly:
+
+```js
+const splashscreen = document.querySelector("py-splashscreen")
+splashscreen.log("Hello, world!")
+```
+
+If you wish, you can also send messages directly to the splashscreen from your python code:
+
+```python
+from js import document
+
+splashscreen = document.querySelector("py-splashscreen")
+splashscreen.log("Hello, world!")
+```

docs/reference/plugins/py-terminal.md

@@ -4,7 +4,9 @@ This is one of the core plugins in PyScript, which is active by default. With it
 
 ## Configuration
 
-You can control how `<py-terminal>` behaves by setting the value of the  `terminal` configuration in your `<py-config>`.
+You can control how `<py-terminal>` behaves by setting the values of the `terminal`, `docked`, and `xterm` fields in your configuration in your `<py-config>`.
+
+For the **terminal** field, these are the values:
 
 | value | description |
 |-------|-------------|
@@ -12,11 +14,50 @@ You can control how `<py-terminal>` behaves by setting the value of the  `termin
 | `true` | Automatically add a `<py-terminal>` to the page |
 | `"auto"` | This is the default. Automatically add a `<py-terminal auto>`, to the page. The terminal is initially hidden and automatically shown as soon as something writes to `stdout` and/or `stderr` |
 
+For the **docked** field, these are the values:
+
+| value | description |
+|-------|-------------|
+| `false` | Don't dock `<py-terminal>` to the page |
+| `true` | Automatically dock a `<py-terminal>` to the page |
+| `"docked"` | This is the default. Automatically add a `<py-terminal docked>`, to the page. The terminal, once visible, is automatically shown at the bottom of the page, covering the width of such page |
+
+Please note that **docked** mode is currently used as default only when `terminal="auto"`, or *terminal* default, is used.
+
+In all other cases it's up to the user decide if a terminal should be docked or not.
+
+For the **xterm** field, these are the values:
+
+| value | description |
+|-------|-------------|
+| `false` | This is the default. The `<py-terminal>` is a simple `<pre>` tag with some CSS styling. |
+| `true` or `xterm` | The [xtermjs](http://xtermjs.org/) library is loaded and its Terminal object is used as the `<py-terminal>`. It's visibility and position are determined by the  `docked` and `auto` keys in the same way as the default `<py-terminal>` |
+
+The xterm.js [Terminal object](http://xtermjs.org/docs/api/terminal/classes/terminal/) can be accessed directly if you want to adjust its properties, add [custom parser hooks](http://xtermjs.org/docs/guides/hooks/), introduce [xterm.js addons](http://xtermjs.org/docs/guides/using-addons/), etc. Access is best achieved by awaiting the `xtermReady` attribute of the `<py-terminal>` HTML element itself:
+
+```python
+import js
+import asyncio
+
+async def adjust_term_size(columns, rows):
+    xterm = await js.document.querySelector('py-terminal').xtermReady
+    xterm.resize(columns, rows)
+
+asyncio.ensure_future(adjust_term_size(40,10))
+```
+
+Some terminal-formatting packages read from specific environment variables to determine whether they should emit formatted output; PyScript does not set these variables explicitly - you may need to set them yourself, or force your terminal-formatting package into a state where it outputs correctly formatted output.
+
+A couple of specific examples:
+ - the [rich](https://github.com/Textualize/rich) will not, by default, output colorful text, but passing `256` or `truecolor` as an argument as the `color_system` parameter to the [Console constructor](https://rich.readthedocs.io/en/stable/reference/console.html#rich.console.Console) will force it to do so. (As of rich v13)
+ - [termcolor](https://github.com/termcolor/termcolor) will not, by default, output colorful text, but setting `os.environ["FORCE_COLOR"] = "True"` or by passing `force_color=True` to the `colored()` function will force it to do so. (As of termcolor v2.3)
+
 ### Examples
 
 ```html
 <py-config>
     terminal = true
+    docked = false
 </py-config>
 
 <py-script>

docs/tutorials/getting-started.md

@@ -1,50 +1,93 @@
 # Getting started with PyScript
 
-This page will guide you through getting started with PyScript.
+To start developing a PyScript, like with most applications development, you need a **development environment** where you
+write your code, a way to install the programming libraries and dependencies your code needs, and way to build and distribute
+your application.
+
+Luckily, PyScript makes many of these steps much easier.
 
 ## Development setup
 
-PyScript does not require any development environment other
-then a web browser (we recommend using [Chrome](https://www.google.com/chrome/)) and a text editor, even though using your [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) of choice might be convenient.
+PyScript does not require any specific development environment other
+than a web browser (we recommend using [Chrome](https://www.google.com/chrome/)) and a text editor, even though using your [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) of choice might be convenient.
 
 If you're using [VSCode](https://code.visualstudio.com/), the
 [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
 can be used to reload the page as you edit the HTML file.
 
+**NOTE:** The easier way to get a development setup for PyScript is to use [pyscript.com](pyscript.com). It is a free service that allows
+users to create new projects from pre-created templates that already have all the project structure created and allows users
+to edit their apps, preview it and deploy with just a link, all in the same place.
+
 ## Installation
 
-There is no installation required. In this document, we'll use
-the PyScript assets served on [https://pyscript.net](https://pyscript.net).
+There is no PyScript specific installation required in your system to start using PyScript in your browser. All you need to do is to
+simply add a reference in your application code to where your application should get PyScript from.
 
-If you want to download the source and build it yourself, follow
-the instructions in the [README.md](https://github.com/pyscript/pyscript/blob/main/README.md) file.
+If you are not an experienced developer and it all sounds very complicated, don't worry, we'll get you through it in the following steps.
 
-## Your first PyScript HTML file
+## Writing your first PyScript application
 
-Here's a "Hello, world!" example using PyScript.
+As we hinted earlier, writing a PyScript application means writing a web application that can run code writted in Python (and other languages)
+on the web. This means that the way we create PyScript applications starts in a very similar way to how we write web applications: from an
+HTML file.
 
-Using your favorite editor, create a new file called `hello.html` in
-the same directory as your PyScript, JavaScript, and CSS files with the
-following content, and open the file in your web browser. You can typically
-open an HTML by double-clicking it in your file explorer.
+To demonstrate the above, let's start from the most popular "first application example": let's write a "Hello, world!"
+example using PyScript.
+
+Using your favorite editor, create a new file called `hello.html` and paste in the following content and open it in your web browser. (You can typically
+open an HTML by double-clicking it in your file explorer.):
 
 ```html
+<!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+      <title>My First PyScript APP: Hello World!</title>
+      <script
+          type="module"
+          src="https://esm.sh/@pyscript/core@latest/core.js"
+      ></script>
   </head>
   <body>
     <py-script>
+        from pyscript import display
         print('Hello, World!')
+        display('Hello, World!')
     </py-script>
   </body>
 </html>
 ```
 
+<a href="https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/" target="_blank">or open this example on pyscript.com</a>
+
+You should see "Hello World!" printed in your page and in your Javascript Console (don't worry if
+you don't know what it means yet, we'll get into that later).
+
+## Serving your application
+
+Now what we have written our first application, it's important talk about how we can access it.
+
+In the example above, we were able to visualize it by simply opening the local file from our
+system directly with the browser. While that's a very simple and fast way to open our application,
+it is not very recommended because browsers will forbid many features when accessing files this way,
+for security reasons. When this is the case, you may see your Python code in the text of the webpage,
+and the [browser developer console](https://balsamiq.com/support/faqs/browserconsole/) may show an
+error like *"Cross origin requests are only supported for HTTP."*
+
+In short, when browsers visualize a web page, they expect them to be served by a
+web server.
+
+For the rest of this documentation, we'll be presenting examples and snippets and host them on
+pyscript.com. Users can reference the [serving your application](serving-your-application.md) at
+anytime for other options.
+
 ## A more complex example
 
-Now that we know how you can create a simple 'Hello, World!' example, let's see a more complex example. This example will use the Demo created by [Cheuk Ting Ho](https://github.com/Cheukting). In this example, we will use more features from PyScript.
+Now that we know how you can create a simple 'Hello, World!' example, let's see a more complex example.
+This example will use the Demo created by [Cheuk Ting Ho](https://github.com/Cheukting). In this example, we will use more features from PyScript.
 
 ### Setting up the base index file
 
@@ -197,6 +240,7 @@ Now that we have a way to explore the data using `py-repl` and a way to create t
     </py-config>
 
     <py-script>
+      import js
       import pandas as pd
       import matplotlib.pyplot as plt
 
@@ -209,7 +253,7 @@ Now that we have a way to explore the data using `py-repl` and a way to create t
       ice_data = pd.read_csv(open_url(url))
 
       current_selected = []
-      flavour_elements = document.getElementsByName("flavour")
+      flavour_elements = js.document.getElementsByName("flavour")
 
       def plot(data):
           plt.rcParams["figure.figsize"] = (22,20)
@@ -248,8 +292,8 @@ Now that we have a way to explore the data using `py-repl` and a way to create t
       <label for="all"> All 🍧</label>
       <input type="radio" id="chocolate" name="flavour" value="COCOA">
       <label for="chocolate"> Chocolate 🍫</label>
-      <input type="radio" id="cherrie" name="flavour" value="CHERRIES">
-      <label for="cherrie"> Cherries 🍒</label>
+      <input type="radio" id="cherry" name="flavour" value="CHERRIES">
+      <label for="cherry"> Cherries 🍒</label>
       <input type="radio" id="berries" name="flavour" value="BERRY">
       <label for="berries"> Berries 🍓</label>
       <input type="radio" id="cheese" name="flavour" value="CHEESE">

docs/tutorials/index.md

@@ -1,13 +1,38 @@
 # Tutorials
 
-This is the tutorials section for beginners.
+This section contains pyscript tutorials. Each tutorial is a self-contained document that will guide you through a specific topic.
+
+## Getting Started
+
+This tutorial will guide you through getting started with PyScript, from installation to writing your first PyScript application. The getting started will show you how to specify dependencies,  read a csv file from the web, use `pandas` and `matplotlib` and how to handle user input.
+
+[Read the get started tutorial](getting-started.md)
+
+
+## Basics
+
+This section contains tutorials about the basics of PyScript.
 
 ```{toctree}
 ---
-maxdepth: 2
+maxdepth: 1
+glob:
 ---
-getting-started
-py-config-fetch
-py-config-runtime
 writing-to-page
+py-click
+requests
+```
+
+## PyScript Configuration
+
+This section contains tutorials about the PyScript configuration using the `<py-config>` tag.
+
+
+```{toctree}
+---
+maxdepth: 1
+glob:
+---
+py-config-fetch
+py-config-interpreter
 ```

docs/tutorials/py-click.md

@@ -0,0 +1,127 @@
+# Handling click events
+
+This tutorial will show you how to use the `py-click` attribute to handle mouse clicks on elements on your page. The `py-click` attribute is a special attribute that allows you to specify a Python function that will be called when the element is clicked. There are many other events such as py-mouseover, py-focus, py-input, py-keyress etc, which can be used as well. They are listed here [Attr-to-Event](../reference/API/attr_to_event.html)
+
+## Development setup
+
+Let's start by building the base HTML page. We will create an HTML page with a button and a paragraph. When the button is clicked, the paragraph will show the current time.
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Current Time</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
+```
+
+## Adding elements to the page
+
+Let's add a button and a paragraph to the page. The button will have the `py-click` attribute, and the paragraph will have the `id` attribute. The `id` attribute is used to identify the element on the page, and the `py-click` attribute will be used to specify the function that will be called when the button is clicked.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Current Time</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+
+    <body>
+        <button py-click="current_time()" id="get-time" class="py-button">Get current time</button>
+        <p id="current-time"></p>
+    </body>
+</html>
+```
+
+There are two things to note here:
+
+- You must specify an id for an element that uses any `py-*` attribute
+- We used the `py-button` class to style the button, this is optional, and these rules are coming from the pyscript.css that we added in the `<head>` section.
+
+## Creating the Python function
+
+In this step, we will create the Python function that will be called when the button is clicked. This function will get the current time and update the paragraph with the current time. We will use a `<py-script>` tag to specify the Python code that will be executed when the page is loaded.
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Current Time</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+
+    <body>
+        <button py-click="current_time()" id="get-time" class="py-button">Get current time</button>
+        <p id="current-time"></p>
+
+        <py-script>
+            import datetime
+
+            def current_time():
+                now = datetime.datetime.now()
+        </py-script>
+    </body>
+</html>
+```
+
+## Writing the time to the page
+
+If you run the example, you will notice that nothing happened. This is because we still need to update the paragraph with the current time. We can do this by using the [`Element` API](../reference/API/element.md) to get the paragraph element and then update it with the current time with the `write` method.
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Current Time</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+
+    <body>
+        <button py-click="current_time()" id="get-time" class="py-button">Get current time</button>
+        <p id="current-time"></p>
+
+        <py-script>
+            from pyscript import Element
+            import datetime
+
+            def current_time():
+                now = datetime.datetime.now()
+
+                # Get paragraph element by id
+                paragraph = Element("current-time")
+
+                # Add current time to the paragraph element
+                paragraph.write(now.strftime("%Y-%m-%d %H:%M:%S"))
+        </py-script>
+    </body>
+</html>
+```
+
+Now, if you refresh the page and click the button, the paragraph will be updated with the current time.

docs/tutorials/py-config-interpreter.md

@@ -1,6 +1,6 @@
-# Setting a pyodide runtime
+# Setting a pyodide interpreter
 
-Pyscript will automatically set the runtime for you, but you can also set it manually. This is useful if you want to use a different version than the one set by default.
+Pyscript will automatically set the interpreter for you, but you can also set it manually. This is useful if you want to use a different version than the one set by default.
 
 ## Development setup
 
@@ -13,7 +13,7 @@ To get started, let's create a new `index.html` file and import `pyscript.js`.
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-  <title>Runtime</title>
+  <title>Interpreter</title>
 
   <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
   <script defer src="https://pyscript.net/latest/pyscript.js"></script>
@@ -25,11 +25,11 @@ To get started, let's create a new `index.html` file and import `pyscript.js`.
 </html>
 ```
 
-We are using the pyodide CDN to setup our runtime, but you can also download the files from [the pyodide GitHub release](https://github.com/pyodide/pyodide/releases/tag/0.22.0a3), unzip them and use the `pyodide.js` file as your runtime.
+We are using the pyodide CDN to setup our interpreter, but you can also download the files from [the pyodide GitHub releases](https://github.com/pyodide/pyodide/releases/), unzip them and use the `pyodide.js` file as your interpreter.
 
-## Setting the runtime
+## Setting the interpreter
 
-To set the runtime, you can use the `runtime` configuration in the `py-config` element. In this tutorial, we will use the default `TOML` format, but know that you can also use `json` if you prefer by changing the `type` attribute of the `py-config` element.
+To set the interpreter, you can use the `interpreter` configuration in the `py-config` element. In this tutorial, we will use the default `TOML` format, but know that you can also use `json` if you prefer by changing the `type` attribute of the `py-config` element.
 
 ```html
 <!DOCTYPE html>
@@ -38,7 +38,7 @@ To set the runtime, you can use the `runtime` configuration in the `py-config` e
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-  <title>Runtime</title>
+  <title>Interpreter</title>
 
   <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
   <script defer src="https://pyscript.net/latest/pyscript.js"></script>
@@ -46,18 +46,18 @@ To set the runtime, you can use the `runtime` configuration in the `py-config` e
 
   <body>
     <py-config>
-      [[runtimes]]
-        src = "https://cdn.jsdelivr.net/pyodide/v0.22.0a3/full/pyodide.js"
-        name = "pyodide-0.22.0a3"
+      [[interpreters]]
+        src = "https://cdn.jsdelivr.net/pyodide/v0.23.0/full/pyodide.js"
+        name = "pyodide-0.23.0"
         lang = "python"
     </py-config>
   </body>
 </html>
 ```
 
-## Confirming the runtime version
+## Confirming the interpreter version
 
-To confirm that the runtime is set correctly, you can open the DevTools and check the version from the console. But for the sake of this tutorial, let's create a `py-script` tag and print pyodide's version.
+To confirm that the interpreter is set correctly, you can open the DevTools and check the version from the console. But for the sake of this tutorial, let's create a `py-script` tag and print pyodide's version.
 
 ```html
 <!DOCTYPE html>
@@ -66,7 +66,7 @@ To confirm that the runtime is set correctly, you can open the DevTools and chec
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-  <title>Runtime</title>
+  <title>Interpreter</title>
 
   <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
   <script defer src="https://pyscript.net/latest/pyscript.js"></script>
@@ -74,9 +74,9 @@ To confirm that the runtime is set correctly, you can open the DevTools and chec
 
   <body>
     <py-config>
-      [[runtimes]]
-        src = "https://cdn.jsdelivr.net/pyodide/v0.22.0a3/full/pyodide.js"
-        name = "pyodide-0.22.0a3"
+      [[interpreters]]
+        src = "https://cdn.jsdelivr.net/pyodide/v0.23.0/full/pyodide.js"
+        name = "pyodide-0.23.0"
         lang = "python"
     </py-config>
     <py-script>

docs/tutorials/requests.md

@@ -0,0 +1,123 @@
+# Calling an API using Requests
+
+This tutorial will show you how to interact with an API using the [Requests](https://requests.readthedocs.io/en/master/) library. Requests is a popular library, but it doesn't work out of the box with Pyscript. We will use the [pyodide-http](https://github.com/koenvo/pyodide-http) library to patch the Requests library, so it works with Pyscript.
+
+ We will use the [JSON Placeholder API](https://jsonplaceholder.typicode.com/), a free fake API that returns fake data.
+
+## Development Setup
+
+Let's build the base HTML page to add our `py-config` and `py-script` tags in the next steps.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Requests Tutorial</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
+```
+
+## Installing the dependencies
+
+In this step, we will install the dependencies we need to use the Requests library. We will use the `py-config` tag to specify the dependencies we need to install.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Requests Tutorial</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+    <body>
+      <py-config>
+        packages = ["requests", "pyodide-http"]
+      </py-config>
+    </body>
+</html>
+```
+
+## Patching the Requests library
+
+Now that we have installed the dependencies, we need to patch the Requests library to work with Pyscript. We will use the `py-script` tag to specify the code that will be executed when the page is loaded.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Requests Tutorial</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+    <body>
+      <py-config>
+        packages = ["requests", "pyodide-http"]
+      </py-config>
+
+      <py-script>
+        import pyodide_http
+        pyodide_http.patch_all()
+      </py-script>
+    </body>
+</html>
+```
+
+## Making a request
+
+Finally, let's make a request to the JSON Placeholder API to confirm that everything is working.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+        <title>Requests Tutorial</title>
+
+        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    </head>
+    <body>
+      <py-config>
+        packages = ["requests", "pyodide-http"]
+      </py-config>
+
+      <py-script>
+        import requests
+        import pyodide_http
+
+        # Patch the Requests library so it works with Pyscript
+        pyodide_http.patch_all()
+
+        # Make a request to the JSON Placeholder API
+        response = requests.get("https://jsonplaceholder.typicode.com/todos")
+        print(response.json())
+      </py-script>
+    </body>
+</html>
+```
+
+## Conclusion
+
+In this tutorial, we learned how to use the Requests library to make requests to an API. We also learned how to use the `py-config` and `py-script` tags to install dependencies and execute code when the page is loaded.
+
+Depending on the API you use, you may need to add additional headers to your request. You can read the [Requests documentation](https://requests.readthedocs.io/en/master/user/quickstart/#custom-headers) to learn more about how to do this.
+
+You may also be interested in creating your module to make requests. You can read the in-depth guide on [How to make HTTP requests using `PyScript`, in pure Python](../guides/http-requests.md) to learn more about how to do this.

examples/altair.html

@@ -1,33 +1,47 @@
 <html>
     <head>
         <title>Altair</title>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <script defer src="./assets/prism/prism.js"></script>
+        <style>
+            py-script {
+                display: none;
+            }
+        </style>
+        <script
+            type="module"
+            src="https://esm.sh/@pyscript/core@latest/core.js"
+        ></script>
     </head>
     <body>
-        <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-            <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-            <a class="title" href="" style="color: #f0ab3c;">Altair</a>
+                <a class="title" href="" style="color: #f0ab3c">Altair</a>
             </div>
         </nav>
         <section class="pyscript">
             <div id="altair"></div>
+            <py-tutor>
                 <py-config>
                     packages = [
                       "altair",
                       "pandas",
                       "vega_datasets"
                     ]
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
+                    ]
                 </py-config>
                 <py-script>
+                    from pyscript import display
                     import altair as alt
                     from vega_datasets import data
 
@@ -70,85 +84,7 @@
                         size="independent"
                     ), target="altair")
                 </py-script>
-        </section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-            &lt;py-config&gt;
-              packages = [
-                "altair",
-                "pandas",
-                "vega_datasets"
-              ]
-            &lt;/py-config&gt;
-            &lt;py-script&gt;
-                import altair as alt
-                from vega_datasets import data
-
-                source = data.movies.url
-
-                pts = alt.selection(type="single", encodings=['x'])
-
-                rect = alt.Chart(data.movies.url).mark_rect().encode(
-                    alt.X('IMDB_Rating:Q', bin=True),
-                    alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
-                    alt.Color('count()',
-                        scale=alt.Scale(scheme='greenblue'),
-                        legend=alt.Legend(title='Total Records')
-                    )
-                )
-
-                circ = rect.mark_point().encode(
-                    alt.ColorValue('grey'),
-                    alt.Size('count()',
-                        legend=alt.Legend(title='Records in Selection')
-                    )
-                ).transform_filter(
-                    pts
-                )
-
-                bar = alt.Chart(source).mark_bar().encode(
-                    x='Major_Genre:N',
-                    y='count()',
-                    color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
-                ).properties(
-                    width=550,
-                    height=200
-                ).add_selection(pts)
-
-                display(alt.vconcat(
-                    rect + circ,
-                    bar
-                ).resolve_legend(
-                    color="independent",
-                    size="independent"
-                ), target="altair")
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
+            </py-tutor>
         </section>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/antigravity.html

@@ -1,118 +1,39 @@
 <html>
     <head>
         <title>Antigravity</title>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <script defer src="./assets/prism/prism.js"></script>
     </head>
     <body>
-  <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Antigravity</a>
+                <a class="title" href="" style="color: #f0ab3c">Antigravity</a>
             </div>
         </nav>
+        <py-tutor modules="antigravity.py">
             <section class="pyscript">
                 <py-config>
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
+                    ]
                     [[fetch]]
                     files = ["./antigravity.py"]
                 </py-config>
                 <b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
                 <py-script>
-import antigravity
-antigravity.fly()
-    </py-script>
-    </section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-            &lt;py-config&gt;
-              [[fetch]]
-              files = ["./antigravity.py"]
-            &lt;/py-config&gt;
-            &lt;py-script&gt;
                     import antigravity
                     antigravity.fly()
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-        <p>antigravity.py</p>
-        <pre class="prism-code language-python">
-          <code class="language-python">
-            import random
-            import sys
-
-            from js import DOMParser, document, setInterval
-            from pyodide.ffi import create_proxy
-            from pyodide.http import open_url
-
-
-            class Antigravity:
-
-                url = "./antigravity.svg"
-
-                def __init__(self, target=None, interval=10, append=True, fly=False):
-                    target = target or sys.stdout._out
-                    self.target = (
-                        document.getElementById(target) if isinstance(target, str) else target
-                    )
-                    doc = DOMParser.new().parseFromString(
-                        open_url(self.url).read(), "image/svg+xml"
-                    )
-                    self.node = doc.documentElement
-                    if append:
-                        self.target.append(self.node)
-                    else:
-                        self.target.replaceChildren(self.node)
-                    self.xoffset, self.yoffset = 0, 0
-                    self.interval = interval
-                    if fly:
-                        self.fly()
-
-                def fly(self):
-                    setInterval(create_proxy(self.move), self.interval)
-
-                def move(self):
-                    char = self.node.getElementsByTagName("g")[1]
-                    char.setAttribute("transform", f"translate({self.xoffset}, {-self.yoffset})")
-                    self.xoffset += random.normalvariate(0, 1) / 20
-                    if self.yoffset < 50:
-                        self.yoffset += 0.1
-                    else:
-                        self.yoffset += random.normalvariate(0, 1) / 20
-
-            _auto = Antigravity(append=True)
-            fly = _auto.fly
-          </code>
-      </div>
+                </py-script>
             </section>
+        </py-tutor>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/antigravity.py

@@ -6,7 +6,6 @@ from pyodide.http import open_url
 
 
 class Antigravity:
-
     url = "./antigravity.svg"
 
     def __init__(self, target=None, interval=10, append=True, fly=False):

examples/assets/css/examples.css

@@ -36,20 +36,21 @@ body {
     border-radius: 10px 0px 0px 10px;
     color: #c6c6c8;
 }
-.code-section-visible p{
+.code-section-visible p {
     margin: 0;
     font-style: italic;
     font-size: small;
 }
 
-.language-html, .language-python {
+.language-html,
+.language-python {
     float: left;
 }
 
 #view-code-button {
     writing-mode: tb-rl;
     text-orientation: sideways-right;
-    background-color: #1D1D22;
+    background-color: #1d1d22;
     color: white;
     padding: 0.5rem;
     border-radius: 5px;

examples/assets/css/index.css

@@ -2,7 +2,7 @@
     margin-bottom: 5rem;
 }
 
-.example h2{
+.example h2 {
     /* color: #000000; */
     font-family: "Inconsolata", monospace;
     font-size: 2.25rem;
@@ -16,9 +16,12 @@
     border-radius: 10px;
 }
 
-.card:hover, .card:hover a, .card:hover a:visited, .card:hover h2 {
+.card:hover,
+.card:hover a,
+.card:hover a:visited,
+.card:hover h2 {
     background-color: var(--color-primary);
-    color: #1D1D22
+    color: #1d1d22;
 }
 
 .card a h2 {
@@ -46,7 +49,8 @@ a .card {
     justify-content: space-between;
 }
 
-.card-content a, .card-content a:visited {
+.card-content a,
+.card-content a:visited {
     color: var(--color-primary);
 }
 

examples/assets/css/main.css

@@ -2,12 +2,13 @@
 @import "./variables.css";
 @import "./reset.css";
 
-
 body {
-    background: #2D2E35 url('https://assets.anaconda.com/production/Content/1650828148240.png?w=3240&auto=compress%2Cformat&fit=crop&dm=1650828161&s=c558dc55e0ed1f8419a892e842a5728f') repeat-x center bottom / 250px;
+    background: #2d2e35
+        url("https://assets.anaconda.com/production/Content/1650828148240.png?w=3240&auto=compress%2Cformat&fit=crop&dm=1650828161&s=c558dc55e0ed1f8419a892e842a5728f")
+        repeat-x center bottom / 250px;
     background-attachment: fixed;
     overflow-x: hidden;
-    color: var(--text-color)
+    color: var(--text-color);
 }
 
 .container {

examples/assets/css/variables.css

@@ -1,6 +1,6 @@
 :root {
-    --color-primary: #FDA703;
-    --color-secondary: #1D1D22;
+    --color-primary: #fda703;
+    --color-secondary: #1d1d22;
     --text-color: white;
     --card-shadow: 0px 5px 11px 0px rgb(0 0 0 / 15%);
 }

examples/await/await0.html

@@ -1,10 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await BLOCKING LOOP Pyscript Twice</title>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
     <body>

examples/await/await1.html

@@ -1,15 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await BLOCKING LOOP Pyscript Twice</title>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
     <body>
         <div>
-      Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio
@@ -23,7 +27,8 @@
             </py-script>
         </div>
         <div>
-      Pyscript - SECOND ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - SECOND ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio

examples/await/await2.html

@@ -1,15 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await BLOCKING LOOP Pyscript Twice</title>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
     <body>
         <div>
-      Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio
@@ -23,7 +27,8 @@
             </py-script>
         </div>
         <div>
-      Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio

examples/await/await3.html

@@ -1,15 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await NON-BLOCKING Pyscript Twice</title>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
     <body>
         <div>
-      Pyscript - FIRST ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER THAN LOOP Pyscript writing to console.log:
+            Pyscript - FIRST ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
+            THAN LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio
@@ -23,7 +27,8 @@
             </py-script>
         </div>
         <div>
-      Pyscript - SECOND ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER THAN LOOP Pyscript writing to console.log:
+            Pyscript - SECOND ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
+            THAN LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio

examples/await/await4.html

@@ -1,15 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await BLOCKING LOOP Pyscript Twice</title>
-  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-</head>
-<body>
+    </head>
+    <body>
         <div>
-    Pyscript - FIRST ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - FIRST ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio
@@ -20,7 +24,8 @@
             </py-script>
         </div>
         <div>
-    Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL AS LOOP Pyscript writing to console.log:
+            Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
+            LEVEL AS LOOP Pyscript writing to console.log:
             <py-script>
                 import js
                 import asyncio
@@ -30,5 +35,5 @@
                   await asyncio.sleep(2)
             </py-script>
         </div>
-</body>
+    </body>
 </html>

examples/await/await5.html

@@ -1,13 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Async Await BLOCKING LOOP Pyscript Twice</title>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-</head>
-<body>
+    </head>
+    <body>
         <py-script>
             import asyncio
             from itertools import count
@@ -15,5 +18,5 @@
                 print(f"Count: {i}")
                 await asyncio.sleep(1)
         </py-script>
-</body>
+    </body>
 </html>

examples/bokeh.html

@@ -1,75 +1,75 @@
-<html><head>
+<html>
+    <head>
         <title>Bokeh Example</title>
-    <meta charset="iso-8859-1">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
+        <meta charset="iso-8859-1" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-3.0.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.0.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.0.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.0.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.0.3.min.js"
+        ></script>
 
         <script type="text/javascript">
             Bokeh.set_log_level("info");
         </script>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
 
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="./assets/prism/prism.js"></script>
+        <style>
+            py-script {
+                display: none;
+            }
+        </style>
+        <script
+            type="module"
+            src="https://esm.sh/@pyscript/core@latest/core.js"
+        ></script>
     </head>
     <body>
-    <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Bokeh Example</a>
+                <a class="title" href="" style="color: #f0ab3c"
+                    >Bokeh Example</a
+                >
             </div>
         </nav>
+        <py-tutor>
             <section class="pyscript">
                 <div id="myplot"></div>
 
                 <py-config>
                     packages = [
+                      "pandas",
                       "bokeh",
-            "numpy"
+                      "xyzservices"
+                    ]
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                     ]
                 </py-config>
 
                 <py-script id="main">
-import json
-import pyodide
-
-from js import Bokeh, console, JSON
-
-from bokeh.embed import json_item
-from bokeh.plotting import figure
-from bokeh.resources import CDN
-
-# create a new plot with default tools, using figure
-p = figure(plot_width=400, plot_height=400)
-
-# add a circle renderer with x and y coordinates, size, color, and alpha
-p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
-p_json = json.dumps(json_item(p, "myplot"))
-
-Bokeh.embed.embed_item(JSON.parse(p_json))
-    </py-script>
-  </section>
-  <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-            &lt;py-config&gt;
-            packages = [
-              "bokeh",
-              "numpy"
-            ]
-            &lt;/py-config&gt;
-            &lt;py-script id="main"&gt;
                     import json
                     import pyodide
 
@@ -80,36 +80,15 @@ Bokeh.embed.embed_item(JSON.parse(p_json))
                     from bokeh.resources import CDN
 
                     # create a new plot with default tools, using figure
-              p = figure(plot_width=400, plot_height=400)
+                    p = figure(width=400, height=400)
 
                     # add a circle renderer with x and y coordinates, size, color, and alpha
                     p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
                     p_json = json.dumps(json_item(p, "myplot"))
 
                     Bokeh.embed.embed_item(JSON.parse(p_json))
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
+                </py-script>
             </section>
+        </py-tutor>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/bokeh_interactive.html

@@ -1,126 +1,67 @@
-<html><head>
+<html>
+    <head>
         <title>Bokeh Example</title>
-    <meta charset="iso-8859-1">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
-    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
+        <meta charset="iso-8859-1" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"
+        ></script>
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="./assets/prism/prism.js"></script>
 
         <script type="text/javascript">
             Bokeh.set_log_level("info");
         </script>
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
 
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
     <body>
-    <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Bokeh Example</a>
+                <a class="title" href="" style="color: #f0ab3c"
+                    >Bokeh Example</a
+                >
             </div>
         </nav>
+        <py-tutor>
             <section class="pyscript">
                 <h1>Bokeh Example</h1>
                 <div id="myplot"></div>
 
                 <py-config>
                     packages = [
-              "bokeh",
-              "numpy"
+                      "https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
+                      "numpy",
+                    ]
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                     ]
                 </py-config>
 
                 <py-script id="main">
-import asyncio
-import json
-import pyodide
-
-from js import Bokeh, console, JSON
-
-from bokeh import __version__
-from bokeh.document import Document
-from bokeh.embed.util import OutputDocumentFor, standalone_docs_json_and_render_items
-from bokeh.models import Slider, Div
-from bokeh.layouts import Row
-from bokeh.protocol.messages.patch_doc import process_document_events
-
-# create a new plot with default tools, using figure
-p = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
-div = Div(text=f'Amplitude is: {p.value}')
-
-def callback(attr, old, new):
-    div.text = f'Amplitude is: {new}'
-
-p.on_change('value', callback)
-
-row = Row(children=[p, div])
-
-def doc_json(model, target):
-    with OutputDocumentFor([model]) as doc:
-        doc.title = ""
-        docs_json, _ = standalone_docs_json_and_render_items(
-            [model], suppress_callback_warning=True
-        )
-
-    doc_json = list(docs_json.values())[0]
-    root_id = doc_json['roots']['root_ids'][0]
-
-    return doc, json.dumps(dict(
-        target_id = target,
-        root_id   = root_id,
-        doc       = doc_json,
-        version   = __version__,
-    ))
-
-def _link_docs(pydoc, jsdoc):
-    def jssync(event):
-        if getattr(event, 'setter_id', None) is not None:
-            return
-        events = [event]
-        json_patch = jsdoc.create_json_patch_string(pyodide.ffi.to_js(events))
-        pydoc.apply_json_patch(json.loads(json_patch))
-
-    jsdoc.on_change(pyodide.ffi.create_proxy(jssync), pyodide.ffi.to_js(False))
-
-    def pysync(event):
-        json_patch, buffers = process_document_events([event], use_buffers=True)
-        buffer_map = {}
-        for (ref, buffer) in buffers:
-            buffer_map[ref['id']] = buffer
-        jsdoc.apply_json_patch(JSON.parse(json_patch), pyodide.ffi.to_js(buffer_map), setter_id='js')
-
-    pydoc.on_change(pysync)
-
-async def show(plot, target):
-    pydoc, model_json = doc_json(plot, target)
-    views = await Bokeh.embed.embed_item(JSON.parse(model_json))
-    jsdoc = views[0].model.document
-    _link_docs(pydoc, jsdoc)
-
-asyncio.ensure_future(show(row, 'myplot'))
-    </py-script>
-    </section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-            &lt;py-config&gt;
-            packages = [
-              "bokeh",
-              "numpy"
-            ]
-            &lt;/py-config&gt;
-            &lt;py-script id="main"&gt;
                     import asyncio
                     import json
                     import pyodide
@@ -188,29 +129,8 @@ asyncio.ensure_future(show(row, 'myplot'))
                         _link_docs(pydoc, jsdoc)
 
                     asyncio.ensure_future(show(row, 'myplot'))
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
+                </py-script>
             </section>
+        </py-tutor>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/d3.html

@@ -1,14 +1,15 @@
 <html>
     <head>
         <title>d3: JavaScript & PyScript visualizations side-by-side</title>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
 
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="./assets/prism/prism.js"></script>
         <script src="https://d3js.org/d3.v7.min.js"></script>
         <style>
             .loading {
@@ -27,20 +28,38 @@
                 }
             }
         </style>
-
     </head>
     <body>
-    <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Simple d3 visualization</a>
+                <a class="title" href="" style="color: #f0ab3c"
+                    >Simple d3 visualization</a
+                >
             </div>
         </nav>
+
         <section class="pyscript">
+            <py-tutor modules="d3.py">
+                <py-config>
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
+                    ]
+                    [[fetch]]
+                    files = ["./d3.py"]
+                </py-config>
+            </py-tutor>
             <b>
-        Based on <i><a href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>">Learn D3: Shapes</a></i> tutorial.
+                Based on
+                <i
+                    ><a
+                        href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>"
+                        >Learn D3: Shapes</a
+                    ></i
+                >
+                tutorial.
             </b>
             <div style="display: flex; flex-direction: row">
                 <div>
@@ -56,259 +75,64 @@
                     </div>
                 </div>
             </div>
+            <py-script src="d3.py"></py-script>
+        </section>
 
-<script type="module">
-
-const fruits = [
-  {name: "🍊", count: 21},
-  {name: "🍇", count: 13},
-  {name: "🍏", count: 8},
-  {name: "🍌", count: 5},
-  {name: "🍐", count: 3},
-  {name: "🍋", count: 2},
-  {name: "🍎", count: 1},
-  {name: "🍉", count: 1},
-]
-
-const fn = (d) => d.count
-const data = d3.pie().value(fn)(fruits)
-
-const arc = d3.arc()
-  .innerRadius(210)
-  .outerRadius(310)
-  .padRadius(300)
-  .padAngle(2 / 300)
-  .cornerRadius(8)
-
-const js = d3.select("#js")
-js.select(".loading").remove()
-
-const svg = js
-  .append("svg")
-  .attr("viewBox", "-320 -320 640 640")
-  .attr("width", "400")
-  .attr("height", "400")
-
-for (const d of data) {
-  svg.append("path")
-    .style("fill", "steelblue")
-    .attr("d", arc(d))
-
-  const text = svg.append("text")
-    .style("fill", "white")
-    .attr("transform", `translate(${arc.centroid(d).join(",")})`)
-    .attr("text-anchor", "middle")
-
-  text.append("tspan")
-    .style("font-size", "24")
-    .attr("x", "0").text(d.data.name)
-
-  text.append("tspan")
-    .style("font-size", "18")
-    .attr("x", "0")
-    .attr("dy", "1.3em")
-    .text(d.value)
-}
-</script>
-
-<py-script>
-import js
-from pyodide.ffi import create_proxy, to_js
-d3 = js.d3
-
-fruits = [
-  dict(name="🍊", count=21),
-  dict(name="🍇", count=13),
-  dict(name="🍏", count=8),
-  dict(name="🍌", count=5),
-  dict(name="🍐", count=3),
-  dict(name="🍋", count=2),
-  dict(name="🍎", count=1),
-  dict(name="🍉", count=1),
-]
-
-fn = create_proxy(lambda d, *_: d["count"])
-data = d3.pie().value(fn)(to_js(fruits))
-
-arc = (d3.arc()
-  .innerRadius(210)
-  .outerRadius(310)
-  .padRadius(300)
-  .padAngle(2 / 300)
-  .cornerRadius(8))
-
-py = d3.select("#py")
-py.select(".loading").remove()
-
-svg = (py
-  .append("svg")
-  .attr("viewBox", "-320 -320 640 640")
-  .attr("width", "400")
-  .attr("height", "400"))
-
-for d in data:
-  d_py = d.to_py()
-
-  (svg.append("path")
-    .style("fill", "steelblue")
-    .attr("d", arc(d)))
-
-  text = (svg.append("text")
-    .style("fill", "white")
-    .attr("transform", f"translate({arc.centroid(d).join(',')})")
-    .attr("text-anchor", "middle"))
-
-  (text.append("tspan")
-    .style("font-size", "24")
-    .attr("x", "0")
-    .text(d_py["data"]["name"]))
-
-  (text.append("tspan")
-    .style("font-size", "18")
-    .attr("x", "0")
-    .attr("dy", "1.3em")
-    .text(d_py["value"]))
-</py-script>
-</section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-          &lt;script&gt;
-            import * as d3 from "https://cdn.skypack.dev/pin/d3@v7.6.1-1Q0NZ0WZnbYeSjDusJT3/mode=imports,min/optimized/d3.js";
-
+        <script type="module">
             const fruits = [
-              {name: "🍊", count: 21},
-              {name: "🍇", count: 13},
-              {name: "🍏", count: 8},
-              {name: "🍌", count: 5},
-              {name: "🍐", count: 3},
-              {name: "🍋", count: 2},
-              {name: "🍎", count: 1},
-              {name: "🍉", count: 1},
-            ]
+                { name: "🍊", count: 21 },
+                { name: "🍇", count: 13 },
+                { name: "🍏", count: 8 },
+                { name: "🍌", count: 5 },
+                { name: "🍐", count: 3 },
+                { name: "🍋", count: 2 },
+                { name: "🍎", count: 1 },
+                { name: "🍉", count: 1 },
+            ];
 
-            const fn = (d) => d.count
-            const data = d3.pie().value(fn)(fruits)
+            const fn = (d) => d.count;
+            const data = d3.pie().value(fn)(fruits);
 
-            const arc = d3.arc()
+            const arc = d3
+                .arc()
                 .innerRadius(210)
                 .outerRadius(310)
                 .padRadius(300)
                 .padAngle(2 / 300)
-              .cornerRadius(8)
+                .cornerRadius(8);
 
-            const js = d3.select("#js")
-            js.select(".loading").remove()
+            const js = d3.select("#js");
+            js.select(".loading").remove();
 
             const svg = js
                 .append("svg")
                 .attr("viewBox", "-320 -320 640 640")
                 .attr("width", "400")
-              .attr("height", "400")
+                .attr("height", "400");
 
             for (const d of data) {
-              svg.append("path")
-                .style("fill", "steelblue")
-                .attr("d", arc(d))
+                svg.append("path").style("fill", "steelblue").attr("d", arc(d));
 
-              const text = svg.append("text")
+                const text = svg
+                    .append("text")
                     .style("fill", "white")
-                .attr("transform", `translate(${arc.centroid(d).join(",")})`)
-                .attr("text-anchor", "middle")
+                    .attr(
+                        "transform",
+                        `translate(${arc.centroid(d).join(",")})`,
+                    )
+                    .attr("text-anchor", "middle");
 
                 text.append("tspan")
                     .style("font-size", "24")
-                .attr("x", "0").text(d.data.name)
+                    .attr("x", "0")
+                    .text(d.data.name);
 
                 text.append("tspan")
                     .style("font-size", "18")
                     .attr("x", "0")
                     .attr("dy", "1.3em")
-                .text(d.value)
+                    .text(d.value);
             }
-            &lt;/script&gt;
-            &lt;py-script&gt;
-              from pyodide.ffi import create_proxy, to_js
-              import d3
-
-              fruits = [
-                dict(name="🍊", count=21),
-                dict(name="🍇", count=13),
-                dict(name="🍏", count=8),
-                dict(name="🍌", count=5),
-                dict(name="🍐", count=3),
-                dict(name="🍋", count=2),
-                dict(name="🍎", count=1),
-                dict(name="🍉", count=1),
-              ]
-
-              fn = create_proxy(lambda d, *_: d["count"])
-              data = d3.pie().value(fn)(to_js(fruits))
-
-              arc = (d3.arc()
-                .innerRadius(210)
-                .outerRadius(310)
-                .padRadius(300)
-                .padAngle(2 / 300)
-                .cornerRadius(8))
-
-              py = d3.select("#py")
-              py.select(".loading").remove()
-
-              svg = (py
-                .append("svg")
-                .attr("viewBox", "-320 -320 640 640")
-                .attr("width", "400")
-                .attr("height", "400"))
-
-              for d in data:
-                d_py = d.to_py()
-
-                (svg.append("path")
-                  .style("fill", "steelblue")
-                  .attr("d", arc(d)))
-
-                text = (svg.append("text")
-                  .style("fill", "white")
-                  .attr("transform", f"translate({arc.centroid(d).join(',')})")
-                  .attr("text-anchor", "middle"))
-
-                (text.append("tspan")
-                  .style("font-size", "24")
-                  .attr("x", "0")
-                  .text(d_py["data"]["name"]))
-
-                (text.append("tspan")
-                  .style("font-size", "18")
-                  .attr("x", "0")
-                  .attr("dy", "1.3em")
-                  .text(d_py["value"]))
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
-    </section>
-  </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
         </script>
+    </body>
 </html>

examples/d3.py

@@ -0,0 +1,64 @@
+import js
+from pyodide.ffi import create_proxy, to_js
+
+d3 = js.d3
+
+fruits = [
+    {"name": "🍊", "count": 21},
+    {"name": "🍇", "count": 13},
+    {"name": "🍏", "count": 8},
+    {"name": "🍌", "count": 5},
+    {"name": "🍐", "count": 3},
+    {"name": "🍋", "count": 2},
+    {"name": "🍎", "count": 1},
+    {"name": "🍉", "count": 1},
+]
+
+fn = create_proxy(lambda d, *_: d["count"])
+data = d3.pie().value(fn)(to_js(fruits))
+
+arc = (
+    d3.arc()
+    .innerRadius(210)
+    .outerRadius(310)
+    .padRadius(300)
+    .padAngle(2 / 300)
+    .cornerRadius(8)
+)
+
+py = d3.select("#py")
+py.select(".loading").remove()
+
+svg = (
+    py.append("svg")
+    .attr("viewBox", "-320 -320 640 640")
+    .attr("width", "400")
+    .attr("height", "400")
+)
+
+for d in data:
+    d_py = d.to_py()
+
+    (svg.append("path").style("fill", "steelblue").attr("d", arc(d)))
+
+    text = (
+        svg.append("text")
+        .style("fill", "white")
+        .attr("transform", f"translate({arc.centroid(d).join(',')})")
+        .attr("text-anchor", "middle")
+    )
+
+    (
+        text.append("tspan")
+        .style("font-size", "24")
+        .attr("x", "0")
+        .text(d_py["data"]["name"])
+    )
+
+    (
+        text.append("tspan")
+        .style("font-size", "18")
+        .attr("x", "0")
+        .attr("dy", "1.3em")
+        .text(d_py["value"])
+    )

examples/folium.html

@@ -1,82 +1,48 @@
 <html>
     <head>
         <title>Folium</title>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/x-icon" href="./favicon.png">
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/x-icon" href="./favicon.png" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="./assets/prism/prism.js"></script>
+        <style>
+            py-script {
+                display: none;
+            }
+        </style>
+        <script
+            type="module"
+            src="https://esm.sh/@pyscript/core@latest/core.js"
+        ></script>
     </head>
     <body>
-    <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Folium</a>
+                <a class="title" href="" style="color: #f0ab3c">Folium</a>
             </div>
         </nav>
         <section class="pyscript">
             <div id="folium"></div>
 
+            <py-tutor>
                 <py-config>
                     packages = [
                       "folium",
                       "pandas"
                     ]
+                    plugins = [
+                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
+                    ]
                 </py-config>
 
                 <py-script>
-import folium
-import json
-import pandas as pd
-
-from pyodide.http import open_url
-
-url = (
-    "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data"
-)
-state_geo = f"{url}/us-states.json"
-state_unemployment = f"{url}/US_Unemployment_Oct2012.csv"
-state_data = pd.read_csv(open_url(state_unemployment))
-geo_json = json.loads(open_url(state_geo).read())
-
-m = folium.Map(location=[48, -102], zoom_start=3)
-
-folium.Choropleth(
-    geo_data=geo_json,
-    name="choropleth",
-    data=state_data,
-    columns=["State", "Unemployment"],
-    key_on="feature.id",
-    fill_color="YlGn",
-    fill_opacity=0.7,
-    line_opacity=0.2,
-    legend_name="Unemployment Rate (%)",
-).add_to(m)
-
-folium.LayerControl().add_to(m)
-
-display(m, target="folium")
-      </py-script>
-   </section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-
-            &lt;div id="folium"&gt;&lt;/div&gt;
-            &lt;py-config&gt;
-            packages = [
-              "folium",
-              "pandas"
-            ]
-            &lt;/py-config&gt;
-            &lt;py-script&gt;
+                    from pyscript import display
                     import folium
                     import json
                     import pandas as pd
@@ -108,29 +74,8 @@ display(m, target="folium")
                     folium.LayerControl().add_to(m)
 
                     display(m, target="folium")
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
+                </py-script>
+            </py-tutor>
         </section>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/handtrack/say_hello.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -7,30 +7,36 @@
         <title>Say Hello</title>
 
         <link rel="icon" type="image/png" href="../favicon.png" />
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
-
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
+        <script defer src="../../pyscriptjs/build/pyscript.js"></script>
+        <!-- <script defer src="https://pyscript.net/latest/pyscript.js"></script> -->
     </head>
 
     <body>
         <py-script>
-from js import handTrack, requestAnimationFrame
-from pyodide import create_once_callable
-import asyncio
+            from js import handTrack, requestAnimationFrame, console
+            from pyodide import create_once_callable
+            import asyncio
 
-context = canvas.element.getContext("2d")
+            update_note = Element("update-note")
+            canvas = Element("canvas")
+            video = Element("myvideo")
+            context = canvas.element.getContext("2d")
 
-isVideo = False
-model = None
+            isVideo = False
+            model = None
 
-modelParams = {
+            modelParams = {
               "flipHorizontal": True, # flip e.g for video
               "maxNumBoxes": 20, # maximum number of boxes to detect
               "iouThreshold": 0.5, # ioU threshold for non-max suppression
               "scoreThreshold": 0.6, # confidence threshold for predictions.
-}
+            }
 
-def toggle_video(evt):
+            def toggle_video():
               global isVideo
               if (not isVideo):
                 update_note.write("Starting video")
@@ -41,7 +47,7 @@ def toggle_video(evt):
                 isVideo = False
                 update_note.write("Video stopped")
 
-async def start_video():
+            async def start_video():
               global isVideo
               update_note.write("Inside sstart video")
               status = await handTrack.startVideo(video.element)
@@ -54,10 +60,10 @@ async def start_video():
               else:
                 update_note.write( "Please enable video")
 
-def sync_run_detection(evt):
+            def sync_run_detection(evt):
               pyscript.run_until_complete(run_detection())
 
-async def run_detection():
+            async def run_detection():
               console.log("in RUN DETECTION: ");
               global model
               global isVideo
@@ -74,7 +80,7 @@ async def run_detection():
                 await requestAnimationFrame(create_once_callable(sync_run_detection));
               console.log("...2")
 
-def run_detection_image(img):
+            def run_detection_image(img):
               console.log("in RUN DETECTION IMAGE", predictions);
               global model
               def detect(predition):
@@ -84,12 +90,12 @@ def run_detection_image(img):
               model.detect(img).then(detect)
               console.log("...4")
 
-def handle_model(lmodel):
+            def handle_model(lmodel):
               global model
               model = lmodel
               update_note.write("Loaded Model!")
 
-async def start():
+            async def start():
               console.log("creating x")
               console.log("calling x")
               model = await handTrack.load(modelParams)#.then(handle_model)
@@ -99,24 +105,34 @@ async def start():
               print(dir(x))
               print(x)
 
-pyscript.run_until_complete(start())
-
-#});
+            pyscript.run_until_complete(start())
 
+            #});
         </py-script>
 
         <div class="mb10">
-      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
+            <button
+                id="trackbutton"
+                class="bx--btn bx--btn--secondary"
+                type="button"
+                py-click="toggle_video()"
+            >
                 Toggle Video
             </button>
-      <button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>
+            <button
+                id="nextimagebutton"
+                class="mt10 bx--btn bx--btn--secondary"
+                type="button"
+                disabled
+            >
                 Next Image
             </button>
-      <div id="update-note" py-mount class="updatenote mt10">loading model ..</div>
+            <div id="update-note" class="updatenote mt10">loading model ..</div>
         </div>
         <div>
             <video autoplay="autoplay" id="myvideo" py-mount="video"></video>
-      <canvas id="canvas" py-mount class="border canvasbox"></canvas>
+            <canvas id="canvas" class="border canvasbox"></canvas>
         </div>
-    <script src="lib/handtrack.min.js"> </script>
+        <script src="lib/handtrack.min.js"></script>
+    </body>
 </html>

examples/hello_world.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -7,65 +7,49 @@
         <title>PyScript Hello World</title>
 
         <link rel="icon" type="image/png" href="favicon.png" />
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
         <link rel="stylesheet" href="./assets/css/examples.css" />
-    <link rel="stylesheet" href="./assets/prism/prism.css" />
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <script defer src="./assets/prism/prism.js"></script>
+        <style>
+            py-script {
+                display: none;
+            }
+        </style>
+        <script
+            type="module"
+            src="https://esm.sh/@pyscript/core@latest/core.js"
+        ></script>
     </head>
 
-
     <body>
-    <nav class="navbar" style="background-color: #000000;">
+        <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
-          <img src="./logo.png" class="logo">
+                    <img src="./logo.png" class="logo" />
                 </a>
-        <a class="title" href="" style="color: #f0ab3c;">Hello World</a>
+                <a class="title" href="" style="color: #f0ab3c">Hello World</a>
             </div>
         </nav>
+
+        <py-tutor>
+            <py-config>
+                plugins = [
+                  "https://pyscript.net/latest/plugins/python/py_tutor.py"
+                ]
+            </py-config>
+
             <section class="pyscript">
-      Hello world! <br>
+                Hello world! <br />
                 This is the current date and time, as computed by Python:
                 <py-script>
+                    from pyscript import display
                     from datetime import datetime
                     now = datetime.now()
                     display(now.strftime("%m/%d/%Y, %H:%M:%S"))
                 </py-script>
             </section>
-    <section class="code">
-      <div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
-      <div id="code-section" class="code-section-hidden">
-        <p>index.html</p>
-        <pre class="prism-code language-html">
-          <code class="language-html">
-            &lt;py-script&gt;
-              from datetime import datetime
-              now = datetime.now()
-              display(now.strftime("%m/%d/%Y, %H:%M:%S"))
-            &lt;/py-script&gt;
-          </code>
-        </pre>
-      </div>
-    </section>
+        </py-tutor>
     </body>
-  <script>
-    const viewCodeButton = document.getElementById("view-code-button");
-    const codeSection = document.getElementById("code-section");
-    const handleClick = () => {
-      if (codeSection.classList.contains("code-section-hidden")) {
-        codeSection.classList.remove("code-section-hidden");
-        codeSection.classList.add("code-section-visible");
-      } else {
-        codeSection.classList.remove("code-section-visible");
-        codeSection.classList.add("code-section-hidden");
-      }
-    }
-    viewCodeButton.addEventListener("click", handleClick)
-    viewCodeButton.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        handleClick();
-      }
-    })
-  </script>
 </html>

examples/index.html

@@ -1,15 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>PyScript demo</title>
         <link rel="icon" type="image/png" href="favicon.png" />
         <link rel="stylesheet" href="./assets/css/main.css" />
         <link rel="stylesheet" href="./assets/css/index.css" />
-</head>
+    </head>
 
-<body class="container">
+    <body class="container">
         <h1 class="title-main">PyScript demos</h1>
         <section class="example">
             <h2>Basic examples</h2>
@@ -20,7 +20,8 @@
                             <h2>Hello world</h2>
                         </a>
                         <p>
-            A static demo of the <code>&lt;py-script&gt;</code> tag
+                            A static demo of the
+                            <code>&lt;py-script&gt;</code> tag
                         </p>
                     </div>
                 </div>
@@ -31,7 +32,8 @@
                             <h2>Simple clock</h2>
                         </a>
                         <p>
-            A dynamic demo of the <code>&lt;py-script&gt;</code> tag
+                            A dynamic demo of the
+                            <code>&lt;py-script&gt;</code> tag
                         </p>
                     </div>
                 </div>
@@ -41,9 +43,7 @@
                         <a href="./repl.html" target="_blank">
                             <h2>REPL</h2>
                         </a>
-          <p>
-            A Python REPL (Read Eval Print Loop)
-          </p>
+                        <p>A Python REPL (Read Eval Print Loop)</p>
                     </div>
                 </div>
 
@@ -53,7 +53,8 @@
                             <h2>REPL2</h2>
                         </a>
                         <p>
-              A Python REPL (Read Eval Print Loop) with slightly better formatting
+                            A Python REPL (Read Eval Print Loop) with slightly
+                            better formatting
                         </p>
                     </div>
                 </div>
@@ -63,9 +64,7 @@
                         <a href="./todo.html" target="_blank">
                             <h2>TODO App</h2>
                         </a>
-            <p>
-              Simple TODO App
-            </p>
+                        <p>Simple TODO App</p>
                     </div>
                 </div>
 
@@ -91,7 +90,11 @@
                             <h2>Matplotlib</h2>
                         </a>
                         <p>
-              Demonstrates rendering a <a href="https://matplotlib.org/" target="_blank">Matplotlib</a> figure as output of the py-script tag
+                            Demonstrates rendering a
+                            <a href="https://matplotlib.org/" target="_blank"
+                                >Matplotlib</a
+                            >
+                            figure as output of the py-script tag
                         </p>
                     </div>
                 </div>
@@ -99,12 +102,16 @@
                 <div class="card">
                     <div class="card-content">
                         <a href="./altair.html" target="_blank">
-              <h2>
-                Altair
-              </h2>
+                            <h2>Altair</h2>
                         </a>
                         <p>
-              Demonstrates rendering a <a href="https://altair-viz.github.io/" target="_blank">Altair</a> plot as output of the py-script tag
+                            Demonstrates rendering a
+                            <a
+                                href="https://altair-viz.github.io/"
+                                target="_blank"
+                                >Altair</a
+                            >
+                            plot as output of the py-script tag
                         </p>
                     </div>
                 </div>
@@ -112,13 +119,15 @@
                 <div class="card">
                     <div class="card-content">
                         <a href="./folium.html" target="_blank">
-            <h2>
-              Folium
-            </h2>
+                            <h2>Folium</h2>
                         </a>
                         <p>
                             Demonstrates rendering a
-            <a href="https://python-visualization.github.io/folium/" target="_blank">Folium</a>
+                            <a
+                                href="https://python-visualization.github.io/folium/"
+                                target="_blank"
+                                >Folium</a
+                            >
                             map as output of the py-script tag
                         </p>
                     </div>
@@ -132,12 +141,11 @@
                 <div class="card">
                     <div class="card-content">
                         <a href="./d3.html" target="_blank">
-              <h2>
-                Simple d3 visualization
-              </h2>
+                            <h2>Simple d3 visualization</h2>
                         </a>
                         <p>
-              Minimal <a href="https://d3js.org/" target="_blank">D3</a>
+                            Minimal
+                            <a href="https://d3js.org/" target="_blank">D3</a>
                             demo demonstrating how to create a visualization
                         </p>
                     </div>
@@ -146,13 +154,17 @@
                 <div class="card">
                     <div class="card-content">
                         <a href="./webgl/raycaster/index.html" target="_blank">
-              <h2>
-                Webgl Icosahedron Example
-              </h2>
+                            <h2>Webgl Icosahedron Example</h2>
                         </a>
                         <p>
-              Demo showing how a Simple <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API" target="_blank">WebGL</a>
-              scene would work in PyScript</code> tag
+                            Demo showing how a Simple
+                            <a
+                                href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API"
+                                target="_blank"
+                                >WebGL</a
+                            >
+                            scene would work in the
+                            <code>&lt;py-script&gt;</code> tag
                         </p>
                     </div>
                 </div>
@@ -165,13 +177,14 @@
                 <div class="card">
                     <div class="card-content">
                         <a href="./bokeh.html" target="_blank">
-              <h2>
-                Simple Static Bokeh Plot
-              </h2>
+                            <h2>Simple Static Bokeh Plot</h2>
                         </a>
                         <p>
-              Minimal Bokeh demo demonstrating how to create a simple
-              <a href="https://bokeh.org/" target="_blank">Bokeh</a>
+                            Minimal Bokeh demo demonstrating how to create a
+                            simple
+                            <a href="https://bokeh.org/" target="_blank"
+                                >Bokeh</a
+                            >
                             plot from code
                         </p>
                     </div>
@@ -186,9 +199,12 @@
                         </a>
                         <p>
                             Interactive demo using a
-              <a href="https://bokeh.org/" target="_blank">Bokeh</a>
-              slider widget to dynamically change a value in the page
-              WARNING: This examples takes a little longer to load. So be patient :)
+                            <a href="https://bokeh.org/" target="_blank"
+                                >Bokeh</a
+                            >
+                            slider widget to dynamically change a value in the
+                            page WARNING: This examples takes a little longer to
+                            load. So be patient :)
                         </p>
                     </div>
                 </div>
@@ -202,8 +218,11 @@
                         </a>
                         <p>
                             Interactive KMeans Chart using
-              <a href="https://panel.holoviz.org/" target="_blank">Panel</a>
-              WARNING: This examples takes a little longer to load. So be patient :)
+                            <a href="https://panel.holoviz.org/" target="_blank"
+                                >Panel</a
+                            >
+                            WARNING: This examples takes a little longer to
+                            load. So be patient :)
                         </p>
                     </div>
                 </div>
@@ -217,8 +236,11 @@
                         </a>
                         <p>
                             Interactive Streaming Table and Bokeh plot using
-              <a href="https://panel.holoviz.org/" target="_blank">Panel</a>
-              WARNING: This examples takes a little longer to load. So be patient :)
+                            <a href="https://panel.holoviz.org/" target="_blank"
+                                >Panel</a
+                            >
+                            WARNING: This examples takes a little longer to
+                            load. So be patient :)
                         </p>
                     </div>
                 </div>
@@ -232,9 +254,12 @@
                         </a>
                         <p>
                             Simple demo showing
-              <a href="https://panel.holoviz.org/" target="_blank">Panel</a>
-              widgets interacting with parts of the page
-              WARNING: This examples takes a little longer to load. So be patient :)
+                            <a href="https://panel.holoviz.org/" target="_blank"
+                                >Panel</a
+                            >
+                            widgets interacting with parts of the page WARNING:
+                            This examples takes a little longer to load. So be
+                            patient :)
                         </p>
                     </div>
                 </div>
@@ -247,9 +272,17 @@
                             </h2>
                         </a>
                         <p>
-              Interactive application exploring the NYC Taxi dataset using
-              <a href="https://panel.holoviz.org/" target="_blank">Panel</a> and <a href="https://deck.gl/" target="_blank">DeckGL</a>
-              WARNING: This examples takes a little longer to load. So be patient :)
+                            Interactive application exploring the NYC Taxi
+                            dataset using
+                            <a href="https://panel.holoviz.org/" target="_blank"
+                                >Panel</a
+                            >
+                            and
+                            <a href="https://deck.gl/" target="_blank"
+                                >DeckGL</a
+                            >
+                            WARNING: This examples takes a little longer to
+                            load. So be patient :)
                         </p>
                     </div>
                 </div>
@@ -263,8 +296,14 @@
                         </a>
                         <p>
                             Visualization of Mandelbrot and Julia sets with
-              <a href="https://numpy.org/" target="_blank">Numpy</a> and
-              <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">
+                            <a href="https://numpy.org/" target="_blank"
+                                >Numpy</a
+                            >
+                            and
+                            <a
+                                href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"
+                                target="_blank"
+                            >
                                 HTML5 canvas
                             </a>
                         </p>
@@ -272,5 +311,5 @@
                 </div>
             </div>
         </section>
-</body>
+    </body>
 </html>

examples/mario/css/game.css

@@ -1,4 +1,7 @@
-html, body, ul, li {
+html,
+body,
+ul,
+li {
     margin: 0;
     border: 0;
     padding: 0;

examples/mario/js/bcoin.js

@@ -1,21 +1,20 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Bcoin = Mario.Bcoin = function(pos) {
+    var Bcoin = (Mario.Bcoin = function (pos) {
         Mario.Entity.call(this, {
             pos: pos,
             sprite: level.bcoinSprite(),
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
+        });
     });
-  }
 
     Mario.Util.inherits(Bcoin, Mario.Entity);
 
     //I'm not sure whether it makes sense to use an array for vel and acc here
     //in order to keep with convention, or to just use a single value, since
     //it's literally impossible for these to move left or right.
-  Bcoin.prototype.spawn = function() {
+    Bcoin.prototype.spawn = function () {
         sounds.coin.currentTime = 0.05;
         sounds.coin.play();
         this.idx = level.items.length;
@@ -23,9 +22,9 @@
         this.active = true;
         this.vel = -12;
         this.targetpos = this.pos[1] - 32;
-  }
+    };
 
-  Bcoin.prototype.update = function(dt) {
+    Bcoin.prototype.update = function (dt) {
         if (!this.active) return;
 
         if (this.vel > 0 && this.pos[1] >= this.targetpos) {
@@ -38,8 +37,7 @@
         this.vel += this.acc;
         this.pos[1] += this.vel;
         this.sprite.update(dt);
-  }
-
-  Bcoin.prototype.checkCollisions = function() {;}
+    };
 
+    Bcoin.prototype.checkCollisions = function () {};
 })();

examples/mario/js/block.js

@@ -1,11 +1,10 @@
-(function() {
-  if (typeof Mario === 'undefined')
-    window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
     //TODO: clean up the logic for sprite switching.
     //TODO: There's a weird bug with the collision logic. Look into it.
 
-  var Block = Mario.Block = function(options) {
+    var Block = (Mario.Block = function (options) {
         this.item = options.item;
         this.usedSprite = options.usedSprite;
         this.bounceSprite = options.bounceSprite;
@@ -14,26 +13,27 @@
         Mario.Entity.call(this, {
             pos: options.pos,
             sprite: options.sprite,
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
         });
 
         this.standing = true;
-  }
+    });
 
     Mario.Util.inherits(Block, Mario.Floor);
 
-  Block.prototype.break = function() {
+    Block.prototype.break = function () {
         sounds.breakBlock.play();
-    (new Mario.Rubble()).spawn(this.pos);
-    var x = this.pos[0] / 16, y = this.pos[1] / 16;
+        new Mario.Rubble().spawn(this.pos);
+        var x = this.pos[0] / 16,
+            y = this.pos[1] / 16;
         delete level.blocks[y][x];
-  }
+    };
 
-  Block.prototype.bonk = function(power) {
+    Block.prototype.bonk = function (power) {
         sounds.bump.play();
         if (power > 0 && this.breakable) {
             this.break();
-    } else if (this.standing){
+        } else if (this.standing) {
             this.standing = false;
             if (this.item) {
                 this.item.spawn();
@@ -51,9 +51,9 @@
 
             this.vel[1] = -2;
         }
-  }
+    };
 
-  Block.prototype.update = function(dt, gameTime) {
+    Block.prototype.update = function (dt, gameTime) {
         if (!this.standing) {
             if (this.pos[1] < this.opos[1] - 8) {
                 this.vel[1] = 2;
@@ -68,14 +68,17 @@
             }
         } else {
             if (this.sprite === this.usedSprite) {
-        var x = this.pos[0] / 16, y = this.pos[1] / 16;
-        level.statics[y][x] = new Mario.Floor(this.pos, this.usedSprite);
+                var x = this.pos[0] / 16,
+                    y = this.pos[1] / 16;
+                level.statics[y][x] = new Mario.Floor(
+                    this.pos,
+                    this.usedSprite,
+                );
                 delete level.blocks[y][x];
             }
         }
 
         this.pos[1] += this.vel[1];
         this.sprite.update(dt, gameTime);
-  }
-
+    };
 })();

examples/mario/js/coin.js

@@ -1,47 +1,62 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Coin = Mario.Coin = function(pos, sprite) {
+    var Coin = (Mario.Coin = function (pos, sprite) {
         Mario.Entity.call(this, {
             pos: pos,
             sprite: sprite,
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
+        });
+        this.idx = level.items.length;
     });
-    this.idx = level.items.length
-  }
 
     Mario.Util.inherits(Coin, Mario.Entity);
 
-  Coin.prototype.isPlayerCollided = function() {
+    Coin.prototype.isPlayerCollided = function () {
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
-    var hpos2 = [player.pos[0] + player.hitbox[0], player.pos[1] + player.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
+        var hpos2 = [
+            player.pos[0] + player.hitbox[0],
+            player.pos[1] + player.hitbox[1],
+        ];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+player.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+player.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + player.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + player.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 this.collect();
             }
         }
-  }
+    };
 
-  Coin.prototype.render = function(ctx, vX, vY) {
+    Coin.prototype.render = function (ctx, vX, vY) {
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
-  }
+    };
 
     //money is not affected by gravity, you see.
-  Coin.prototype.update = function(dt) {
+    Coin.prototype.update = function (dt) {
         this.sprite.update(dt);
-  }
-  Coin.prototype.checkCollisions = function() {
+    };
+    Coin.prototype.checkCollisions = function () {
         this.isPlayerCollided();
-  }
+    };
 
-  Coin.prototype.collect = function() {
+    Coin.prototype.collect = function () {
         sounds.coin.currentTime = 0.05;
         sounds.coin.play();
         player.coins += 1;
-    delete level.items[this.idx]
-  }
+        delete level.items[this.idx];
+    };
 })();

examples/mario/js/entity.js

@@ -1,22 +1,21 @@
-(function() {
-	if (typeof Mario === 'undefined')
-		window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-	var Entity = Mario.Entity = function(options) {
-	  this.vel = [0,0];
-	  this.acc = [0,0];
+    var Entity = (Mario.Entity = function (options) {
+        this.vel = [0, 0];
+        this.acc = [0, 0];
         this.standing = true;
         this.pos = options.pos;
         this.sprite = options.sprite;
         this.hitbox = options.hitbox;
         this.left = false;
-	}
+    });
 
-	Entity.prototype.render = function(ctx, vX, vY) {
-		this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY)
-	}
+    Entity.prototype.render = function (ctx, vX, vY) {
+        this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
+    };
 
-	Entity.prototype.collideWall = function(wall) {
+    Entity.prototype.collideWall = function (wall) {
         //the wall will always be a 16x16 block with hitbox = [0,0,16,16].
         if (this.pos[0] > wall.pos[0]) {
             //from the right
@@ -24,11 +23,12 @@
             this.vel[0] = Math.max(0, this.vel[0]);
             this.acc[0] = Math.max(0, this.acc[0]);
         } else {
-			this.pos[0] = wall.pos[0] + wall.hitbox[0] - this.hitbox[2] - this.hitbox[0];
+            this.pos[0] =
+                wall.pos[0] + wall.hitbox[0] - this.hitbox[2] - this.hitbox[0];
             this.vel[0] = Math.min(0, this.vel[0]);
             this.acc[0] = Math.min(0, this.acc[0]);
         }
-	}
+    };
 
-	Entity.prototype.bump = function() {;}
+    Entity.prototype.bump = function () {};
 })();

examples/mario/js/fireball.js

@@ -1,21 +1,26 @@
-(function() {
-  if (typeof Mario === 'undefined')
-    window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Fireball = Mario.Fireball = function(pos) {
+    var Fireball = (Mario.Fireball = function (pos) {
         this.hit = 0;
         this.standing = false;
 
         Mario.Entity.call(this, {
             pos: pos,
-      sprite: new Mario.Sprite('sprites/items.png', [96, 144], [8,8], 5, [0,1,2,3]),
-      hitbox: [0,0,8,8]
+            sprite: new Mario.Sprite(
+                "sprites/items.png",
+                [96, 144],
+                [8, 8],
+                5,
+                [0, 1, 2, 3],
+            ),
+            hitbox: [0, 0, 8, 8],
+        });
     });
-  }
 
     Mario.Util.inherits(Fireball, Mario.Entity);
 
-  Fireball.prototype.spawn = function(left) {
+    Fireball.prototype.spawn = function (left) {
         sounds.fireball.currentTime = 0;
         sounds.fireball.play();
         if (fireballs[0]) {
@@ -25,20 +30,20 @@
             this.idx = 0;
             fireballs[0] = this;
         }
-    this.vel[0] = (left ? -5 : 5);
+        this.vel[0] = left ? -5 : 5;
         this.standing = false;
         this.vel[1] = 0;
-  }
+    };
 
-  Fireball.prototype.render = function(ctx, vX, vY) {
+    Fireball.prototype.render = function (ctx, vX, vY) {
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
-  }
+    };
 
-  Fireball.prototype.update = function(dt) {
+    Fireball.prototype.update = function (dt) {
         if (this.hit == 1) {
             this.sprite.pos = [96, 160];
-      this.sprite.size = [16,16];
-      this.sprite.frames = [0,1,2];
+            this.sprite.size = [16, 16];
+            this.sprite.frames = [0, 1, 2];
             this.sprite.speed = 8;
             this.hit += 1;
             return;
@@ -67,13 +72,13 @@
             this.hit = 1;
         }
         this.sprite.update(dt);
-  }
+    };
 
-  Fireball.prototype.collideWall = function() {
+    Fireball.prototype.collideWall = function () {
         if (!this.hit) this.hit = 1;
-  }
+    };
 
-  Fireball.prototype.checkCollisions = function() {
+    Fireball.prototype.checkCollisions = function () {
         if (this.hit) return;
         var h = this.pos[1] % 16 < 8 ? 1 : 2;
         var w = this.pos[0] % 16 < 8 ? 1 : 2;
@@ -99,28 +104,42 @@
         }
 
         var that = this;
-    level.enemies.forEach(function(enemy){
-      if (enemy.flipping || enemy.pos[0] - vX > 336){ //stop checking once we get to far away dudes.
+        level.enemies.forEach(function (enemy) {
+            if (enemy.flipping || enemy.pos[0] - vX > 336) {
+                //stop checking once we get to far away dudes.
                 return;
             } else {
                 that.isCollideWith(enemy);
             }
         });
-  }
+    };
 
-  Fireball.prototype.isCollideWith = function(ent) {
+    Fireball.prototype.isCollideWith = function (ent) {
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
         var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+ent.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+ent.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + ent.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + ent.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 this.hit = 1;
                 ent.bump();
             }
         }
     };
 
-  Fireball.prototype.bump = function() {;}
+    Fireball.prototype.bump = function () {};
 })();

examples/mario/js/fireflower.js

@@ -1,26 +1,25 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Fireflower = Mario.Fireflower = function(pos) {
+    var Fireflower = (Mario.Fireflower = function (pos) {
         this.spawning = false;
         this.waiting = 0;
 
         Mario.Entity.call(this, {
             pos: pos,
             sprite: level.fireFlowerSprite,
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
+        });
     });
-  }
 
     Mario.Util.inherits(Fireflower, Mario.Entity);
 
-  Fireflower.prototype.render = function(ctx, vX, vY) {
+    Fireflower.prototype.render = function (ctx, vX, vY) {
         if (this.spawning > 1) return;
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
-  }
+    };
 
-  Fireflower.prototype.spawn = function() {
+    Fireflower.prototype.spawn = function () {
         sounds.itemAppear.play();
         this.idx = level.items.length;
         level.items.push(this);
@@ -28,12 +27,12 @@
         this.targetpos = [];
         this.targetpos[0] = this.pos[0];
         this.targetpos[1] = this.pos[1] - 16;
-  }
+    };
 
-  Fireflower.prototype.update = function(dt) {
+    Fireflower.prototype.update = function (dt) {
         if (this.spawning > 1) {
             this.spawning -= 1;
-      if (this.spawning == 1) this.vel[1] = -.5;
+            if (this.spawning == 1) this.vel[1] = -0.5;
             return;
         }
         if (this.spawning) {
@@ -48,27 +47,44 @@
         this.pos[0] += this.vel[0];
         this.pos[1] += this.vel[1];
         this.sprite.update(dt);
-  }
+    };
 
-  Fireflower.prototype.checkCollisions = function() {
-    if (this.spawning) {return;}
+    Fireflower.prototype.checkCollisions = function () {
+        if (this.spawning) {
+            return;
+        }
         this.isPlayerCollided();
-  }
+    };
 
-  Fireflower.prototype.isPlayerCollided = function() {
+    Fireflower.prototype.isPlayerCollided = function () {
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
-    var hpos2 = [player.pos[0] + player.hitbox[0], player.pos[1] + player.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
+        var hpos2 = [
+            player.pos[0] + player.hitbox[0],
+            player.pos[1] + player.hitbox[1],
+        ];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+player.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+player.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + player.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + player.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 player.powerUp(this.idx);
             }
         }
-  }
+    };
 
     //This should never be called, but just in case.
-  Fireflower.prototype.bump = function() {;}
-
+    Fireflower.prototype.bump = function () {};
 })();

examples/mario/js/flag.js

@@ -1,47 +1,51 @@
-(function() {
-  if (typeof Mario === 'undefined')
-    window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  Flag = Mario.Flag = function(pos) {
+    Flag = Mario.Flag = function (pos) {
         //afaik flags always have the same height and Y-position
         this.pos = [pos, 49];
-    this.hitbox = [0,0,0,0];
-    this.vel = [0,0];
-    this.acc = [0,0];
-  }
+        this.hitbox = [0, 0, 0, 0];
+        this.vel = [0, 0];
+        this.acc = [0, 0];
+    };
 
-  Flag.prototype.collideWall = function() {;
-  }
+    Flag.prototype.collideWall = function () {};
 
-  Flag.prototype.update = function(dt){
+    Flag.prototype.update = function (dt) {
         if (!this.done && this.pos[1] >= 170) {
-      this.vel = [0,0];
+            this.vel = [0, 0];
             this.pos[1] = 170;
             player.exit();
             this.done = true;
         }
         this.pos[1] += this.vel[1];
-  }
+    };
 
-  Flag.prototype.checkCollisions = function() {
+    Flag.prototype.checkCollisions = function () {
         this.isPlayerCollided();
-  }
+    };
 
-  Flag.prototype.isPlayerCollided = function() {
+    Flag.prototype.isPlayerCollided = function () {
         if (this.hit) return;
         if (player.pos[0] + 8 >= this.pos[0]) {
             music.overworld.pause();
             sounds.flagpole.play();
-      setTimeout(function() {
+            setTimeout(function () {
                 music.clear.play();
             }, 2000);
             this.hit = true;
             player.flag();
             this.vel = [0, 2];
         }
-  }
+    };
 
-  Flag.prototype.render = function() {
-    level.flagpoleSprites[2].render(ctx, this.pos[0]-8, this.pos[1], vX, vY);
-  }
+    Flag.prototype.render = function () {
+        level.flagpoleSprites[2].render(
+            ctx,
+            this.pos[0] - 8,
+            this.pos[1],
+            vX,
+            vY,
+        );
+    };
 })();

examples/mario/js/floor.js

@@ -1,41 +1,68 @@
-(function() {
-	if (typeof Mario === 'undefined')
-		window.Mario = {};
-
-	var Floor = Mario.Floor = function(pos, sprite) {
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
+    var Floor = (Mario.Floor = function (pos, sprite) {
         Mario.Entity.call(this, {
             pos: pos,
             sprite: sprite,
-			hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
+        });
     });
-	}
 
     Mario.Util.inherits(Floor, Mario.Entity);
 
     Floor.prototype.isCollideWith = function (ent) {
         //the first two elements of the hitbox array are an offset, so let's do this now.
-		var hpos1 = [Math.floor(this.pos[0] + this.hitbox[0]), Math.floor(this.pos[1] + this.hitbox[1])];
-		var hpos2 = [Math.floor(ent.pos[0] + ent.hitbox[0]), Math.floor(ent.pos[1] + ent.hitbox[1])];
+        var hpos1 = [
+            Math.floor(this.pos[0] + this.hitbox[0]),
+            Math.floor(this.pos[1] + this.hitbox[1]),
+        ];
+        var hpos2 = [
+            Math.floor(ent.pos[0] + ent.hitbox[0]),
+            Math.floor(ent.pos[1] + ent.hitbox[1]),
+        ];
 
         //if the hitboxes actually overlap
-		if (!(hpos1[0] > hpos2[0]+ent.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-			if (!(hpos1[1] > hpos2[1]+ent.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + ent.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + ent.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 if (!this.standing) {
                     ent.bump();
                 } else {
                     //if the entity is over the block, it's basically floor
                     var center = hpos2[0] + ent.hitbox[2] / 2;
-					if (Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]) {
-						if (level.statics[(this.pos[1] / 16) - 1][this.pos[0] / 16]) {return};
+                    if (
+                        Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <=
+                        ent.vel[1]
+                    ) {
+                        if (
+                            level.statics[this.pos[1] / 16 - 1][
+                                this.pos[0] / 16
+                            ]
+                        ) {
+                            return;
+                        }
                         ent.vel[1] = 0;
                         ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
                         ent.standing = true;
                         if (ent instanceof Mario.Player) {
                             ent.jumping = 0;
                         }
-					} else if (Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) > ent.vel[1] &&
-					center + 2 >= hpos1[0] && center - 2 <= hpos1[0] + this.hitbox[2]) {
+                    } else if (
+                        Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
+                            ent.vel[1] &&
+                        center + 2 >= hpos1[0] &&
+                        center - 2 <= hpos1[0] + this.hitbox[2]
+                    ) {
                         //ent is under the block.
                         ent.vel[1] = 0;
                         ent.pos[1] = hpos1[1] + this.hitbox[3];
@@ -50,7 +77,7 @@
                 }
             }
         }
-	}
+    };
 
-	Floor.prototype.bonk = function() {;}
+    Floor.prototype.bonk = function () {};
 })();

examples/mario/js/game.js

@@ -1,20 +1,22 @@
-var requestAnimFrame = (function(){
-  return window.requestAnimationFrame       ||
+var requestAnimFrame = (function () {
+    return (
+        window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
-    function(callback){
+        function (callback) {
             window.setTimeout(callback, 1000 / 60);
-    };
+        }
+    );
 })();
 
 //create the canvas
 var canvas = document.createElement("canvas");
-var ctx = canvas.getContext('2d');
+var ctx = canvas.getContext("2d");
 var updateables = [];
 var fireballs = [];
-var player = new Mario.Player([0,0]);
+var player = new Mario.Player([0, 0]);
 
 //we might have to get the size and calculate the scaling
 //but this method should let us make it however big.
@@ -23,7 +25,7 @@ var player = new Mario.Player([0,0]);
 //TODO: fiddling with scaled sprites looks BETTER, but not perfect. Hmm.
 canvas.width = 762;
 canvas.height = 720;
-ctx.scale(3,3);
+ctx.scale(3, 3);
 document.body.appendChild(canvas);
 
 //viewport
@@ -34,12 +36,12 @@ var vX = 0,
 
 //load our images
 resources.load([
-  'sprites/player.png',
-  'sprites/enemy.png',
-  'sprites/tiles.png',
-  'sprites/playerl.png',
-  'sprites/items.png',
-  'sprites/enemyr.png',
+    "sprites/player.png",
+    "sprites/enemy.png",
+    "sprites/tiles.png",
+    "sprites/playerl.png",
+    "sprites/items.png",
+    "sprites/enemyr.png",
 ]);
 
 resources.onReady(init);
@@ -51,24 +53,24 @@ var music;
 var lastTime;
 function init() {
     music = {
-    overworld: new Audio('sounds/aboveground_bgm.ogg'),
-    underground: new Audio('sounds/underground_bgm.ogg'),
-    clear: new Audio('sounds/stage_clear.wav'),
-    death: new Audio('sounds/mariodie.wav')
+        overworld: new Audio("sounds/aboveground_bgm.ogg"),
+        underground: new Audio("sounds/underground_bgm.ogg"),
+        clear: new Audio("sounds/stage_clear.wav"),
+        death: new Audio("sounds/mariodie.wav"),
     };
     sounds = {
-    smallJump: new Audio('sounds/jump-small.wav'),
-    bigJump: new Audio('sounds/jump-super.wav'),
-    breakBlock: new Audio('sounds/breakblock.wav'),
-    bump: new Audio('sounds/bump.wav'),
-    coin: new Audio('sounds/coin.wav'),
-    fireball: new Audio('sounds/fireball.wav'),
-    flagpole: new Audio('sounds/flagpole.wav'),
-    kick: new Audio('sounds/kick.wav'),
-    pipe: new Audio('sounds/pipe.wav'),
-    itemAppear: new Audio('sounds/itemAppear.wav'),
-    powerup: new Audio('sounds/powerup.wav'),
-    stomp: new Audio('sounds/stomp.wav')
+        smallJump: new Audio("sounds/jump-small.wav"),
+        bigJump: new Audio("sounds/jump-super.wav"),
+        breakBlock: new Audio("sounds/breakblock.wav"),
+        bump: new Audio("sounds/bump.wav"),
+        coin: new Audio("sounds/coin.wav"),
+        fireball: new Audio("sounds/fireball.wav"),
+        flagpole: new Audio("sounds/flagpole.wav"),
+        kick: new Audio("sounds/kick.wav"),
+        pipe: new Audio("sounds/pipe.wav"),
+        itemAppear: new Audio("sounds/itemAppear.wav"),
+        powerup: new Audio("sounds/powerup.wav"),
+        stomp: new Audio("sounds/stomp.wav"),
     };
     Mario.oneone();
     lastTime = Date.now();
@@ -101,28 +103,29 @@ function update(dt) {
 function handleInput(dt) {
     if (player.piping || player.dying || player.noInput) return; //don't accept input
 
-  if (input.isDown('RUN')){
+    if (input.isDown("RUN")) {
         player.run();
     } else {
         player.noRun();
     }
-  if (input.isDown('JUMP')) {
+    if (input.isDown("JUMP")) {
         player.jump();
     } else {
         //we need this to handle the timing for how long you hold it
         player.noJump();
     }
 
-  if (input.isDown('DOWN')) {
+    if (input.isDown("DOWN")) {
         player.crouch();
     } else {
         player.noCrouch();
     }
 
-  if (input.isDown('LEFT')) { // 'd' or left arrow
+    if (input.isDown("LEFT")) {
+        // 'd' or left arrow
         player.moveLeft();
-  }
-  else if (input.isDown('RIGHT')) { // 'k' or right arrow
+    } else if (input.isDown("RIGHT")) {
+        // 'k' or right arrow
         player.moveRight();
     } else {
         player.noWalk();
@@ -132,51 +135,54 @@ function handleInput(dt) {
 //update all the moving stuff
 function updateEntities(dt, gameTime) {
     player.update(dt, vX);
-  updateables.forEach (function(ent) {
+    updateables.forEach(function (ent) {
         ent.update(dt, gameTime);
     });
 
     //This should stop the jump when he switches sides on the flag.
     if (player.exiting) {
-    if (player.pos[0] > vX + 96)
-      vX = player.pos[0] - 96
-  }else if (level.scrolling && player.pos[0] > vX + 80) {
+        if (player.pos[0] > vX + 96) vX = player.pos[0] - 96;
+    } else if (level.scrolling && player.pos[0] > vX + 80) {
         vX = player.pos[0] - 80;
     }
 
-  if (player.powering.length !== 0 || player.dying) { return; }
-  level.items.forEach (function(ent) {
+    if (player.powering.length !== 0 || player.dying) {
+        return;
+    }
+    level.items.forEach(function (ent) {
         ent.update(dt);
     });
 
-  level.enemies.forEach (function(ent) {
+    level.enemies.forEach(function (ent) {
         ent.update(dt, vX);
     });
 
-  fireballs.forEach(function(fireball) {
+    fireballs.forEach(function (fireball) {
         fireball.update(dt);
     });
-  level.pipes.forEach (function(pipe) {
+    level.pipes.forEach(function (pipe) {
         pipe.update(dt);
     });
 }
 
 //scan for collisions
 function checkCollisions() {
-  if (player.powering.length !== 0 || player.dying) { return; }
+    if (player.powering.length !== 0 || player.dying) {
+        return;
+    }
     player.checkCollisions();
 
     //Apparently for each will just skip indices where things were deleted.
-  level.items.forEach(function(item) {
+    level.items.forEach(function (item) {
         item.checkCollisions();
     });
-  level.enemies.forEach (function(ent) {
+    level.enemies.forEach(function (ent) {
         ent.checkCollisions();
     });
-  fireballs.forEach(function(fireball){
+    fireballs.forEach(function (fireball) {
         fireball.checkCollisions();
     });
-  level.pipes.forEach (function(pipe) {
+    level.pipes.forEach(function (pipe) {
         pipe.checkCollisions();
     });
 }
@@ -189,8 +195,12 @@ function render() {
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     //scenery gets drawn first to get layering right.
-  for(var i = 0; i < 15; i++) {
-    for (var j = Math.floor(vX / 16) - 1; j < Math.floor(vX / 16) + 20; j++){
+    for (var i = 0; i < 15; i++) {
+        for (
+            var j = Math.floor(vX / 16) - 1;
+            j < Math.floor(vX / 16) + 20;
+            j++
+        ) {
             if (level.scenery[i][j]) {
                 renderEntity(level.scenery[i][j]);
             }
@@ -198,23 +208,25 @@ function render() {
     }
 
     //then items
-  level.items.forEach (function (item) {
+    level.items.forEach(function (item) {
         renderEntity(item);
     });
 
-  level.enemies.forEach (function(enemy) {
+    level.enemies.forEach(function (enemy) {
         renderEntity(enemy);
     });
 
-
-
-  fireballs.forEach(function(fireball) {
+    fireballs.forEach(function (fireball) {
         renderEntity(fireball);
-  })
+    });
 
     //then we draw every static object.
-  for(var i = 0; i < 15; i++) {
-    for (var j = Math.floor(vX / 16) - 1; j < Math.floor(vX / 16) + 20; j++){
+    for (var i = 0; i < 15; i++) {
+        for (
+            var j = Math.floor(vX / 16) - 1;
+            j < Math.floor(vX / 16) + 20;
+            j++
+        ) {
             if (level.statics[i][j]) {
                 renderEntity(level.statics[i][j]);
             }
@@ -231,7 +243,7 @@ function render() {
     }
 
     //Mario goes INTO pipes, so naturally they go after.
-  level.pipes.forEach (function(pipe) {
+    level.pipes.forEach(function (pipe) {
         renderEntity(pipe);
     });
 }

examples/mario/js/goomba.js

@@ -1,26 +1,26 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
     //TODO: On console the hitbox is smaller. Measure it and edit this.
 
-  var Goomba = Mario.Goomba = function(pos, sprite) {
+    var Goomba = (Mario.Goomba = function (pos, sprite) {
         this.dying = false;
         Mario.Entity.call(this, {
             pos: pos,
             sprite: sprite,
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
         });
         this.vel[0] = -0.5;
         this.idx = level.enemies.length;
-  };
+    });
 
-  Goomba.prototype.render = function(ctx, vX, vY) {
+    Goomba.prototype.render = function (ctx, vX, vY) {
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
     };
 
-  Goomba.prototype.update = function(dt, vX) {
-    if (this.pos[0] - vX > 336) { //if we're too far away, do nothing.
+    Goomba.prototype.update = function (dt, vX) {
+        if (this.pos[0] - vX > 336) {
+            //if we're too far away, do nothing.
             return;
         } else if (this.pos[0] - vX < -32) {
             delete level.enemies[this.idx];
@@ -39,11 +39,11 @@
         this.sprite.update(dt);
     };
 
-  Goomba.prototype.collideWall = function() {
+    Goomba.prototype.collideWall = function () {
         this.vel[0] = -this.vel[0];
     };
 
-  Goomba.prototype.checkCollisions = function() {
+    Goomba.prototype.checkCollisions = function () {
         if (this.flipping) {
             return;
         }
@@ -70,10 +70,12 @@
             }
         }
         var that = this;
-    level.enemies.forEach(function(enemy){
-      if (enemy === that) { //don't check collisions with ourselves.
+        level.enemies.forEach(function (enemy) {
+            if (enemy === that) {
+                //don't check collisions with ourselves.
                 return;
-      } else if (enemy.pos[0] - vX > 336){ //stop checking once we get to far away dudes.
+            } else if (enemy.pos[0] - vX > 336) {
+                //stop checking once we get to far away dudes.
                 return;
             } else {
                 that.isCollideWith(enemy);
@@ -82,24 +84,40 @@
         this.isCollideWith(player);
     };
 
-  Goomba.prototype.isCollideWith = function(ent) {
+    Goomba.prototype.isCollideWith = function (ent) {
         if (ent instanceof Mario.Player && (this.dying || ent.invincibility)) {
             return;
         }
 
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
         var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+ent.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+ent.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
-        if (ent instanceof Mario.Player) { //if we hit the player
-          if (ent.vel[1] > 0) { //then the goomba dies
+        if (
+            !(
+                hpos1[0] > hpos2[0] + ent.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + ent.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
+                if (ent instanceof Mario.Player) {
+                    //if we hit the player
+                    if (ent.vel[1] > 0) {
+                        //then the goomba dies
                         this.stomp();
                     } else if (ent.starTime) {
                         this.bump();
-          } else { //or the player gets hit
+                    } else {
+                        //or the player gets hit
                         ent.damage();
                     }
                 } else {
@@ -109,7 +127,7 @@
         }
     };
 
-  Goomba.prototype.stomp = function() {
+    Goomba.prototype.stomp = function () {
         sounds.stomp.play();
         player.bounce = true;
         this.sprite.pos[0] = 32;
@@ -118,9 +136,9 @@
         this.dying = 10;
     };
 
-  Goomba.prototype.bump = function() {
+    Goomba.prototype.bump = function () {
         sounds.kick.play();
-    this.sprite.img = 'sprites/enemyr.png';
+        this.sprite.img = "sprites/enemyr.png";
         this.flipping = true;
         this.pos[1] -= 1;
         this.vel[0] = 0;

examples/mario/js/input.js

@@ -1,25 +1,32 @@
-(function() {
+(function () {
     var pressedKeys = {};
 
     function setKey(event, status) {
         var code = event.keyCode;
         var key;
 
-        switch(code) {
+        switch (code) {
             case 32:
-            key = 'SPACE'; break;
+                key = "SPACE";
+                break;
             case 37:
-            key = 'LEFT'; break;
+                key = "LEFT";
+                break;
             case 38:
-            key = 'UP'; break;
+                key = "UP";
+                break;
             case 39:
-            key = 'RIGHT'; break;
+                key = "RIGHT";
+                break;
             case 40:
-            key = 'DOWN'; break;
+                key = "DOWN";
+                break;
             case 88:
-            key = 'JUMP'; break;
+                key = "JUMP";
+                break;
             case 90:
-            key = 'RUN'; break;
+                key = "RUN";
+                break;
             default:
                 key = String.fromCharCode(code);
         }
@@ -27,28 +34,28 @@
         pressedKeys[key] = status;
     }
 
-    document.addEventListener('keydown', function(e) {
+    document.addEventListener("keydown", function (e) {
         setKey(e, true);
     });
 
-    document.addEventListener('keyup', function(e) {
+    document.addEventListener("keyup", function (e) {
         setKey(e, false);
     });
 
-    window.addEventListener('blur', function() {
+    window.addEventListener("blur", function () {
         pressedKeys = {};
     });
 
     window.input = {
-        isDown: function(key) {
+        isDown: function (key) {
             return pressedKeys[key.toUpperCase()];
         },
-        reset: function() {
-          pressedKeys['RUN'] = false;
-          pressedKeys['LEFT'] = false;
-          pressedKeys['RIGHT'] = false;
-          pressedKeys['DOWN'] = false;
-          pressedKeys['JUMP'] = false;
-        }
+        reset: function () {
+            pressedKeys["RUN"] = false;
+            pressedKeys["LEFT"] = false;
+            pressedKeys["RIGHT"] = false;
+            pressedKeys["DOWN"] = false;
+            pressedKeys["JUMP"] = false;
+        },
     };
 })();

examples/mario/js/koopa.js

@@ -1,8 +1,7 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Koopa = Mario.Koopa = function(pos, sprite, para) {
+    var Koopa = (Mario.Koopa = function (pos, sprite, para) {
         this.dying = false;
         this.shell = false;
 
@@ -14,33 +13,34 @@
         Mario.Entity.call(this, {
             pos: pos,
             sprite: sprite,
-      hitbox: [2,8,12,24]
+            hitbox: [2, 8, 12, 24],
         });
         this.vel[0] = -0.5;
         this.idx = level.enemies.length;
-  };
+    });
 
-  Koopa.prototype.render = function(ctx, vX, vY) {
+    Koopa.prototype.render = function (ctx, vX, vY) {
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
     };
 
-  Koopa.prototype.update = function(dt, vX) {
+    Koopa.prototype.update = function (dt, vX) {
         if (this.turn) {
             this.vel[0] = -this.vel[0];
             if (this.shell) sounds.bump.play();
             this.turn = false;
         }
         if (this.vel[0] != 0) {
-      this.left = (this.vel[0] < 0);
+            this.left = this.vel[0] < 0;
         }
 
         if (this.left) {
-      this.sprite.img = 'sprites/enemy.png';
+            this.sprite.img = "sprites/enemy.png";
         } else {
-      this.sprite.img = 'sprites/enemyr.png';
+            this.sprite.img = "sprites/enemyr.png";
         }
 
-    if (this.pos[0] - vX > 336) { //if we're too far away, do nothing.
+        if (this.pos[0] - vX > 336) {
+            //if we're too far away, do nothing.
             return;
         } else if (this.pos[0] - vX < -32) {
             delete level.enemies[this.idx];
@@ -61,9 +61,9 @@
                 }
                 if (this.shell == 0) {
                     this.sprite = level.koopaSprite();
-          this.hitbox = [2,8,12,24]
+                    this.hitbox = [2, 8, 12, 24];
                     if (this.left) {
-            this.sprite.img = 'sprites/enemyr.png';
+                        this.sprite.img = "sprites/enemyr.png";
                         this.vel[0] = 0.5;
                         this.left = false;
                     } else {
@@ -85,13 +85,13 @@
         this.sprite.update(dt);
     };
 
-  Koopa.prototype.collideWall = function() {
+    Koopa.prototype.collideWall = function () {
         //This stops us from flipping twice on the same frame if we collide
         //with multiple wall tiles simultaneously.
         this.turn = true;
     };
 
-  Koopa.prototype.checkCollisions = function() {
+    Koopa.prototype.checkCollisions = function () {
         var h = this.shell ? 1 : 2;
         if (this.pos[1] % 16 !== 0) {
             h += 1;
@@ -121,10 +121,12 @@
             }
         }
         var that = this;
-    level.enemies.forEach(function(enemy){
-      if (enemy === that) { //don't check collisions with ourselves.
+        level.enemies.forEach(function (enemy) {
+            if (enemy === that) {
+                //don't check collisions with ourselves.
                 return;
-      } else if (enemy.pos[0] - vX > 336){ //stop checking once we get to far away dudes.
+            } else if (enemy.pos[0] - vX > 336) {
+                //stop checking once we get to far away dudes.
                 return;
             } else {
                 that.isCollideWith(enemy);
@@ -133,18 +135,31 @@
         this.isCollideWith(player);
     };
 
-  Koopa.prototype.isCollideWith = function(ent) {
+    Koopa.prototype.isCollideWith = function (ent) {
         if (ent instanceof Mario.Player && (this.dying || ent.invincibility)) {
             return;
         }
 
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
         var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+ent.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+ent.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + ent.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + ent.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 if (ent instanceof Mario.Player) {
                     if (ent.vel[1] > 0) {
                         player.bounce = true;
@@ -152,7 +167,8 @@
                     if (this.shell) {
                         sounds.kick.play();
                         if (this.vel[0] === 0) {
-              if (ent.left) { //I'm pretty sure this isn't the real logic.
+                            if (ent.left) {
+                                //I'm pretty sure this isn't the real logic.
                                 this.vel[0] = -4;
                             } else {
                                 this.vel[0] = 4;
@@ -162,13 +178,15 @@
                                 this.vel[0] = 0;
                             } else ent.damage();
                         }
-          } else if (ent.vel[1] > 0) { //then we get BOPPED.
+                    } else if (ent.vel[1] > 0) {
+                        //then we get BOPPED.
                         this.stomp();
-          } else { //or the player gets hit
+                    } else {
+                        //or the player gets hit
                         ent.damage();
                     }
                 } else {
-          if (this.shell && (ent instanceof Mario.Goomba)) {
+                    if (this.shell && ent instanceof Mario.Goomba) {
                         ent.bump();
                     } else this.collideWall();
                 }
@@ -176,7 +194,7 @@
         }
     };
 
-  Koopa.prototype.stomp = function() {
+    Koopa.prototype.stomp = function () {
         //Turn this thing into a shell if it isn't already. Kick it if it is.
         player.bounce = true;
         if (this.para) {
@@ -187,22 +205,21 @@
             this.shell = 360;
             this.sprite.pos[0] += 64;
             this.sprite.pos[1] += 16;
-      this.sprite.size = [16,16];
-      this.hitbox = [2,0,12,16];
+            this.sprite.size = [16, 16];
+            this.hitbox = [2, 0, 12, 16];
             this.sprite.speed = 0;
-      this.frames = [0,1];
-      this.vel = [0,0];
+            this.frames = [0, 1];
+            this.vel = [0, 0];
             this.pos[1] += 16;
         }
-
     };
 
-  Koopa.prototype.bump = function() {
+    Koopa.prototype.bump = function () {
         sounds.kick.play();
         if (this.flipping) return;
         this.flipping = true;
         this.sprite.pos = [160, 0];
-    this.sprite.size = [16,16];
+        this.sprite.size = [16, 16];
         this.hitbox = [2, 0, 12, 16];
         this.sprite.speed = 0;
         this.vel[0] = 0;

examples/mario/js/levels/11.js

@@ -1,117 +1,239 @@
-var oneone = Mario.oneone = function() {
+var oneone = (Mario.oneone = function () {
     //The things that need to be passed in are basically just dependent on what
     //tileset we're in, so it makes more sense to just make one variable for that, so
     //TODO: put as much of this in the Level object definition as possible.
     level = new Mario.Level({
-    playerPos: [56,192],
+        playerPos: [56, 192],
         loader: Mario.oneone,
         background: "#7974FF",
         scrolling: true,
         invincibility: [144, 192, 240],
         exit: 204,
-    floorSprite:  new Mario.Sprite('sprites/tiles.png', [0,0],[16,16],0),
-    cloudSprite:  new Mario.Sprite('sprites/tiles.png', [0,320],[48,32],0),
-    wallSprite: new Mario.Sprite('sprites/tiles.png', [0, 16],[16,16],0),
-    brickSprite: new Mario.Sprite('sprites/tiles.png', [16, 0], [16,16], 0),
-    brickBounceSprite: new Mario.Sprite('sprites/tiles.png',[32,0],[16,16],0),
+        floorSprite: new Mario.Sprite("sprites/tiles.png", [0, 0], [16, 16], 0),
+        cloudSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 320],
+            [48, 32],
+            0,
+        ),
+        wallSprite: new Mario.Sprite("sprites/tiles.png", [0, 16], [16, 16], 0),
+        brickSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 0],
+            [16, 16],
+            0,
+        ),
+        brickBounceSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [32, 0],
+            [16, 16],
+            0,
+        ),
         rubbleSprite: function () {
-      return new Mario.Sprite('sprites/items.png', [64,0], [8,8], 3, [0,1])
+            return new Mario.Sprite(
+                "sprites/items.png",
+                [64, 0],
+                [8, 8],
+                3,
+                [0, 1],
+            );
         },
-    ublockSprite: new Mario.Sprite('sprites/tiles.png', [48, 0], [16,16],0),
-    superShroomSprite: new Mario.Sprite('sprites/items.png', [0,0], [16,16], 0),
-    fireFlowerSprite: new Mario.Sprite('sprites/items.png', [0,32], [16,16], 20, [0,1,2,3]),
-    starSprite: new Mario.Sprite('sprites/items.png', [0,48], [16,16], 20, [0,1,2,3]),
-    pipeLEndSprite: new Mario.Sprite('sprites/tiles.png', [0, 128], [16,16], 0),
-    pipeREndSprite: new Mario.Sprite('sprites/tiles.png', [16, 128], [16,16], 0),
-    pipeLMidSprite: new Mario.Sprite('sprites/tiles.png', [0, 144], [16,16], 0),
-    pipeRMidSprite: new Mario.Sprite('sprites/tiles.png', [16, 144], [16,16], 0),
+        ublockSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [48, 0],
+            [16, 16],
+            0,
+        ),
+        superShroomSprite: new Mario.Sprite(
+            "sprites/items.png",
+            [0, 0],
+            [16, 16],
+            0,
+        ),
+        fireFlowerSprite: new Mario.Sprite(
+            "sprites/items.png",
+            [0, 32],
+            [16, 16],
+            20,
+            [0, 1, 2, 3],
+        ),
+        starSprite: new Mario.Sprite(
+            "sprites/items.png",
+            [0, 48],
+            [16, 16],
+            20,
+            [0, 1, 2, 3],
+        ),
+        pipeLEndSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 128],
+            [16, 16],
+            0,
+        ),
+        pipeREndSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 128],
+            [16, 16],
+            0,
+        ),
+        pipeLMidSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 144],
+            [16, 16],
+            0,
+        ),
+        pipeRMidSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 144],
+            [16, 16],
+            0,
+        ),
 
-    pipeUpMid: new Mario.Sprite('sprites/tiles.png', [0, 144], [32,16], 0),
-    pipeSideMid: new Mario.Sprite('sprites/tiles.png', [48, 128], [16,32], 0),
-    pipeLeft: new Mario.Sprite('sprites/tiles.png', [32, 128], [16,32], 0),
-    pipeTop: new Mario.Sprite('sprites/tiles.png', [0, 128], [32,16], 0),
-    qblockSprite: new Mario.Sprite('sprites/tiles.png', [384, 0], [16,16], 8, [0,0,0,0,1,2,1]),
-    bcoinSprite: function() {
-      return new Mario.Sprite('sprites/items.png', [0,112],[16,16], 20,[0,1,2,3]);
+        pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
+        pipeSideMid: new Mario.Sprite(
+            "sprites/tiles.png",
+            [48, 128],
+            [16, 32],
+            0,
+        ),
+        pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
+        pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),
+        qblockSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [384, 0],
+            [16, 16],
+            8,
+            [0, 0, 0, 0, 1, 2, 1],
+        ),
+        bcoinSprite: function () {
+            return new Mario.Sprite(
+                "sprites/items.png",
+                [0, 112],
+                [16, 16],
+                20,
+                [0, 1, 2, 3],
+            );
         },
-    cloudSprites:[
-      new Mario.Sprite('sprites/tiles.png', [0,320],[16,32],0),
-      new Mario.Sprite('sprites/tiles.png', [16,320],[16,32],0),
-      new Mario.Sprite('sprites/tiles.png', [32,320],[16,32],0)
+        cloudSprites: [
+            new Mario.Sprite("sprites/tiles.png", [0, 320], [16, 32], 0),
+            new Mario.Sprite("sprites/tiles.png", [16, 320], [16, 32], 0),
+            new Mario.Sprite("sprites/tiles.png", [32, 320], [16, 32], 0),
         ],
         hillSprites: [
-      new Mario.Sprite('sprites/tiles.png', [128,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [144,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [160,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [128,144],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [144,144],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [160,144],[16,16],0)
+            new Mario.Sprite("sprites/tiles.png", [128, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [144, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [160, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [128, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [144, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [160, 144], [16, 16], 0),
         ],
-    bushSprite: new Mario.Sprite('sprites/tiles.png', [176, 144], [48, 16], 0),
+        bushSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [176, 144],
+            [48, 16],
+            0,
+        ),
         bushSprites: [
-     new Mario.Sprite('sprites/tiles.png', [176,144], [16,16],0),
-     new Mario.Sprite('sprites/tiles.png', [192,144], [16,16],0),
-     new Mario.Sprite('sprites/tiles.png', [208,144], [16,16],0)],
-   goombaSprite: function() {
-     return new Mario.Sprite('sprites/enemy.png', [0, 16], [16,16], 3, [0,1]);
+            new Mario.Sprite("sprites/tiles.png", [176, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [192, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [208, 144], [16, 16], 0),
+        ],
+        goombaSprite: function () {
+            return new Mario.Sprite(
+                "sprites/enemy.png",
+                [0, 16],
+                [16, 16],
+                3,
+                [0, 1],
+            );
         },
-   koopaSprite: function() {
-     return new Mario.Sprite('sprites/enemy.png', [96,0], [16,32], 2, [0,1]);
+        koopaSprite: function () {
+            return new Mario.Sprite(
+                "sprites/enemy.png",
+                [96, 0],
+                [16, 32],
+                2,
+                [0, 1],
+            );
         },
         flagPoleSprites: [
-     new Mario.Sprite('sprites/tiles.png', [256, 128], [16,16], 0),
-     new Mario.Sprite('sprites/tiles.png', [256, 144], [16,16], 0),
-     new Mario.Sprite('sprites/items.png', [128, 32], [16,16], 0)
-   ]
+            new Mario.Sprite("sprites/tiles.png", [256, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [256, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/items.png", [128, 32], [16, 16], 0),
+        ],
     });
-  ground = [[0,69],[71,86],[89,153],[155,212]];
+    ground = [
+        [0, 69],
+        [71, 86],
+        [89, 153],
+        [155, 212],
+    ];
     player.pos[0] = level.playerPos[0];
     player.pos[1] = level.playerPos[1];
     vX = 0;
 
     //build THE GROUND
-  ground.forEach(function(loc) {
-    level.putFloor(loc[0],loc[1]);
+    ground.forEach(function (loc) {
+        level.putFloor(loc[0], loc[1]);
     });
 
     //build scenery
-  clouds = [[7,3],[19, 2],[56, 3],[67, 2],[87, 2],[103, 2],[152, 3],[163, 2],[200, 3]];
-  clouds.forEach(function(cloud){
-    level.putCloud(cloud[0],cloud[1]);
+    clouds = [
+        [7, 3],
+        [19, 2],
+        [56, 3],
+        [67, 2],
+        [87, 2],
+        [103, 2],
+        [152, 3],
+        [163, 2],
+        [200, 3],
+    ];
+    clouds.forEach(function (cloud) {
+        level.putCloud(cloud[0], cloud[1]);
     });
 
-  twoClouds = [[36,2],[132,2],[180,2]];
-  twoClouds.forEach(function(cloud){
-    level.putTwoCloud(cloud[0],cloud[1]);
+    twoClouds = [
+        [36, 2],
+        [132, 2],
+        [180, 2],
+    ];
+    twoClouds.forEach(function (cloud) {
+        level.putTwoCloud(cloud[0], cloud[1]);
     });
 
-  threeClouds = [[27,3],[75,3],[123,3],[171,3]];
-  threeClouds.forEach(function(cloud){
-    level.putThreeCloud(cloud[0],cloud[1]);
+    threeClouds = [
+        [27, 3],
+        [75, 3],
+        [123, 3],
+        [171, 3],
+    ];
+    threeClouds.forEach(function (cloud) {
+        level.putThreeCloud(cloud[0], cloud[1]);
     });
 
-  bHills = [0,48,96,144,192]
-  bHills.forEach(function(hill) {
+    bHills = [0, 48, 96, 144, 192];
+    bHills.forEach(function (hill) {
         level.putBigHill(hill, 12);
     });
 
-  sHills = [16,64,111,160];
-  sHills.forEach(function(hill) {
+    sHills = [16, 64, 111, 160];
+    sHills.forEach(function (hill) {
         level.putSmallHill(hill, 12);
     });
 
-  bushes = [23,71,118,167];
-  bushes.forEach(function(bush) {
+    bushes = [23, 71, 118, 167];
+    bushes.forEach(function (bush) {
         level.putBush(bush, 12);
     });
 
-  twoBushes = [41,89,137];
-  twoBushes.forEach(function(bush) {
+    twoBushes = [41, 89, 137];
+    twoBushes.forEach(function (bush) {
         level.putTwoBush(bush, 12);
     });
 
-  threeBushes = [11,59,106];
-  threeBushes.forEach(function(bush) {
+    threeBushes = [11, 59, 106];
+    threeBushes.forEach(function (bush) {
         level.putThreeBush(bush, 12);
     });
 
@@ -216,4 +338,4 @@ var oneone = Mario.oneone = function() {
     music.underground.pause();
     // music.overworld.currentTime = 0;
     music.overworld.play();
-};
+});

examples/mario/js/levels/11tunnel.js

@@ -1,65 +1,138 @@
-var oneonetunnel = Mario.oneonetunnel = function() {
+var oneonetunnel = (Mario.oneonetunnel = function () {
     level = new Mario.Level({
-    playerPos: [40,16],
+        playerPos: [40, 16],
         loader: Mario.oneonetunnel,
         background: "#000000",
         scrolling: false,
-    coinSprite: function() {
-      return new Mario.Sprite('sprites/items.png', [0,96],[16,16], 6,[0,0,0,0,1,2,1]);
+        coinSprite: function () {
+            return new Mario.Sprite(
+                "sprites/items.png",
+                [0, 96],
+                [16, 16],
+                6,
+                [0, 0, 0, 0, 1, 2, 1],
+            );
         },
-    floorSprite:  new Mario.Sprite('sprites/tiles.png', [0,32],[16,16],0),
-    wallSprite: new Mario.Sprite('sprites/tiles.png', [32, 32],[16,16],0),
-    brickSprite: new Mario.Sprite('sprites/tiles.png', [16, 0], [16,16], 0),
-    brickBounceSprite: new Mario.Sprite('sprites/tiles.png',[32,0],[16,16],0),
-    ublockSprite: new Mario.Sprite('sprites/tiles.png', [48, 0], [16,16],0),
-    pipeLMidSprite: new Mario.Sprite('sprites/tiles.png', [0, 144], [16,16], 0),
-    pipeRMidSprite: new Mario.Sprite('sprites/tiles.png', [16, 144], [16,16], 0),
-    pipeLEndSprite: new Mario.Sprite('sprites/tiles.png', [0, 128], [16,16], 0),
-    pipeREndSprite: new Mario.Sprite('sprites/tiles.png', [16, 128], [16,16], 0),
-    pipeUpMid: new Mario.Sprite('sprites/tiles.png', [0, 144], [32,16], 0),
-    pipeSideMid: new Mario.Sprite('sprites/tiles.png', [48, 128], [16,32], 0),
-    pipeLeft: new Mario.Sprite('sprites/tiles.png', [32, 128], [16,32], 0),
-    pipeTop: new Mario.Sprite('sprites/tiles.png', [0, 128], [32,16], 0),
-
-    LPipeSprites:[
-      new Mario.Sprite('sprites/tiles.png', [32,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [32,144],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [48,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [48,144],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [64,128],[16,16],0),
-      new Mario.Sprite('sprites/tiles.png', [64,144],[16,16],0),
-    ]
+        floorSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 32],
+            [16, 16],
+            0,
+        ),
+        wallSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [32, 32],
+            [16, 16],
+            0,
+        ),
+        brickSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 0],
+            [16, 16],
+            0,
+        ),
+        brickBounceSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [32, 0],
+            [16, 16],
+            0,
+        ),
+        ublockSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [48, 0],
+            [16, 16],
+            0,
+        ),
+        pipeLMidSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 144],
+            [16, 16],
+            0,
+        ),
+        pipeRMidSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 144],
+            [16, 16],
+            0,
+        ),
+        pipeLEndSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [0, 128],
+            [16, 16],
+            0,
+        ),
+        pipeREndSprite: new Mario.Sprite(
+            "sprites/tiles.png",
+            [16, 128],
+            [16, 16],
+            0,
+        ),
+        pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
+        pipeSideMid: new Mario.Sprite(
+            "sprites/tiles.png",
+            [48, 128],
+            [16, 32],
+            0,
+        ),
+        pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
+        pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),
 
+        LPipeSprites: [
+            new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [32, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [48, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [48, 144], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [64, 128], [16, 16], 0),
+            new Mario.Sprite("sprites/tiles.png", [64, 144], [16, 16], 0),
+        ],
     });
 
     player.pos[0] = level.playerPos[0];
     player.pos[1] = level.playerPos[1];
     vX = 0;
-  level.putFloor(0,16);
-  level.putWall(0,13,11);
-  walls = [4,5,6,7,8,9,10];
-  walls.forEach(function(loc){
-    level.putWall(loc,13,3);
-    level.putWall(loc,3,1);
+    level.putFloor(0, 16);
+    level.putWall(0, 13, 11);
+    walls = [4, 5, 6, 7, 8, 9, 10];
+    walls.forEach(function (loc) {
+        level.putWall(loc, 13, 3);
+        level.putWall(loc, 3, 1);
     });
 
-  coins = [[5,5], [6,5], [7,5], [8,5], [9,5],
-           [4,7], [5,7], [6,7], [7,7], [8,7], [9,7], [10,7],
-           [4,9], [5,9], [6,9], [7,9], [8,9], [9,9], [10,9]];
-  coins.forEach(function(pos){
-    level.putCoin(pos[0],pos[1]);
+    coins = [
+        [5, 5],
+        [6, 5],
+        [7, 5],
+        [8, 5],
+        [9, 5],
+        [4, 7],
+        [5, 7],
+        [6, 7],
+        [7, 7],
+        [8, 7],
+        [9, 7],
+        [10, 7],
+        [4, 9],
+        [5, 9],
+        [6, 9],
+        [7, 9],
+        [8, 9],
+        [9, 9],
+        [10, 9],
+    ];
+    coins.forEach(function (pos) {
+        level.putCoin(pos[0], pos[1]);
     });
 
     //level.putLeftPipe(13,11);
-  level.putRealPipe(13,11,3,"RIGHT", function() {
+    level.putRealPipe(13, 11, 3, "RIGHT", function () {
         Mario.oneone.call();
-    player.pos = [2616, 177]
-    player.pipe("UP", function() {;});
+        player.pos = [2616, 177];
+        player.pipe("UP", function () {});
     });
 
-  level.putPipe(15,13,13);
+    level.putPipe(15, 13, 13);
 
     music.overworld.pause();
     music.underground.currentTime = 0;
     music.underground.play();
-};
+});

examples/mario/js/levels/level.js

@@ -1,5 +1,5 @@
-(function() {
-  var Level = Mario.Level = function(options) {
+(function () {
+    var Level = (Mario.Level = function (options) {
         this.playerPos = options.playerPos;
         this.scrolling = options.scrolling;
         this.loader = options.loader;
@@ -55,164 +55,294 @@
             this.scenery[i] = [];
             this.blocks[i] = [];
         }
+    });
 
-  };
-
-  Level.prototype.putFloor = function(start, end) {
+    Level.prototype.putFloor = function (start, end) {
         for (var i = start; i < end; i++) {
-      this.statics[13][i] = new Mario.Floor([16*i,208], this.floorSprite);
-      this.statics[14][i] = new Mario.Floor([16*i,224], this.floorSprite);
+            this.statics[13][i] = new Mario.Floor(
+                [16 * i, 208],
+                this.floorSprite,
+            );
+            this.statics[14][i] = new Mario.Floor(
+                [16 * i, 224],
+                this.floorSprite,
+            );
         }
     };
 
-  Level.prototype.putGoomba = function(x, y) {
-    this.enemies.push(new Mario.Goomba([16*x, 16*y], this.goombaSprite() ));
+    Level.prototype.putGoomba = function (x, y) {
+        this.enemies.push(
+            new Mario.Goomba([16 * x, 16 * y], this.goombaSprite()),
+        );
     };
 
-  Level.prototype.putKoopa = function(x, y) {
-    this.enemies.push(new Mario.Koopa([16*x, 16*y], this.koopaSprite(), false));
+    Level.prototype.putKoopa = function (x, y) {
+        this.enemies.push(
+            new Mario.Koopa([16 * x, 16 * y], this.koopaSprite(), false),
+        );
     };
 
-  Level.prototype.putWall = function(x, y, height) {
+    Level.prototype.putWall = function (x, y, height) {
         //y is the bottom of the wall in this case.
-    for (var i = y-height; i < y; i++) {
-      this.statics[i][x] = new Mario.Floor([16*x, 16*i], this.wallSprite);
+        for (var i = y - height; i < y; i++) {
+            this.statics[i][x] = new Mario.Floor(
+                [16 * x, 16 * i],
+                this.wallSprite,
+            );
         }
     };
 
-  Level.prototype.putPipe = function(x, y, height) {
+    Level.prototype.putPipe = function (x, y, height) {
         for (var i = y - height; i < y; i++) {
             if (i === y - height) {
-        this.statics[i][x] = new Mario.Floor([16*x, 16*i], this.pipeLEndSprite);
-        this.statics[i][x+1] = new Mario.Floor([16*x+16, 16*i], this.pipeREndSprite);
+                this.statics[i][x] = new Mario.Floor(
+                    [16 * x, 16 * i],
+                    this.pipeLEndSprite,
+                );
+                this.statics[i][x + 1] = new Mario.Floor(
+                    [16 * x + 16, 16 * i],
+                    this.pipeREndSprite,
+                );
             } else {
-        this.statics[i][x] = new Mario.Floor([16*x, 16*i], this.pipeLMidSprite);
-        this.statics[i][x+1] = new Mario.Floor([16*x+16, 16*i], this.pipeRMidSprite);
+                this.statics[i][x] = new Mario.Floor(
+                    [16 * x, 16 * i],
+                    this.pipeLMidSprite,
+                );
+                this.statics[i][x + 1] = new Mario.Floor(
+                    [16 * x + 16, 16 * i],
+                    this.pipeRMidSprite,
+                );
             }
         }
     };
 
     //sometimes, pipes don't go straight up and down.
-  Level.prototype.putLeftPipe = function(x,y) {
-    this.statics[y][x] = new Mario.Floor([16*x, 16*y], this.LPipeSprites[0]);
-    this.statics[y+1][x] = new Mario.Floor([16*x,16*(y+1)], this.LPipeSprites[1]);
-    this.statics[y][x+1] = new Mario.Floor([16*(x+1),16*y], this.LPipeSprites[2]);
-    this.statics[y+1][x+1] = new Mario.Floor([16*(x+1),16*(y+1)], this.LPipeSprites[3]);
-    this.statics[y][x+2] = new Mario.Floor([16*(x+2),16*y], this.LPipeSprites[4]);
-    this.statics[y+1][x+2] = new Mario.Floor([16*(x+2),16*(y+1)], this.LPipeSprites[5]);
+    Level.prototype.putLeftPipe = function (x, y) {
+        this.statics[y][x] = new Mario.Floor(
+            [16 * x, 16 * y],
+            this.LPipeSprites[0],
+        );
+        this.statics[y + 1][x] = new Mario.Floor(
+            [16 * x, 16 * (y + 1)],
+            this.LPipeSprites[1],
+        );
+        this.statics[y][x + 1] = new Mario.Floor(
+            [16 * (x + 1), 16 * y],
+            this.LPipeSprites[2],
+        );
+        this.statics[y + 1][x + 1] = new Mario.Floor(
+            [16 * (x + 1), 16 * (y + 1)],
+            this.LPipeSprites[3],
+        );
+        this.statics[y][x + 2] = new Mario.Floor(
+            [16 * (x + 2), 16 * y],
+            this.LPipeSprites[4],
+        );
+        this.statics[y + 1][x + 2] = new Mario.Floor(
+            [16 * (x + 2), 16 * (y + 1)],
+            this.LPipeSprites[5],
+        );
     };
 
-  Level.prototype.putCoin = function(x, y) {
-    this.items.push(new Mario.Coin(
-      [x*16, y*16],
-      this.coinSprite()
-    ));
+    Level.prototype.putCoin = function (x, y) {
+        this.items.push(new Mario.Coin([x * 16, y * 16], this.coinSprite()));
     };
 
-  Level.prototype.putCloud = function(x, y) {
-    this.scenery[y][x] = new Mario.Prop([x*16, y*16], this.cloudSprite);
+    Level.prototype.putCloud = function (x, y) {
+        this.scenery[y][x] = new Mario.Prop([x * 16, y * 16], this.cloudSprite);
     };
 
-  Level.prototype.putQBlock = function(x, y, item) {
-    this.blocks[y][x] = new Mario.Block( {
-      pos: [x*16, y*16],
+    Level.prototype.putQBlock = function (x, y, item) {
+        this.blocks[y][x] = new Mario.Block({
+            pos: [x * 16, y * 16],
             item: item,
             sprite: this.qblockSprite,
-      usedSprite: this.ublockSprite
+            usedSprite: this.ublockSprite,
         });
     };
 
-  Level.prototype.putBrick = function(x,y,item) {
+    Level.prototype.putBrick = function (x, y, item) {
         this.blocks[y][x] = new Mario.Block({
-      pos: [x*16, y*16],
+            pos: [x * 16, y * 16],
             item: item,
             sprite: this.brickSprite,
             bounceSprite: this.brickBounceSprite,
             usedSprite: this.ublockSprite,
-      breakable: !item
+            breakable: !item,
         });
     };
 
-  Level.prototype.putBigHill = function(x, y) {
-    var px = x*16, py = y*16;
+    Level.prototype.putBigHill = function (x, y) {
+        var px = x * 16,
+            py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.hillSprites[3]);
-    this.scenery[y-1][x+1] = new Mario.Prop([px+16, py-16], this.hillSprites[0]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.hillSprites[4]);
-    this.scenery[y-1][x+2] = new Mario.Prop([px+32, py-16], this.hillSprites[3]);
-    this.scenery[y-2][x+2] = new Mario.Prop([px+32, py-32], this.hillSprites[1]);
-    this.scenery[y][x+3] = new Mario.Prop([px+48, py], this.hillSprites[5]);
-    this.scenery[y-1][x+3] = new Mario.Prop([px+48, py-16], this.hillSprites[2]);
-    this.scenery[y][x+4] = new Mario.Prop([px+64, py], this.hillSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.hillSprites[3],
+        );
+        this.scenery[y - 1][x + 1] = new Mario.Prop(
+            [px + 16, py - 16],
+            this.hillSprites[0],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.hillSprites[4],
+        );
+        this.scenery[y - 1][x + 2] = new Mario.Prop(
+            [px + 32, py - 16],
+            this.hillSprites[3],
+        );
+        this.scenery[y - 2][x + 2] = new Mario.Prop(
+            [px + 32, py - 32],
+            this.hillSprites[1],
+        );
+        this.scenery[y][x + 3] = new Mario.Prop(
+            [px + 48, py],
+            this.hillSprites[5],
+        );
+        this.scenery[y - 1][x + 3] = new Mario.Prop(
+            [px + 48, py - 16],
+            this.hillSprites[2],
+        );
+        this.scenery[y][x + 4] = new Mario.Prop(
+            [px + 64, py],
+            this.hillSprites[2],
+        );
     };
 
-  Level.prototype.putBush = function(x, y) {
-    this.scenery[y][x] = new Mario.Prop([x*16, y*16], this.bushSprite);
+    Level.prototype.putBush = function (x, y) {
+        this.scenery[y][x] = new Mario.Prop([x * 16, y * 16], this.bushSprite);
     };
 
-  Level.prototype.putThreeBush = function(x,y) {
-    px = x*16;
-    py = y*16;
+    Level.prototype.putThreeBush = function (x, y) {
+        px = x * 16;
+        py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.bushSprites[1]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.bushSprites[1]);
-    this.scenery[y][x+3] = new Mario.Prop([px+48, py], this.bushSprites[1]);
-    this.scenery[y][x+4] = new Mario.Prop([px+64, py], this.bushSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.bushSprites[1],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.bushSprites[1],
+        );
+        this.scenery[y][x + 3] = new Mario.Prop(
+            [px + 48, py],
+            this.bushSprites[1],
+        );
+        this.scenery[y][x + 4] = new Mario.Prop(
+            [px + 64, py],
+            this.bushSprites[2],
+        );
     };
 
-  Level.prototype.putTwoBush = function(x,y) {
-    px = x*16;
-    py = y*16;
+    Level.prototype.putTwoBush = function (x, y) {
+        px = x * 16;
+        py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.bushSprites[1]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.bushSprites[1]);
-    this.scenery[y][x+3] = new Mario.Prop([px+48, py], this.bushSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.bushSprites[1],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.bushSprites[1],
+        );
+        this.scenery[y][x + 3] = new Mario.Prop(
+            [px + 48, py],
+            this.bushSprites[2],
+        );
     };
 
-  Level.prototype.putSmallHill = function(x, y) {
-    var px = x*16, py = y*16;
+    Level.prototype.putSmallHill = function (x, y) {
+        var px = x * 16,
+            py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.hillSprites[3]);
-    this.scenery[y-1][x+1] = new Mario.Prop([px+16, py-16], this.hillSprites[1]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.hillSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.hillSprites[3],
+        );
+        this.scenery[y - 1][x + 1] = new Mario.Prop(
+            [px + 16, py - 16],
+            this.hillSprites[1],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.hillSprites[2],
+        );
     };
 
-  Level.prototype.putTwoCloud = function(x,y) {
-    px = x*16;
-    py = y*16;
+    Level.prototype.putTwoCloud = function (x, y) {
+        px = x * 16;
+        py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.cloudSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.cloudSprites[1]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.cloudSprites[1]);
-    this.scenery[y][x+3] = new Mario.Prop([px+48, py], this.cloudSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.cloudSprites[1],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.cloudSprites[1],
+        );
+        this.scenery[y][x + 3] = new Mario.Prop(
+            [px + 48, py],
+            this.cloudSprites[2],
+        );
     };
 
-  Level.prototype.putThreeCloud = function(x,y) {
-    px = x*16;
-    py = y*16;
+    Level.prototype.putThreeCloud = function (x, y) {
+        px = x * 16;
+        py = y * 16;
         this.scenery[y][x] = new Mario.Prop([px, py], this.cloudSprites[0]);
-    this.scenery[y][x+1] = new Mario.Prop([px+16, py], this.cloudSprites[1]);
-    this.scenery[y][x+2] = new Mario.Prop([px+32, py], this.cloudSprites[1]);
-    this.scenery[y][x+3] = new Mario.Prop([px+48, py], this.cloudSprites[1]);
-    this.scenery[y][x+4] = new Mario.Prop([px+64, py], this.cloudSprites[2]);
+        this.scenery[y][x + 1] = new Mario.Prop(
+            [px + 16, py],
+            this.cloudSprites[1],
+        );
+        this.scenery[y][x + 2] = new Mario.Prop(
+            [px + 32, py],
+            this.cloudSprites[1],
+        );
+        this.scenery[y][x + 3] = new Mario.Prop(
+            [px + 48, py],
+            this.cloudSprites[1],
+        );
+        this.scenery[y][x + 4] = new Mario.Prop(
+            [px + 64, py],
+            this.cloudSprites[2],
+        );
     };
 
-  Level.prototype.putRealPipe = function(x, y, length, direction, destination) {
-    px = x*16;
-    py = y*16;
-    this.pipes.push(new Mario.Pipe({
+    Level.prototype.putRealPipe = function (
+        x,
+        y,
+        length,
+        direction,
+        destination,
+    ) {
+        px = x * 16;
+        py = y * 16;
+        this.pipes.push(
+            new Mario.Pipe({
                 pos: [px, py],
                 length: length,
                 direction: direction,
-      destination: destination
-    }));
-  }
+                destination: destination,
+            }),
+        );
+    };
 
-  Level.prototype.putFlagpole = function(x) {
-    this.statics[12][x] = new Mario.Floor([16*x, 192], this.wallSprite);
-    for (i=3; i < 12; i++) {
-      this.scenery[i][x] = new Mario.Prop([16*x, 16*i], this.flagpoleSprites[1])
-    }
-    this.scenery[2][x] = new Mario.Prop([16*x, 32], this.flagpoleSprites[0]);
-    this.items.push(new Mario.Flag(16*x));
+    Level.prototype.putFlagpole = function (x) {
+        this.statics[12][x] = new Mario.Floor([16 * x, 192], this.wallSprite);
+        for (i = 3; i < 12; i++) {
+            this.scenery[i][x] = new Mario.Prop(
+                [16 * x, 16 * i],
+                this.flagpoleSprites[1],
+            );
         }
+        this.scenery[2][x] = new Mario.Prop(
+            [16 * x, 32],
+            this.flagpoleSprites[0],
+        );
+        this.items.push(new Mario.Flag(16 * x));
+    };
 })();

examples/mario/js/mushroom.js

@@ -1,29 +1,28 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-  var Mushroom = Mario.Mushroom = function(pos) {
+    var Mushroom = (Mario.Mushroom = function (pos) {
         this.spawning = false;
         this.waiting = 0;
 
         Mario.Entity.call(this, {
             pos: pos,
             sprite: level.superShroomSprite,
-      hitbox: [0,0,16,16]
+            hitbox: [0, 0, 16, 16],
+        });
     });
-  }
 
     Mario.Util.inherits(Mushroom, Mario.Entity);
 
-  Mushroom.prototype.render = function(ctx, vX, vY) {
+    Mushroom.prototype.render = function (ctx, vX, vY) {
         if (this.spawning > 1) return;
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
-  }
+    };
 
-  Mushroom.prototype.spawn = function() {
+    Mushroom.prototype.spawn = function () {
         if (player.power > 0) {
             //replace this with a fire flower
-      var ff = new Mario.Fireflower(this.pos)
+            var ff = new Mario.Fireflower(this.pos);
             ff.spawn();
             return;
         }
@@ -34,12 +33,12 @@
         this.targetpos = [];
         this.targetpos[0] = this.pos[0];
         this.targetpos[1] = this.pos[1] - 16;
-  }
+    };
 
-  Mushroom.prototype.update = function(dt) {
+    Mushroom.prototype.update = function (dt) {
         if (this.spawning > 1) {
             this.spawning -= 1;
-      if (this.spawning == 1) this.vel[1] = -.5;
+            if (this.spawning == 1) this.vel[1] = -0.5;
             return;
         }
         if (this.spawning) {
@@ -62,14 +61,14 @@
             this.pos[1] += this.vel[1];
             this.sprite.update(dt);
         }
-  }
+    };
 
-  Mushroom.prototype.collideWall = function() {
+    Mushroom.prototype.collideWall = function () {
         this.vel[0] = -this.vel[0];
-  }
+    };
 
-  Mushroom.prototype.checkCollisions = function() {
-    if(this.spawning) {
+    Mushroom.prototype.checkCollisions = function () {
+        if (this.spawning) {
             return;
         }
         var h = this.pos[1] % 16 == 0 ? 1 : 2;
@@ -95,24 +94,39 @@
         }
 
         this.isPlayerCollided();
-  }
+    };
 
     //we have access to player everywhere, so let's just do this.
-  Mushroom.prototype.isPlayerCollided = function() {
+    Mushroom.prototype.isPlayerCollided = function () {
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
-    var hpos2 = [player.pos[0] + player.hitbox[0], player.pos[1] + player.hitbox[1]];
+        var hpos1 = [
+            this.pos[0] + this.hitbox[0],
+            this.pos[1] + this.hitbox[1],
+        ];
+        var hpos2 = [
+            player.pos[0] + player.hitbox[0],
+            player.pos[1] + player.hitbox[1],
+        ];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+player.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+player.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + player.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + player.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 player.powerUp(this.idx);
             }
         }
-  }
+    };
 
-  Mushroom.prototype.bump = function() {
+    Mushroom.prototype.bump = function () {
         this.vel[1] = -2;
-  }
-
+    };
 })();

examples/mario/js/pipe.js

@@ -1,108 +1,140 @@
-(function() {
-  if (typeof Mario === 'undefined')
-    window.Mario = {};
-
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
     //there are too many possible configurations of pipe to capture in a reasonable
     //set of simple variables. Joints, etc. are just too much.
     //To that end, the pipe class handles simple pipes, and we'll put together
     //anything more complex with individual props. OK? OK.
-  Pipe = Mario.Pipe = function(options) {
-    this.pos = options.pos
+    Pipe = Mario.Pipe = function (options) {
+        this.pos = options.pos;
 
         //NOTE: direction is the direction you move INTO the pipe.
-    this.direction = options.direction
-    this.destination = options.destination
+        this.direction = options.direction;
+        this.destination = options.destination;
         this.length = options.length;
 
         if (this.direction === "UP" || this.direction === "DOWN") {
-      this.hitbox = [0,0, 32, this.length * 16];
+            this.hitbox = [0, 0, 32, this.length * 16];
             this.midsection = level.pipeUpMid;
             this.endsection = level.pipeTop;
         } else {
-      this.hitbox = [0,0, 16*this.length, 32];
+            this.hitbox = [0, 0, 16 * this.length, 32];
             this.midsection = level.pipeSideMid;
             this.endsection = level.pipeLeft;
         }
-  }
+    };
 
-  Pipe.prototype.checkPipe = function() {
-    if (this.destination === undefined || !input.isDown(this.direction)) return;
+    Pipe.prototype.checkPipe = function () {
+        if (this.destination === undefined || !input.isDown(this.direction))
+            return;
 
-    var h = player.power===0 ? 16 : 32;
+        var h = player.power === 0 ? 16 : 32;
         var x = Math.floor(player.pos[0]);
         var y = Math.floor(player.pos[1]);
         switch (this.direction) {
-      case 'RIGHT': if (x === this.pos[0]-16 &&
+            case "RIGHT":
+                if (
+                    x === this.pos[0] - 16 &&
                     y >= this.pos[1] &&
-                        y+h <= this.pos[1]+32) {
-                          player.pipe(this.direction, this.destination)
+                    y + h <= this.pos[1] + 32
+                ) {
+                    player.pipe(this.direction, this.destination);
                 }
                 break;
-      case 'LEFT': if (x === this.pos[0]+16*this.length &&
+            case "LEFT":
+                if (
+                    x === this.pos[0] + 16 * this.length &&
                     y >= this.pos[1] &&
-                       y+h <= this.pos[1]+32) {
-                         player.pipe(this.direction, this.destination)
+                    y + h <= this.pos[1] + 32
+                ) {
+                    player.pipe(this.direction, this.destination);
                 }
                 break;
-      case 'UP': if (y === this.pos[1] + 16*this.length &&
+            case "UP":
+                if (
+                    y === this.pos[1] + 16 * this.length &&
                     x >= this.pos[0] &&
-                     x+16 <= this.pos[0]+32) {
-                       player.pipe(this.direction, this.destination)
+                    x + 16 <= this.pos[0] + 32
+                ) {
+                    player.pipe(this.direction, this.destination);
                 }
                 break;
-      case 'DOWN': if (y+h === this.pos[1] &&
+            case "DOWN":
+                if (
+                    y + h === this.pos[1] &&
                     x >= this.pos[0] &&
-                    x+16 <= this.pos[0]+32) {
+                    x + 16 <= this.pos[0] + 32
+                ) {
                     player.pipe(this.direction, this.destination);
                 }
                 break;
         }
-  }
+    };
 
     //Note to self: next time, decide on a convention for which thing checks for collisions
     //and stick to it. This is a pain.
-  Pipe.prototype.checkCollisions = function() {
+    Pipe.prototype.checkCollisions = function () {
         var that = this;
-    level.enemies.forEach (function(ent) {
+        level.enemies.forEach(function (ent) {
             that.isCollideWith(ent);
         });
 
-    level.items.forEach (function(ent) {
+        level.items.forEach(function (ent) {
             that.isCollideWith(ent);
         });
 
-    fireballs.forEach(function(ent){
-      that.isCollideWith(ent)
+        fireballs.forEach(function (ent) {
+            that.isCollideWith(ent);
         });
 
         if (!player.piping) this.isCollideWith(player);
-  }
+    };
 
     Pipe.prototype.isCollideWith = function (ent) {
         //long story short: because we scan every item, and and one 'rubble' item is four things with separate positions
         //we'll crash without this line as soon as we destroy a block. OOPS.
         if (ent.pos === undefined) return;
 
-
         //the first two elements of the hitbox array are an offset, so let's do this now.
-    var hpos1 = [Math.floor(this.pos[0] + this.hitbox[0]), Math.floor(this.pos[1] + this.hitbox[1])];
-    var hpos2 = [Math.floor(ent.pos[0] + ent.hitbox[0]), Math.floor(ent.pos[1] + ent.hitbox[1])];
+        var hpos1 = [
+            Math.floor(this.pos[0] + this.hitbox[0]),
+            Math.floor(this.pos[1] + this.hitbox[1]),
+        ];
+        var hpos2 = [
+            Math.floor(ent.pos[0] + ent.hitbox[0]),
+            Math.floor(ent.pos[1] + ent.hitbox[1]),
+        ];
 
         //if the hitboxes actually overlap
-    if (!(hpos1[0] > hpos2[0]+ent.hitbox[2] || (hpos1[0]+this.hitbox[2] < hpos2[0]))) {
-      if (!(hpos1[1] > hpos2[1]+ent.hitbox[3] || (hpos1[1]+this.hitbox[3] < hpos2[1]))) {
+        if (
+            !(
+                hpos1[0] > hpos2[0] + ent.hitbox[2] ||
+                hpos1[0] + this.hitbox[2] < hpos2[0]
+            )
+        ) {
+            if (
+                !(
+                    hpos1[1] > hpos2[1] + ent.hitbox[3] ||
+                    hpos1[1] + this.hitbox[3] < hpos2[1]
+                )
+            ) {
                 //if the entity is over the block, it's basically floor
                 var center = hpos2[0] + ent.hitbox[2] / 2;
-        if (Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]) {
+                if (
+                    Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]
+                ) {
                     ent.vel[1] = 0;
                     ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
                     ent.standing = true;
                     if (ent instanceof Mario.Player) {
                         ent.jumping = 0;
                     }
-        } else if (Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) > ent.vel[1] &&
-        center + 2 >= hpos1[0] && center - 2 <= hpos1[0] + this.hitbox[2]) {
+                } else if (
+                    Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
+                        ent.vel[1] &&
+                    center + 2 >= hpos1[0] &&
+                    center - 2 <= hpos1[0] + this.hitbox[2]
+                ) {
                     //ent is under the block.
                     ent.vel[1] = 0;
                     ent.pos[1] = hpos1[1] + this.hitbox[3];
@@ -115,46 +147,82 @@
                 }
             }
         }
-  }
+    };
 
     //we COULD try to write some shenanigans so that the check gets put into the
     //collision code, but there won't ever be more than a handful of pipes in a level
     //so the performance hit of scanning all of them is miniscule.
-  Pipe.prototype.update = function(dt) {
+    Pipe.prototype.update = function (dt) {
         if (this.destination) this.checkPipe();
-  }
+    };
 
     //http://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-an-unsorted-array
     //I honestly have no idea if javascript does this, but I feel like it makes sense
     //stylistically to prefer branching outside of loops when possible as convention
 
     //TODO: edit the spritesheet so UP and LEFT pipes aren't backwards.
-  Pipe.prototype.render = function(ctx, vX, vY) {
+    Pipe.prototype.render = function (ctx, vX, vY) {
         switch (this.direction) {
             case "DOWN":
                 this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
                 for (var i = 1; i < this.length; i++) {
-          this.midsection.render(ctx, this.pos[0], this.pos[1]+i*16, vX, vY)
+                    this.midsection.render(
+                        ctx,
+                        this.pos[0],
+                        this.pos[1] + i * 16,
+                        vX,
+                        vY,
+                    );
                 }
                 break;
             case "UP":
-        this.endsection.render(ctx, this.pos[0], this.pos[1]+16*(this.length-1), vX, vY)
-        for (var i=0; i < this.length - 1; i++) {
-          this.midsection.render(ctx, this.pos[0], this.pos[1]+i*16, vX, vY)
+                this.endsection.render(
+                    ctx,
+                    this.pos[0],
+                    this.pos[1] + 16 * (this.length - 1),
+                    vX,
+                    vY,
+                );
+                for (var i = 0; i < this.length - 1; i++) {
+                    this.midsection.render(
+                        ctx,
+                        this.pos[0],
+                        this.pos[1] + i * 16,
+                        vX,
+                        vY,
+                    );
                 }
                 break;
             case "RIGHT":
-        this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY)
+                this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
                 for (var i = 1; i < this.length; i++) {
-          this.midsection.render(ctx, this.pos[0]+16*i, this.pos[1], vX, vY)
+                    this.midsection.render(
+                        ctx,
+                        this.pos[0] + 16 * i,
+                        this.pos[1],
+                        vX,
+                        vY,
+                    );
                 }
                 break;
             case "LEFT":
-        this.endsection.render(ctx, this.pos[0]+16*(this.length-1), this.pos[1], vX, vY)
-        for (var i = 0; i < this.legth-1; i++) {
-          this.midsection.render(ctx, this.pos[0], this.pos[1]+i*16, vX, vY)
+                this.endsection.render(
+                    ctx,
+                    this.pos[0] + 16 * (this.length - 1),
+                    this.pos[1],
+                    vX,
+                    vY,
+                );
+                for (var i = 0; i < this.legth - 1; i++) {
+                    this.midsection.render(
+                        ctx,
+                        this.pos[0],
+                        this.pos[1] + i * 16,
+                        vX,
+                        vY,
+                    );
                 }
                 break;
         }
-  }
+    };
 })();

examples/mario/js/player.js

@@ -1,8 +1,7 @@
-(function() {
-	if (typeof Mario === 'undefined')
-		window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
-	var Player = Mario.Player = function(pos) {
+    var Player = (Mario.Player = function (pos) {
         //I know, I know, there are a lot of variables tracking Mario's state.
         //Maybe these can be consolidated some way? We'll see once they're all in.
         this.power = 0;
@@ -20,36 +19,41 @@
 
         Mario.Entity.call(this, {
             pos: pos,
-			sprite: new Mario.Sprite('sprites/player.png', [80,32],[16,16],0),
-			hitbox: [0,0,16,16]
+            sprite: new Mario.Sprite(
+                "sprites/player.png",
+                [80, 32],
+                [16, 16],
+                0,
+            ),
+            hitbox: [0, 0, 16, 16],
+        });
     });
-	};
 
     Mario.Util.inherits(Player, Mario.Entity);
 
-	Player.prototype.run = function() {
+    Player.prototype.run = function () {
         this.maxSpeed = 2.5;
         if (this.power == 2 && !this.runheld) {
             this.shoot();
         }
         this.runheld = true;
-	}
+    };
 
-	Player.prototype.shoot = function() {
+    Player.prototype.shoot = function () {
         if (this.fireballs >= 2) return; //Projectile limit!
         this.fireballs += 1;
-		var fb = new Mario.Fireball([this.pos[0]+8,this.pos[1]]); //I hate you, Javascript.
+        var fb = new Mario.Fireball([this.pos[0] + 8, this.pos[1]]); //I hate you, Javascript.
         fb.spawn(this.left);
         this.shooting = 2;
-	}
+    };
 
-	Player.prototype.noRun = function() {
+    Player.prototype.noRun = function () {
         this.maxSpeed = 1.5;
         this.moveAcc = 0.07;
         this.runheld = false;
-	}
+    };
 
-	Player.prototype.moveRight = function() {
+    Player.prototype.moveRight = function () {
         //we're on the ground
         if (this.vel[1] === 0 && this.standing) {
             if (this.crouching) {
@@ -63,7 +67,7 @@
         }
     };
 
-	Player.prototype.moveLeft = function() {
+    Player.prototype.moveLeft = function () {
         if (this.vel[1] === 0 && this.standing) {
             if (this.crouching) {
                 this.noWalk();
@@ -76,7 +80,7 @@
         }
     };
 
-	Player.prototype.noWalk = function() {
+    Player.prototype.noWalk = function () {
         this.maxSpeed = 0;
         if (this.vel[0] === 0) return;
 
@@ -84,23 +88,22 @@
             this.vel[0] = 0;
             this.acc[0] = 0;
         }
-
     };
 
-	Player.prototype.crouch = function() {
+    Player.prototype.crouch = function () {
         if (this.power === 0) {
             this.crouching = false;
             return;
         }
 
         if (this.standing) this.crouching = true;
-	}
+    };
 
-	Player.prototype.noCrouch = function() {
+    Player.prototype.noCrouch = function () {
         this.crouching = false;
-	}
+    };
 
-	Player.prototype.jump = function() {
+    Player.prototype.jump = function () {
         if (this.vel[1] > 0) {
             return;
         }
@@ -121,7 +124,7 @@
         }
     };
 
-	Player.prototype.noJump = function() {
+    Player.prototype.noJump = function () {
         this.canJump = true;
         if (this.jumping) {
             if (this.jumping <= 16) {
@@ -131,13 +134,12 @@
         }
     };
 
-  Player.prototype.setAnimation = function() {
+    Player.prototype.setAnimation = function () {
         if (this.dying) return;
 
         if (this.starTime) {
             var index;
-			if (this.starTime > 60)
-				index = Math.floor(this.starTime / 2) % 3;
+            if (this.starTime > 60) index = Math.floor(this.starTime / 2) % 3;
             else index = Math.floor(this.starTime / 8) % 3;
 
             this.sprite.pos[1] = level.invincibility[index];
@@ -146,10 +148,16 @@
             }
             this.starTime -= 1;
             if (this.starTime == 0) {
-				switch(this.power) {
-					case 0: this.sprite.pos[1] = 32; break;
-					case 1: this.sprite.pos[1] = 0; break;
-					case 2: this.sprite.pos[1] = 96; break;
+                switch (this.power) {
+                    case 0:
+                        this.sprite.pos[1] = 32;
+                        break;
+                    case 1:
+                        this.sprite.pos[1] = 0;
+                        break;
+                    case 2:
+                        this.sprite.pos[1] = 96;
+                        break;
                 }
             }
         }
@@ -167,13 +175,16 @@
             if (Math.abs(this.vel[0]) > 0) {
                 if (this.vel[0] * this.acc[0] >= 0) {
                     this.sprite.pos[0] = 96;
-					this.sprite.frames = [0,1,2];
+                    this.sprite.frames = [0, 1, 2];
                     if (this.vel[0] < 0.2) {
                         this.sprite.speed = 5;
                     } else {
                         this.sprite.speed = Math.abs(this.vel[0]) * 8;
                     }
-				} else if ((this.vel[0] > 0 && this.left) || (this.vel[0] < 0 && !this.left)){
+                } else if (
+                    (this.vel[0] > 0 && this.left) ||
+                    (this.vel[0] < 0 && !this.left)
+                ) {
                     this.sprite.pos[0] = 144;
                     this.sprite.speed = 0;
                 }
@@ -189,20 +200,20 @@
 
         if (this.flagging) {
             this.sprite.pos[0] = 192;
-			this.sprite.frames = [0,1];
+            this.sprite.frames = [0, 1];
             this.sprite.speed = 10;
             if (this.vel[1] === 0) this.sprite.frames = [0];
         }
 
         //which way are we facing?
         if (this.left) {
-			this.sprite.img = 'sprites/playerl.png';
+            this.sprite.img = "sprites/playerl.png";
         } else {
-			this.sprite.img = 'sprites/player.png';
+            this.sprite.img = "sprites/player.png";
         }
     };
 
-	Player.prototype.update = function(dt, vX) {
+    Player.prototype.update = function (dt, vX) {
         if (this.powering.length !== 0) {
             var next = this.powering.shift();
             if (next == 5) return;
@@ -238,11 +249,11 @@
         }
 
         if (Math.abs(this.vel[0]) > this.maxSpeed) {
-			this.vel[0] -= 0.05 *  this.vel[0] / Math.abs(this.vel[0]);
+            this.vel[0] -= (0.05 * this.vel[0]) / Math.abs(this.vel[0]);
             this.acc[0] = 0;
         }
 
-		if (this.dying){
+        if (this.dying) {
             if (this.pos[1] < this.targetPos[1]) {
                 this.vel[1] = 1;
             }
@@ -252,17 +263,16 @@
                 level.loader.call();
                 input.reset();
             }
-		}
-		else {
-			this.acc[1] = 0.25
+        } else {
+            this.acc[1] = 0.25;
             if (this.pos[1] > 240) {
                 this.die();
             }
         }
 
         if (this.piping) {
-			this.acc = [0,0];
-			var pos = [Math.round(this.pos[0]), Math.round(this.pos[1])]
+            this.acc = [0, 0];
+            var pos = [Math.round(this.pos[0]), Math.round(this.pos[1])];
             if (pos[0] === this.targetPos[0] && pos[1] === this.targetPos[1]) {
                 this.piping = false;
                 this.pipeLoc.call();
@@ -270,7 +280,7 @@
         }
 
         if (this.flagging) {
-			this.acc = [0,0];
+            this.acc = [0, 0];
         }
 
         if (this.exiting) {
@@ -278,10 +288,11 @@
             this.flagging = false;
             this.vel[0] = 1.5;
             if (this.pos[0] >= this.targetPos[0]) {
-				this.sprite.size = [0,0];
-				this.vel = [0,0];
-				window.setTimeout(function() {
-					player.sprite.size = player.power===0 ? [16,16] : [16,32];
+                this.sprite.size = [0, 0];
+                this.vel = [0, 0];
+                window.setTimeout(function () {
+                    player.sprite.size =
+                        player.power === 0 ? [16, 16] : [16, 32];
                     player.exiting = false;
                     player.noInput = false;
                     level.loader();
@@ -301,7 +312,7 @@
         this.sprite.update(dt);
     };
 
-	Player.prototype.checkCollisions = function() {
+    Player.prototype.checkCollisions = function () {
         if (this.piping || this.dying) return;
         //x-axis first!
         var h = this.power > 0 ? 2 : 1;
@@ -318,7 +329,9 @@
         for (var i = 0; i < h; i++) {
             if (baseY + i < 0 || baseY + i >= 15) continue;
             for (var j = 0; j < w; j++) {
-				if (baseY < 0) { i++;}
+                if (baseY < 0) {
+                    i++;
+                }
                 if (level.statics[baseY + i][baseX + j]) {
                     level.statics[baseY + i][baseX + j].isCollideWith(this);
                 }
@@ -329,26 +342,44 @@
         }
     };
 
-	Player.prototype.powerUp = function(idx) {
+    Player.prototype.powerUp = function (idx) {
         sounds.powerup.play();
-	  this.powering = [0,5,2,5,1,5,2,5,1,5,2,5,3,5,1,5,2,5,3,5,1,5,4];
+        this.powering = [
+            0, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 3, 5, 1, 5, 2, 5, 3, 5, 1, 5, 4,
+        ];
         this.touchedItem = idx;
 
         if (this.power === 0) {
             this.sprite.pos[0] = 80;
             var newy = this.sprite.pos[1] - 32;
-			this.powerSprites = [[80, newy+32], [80, newy+32], [320, newy], [80, newy], [128, newy]];
-			this.powerSizes = [[16,16],[16,16],[16,32],[16,32],[16,32]];
-			this.shift = [0,16,-16,0,-16];
+            this.powerSprites = [
+                [80, newy + 32],
+                [80, newy + 32],
+                [320, newy],
+                [80, newy],
+                [128, newy],
+            ];
+            this.powerSizes = [
+                [16, 16],
+                [16, 16],
+                [16, 32],
+                [16, 32],
+                [16, 32],
+            ];
+            this.shift = [0, 16, -16, 0, -16];
             this.power = 1;
-			this.hitbox = [0,0,16,32];
+            this.hitbox = [0, 0, 16, 32];
         } else if (this.power == 1) {
             var curx = this.sprite.pos[0];
-			this.powerSprites = [[curx, 96], [curx, level.invincibility[0]],
-				[curx, level.invincibility[1]], [curx, level.invincibility[2]],
-				[curx, 96]];
-			this.powerSizes[[16,32],[16,32],[16,32],[16,32],[16,32]];
-			this.shift = [0,0,0,0,0];
+            this.powerSprites = [
+                [curx, 96],
+                [curx, level.invincibility[0]],
+                [curx, level.invincibility[1]],
+                [curx, level.invincibility[2]],
+                [curx, 96],
+            ];
+            this.powerSizes[([16, 32], [16, 32], [16, 32], [16, 32], [16, 32])];
+            this.shift = [0, 0, 0, 0, 0];
             this.power = 2;
         } else {
             this.powering = [];
@@ -357,19 +388,34 @@
         }
     };
 
-	Player.prototype.damage = function() {
-		if (this.power === 0) { //if you're already small, you dead!
+    Player.prototype.damage = function () {
+        if (this.power === 0) {
+            //if you're already small, you dead!
             this.die();
-		} else { //otherwise, you get turned into small mario
+        } else {
+            //otherwise, you get turned into small mario
             sounds.pipe.play();
-			this.powering = [0,5,1,5,2,5,1,5,2,5,1,5,2,5,1,5,2,5,1,5,2,5,3];
-			this.shift = [0,16,-16,16];
+            this.powering = [
+                0, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2,
+                5, 3,
+            ];
+            this.shift = [0, 16, -16, 16];
             this.sprite.pos = [160, 0];
-			this.powerSprites = [[160,0], [240, 32], [240, 0], [160, 32]];
-			this.powerSizes = [[16, 32], [16,16], [16,32], [16,16]];
+            this.powerSprites = [
+                [160, 0],
+                [240, 32],
+                [240, 0],
+                [160, 32],
+            ];
+            this.powerSizes = [
+                [16, 32],
+                [16, 16],
+                [16, 32],
+                [16, 16],
+            ];
             this.invincibility = 120;
             this.power = 0;
-			this.hitbox = [0,0,16,16];
+            this.hitbox = [0, 0, 16, 16];
         }
     };
 
@@ -390,57 +436,70 @@
         this.waiting = 0.5;
         this.dying = 2;
 
-		if (this.pos[1] < 240) { //falling into a pit doesn't do the animation.
-			this.targetPos = [this.pos[0], this.pos[1]-128];
-			this.vel = [0,-5];
+        if (this.pos[1] < 240) {
+            //falling into a pit doesn't do the animation.
+            this.targetPos = [this.pos[0], this.pos[1] - 128];
+            this.vel = [0, -5];
         } else {
-			this.vel = [0,0];
+            this.vel = [0, 0];
             this.targetPos = [this.pos[0], this.pos[1] - 16];
         }
     };
 
-	Player.prototype.star = function(idx) {
+    Player.prototype.star = function (idx) {
         delete level.items[idx];
         this.starTime = 660;
-	}
+    };
 
-	Player.prototype.pipe = function(direction, destination) {
+    Player.prototype.pipe = function (direction, destination) {
         sounds.pipe.play();
         this.piping = true;
         this.pipeLoc = destination;
-		switch(direction) {
+        switch (direction) {
             case "LEFT":
-				this.vel = [-1,0];
-				this.targetPos = [Math.round(this.pos[0]-16), Math.round(this.pos[1])]
+                this.vel = [-1, 0];
+                this.targetPos = [
+                    Math.round(this.pos[0] - 16),
+                    Math.round(this.pos[1]),
+                ];
                 break;
             case "RIGHT":
-				this.vel = [1,0];
-				this.targetPos = [Math.round(this.pos[0]+16), Math.round(this.pos[1])]
+                this.vel = [1, 0];
+                this.targetPos = [
+                    Math.round(this.pos[0] + 16),
+                    Math.round(this.pos[1]),
+                ];
                 break;
             case "DOWN":
-				this.vel = [0,1];
-				this.targetPos = [Math.round(this.pos[0]), Math.round(this.pos[1]+this.hitbox[3])]
+                this.vel = [0, 1];
+                this.targetPos = [
+                    Math.round(this.pos[0]),
+                    Math.round(this.pos[1] + this.hitbox[3]),
+                ];
                 break;
             case "UP":
-				this.vel = [0,-1];
-				this.targetPos = [Math.round(this.pos[0]), Math.round(this.pos[1]-this.hitbox[3])]
+                this.vel = [0, -1];
+                this.targetPos = [
+                    Math.round(this.pos[0]),
+                    Math.round(this.pos[1] - this.hitbox[3]),
+                ];
                 break;
         }
-	}
+    };
 
-	Player.prototype.flag = function() {
+    Player.prototype.flag = function () {
         this.noInput = true;
         this.flagging = true;
         this.vel = [0, 2];
         this.acc = [0, 0];
-	}
+    };
 
-	Player.prototype.exit = function() {
+    Player.prototype.exit = function () {
         this.pos[0] += 16;
         this.targetPos[0] = level.exit * 16;
         this.left = true;
         this.setAnimation();
         this.waiting = 1;
         this.exiting = true;
-	}
+    };
 })();

examples/mario/js/prop.js

@@ -1,15 +1,14 @@
-(function() {
-  if (typeof Mario === 'undefined')
-  window.Mario = {};
+(function () {
+    if (typeof Mario === "undefined") window.Mario = {};
 
     //props do even less than entities, so they don't need to inherit really
-  var Prop = Mario.Prop = function(pos, sprite) {
+    var Prop = (Mario.Prop = function (pos, sprite) {
         this.pos = pos;
         this.sprite = sprite;
-  }
+    });
 
     //but we will be using the same Render, more or less.
-  Prop.prototype.render = function(ctx, vX, vY) {
+    Prop.prototype.render = function (ctx, vX, vY) {
         this.sprite.render(ctx, this.pos[0], this.pos[1], vX, vY);
-  }
+    };
 })();

examples/mario/js/resources.js

@@ -1,32 +1,32 @@
 //simple resource loader
-(function() {
+(function () {
     var resourceCache = {};
     var loading = [];
     var readyCallbacks = [];
 
     // Load an image url or an array of image urls
     function load(urlOrArr) {
-        if(urlOrArr instanceof Array) {
-            urlOrArr.forEach(function(url) {
+        if (urlOrArr instanceof Array) {
+            urlOrArr.forEach(function (url) {
                 _load(url);
             });
-        }
-        else {
+        } else {
             _load(urlOrArr);
         }
     }
 
     function _load(url) {
-        if(resourceCache[url]) {
+        if (resourceCache[url]) {
             return resourceCache[url];
-        }
-        else {
+        } else {
             var img = new Image();
-            img.onload = function() {
+            img.onload = function () {
                 resourceCache[url] = img;
 
-                if(isReady()) {
-                    readyCallbacks.forEach(function(func) { func(); });
+                if (isReady()) {
+                    readyCallbacks.forEach(function (func) {
+                        func();
+                    });
                 }
             };
             resourceCache[url] = false;
@@ -40,9 +40,8 @@
 
     function isReady() {
         var ready = true;
-        for(var k in resourceCache) {
-            if(resourceCache.hasOwnProperty(k) &&
-               !resourceCache[k]) {
+        for (var k in resourceCache) {
+            if (resourceCache.hasOwnProperty(k) && !resourceCache[k]) {
                 ready = false;
             }
         }
@@ -57,6 +56,6 @@
         load: load,
         get: get,
         onReady: onReady,
-        isReady: isReady
+        isReady: isReady,
     };
 })();