A signals example/proposal

WebReflection · WebReflection · commit e4dab8792379 · 2025-10-14T16:34:01.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,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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"></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,16 @@
+from js import document
+from signals import signal, effect
+
+increment, value, decrement, = document.querySelectorAll("#increment, #value, #decrement")
+
+counter = signal(0)
+
+@effect
+def track_state():
+    value.textContent = counter.value
+
+def add(value):
+    counter.value += value
+
+increment.onclick = lambda _: add(1)
+decrement.onclick = lambda _: add(-1)
diff --git a/test/signals/signals.py b/test/signals/signals.py
@@ -0,0 +1,5 @@
+import js
+signal = js.signals.signal
+
+def effect(fn):
+    js.signals.effect(fn)
