Even better uhtml integration with Signals

pyscript · Jan 5, 2024 · bb0ae0b · bb0ae0b
1 parent e7c6317
commit bb0ae0b
Show file tree

Hide file tree

Showing 16 changed files with 1,228 additions and 131 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -725,6 +725,7 @@ Please note that if a worker is created explicitly, there won't be any element,
 
   * [multi-pompom](./examples/multi-pompom/) - draw 4 pompom via turtle out of 4 different workers
   * [non-blocking input](./examples/worker-input/) - ask a question from a worker and log results in a sync-like, yet non-blocking, style
+  * [reactive UI](./examples/uhtml/) - a different approach to render safely HTML content and use [Preact Signals](https://preactjs.com/guide/v10/signals/) to react to changes without needing to orchestrate updates manually
 
 
 ## Interpreter Features

diff --git a/docs/examples/uhtml/index.html b/docs/examples/uhtml/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <title>uhtml/preactive in Python</title>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/polyscript"></script>
+        <script type="pyodide" src="./index.py" config="./py-config.toml"></script>
+    </head>
+    <body></body>
+</html>
diff --git a/docs/examples/uhtml/index.py b/docs/examples/uhtml/index.py
@@ -0,0 +1,28 @@
+from uhtml import local
+from js import document
+
+# grab utilities passing current module name
+ui = local(__name__)
+
+# define handlers and whatnot
+def h3_click(event):
+  print(event.type)
+
+def button_click(event):
+  count.value = count.value + 1
+
+# define signals and/or computed
+count = ui.signal(0)
+who = ui.computed(lambda: f"World {count.value}!")
+
+# render via a callback that can react to changes
+ui.render(document.body, lambda: ui.html(
+    """
+      <h3 onclick=${h3_click}>
+          Hello ${who}
+      </h3>
+      <button onclick=${button_click}>
+        Clicks ${count}
+      </button>
+    """
+))
diff --git a/docs/examples/uhtml/mpy-config.toml b/docs/examples/uhtml/mpy-config.toml
@@ -0,0 +1,5 @@
+[js_modules.main]
+"https://cdn.jsdelivr.net/npm/uhtml/preactive.js" = "uhtml"
+
+[[fetch]]
+files = ["./template.py", "./uhtml.py"]
diff --git a/docs/examples/uhtml/py-config.toml b/docs/examples/uhtml/py-config.toml
@@ -0,0 +1,5 @@
+[js_modules.main]
+"https://cdn.jsdelivr.net/npm/uhtml/preactive.js" = "uhtml"
+
+[[fetch]]
+files = ["./uhtml.py"]