Cleanup PyScript renderer & use Bun for building JS (#254)

- Switch to `Bun` for building JS
- Minor cleanup to pyscript renderer
- Revert pyscript version to 0.5 due to [bugs](pyscript/pyscript#2228)

Author: Archmonger

.editorconfig

@@ -14,10 +14,14 @@ end_of_line = lf
 indent_size = 4
 max_line_length = 120
 
+[*.yml]
+indent_size = 4
+
 [*.md]
 indent_size = 4
 
 [*.html]
+indent_size = 4
 max_line_length = off
 
 [*.js]

.github/workflows/publish-develop-docs.yml

@@ -11,6 +11,9 @@ jobs:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
             - uses: actions/setup-python@v5
               with:
                   python-version: 3.x

.github/workflows/publish-py.yml

@@ -12,6 +12,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
             - name: Set up Python
               uses: actions/setup-python@v5
               with:

.github/workflows/publish-release-docs.yml

@@ -11,6 +11,9 @@ jobs:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
             - uses: actions/setup-python@v5
               with:
                   python-version: 3.x

.github/workflows/test-docs.yml

@@ -17,6 +17,9 @@ jobs:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
             - uses: actions/setup-python@v5
               with:
                   python-version: 3.x

.github/workflows/test-src.yml

@@ -18,6 +18,9 @@ jobs:
                 python-version: ["3.9", "3.10", "3.11", "3.12"]
         steps:
             - uses: actions/checkout@v4
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
             - name: Use Python ${{ matrix.python-version }}
               uses: actions/setup-python@v5
               with:

docs/examples/html/pyscript-setup-local-interpreter.html

@@ -0,0 +1 @@
+{% pyscript_setup config='{"interpreter":"/static/pyodide/pyodide.mjs"}' %}

docs/src/about/code.md

@@ -19,6 +19,7 @@
 If you plan to make code changes to this repository, you will need to install the following dependencies first:
 
 -   [Python 3.9+](https://www.python.org/downloads/)
+-   [Bun](https://bun.sh/)
 -   [Git](https://git-scm.com/downloads)
 
 Once done, you should clone this repository:

docs/src/reference/template-tag.md

@@ -391,3 +391,17 @@ You can optionally use this tag to configure the current PyScript environment. F
         ```python
         {% include "../../examples/python/pyscript-setup-config-object.py" %}
         ```
+
+??? question "Can I use a local interpreter for PyScript?"
+
+    Yes, you can set up a local interpreter by following PyScript's [standard documentation](https://docs.pyscript.net/latest/user-guide/offline/#local-pyodide-packages).
+
+    To summarize,
+
+    1. Download the latest Pyodide bundle from the [Pyodide GitHub releases page](https://github.com/pyodide/pyodide/releases) (for example `pyodide-0.26.3.tar.bz2`).
+    2. Extract the contents of the bundle to your project's static files.
+    3. Configure your `#!jinja {% pyscript_setup %}` template tag to use `pyodide` as an interpreter.
+
+        ```jinja linenums="0"
+        {% include "../../examples/html/pyscript-setup-local-interpreter.html" %}
+        ```

noxfile.py

@@ -31,14 +31,14 @@ def test_python(session: Session) -> None:
     settings_files = glob(settings_glob)
     assert settings_files, f"No Django settings files found at '{settings_glob}'!"
     for settings_file in settings_files:
-        settings_module = settings_file.strip(".py").replace("/", ".").replace("\\", ".")
+        settings_module = (
+            settings_file.strip(".py").replace("/", ".").replace("\\", ".")
+        )
         session.run(
             "python",
             "manage.py",
             "test",
             *posargs,
-            "-v",
-            "2",
             "--settings",
             settings_module,
         )
@@ -62,8 +62,8 @@ def test_style(session: Session) -> None:
 def test_javascript(session: Session) -> None:
     install_requirements_file(session, "test-env")
     session.chdir(ROOT_DIR / "src" / "js")
-    session.run("python", "-m", "nodejs.npm", "install", external=True)
-    session.run("python", "-m", "nodejs.npm", "run", "check")
+    session.run("bun", "install", external=True)
+    session.run("bun", "run", "check", external=True)
 
 
 def install_requirements_file(session: Session, name: str) -> None:

pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["setuptools>=42", "wheel", "nodejs-bin==18.4.0a4"]
+requires = ["setuptools>=42", "wheel"]
 build-backend = "setuptools.build_meta"
 
 [tool.mypy]

requirements/test-env.txt

@@ -3,4 +3,3 @@ twisted
 channels[daphne]>=4.0.0
 tblib
 whitenoise
-nodejs-bin==18.4.0a4

setup.py

@@ -1,16 +1,18 @@
 from __future__ import annotations, print_function
 
 import shutil
+import subprocess
 import sys
 import traceback
-from distutils import log
+from logging import getLogger
 from pathlib import Path
 
-from nodejs import npm
 from setuptools import find_namespace_packages, setup
 from setuptools.command.develop import develop
 from setuptools.command.sdist import sdist
 
+log = getLogger(__name__)
+
 # -----------------------------------------------------------------------------
 # Basic Constants
 # -----------------------------------------------------------------------------
@@ -97,19 +99,44 @@
 # ----------------------------------------------------------------------------
 # Build Javascript
 # ----------------------------------------------------------------------------
+def copy_js_files(source_dir: Path, destination: Path) -> None:
+    if destination.exists():
+        shutil.rmtree(destination)
+    destination.mkdir()
+
+    for file in source_dir.iterdir():
+        if file.is_file():
+            shutil.copy(file, destination / file.name)
+        else:
+            copy_js_files(file, destination / file.name)
+
+
 def build_javascript_first(build_cls: type):
     class Command(build_cls):
         def run(self):
 
             log.info("Installing Javascript...")
-            result = npm.call(["install"], cwd=str(js_dir))
+            result = subprocess.run(
+                ["bun", "install"], cwd=str(js_dir), check=True
+            ).returncode
             if result != 0:
                 log.error(traceback.format_exc())
                 log.error("Failed to install Javascript")
                 raise RuntimeError("Failed to install Javascript")
 
             log.info("Building Javascript...")
-            result = npm.call(["run", "build"], cwd=str(js_dir))
+            result = subprocess.run(
+                [
+                    "bun",
+                    "build",
+                    "./src/index.tsx",
+                    "--outfile",
+                    str(static_dir / "client.js"),
+                    "--minify",
+                ],
+                cwd=str(js_dir),
+                check=True,
+            ).returncode
             if result != 0:
                 log.error(traceback.format_exc())
                 log.error("Failed to build Javascript")
@@ -118,18 +145,12 @@ def run(self):
             log.info("Copying @pyscript/core distribution")
             pyscript_dist = js_dir / "node_modules" / "@pyscript" / "core" / "dist"
             pyscript_static_dir = static_dir / "pyscript"
-            if not pyscript_static_dir.exists():
-                pyscript_static_dir.mkdir()
-            for file in pyscript_dist.iterdir():
-                shutil.copy(file, pyscript_static_dir / file.name)
+            copy_js_files(pyscript_dist, pyscript_static_dir)
 
             log.info("Copying Morphdom distribution")
             morphdom_dist = js_dir / "node_modules" / "morphdom" / "dist"
             morphdom_static_dir = static_dir / "morphdom"
-            if not morphdom_static_dir.exists():
-                morphdom_static_dir.mkdir()
-            for file in morphdom_dist.iterdir():
-                shutil.copy(file, morphdom_static_dir / file.name)
+            copy_js_files(morphdom_dist, morphdom_static_dir)
 
             log.info("Successfully built Javascript")
             super().run()

src/js/bun.lockb

@@ -0,0 +1 @@
+export default [{}];

src/js/eslint.config.js

@@ -1,29 +1,19 @@
 {
-  "description": "ReactPy-Django Client",
-  "main": "src/index.tsx",
   "type": "module",
   "scripts": {
-    "build": "rollup --config",
     "format": "prettier --write . && eslint --fix",
     "check": "prettier --check . && eslint"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react": "^7.32.2",
-    "prettier": "^3.3.3",
-    "rollup": "^4.24.0",
-    "typescript": "^5.6.3"
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.1",
+    "prettier": "^3.3.3"
   },
   "dependencies": {
-    "@pyscript/core": "^0.6.7",
+    "@pyscript/core": "^0.5",
     "@reactpy/client": "^0.3.1",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "morphdom": "^2.7.4",
-    "tslib": "^2.8.0"
+    "morphdom": "^2.7.4"
   }
 }

src/js/package-lock.json

@@ -215,7 +215,6 @@ def _view_to_iframe(
         {
             "src": reverse("reactpy:view_to_iframe", args=[dotted_path]) + query_string,
             "style": {"border": "none"},
-            "onload": 'javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));',
             "loading": "lazy",
         }
         | extra_props

src/js/package.json

@@ -14,7 +14,7 @@ def __init__(self, uuid):
         self.uuid = uuid
 
     @staticmethod
-    def apply_update(update, root_model):
+    def update_model(update, root_model):
         """Apply an update ReactPy's internal DOM model."""
         from jsonpointer import set_pointer
 
@@ -23,21 +23,22 @@ def apply_update(update, root_model):
         else:
             root_model.update(update["model"])
 
-    def render(self, layout, model):
+    def render_html(self, layout, model):
         """Submit ReactPy's internal DOM model into the HTML DOM."""
-        import js
         from pyscript.js_modules import morphdom
 
+        import js
+
         # Create a new container to render the layout into
         container = js.document.getElementById(f"pyscript-{self.uuid}")
-        temp_container = container.cloneNode(False)
-        self.build_element_tree(layout, temp_container, model)
+        temp_root_container = container.cloneNode(False)
+        self.build_element_tree(layout, temp_root_container, model)
 
         # Use morphdom to update the DOM
-        morphdom.default(container, temp_container)
+        morphdom.default(container, temp_root_container)
 
         # Remove the cloned container to prevent memory leaks
-        temp_container.remove()
+        temp_root_container.remove()
 
     def build_element_tree(self, layout, parent, model):
         """Recursively build an element tree, starting from the root component."""
@@ -131,8 +132,8 @@ async def run(self, workspace_function):
         self.delete_old_workspaces()
         root_model: dict = {}
 
-        async with Layout(workspace_function()) as layout:
+        async with Layout(workspace_function()) as root_layout:
             while True:
-                update = await layout.render()
-                self.apply_update(update, root_model)
-                self.render(layout, root_model)
+                update = await root_layout.render()
+                self.update_model(update, root_model)
+                self.render_html(root_layout, root_model)

src/js/rollup.config.mjs

@@ -226,11 +226,11 @@ def pyscript_setup(
         extra_py: Dependencies that need to be loaded on the page for \
             your PyScript components. Each dependency must be contained \
             within it's own string and written in Python requirements file syntax.
-    
+
     Kwargs:
         extra_js: A JSON string or Python dictionary containing a vanilla \
             JavaScript module URL and the `name: str` to access it within \
-            `pyscript.js_modules.*`. 
+            `pyscript.js_modules.*`.
         config: A JSON string or Python dictionary containing PyScript \
             configuration values.
     """

src/js/tsconfig.json

@@ -1,39 +1,59 @@
 import shutil
+import subprocess
 from pathlib import Path
 
-from nodejs import npm
-
 # Make sure the JS is always re-built before running the tests
 js_dir = Path(__file__).parent.parent.parent / "src" / "js"
-assert npm.call(["install"], cwd=str(js_dir)) == 0
-assert npm.call(["run", "build"], cwd=str(js_dir)) == 0
+static_dir = (
+    Path(__file__).parent.parent.parent
+    / "src"
+    / "reactpy_django"
+    / "static"
+    / "reactpy_django"
+)
+assert subprocess.run(["bun", "install"], cwd=str(js_dir), check=True).returncode == 0
+assert (
+    subprocess.run(
+        ["bun", "build", "./src/index.tsx", "--outfile", str(static_dir / "client.js")],
+        cwd=str(js_dir),
+        check=True,
+    ).returncode
+    == 0
+)
+
+
+# Make sure the test environment is always using the latest JS
+def copy_js_files(source_dir: Path, destination: Path) -> None:
+    if destination.exists():
+        shutil.rmtree(destination)
+    destination.mkdir()
+
+    for file in source_dir.iterdir():
+        if file.is_file():
+            shutil.copy(file, destination / file.name)
+        else:
+            copy_js_files(file, destination / file.name)
 
-# Make sure the current PyScript distribution is always available
-pyscript_dist = js_dir / "node_modules" / "@pyscript" / "core" / "dist"
-pyscript_static_dir = (
+
+# Copy PyScript
+copy_js_files(
+    js_dir / "node_modules" / "@pyscript" / "core" / "dist",
     Path(__file__).parent.parent.parent
     / "src"
     / "reactpy_django"
     / "static"
     / "reactpy_django"
-    / "pyscript"
+    / "pyscript",
 )
-if not pyscript_static_dir.exists():
-    pyscript_static_dir.mkdir()
-for file in pyscript_dist.iterdir():
-    shutil.copy(file, pyscript_static_dir / file.name)
-
-# Make sure the current Morphdom distrubiton is always available
-morphdom_dist = js_dir / "node_modules" / "morphdom" / "dist"
-morphdom_static_dir = (
+
+
+# Copy MorphDOM
+copy_js_files(
+    js_dir / "node_modules" / "morphdom" / "dist",
     Path(__file__).parent.parent.parent
     / "src"
     / "reactpy_django"
     / "static"
     / "reactpy_django"
-    / "morphdom"
+    / "morphdom",
 )
-if not morphdom_static_dir.exists():
-    morphdom_static_dir.mkdir()
-for file in morphdom_dist.iterdir():
-    shutil.copy(file, morphdom_static_dir / file.name)