Support dot-notation callbacks on events

Author: Archmonger

src/reactpy/__init__.py

@@ -2,7 +2,7 @@
 from reactpy._html import html
 from reactpy.core import hooks
 from reactpy.core.component import component
-from reactpy.core.events import event
+from reactpy.core.events import Event, event
 from reactpy.core.hooks import (
     create_context,
     use_async_effect,
@@ -27,6 +27,7 @@
 __version__ = "2.0.0b2"
 
 __all__ = [
+    "Event",
     "Layout",
     "Ref",
     "Vdom",

src/reactpy/core/events.py

@@ -1,6 +1,8 @@
 from __future__ import annotations
 
 import asyncio
+import contextlib
+import inspect
 from collections.abc import Sequence
 from typing import Any, Callable, Literal, overload
 
@@ -72,6 +74,18 @@ def setup(function: Callable[..., Any]) -> EventHandler:
     return setup(function) if function is not None else setup
 
 
+class Event(dict):
+    def __getattr__(self, name: str) -> Any:
+        value = self.get(name)
+        return Event(value) if isinstance(value, dict) else value
+
+    def preventDefault(self) -> None:
+        """Prevent the default action of the event."""
+
+    def stopPropagation(self) -> None:
+        """Stop the event from propagating."""
+
+
 class EventHandler:
     """Turn a function or coroutine into an event handler
 
@@ -102,6 +116,19 @@ def __init__(
         target: str | None = None,
     ) -> None:
         self.function = to_event_handler_function(function, positional_args=False)
+
+        if not (stop_propagation and prevent_default):
+            with contextlib.suppress(Exception):
+                func_to_inspect = function
+                while hasattr(func_to_inspect, "__wrapped__"):
+                    func_to_inspect = func_to_inspect.__wrapped__
+
+                source = inspect.getsource(func_to_inspect)
+                if not stop_propagation and ".stopPropagation()" in source:
+                    stop_propagation = True
+                if not prevent_default and ".preventDefault()" in source:
+                    prevent_default = True
+
         self.prevent_default = prevent_default
         self.stop_propagation = stop_propagation
         self.target = target
@@ -145,17 +172,21 @@ def to_event_handler_function(
             async def wrapper(data: Sequence[Any]) -> None:
                 await function(*data)
 
+            wrapper.__wrapped__ = function
+
         else:
 
             async def wrapper(data: Sequence[Any]) -> None:
                 function(*data)
 
+        wrapper.__wrapped__ = function
         return wrapper
     elif not asyncio.iscoroutinefunction(function):
 
         async def wrapper(data: Sequence[Any]) -> None:
             function(data)
 
+        wrapper.__wrapped__ = function
         return wrapper
     else:
         return function

src/reactpy/core/layout.py

@@ -36,6 +36,7 @@
     REACTPY_DEBUG,
 )
 from reactpy.core._life_cycle_hook import LifeCycleHook
+from reactpy.core.events import Event
 from reactpy.core.vdom import validate_vdom_json
 from reactpy.types import (
     ComponentType,
@@ -120,7 +121,8 @@ async def deliver(self, event: LayoutEventMessage | dict[str, Any]) -> None:
 
         if handler is not None:
             try:
-                await handler.function(event["data"])
+                data = [Event(d) if isinstance(d, dict) else d for d in event["data"]]
+                await handler.function(data)
             except Exception:
                 logger.exception(f"Failed to execute event handler {handler}")
         else:

tests/test_core/test_events.py

@@ -1,12 +1,15 @@
 import pytest
 
 import reactpy
+from reactpy import component, html
 from reactpy.core.events import (
+    Event,
     EventHandler,
     merge_event_handler_funcs,
     merge_event_handlers,
     to_event_handler_function,
 )
+from reactpy.core.layout import Layout
 from reactpy.testing import DisplayFixture, poll
 from tests.tooling.common import DEFAULT_TYPE_DELAY
 
@@ -315,3 +318,69 @@ def App():
     generated_divs = await parent.query_selector_all("div")
 
     assert len(generated_divs) == 6
+
+
+def test_detect_prevent_default():
+    def handler(event: Event):
+        event.preventDefault()
+
+    eh = EventHandler(handler)
+    assert eh.prevent_default is True
+
+
+def test_detect_stop_propagation():
+    def handler(event: Event):
+        event.stopPropagation()
+
+    eh = EventHandler(handler)
+    assert eh.stop_propagation is True
+
+
+def test_detect_both():
+    def handler(event: Event):
+        event.preventDefault()
+        event.stopPropagation()
+
+    eh = EventHandler(handler)
+    assert eh.prevent_default is True
+    assert eh.stop_propagation is True
+
+
+def test_no_detect():
+    def handler(event: Event):
+        pass
+
+    eh = EventHandler(handler)
+    assert eh.prevent_default is False
+    assert eh.stop_propagation is False
+
+
+def test_event_wrapper():
+    data = {"a": 1, "b": {"c": 2}}
+    event = Event(data)
+    assert event.a == 1
+    assert event.b.c == 2
+    assert event["a"] == 1
+    assert event["b"]["c"] == 2
+
+
+async def test_vdom_has_prevent_default():
+    @component
+    def MyComponent():
+        def handler(event: Event):
+            event.preventDefault()
+
+        return html.button({"onClick": handler})
+
+    async with Layout(MyComponent()) as layout:
+        await layout.render()
+        # Check layout._event_handlers
+        # Find the handler
+        handler = next(iter(layout._event_handlers.values()))
+        assert handler.prevent_default is True
+
+
+def test_event_export():
+    from reactpy import Event
+
+    assert Event is not None