A signals example/proposal

WebReflection · WebReflection · commit 705a8f705ad7 · 2025-10-20T10:08:32.000+02:00
diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.js.map b/docs/index.js.map
diff --git a/test/pyodide/index.html b/test/pyodide/index.html
@@ -3,10 +3,13 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script>
+      globalThis.fn = () => ({ test() { return 1 } }).test.bind(null);
+    </script>
     <script type="module" src="../../dist/index.js"></script>
     <script type="pyodide" async worker>
-      from polyscript import xworker
-      print(xworker.window.Function('return 1')())
+from polyscript import xworker
+print(xworker.window.fn()())
     </script>
   </head>
 </html>
diff --git a/test/raw/pyodide/index.html b/test/raw/pyodide/index.html
@@ -4,13 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <script type="module">
-      import { serialize } from 'https://esm.run/@ungap/serialization-registry';
-      import '../converter.js';
-
-      globalThis.test = arg => {
-        console.log(...serialize(arg));
-      };
-
+      globalThis.test = () => new Proxy(() => 1, {
+        apply(target, thisArg, argumentsList) {
+          for (const k in thisArg);
+          return target(...argumentsList);
+        }
+      });
       const base = 'https://cdn.jsdelivr.net/npm/pyodide@latest';
       const { loadPyodide } = await import(`${base}/pyodide.mjs`);
       const interpreter = await loadPyodide();
@@ -19,7 +18,7 @@
     </script>
     <script type="pyodide" async>
       import js
-      js.test([{'a': 123}, {'a': 456}])
+      js.test()()
     </script>
   </head>
 </html>
diff --git a/test/signals/config.toml b/test/signals/config.toml
@@ -0,0 +1,2 @@
+[files]
+"./signals.py" = ""
diff --git a/test/signals/index.html b/test/signals/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>body { font-family: monospace; }</style>
+    <script type="module">
+      // PyScript (actually just Polyscript)
+      import "../../dist/index.js";
+
+      // the smallest signals library I could think of
+      import * as signals from "https://esm.run/dom-cue";
+      globalThis.signals = signals;
+    </script>
+</head>
+<body>
+  <button id="increment">+</button>
+  <span id="value">0</span>
+  <button id="decrement">-</button>
+  <script type="micropython" config="./config.toml" src="./main.py"></script>
+</body>
+</html>
diff --git a/test/signals/main.py b/test/signals/main.py
@@ -0,0 +1,26 @@
+from js import document
+from signals import signal, effect
+
+increment, value, decrement, = document.querySelectorAll("#increment, #value, #decrement")
+
+# a signal that holds the value 0 at the beginning
+counter = signal(0)
+extra = signal(1)
+
+# an effect that automatically updates on `counter` changes
+@effect
+def track_counter():
+    value.textContent = f"{counter.value} + {extra.value}"
+
+# a function that adds the given value to the `counter`
+def add(i):
+    counter.value += i
+    extra.value += i
+
+# two listeners, not much DOM API involved in here
+# just the explicit intent of the operation, everything else follows ✨
+increment.onclick = lambda _: add(1)
+decrement.onclick = lambda _: add(-1)
+
+# demo: how to stop an effect?
+# import js; js.track_counter = track_counter
diff --git a/test/signals/signals.py b/test/signals/signals.py
@@ -0,0 +1,8 @@
+import js
+signal = js.signals.signal
+js_effect = js.signals.effect
+
+def effect(fn):
+    return js_effect(fn)
+
+__all__ = ["signal", "effect"]
