Even better uhtml integration with Signals

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

Hide file tree

Showing 15 changed files with 1,227 additions and 131 deletions.
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"]