Bump to version 2026.1.1 and carefully re-check the new example apps.

ntoll · ntoll · commit f04fb0605ac6 · 2026-01-20T13:01:04.000Z
diff --git a/docs/beginning-pyscript.md b/docs/beginning-pyscript.md
@@ -118,8 +118,8 @@ module, and a `<link>` to some PyScript specific CSS, in the document's
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <title>🦜 Polyglot - Piratical PyScript</title>
-      <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-      <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+      <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+      <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
   </head>
   <body>
 
@@ -165,8 +165,8 @@ In the end, our HTML should look like this:
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <title>🦜 Polyglot - Piratical PyScript</title>
-      <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-      <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+      <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+      <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
   </head>
   <body>
     <h1>Polyglot 🦜 💬 🇬🇧 ➡️ 🏴‍☠️</h1>
@@ -308,7 +308,7 @@ To run PyScript offline, without the need of a CDN or internet connection, read
 the [offline guide](user-guide/offline.md) section of the user guide.
 
 We also provide an `offline.zip` file with
-[each release](https://pyscript.net/releases/2025.11.2/). This file contains
+[each release](https://pyscript.net/releases/2026.1.1/). This file contains
 everything you need for an offline version of PyScript: PyScript itself,
 versions of Pyodide and MicroPython, and an index.html page from which you
 could create your offline-first PyScript work.
diff --git a/docs/example-apps/bouncing-ball/index.html b/docs/example-apps/bouncing-ball/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>PyGame-CE Bouncing Ball</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, sans-serif;
diff --git a/docs/example-apps/colour-picker/index.html b/docs/example-apps/colour-picker/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Interactive Colour Picker</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, -apple-system, sans-serif;
diff --git a/docs/example-apps/colour-picker/main.py b/docs/example-apps/colour-picker/main.py
@@ -48,7 +48,7 @@ def update_display(hex_colour):
     Update the colour display with the given hex colour.
     """
     display = page["#colour-display"]
-    display.style.backgroundColor = hex_colour
+    display.style["background-color"] = hex_colour
     display.content = hex_colour
 
 
@@ -91,11 +91,12 @@ def render_history():
     Render colour history.
     """
     container = page["#history-colours"]
-    container.clear()
+    container.replaceChildren()
     for colour in _HISTORY:
-        colour_div = div(Class="history-colour", title=colour)
-        colour_div.style["backgroundColor"] = colour
+        colour_div = div(classes="history-colour", title=colour)
+        colour_div.style["background-color"] = colour
         colour_div.dataset.colour = colour
+        when("click", colour_div)(handle_history_click)
         container.append(colour_div)
 
 
@@ -154,7 +155,6 @@ def handle_preset_click(event):
     update_controls(r, g, b)
 
 
-@when("click", ".history-colour")
 def handle_history_click(event):
     """
     Handle clicks on history colours.
diff --git a/docs/example-apps/display-demo/index.html b/docs/example-apps/display-demo/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Display Demo</title>
     <link rel="stylesheet" 
-      href="https://pyscript.net/releases/2025.11.2/core.css">
+      href="https://pyscript.net/releases/2026.1.1/core.css">
     <script type="module" 
-      src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+      src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, -apple-system, sans-serif;
diff --git a/docs/example-apps/note-taker/index.html b/docs/example-apps/note-taker/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Note Taker</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, sans-serif;
diff --git a/docs/example-apps/photobooth/index.html b/docs/example-apps/photobooth/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Photobooth</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, sans-serif;
diff --git a/docs/example-apps/photobooth/main.py b/docs/example-apps/photobooth/main.py
@@ -37,12 +37,13 @@ def capture_photo(event):
     """
     Capture a still frame from the video stream and display it in the canvas.
     """
+    print("YES!")
     video = page["#camera"]
     canvas = page["#photo"]
     # Get the canvas 2D context.
     ctx = canvas.getContext("2d")
-    # Draw the current video frame onto the canvas.
-    ctx.drawImage(video, 0, 0, 400, 300)
+    # Draw the current video frame onto the canvas from the raw video element.
+    ctx.drawImage(video._dom_element, 0, 0, 400, 300)
     # Update status.
     status = page["#status"]
     status.content = "Photo captured!"
diff --git a/docs/example-apps/pirate-translator/index.html b/docs/example-apps/pirate-translator/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>🦜 Polyglot - Piratical PyScript</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
   </head>
   <body>
     <h1>Polyglot 🦜 💬 🇬🇧 ➡️ 🏴‍☠️</h1>
diff --git a/docs/example-apps/prime-worker/index.html b/docs/example-apps/prime-worker/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Prime Numbers with Workers</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, sans-serif;
diff --git a/docs/example-apps/prime-worker/main.py b/docs/example-apps/prime-worker/main.py
@@ -36,7 +36,7 @@ async def find_primes(event):
     find_btn.disabled = True
     stop_btn.disabled = False
     limit_input.disabled = True
-    output.content = f"Computing primes up to {limit:,}..."
+    output.innerText = f"Computing primes up to {limit:,}..."
     try:
         # Get the worker and call its exported function.
         worker = await workers["primes"]
@@ -50,9 +50,9 @@ async def find_primes(event):
             primes_str = ", ".join(str(p) for p in first_20)
             method = "NumPy" if use_numpy else "Pure Python"
             # Display the results in the UI.
-            output.content = f"Found {result['count']:,} primes up to {limit:,}!\n\nMethod: {method}\nTime: {elapsed:.3f} seconds\n\nFirst 20: {primes_str}"
+            output.innerText = f"Found {result['count']:,} primes up to {limit:,}!\n\nMethod: {method}\nTime: {elapsed:.3f} seconds\n\nFirst 20: {primes_str}"
     except Exception as e:
-        output.content = f"Error: {e}"
+        output.innerText = f"Error: {e}"
     finally:
         # Reset UI state.
         _computing = False
diff --git a/docs/example-apps/task-board-ffi/index.html b/docs/example-apps/task-board-ffi/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Task Board - FFI</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, -apple-system, sans-serif;
diff --git a/docs/example-apps/task-board-web/index.html b/docs/example-apps/task-board-web/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Task Board - pyscript.web</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
     <style>
       body {
         font-family: system-ui, -apple-system, sans-serif;
diff --git a/docs/example-apps/task-board-web/main.py b/docs/example-apps/task-board-web/main.py
@@ -149,7 +149,7 @@ def add_task(event):
     # This task's index in the tasks list.
     task_index = len(_TASKS)
     # Create the checkbox for marking complete.
-    checkbox = web.input(
+    checkbox = web.input_(
         type="checkbox",
         classes=["checkbox"]
     )
@@ -220,9 +220,9 @@ def select_priority(event):
     priority_btns = web.page.find(".priority-btn")
     # Remove "selected" styling from all buttons.
     for btn in priority_btns:
-        btn.classes.remove("selected")
+        btn.classes.discard("selected")
     # Add "selected" styling to the clicked button.
-    event.target.classes.add("selected")
+    event.target.classList.add("selected")
     # Update which priority will be used for new tasks.
     _SELECTED_PRIORITY = event.target.dataset.priority
 
@@ -240,9 +240,9 @@ def filter_tasks(event):
     filter_btns = web.page.find(".filter-btn")
     # Remove "active" styling from all buttons.
     for btn in filter_btns:
-        btn.classes.remove("active")
+        btn.classes.discard("active")
     # Add "active" styling to the clicked button.
-    event.target.classes.add("active")
+    event.target.classList.add("active")
     # Update the current filter setting.
     _CURRENT_FILTER = event.target.dataset.filter
     # Update which tasks are visible.
diff --git a/docs/faq.md b/docs/faq.md
@@ -430,7 +430,7 @@ versions or use `latest`:
 
 ```html
 <!-- Specific version (recommended for production). -->
-<script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+<script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
 
 <!-- Latest version (useful for development). -->
 <script type="module" src="https://pyscript.net/latest/core.js"></script>
@@ -461,7 +461,7 @@ You can create workers programmatically from JavaScript:
 
 ```html
 <script type="module">
-import { PyWorker } from "https://pyscript.net/releases/2025.11.2/core.js";
+import { PyWorker } from "https://pyscript.net/releases/2026.1.1/core.js";
 
 const worker = new PyWorker("./worker.py", {type: "pyodide"});
 
diff --git a/docs/index.md b/docs/index.md
@@ -6,8 +6,8 @@
 **Step 1:** Add these two lines to the `<head>` of your HTML document:
 
 ```html
-<link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css" />
-<script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+<link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css" />
+<script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
 ```
 
 **Step 2:** Start PyScript with a `<script>` tag in the `<body>` of your HTML document:
diff --git a/docs/user-guide/configuration.md b/docs/user-guide/configuration.md
@@ -667,8 +667,8 @@ Here's a complete example showing common configuration options:
   <head>
     <meta charset="utf-8" />
     <title>My PyScript App</title>
-    <link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
-    <script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>
   </head>
   <body>
     <h1>Data Analysis</h1>
diff --git a/docs/user-guide/from_javascript.md b/docs/user-guide/from_javascript.md
@@ -41,7 +41,7 @@ serialised to formats JavaScript can understand.
 JavaScript code imports the storage module from PyScript core:
 
 ```javascript title="Access storage in JavaScript."
-import storage from 'https://pyscript.net/releases/2025.11.2/storage.js';
+import storage from 'https://pyscript.net/releases/2026.1.1/storage.js';
 
 
 const my_store = await storage(name="shared");
@@ -81,7 +81,7 @@ use Python from pure JavaScript without writing PyScript tags.
 Import the `donkey` function and create a worker with it:
 
 ```javascript title="Call for the PyScript donkey."
-import { donkey } from 'https://pyscript.net/releases/2025.11.2/core.js';
+import { donkey } from 'https://pyscript.net/releases/2026.1.1/core.js';
 
 const py_donkey = await donkey({
   type: 'mpy',        // Use MicroPython ('py' for Pyodide).
diff --git a/docs/user-guide/offline.md b/docs/user-guide/offline.md
@@ -30,7 +30,7 @@ libraries, the package files must also be available offline.
 ## Shortcut
 
 Helpfully, since the end of 2025, all
-[releases of PyScript](https://pyscript.net/releases/2025.11.2/)
+[releases of PyScript](https://pyscript.net/releases/2026.1.1/)
 have an associated `offline`
 zip file containing everything you need. Just download it, unpack it and
 start to modify the content of the `index.html` found therein to your needs.
diff --git a/docs/user-guide/plugins.md b/docs/user-guide/plugins.md
@@ -113,7 +113,7 @@ references fail.
 This works because everything is self-contained:
 
 ```js title="Everything is in the scope of the inner function."
-import { hooks } from "https://pyscript.net/releases/2025.11.2/core.js";
+import { hooks } from "https://pyscript.net/releases/2026.1.1/core.js";
 
 hooks.worker.onReady.add(() => {
     // Define global variable if it doesn't exist.
@@ -126,7 +126,7 @@ hooks.worker.onReady.add(() => {
 This fails because of the outer scope reference:
 
 ```js title="Failure because the inner function won't have access to 'i'."
-import { hooks } from "https://pyscript.net/releases/2025.11.2/core.js";
+import { hooks } from "https://pyscript.net/releases/2026.1.1/core.js";
 
 // This won't work in workers!
 let i = 0;
@@ -150,7 +150,7 @@ Here's a complete plugin that logs lifecycle events to the console:
 
 ```js title="A contrived example plugin."
 // Import hooks from PyScript.
-import { hooks } from "https://pyscript.net/releases/2025.11.2/core.js";
+import { hooks } from "https://pyscript.net/releases/2026.1.1/core.js";
 
 // Register main thread hooks.
 hooks.main.onReady.add((wrap, element) => {
@@ -207,9 +207,9 @@ Include this plugin before PyScript:
     
     <!-- PyScript loads after. -->
     <link rel="stylesheet" 
-      href="https://pyscript.net/releases/2025.11.2/core.css">
+      href="https://pyscript.net/releases/2026.1.1/core.css">
     <script type="module" 
-      src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+      src="https://pyscript.net/releases/2026.1.1/core.js"></script>
 </head>
 <body>
     <script type="mpy">
diff --git a/docs/user-guide/pygame-ce.md b/docs/user-guide/pygame-ce.md
@@ -113,9 +113,9 @@ The HTML file needs a canvas element and the script tag:
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="stylesheet" 
-    href="https://pyscript.net/releases/2025.11.2/core.css">
+    href="https://pyscript.net/releases/2026.1.1/core.css">
   <script type="module" 
-    src="https://pyscript.net/releases/2025.11.2/core.js"></script>
+    src="https://pyscript.net/releases/2026.1.1/core.js"></script>
 </head>
 <body>
   <canvas id="canvas" style="image-rendering: pixelated"></canvas>
diff --git a/pyscript/display.py b/pyscript/display.py
@@ -46,7 +46,9 @@ def _render_image(mime, value, meta):
     Render image (`mime`) data (`value`) as an HTML img element with data URL.
     Any `meta` attributes are added to the img tag.
 
-    Accepts both raw bytes and base64-encoded strings for flexibility.
+    Accepts both raw bytes and base64-encoded strings for flexibility. This
+    only handles PNG and JPEG images. SVG images are handled separately as
+    their raw XML content (which the browser can render directly).
     """
     if isinstance(value, bytes):
         value = base64.b64encode(value).decode("utf-8")
diff --git a/pyscript/events.py b/pyscript/events.py
diff --git a/version-update.js b/version-update.js
diff --git a/version.json b/version.json
