self review 2: Add client-server reconciliation, clean-up wheel script

Author: Archmonger

src/build_scripts/build_local_wheel.py

@@ -5,11 +5,13 @@
 
 from __future__ import annotations
 
+import importlib.util
 import logging
 import os
 import re
 import shutil
 import subprocess
+import sys
 from pathlib import Path
 
 _logger = logging.getLogger(__name__)
@@ -47,6 +49,9 @@ def _hatch_build_command(root_dir: Path) -> list[str] | None:
     if hatch_command := shutil.which("hatch"):
         return [hatch_command, "build", "-t", "wheel"]
 
+    if importlib.util.find_spec("hatch") is not None:
+        return [sys.executable, "-m", "hatch", "build", "-t", "wheel"]
+
     return None
 
 

src/js/packages/@reactpy/client/src/components.tsx

@@ -116,19 +116,37 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
   const lastUserValue = useRef(props.value);
   const lastChangeTime = useRef(0);
   const lastInputDebounce = useRef(DEFAULT_INPUT_DEBOUNCE);
+  const reconcileTimeout = useRef<number | null>(null);
 
   // honor changes to value from the client via props
   useEffect(() => {
-    // If the new prop value matches what we last sent, we are in sync.
-    // If it differs, we only update if sufficient time has passed since user input,
-    // effectively debouncing server overrides during rapid typing.
-    const now = Date.now();
-    if (
-      props.value === lastUserValue.current ||
-      now - lastChangeTime.current >= lastInputDebounce.current
-    ) {
-      setValue(props.value);
-    }
+    const reconcileValue = () => {
+      // If the new prop value matches what we last sent, we are in sync.
+      // If it differs, wait until the debounce window expires before applying it.
+      const elapsed = Date.now() - lastChangeTime.current;
+      if (
+        props.value === lastUserValue.current ||
+        elapsed >= lastInputDebounce.current
+      ) {
+        reconcileTimeout.current = null;
+        setValue(props.value);
+        return;
+      }
+
+      reconcileTimeout.current = window.setTimeout(
+        reconcileValue,
+        Math.max(0, lastInputDebounce.current - elapsed),
+      );
+    };
+
+    reconcileValue();
+
+    return () => {
+      if (reconcileTimeout.current !== null) {
+        window.clearTimeout(reconcileTimeout.current);
+        reconcileTimeout.current = null;
+      }
+    };
   }, [props.value]);
 
   for (const [name, prop] of Object.entries(props)) {

tests/test_build_local_wheel.py

@@ -0,0 +1,42 @@
+from __future__ import annotations
+
+import importlib.util
+from pathlib import Path
+from unittest import mock
+
+
+def _load_build_local_wheel_module():
+    module_path = (
+        Path(__file__).resolve().parents[1]
+        / "src"
+        / "build_scripts"
+        / "build_local_wheel.py"
+    )
+    spec = importlib.util.spec_from_file_location("build_local_wheel", module_path)
+    assert spec is not None
+    assert spec.loader is not None
+
+    module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(module)
+    return module
+
+
+def test_hatch_build_command_uses_python_module_when_available(tmp_path):
+    build_local_wheel = _load_build_local_wheel_module()
+
+    with (
+        mock.patch.object(build_local_wheel.shutil, "which", return_value=None),
+        mock.patch.object(
+            build_local_wheel.importlib.util,
+            "find_spec",
+            return_value=object(),
+        ),
+    ):
+        assert build_local_wheel._hatch_build_command(tmp_path) == [
+            build_local_wheel.sys.executable,
+            "-m",
+            "hatch",
+            "build",
+            "-t",
+            "wheel",
+        ]

tests/test_core/test_events.py

@@ -649,7 +649,9 @@ async def add_top(event):
 async def test_controlled_input_typing(display: DisplayFixture):
     """
     Test that a controlled input updates correctly even with rapid typing.
-    This validates that event queueing/processing order is maintained.
+    This validates that user inputs are processed in the correct order and that the
+    event queueing/processing order is consistent with user expectations, even if the
+    server is still processing previous events.
     """
 
     @reactpy.component
@@ -659,12 +661,15 @@ def ControlledInput():
         def on_change(event):
             set_value(event["target"]["value"])
 
-        return reactpy.html.input(
-            {
-                "value": value,
-                "onChange": on_change,
-                "id": "controlled-input",
-            }
+        return reactpy.html.div(
+            reactpy.html.input(
+                {
+                    "value": value,
+                    "onChange": on_change,
+                    "id": "controlled-input",
+                },
+            ),
+            reactpy.html.pre({"id": "server-value"}, value),
         )
 
     await display.show(ControlledInput)
@@ -678,9 +683,13 @@ def on_change(event):
     # Wait a bit for all events to settle
     await asyncio.sleep(0.5)
 
-    # Check the final value
+    # Ensure all characters stayed within the client, even if server updates were in-flight
     assert (await inp.evaluate("node => node.value")) == target_text
 
+    # Ensure the server and client are in sync
+    server_value = await display.page.locator("#server-value").text_content()
+    assert server_value == target_text
+
 
 async def test_controlled_input_respects_custom_debounce(display: DisplayFixture):
     @reactpy.component
@@ -710,10 +719,12 @@ def on_change(event: Event):
     assert (await inp.evaluate("node => node.value")) == "A"
 
 
-async def test_controlled_input_default_debounce_prefers_latest_client_value(
+async def test_controlled_input_default_debounce_reconciles_server_value(
     display: DisplayFixture,
 ):
-    """Prefer the latest client value for a controlled input when using debounce, even if the server is still processing an older event."""
+    """Verifies if the client keeps the latest user-provided input value even
+    if it received a conflicting server update within the debounce period, then
+    ultimately reconciles once debounce expires."""
 
     @reactpy.component
     def ControlledInput():
@@ -722,18 +733,35 @@ def ControlledInput():
         def on_change(event: Event):
             set_value(event.target.value.upper())
 
-        return reactpy.html.input(
-            {
-                "value": value,
-                "onChange": on_change,
-                "id": "controlled-input",
-            }
+        return reactpy.html.div(
+            reactpy.html.input(
+                {
+                    "value": value,
+                    "onChange": on_change,
+                    "id": "controlled-input",
+                }
+            ),
+            reactpy.html.pre({"id": "server-value"}, value),
         )
 
     await display.show(ControlledInput)
 
     inp = await display.page.wait_for_selector("#controlled-input")
     await inp.type("a", delay=0)
 
-    await asyncio.sleep(0.5)
+    await display.page.wait_for_function(
+        """
+        () => {
+            const input = document.getElementById('controlled-input');
+            const serverValue = document.getElementById('server-value');
+            return input?.value === 'a' && serverValue?.textContent === 'A';
+        }
+        """
+    )
     assert (await inp.evaluate("node => node.value")) == "a"
+    assert await display.page.locator("#server-value").text_content() == "A"
+
+    await display.page.wait_for_function(
+        "() => document.getElementById('controlled-input')?.value === 'A'"
+    )
+    assert (await inp.evaluate("node => node.value")) == "A"