New branch off of reactive-python#1289 to highlight vdom approach

Author: shawncrawley

src/js/packages/@reactpy/client/src/types.ts

@@ -53,6 +53,7 @@ export type ReactPyVdom = {
   children?: (ReactPyVdom | string)[];
   error?: string;
   eventHandlers?: { [key: string]: ReactPyVdomEventHandler };
+  jsExecutables?: { [key: string]: string };
   importSource?: ReactPyVdomImportSource;
 };
 

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

@@ -189,6 +189,11 @@ export function createAttributes(
           createEventHandler(client, name, handler),
         ),
       ),
+      ...Object.fromEntries(
+        Object.entries(model.jsExecutables || {}).map(([name, executable]) =>
+          createJSExecutable(name, executable),
+        ),
+      ),
     }),
   );
 }
@@ -198,41 +203,43 @@ function createEventHandler(
   name: string,
   { target, preventDefault, stopPropagation }: ReactPyVdomEventHandler,
 ): [string, () => void] {
-  if (target.indexOf("__javascript__: ") == 0) {
-    return [
-      name,
-      function (...args: any[]) {
-        function handleEvent(...args: any[]) {
-          const evalResult = eval(target.replace("__javascript__: ", ""));
-          if (typeof evalResult == "function") {
-            return evalResult(...args);
-          }
-        }
-        if (args.length > 0 && args[0] instanceof Event) {
-          return handleEvent.call(args[0].target, ...args);
-        } else {
-          return handleEvent(...args);
-        }
-      },
-    ];
-  }
-  return [
-    name,
-    function (...args: any[]) {
-      const data = Array.from(args).map((value) => {
-        if (!(typeof value === "object" && value.nativeEvent)) {
-          return value;
-        }
-        const event = value as React.SyntheticEvent<any>;
-        if (preventDefault) {
-          event.preventDefault();
-        }
-        if (stopPropagation) {
-          event.stopPropagation();
-        }
-        return serializeEvent(event.nativeEvent);
-      });
-      client.sendMessage({ type: "layout-event", data, target });
-    },
-  ];
+  const eventHandler = function (...args: any[]) {
+    const data = Array.from(args).map((value) => {
+      if (!(typeof value === "object" && value.nativeEvent)) {
+        return value;
+      }
+      const event = value as React.SyntheticEvent<any>;
+      if (preventDefault) {
+        event.preventDefault();
+      }
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      return serializeEvent(event.nativeEvent);
+    });
+    client.sendMessage({ type: "layout-event", data, target });
+  };
+  eventHandler.isHandler = true;
+  return [name, eventHandler];
+}
+
+function createJSExecutable(
+  name: string,
+  executable: string,
+): [string, () => void] {
+  const wrappedExecutable = function (...args: any[]) {
+    function handleExecution(...args: any[]) {
+      const evalResult = eval(executable);
+      if (typeof evalResult == "function") {
+        return evalResult(...args);
+      }
+    }
+    if (args.length > 0 && args[0] instanceof Event) {
+      return handleExecution.call(args[0].currentTarget, ...args);
+    } else {
+      return handleExecution(...args);
+    }
+  };
+  wrappedExecutable.isHandler = false;
+  return [name, wrappedExecutable];
 }

src/reactpy/core/layout.py

@@ -263,6 +263,10 @@ def _render_model_attributes(
             attrs = raw_model["attributes"].copy()
             new_state.model.current["attributes"] = attrs
 
+        if "jsExecutables" in raw_model:
+            executables = raw_model["jsExecutables"].copy()
+            new_state.model.current["jsExecutables"] = executables
+
         if old_state is None:
             self._render_model_event_handlers_without_old_state(
                 new_state, handlers_by_event

src/reactpy/core/vdom.py

@@ -25,6 +25,7 @@
     EventHandlerType,
     ImportSourceDict,
     JavaScript,
+    JSExecutableDict,
     VdomAttributes,
     VdomChildren,
     VdomDict,
@@ -46,6 +47,7 @@
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
                 "eventHandlers": {"$ref": "#/definitions/elementEventHandlers"},
+                "jsExecutables": {"$ref": "#/definitions/elementJSExecutables"},
                 "importSource": {"$ref": "#/definitions/importSource"},
             },
             # The 'tagName' is required because its presence is a useful indicator of
@@ -75,6 +77,12 @@
             },
             "required": ["target"],
         },
+        "elementJSExecutables": {
+            "type": "object",
+            "patternProperties": {
+                ".*": "str",
+            },
+        },
         "importSource": {
             "type": "object",
             "properties": {
@@ -164,7 +172,9 @@ def __call__(
         """The entry point for the VDOM API, for example reactpy.html(<WE_ARE_HERE>)."""
         attributes, children = separate_attributes_and_children(attributes_and_children)
         key = attributes.get("key", None)
-        attributes, event_handlers = separate_attributes_and_event_handlers(attributes)
+        attributes, event_handlers, js_executables = (
+            separate_attributes_handlers_and_executables(attributes)
+        )
         if REACTPY_CHECK_JSON_ATTRS.current:
             json.dumps(attributes)
 
@@ -184,6 +194,7 @@ def __call__(
                 **({"children": children} if children else {}),
                 **({"attributes": attributes} if attributes else {}),
                 **({"eventHandlers": event_handlers} if event_handlers else {}),
+                **({"jsExecutables": js_executables} if js_executables else {}),
                 **({"importSource": self.import_source} if self.import_source else {}),
             }
 
@@ -216,28 +227,26 @@ def separate_attributes_and_children(
     return _attributes, _children
 
 
-def separate_attributes_and_event_handlers(
+def separate_attributes_handlers_and_executables(
     attributes: Mapping[str, Any],
-) -> tuple[VdomAttributes, EventHandlerDict]:
+) -> tuple[VdomAttributes, EventHandlerDict, JSExecutableDict]:
     _attributes: VdomAttributes = {}
-    _event_handlers: dict[str, EventHandlerType | JavaScript] = {}
+    _event_handlers: dict[str, EventHandlerType] = {}
+    _js_executables: dict[str, JavaScript] = {}
 
     for k, v in attributes.items():
-        handler: EventHandlerType | JavaScript
-
         if callable(v):
-            handler = EventHandler(to_event_handler_function(v))
+            _event_handlers[k] = EventHandler(to_event_handler_function(v))
+        elif isinstance(v, EventHandler):
+            _event_handlers[k] = v
         elif EVENT_ATTRIBUTE_PATTERN.match(k) and isinstance(v, str):
-            handler = JavaScript(v)
-        elif isinstance(v, (EventHandler, JavaScript)):
-            handler = v
+            _js_executables[k] = JavaScript(v)
+        elif isinstance(v, JavaScript):
+            _js_executables[k] = v
         else:
             _attributes[k] = v
-            continue
-
-        _event_handlers[k] = handler
 
-    return _attributes, _event_handlers
+    return _attributes, _event_handlers, _js_executables
 
 
 def _flatten_children(children: Sequence[Any]) -> list[Any]:

src/reactpy/types.py

@@ -768,6 +768,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
+    "jsExecutables",
     "importSource",
 ]
 ALLOWED_VDOM_KEYS = {
@@ -776,6 +777,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
+    "jsExecutables",
     "importSource",
 }
 
@@ -788,6 +790,7 @@ class VdomTypeDict(TypedDict):
     children: NotRequired[Sequence[ComponentType | VdomChild]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[EventHandlerDict]
+    jsExecutables: NotRequired[JavaScript]
     importSource: NotRequired[ImportSourceDict]
 
 
@@ -818,6 +821,8 @@ def __getitem__(self, key: Literal["attributes"]) -> VdomAttributes: ...
     @overload
     def __getitem__(self, key: Literal["eventHandlers"]) -> EventHandlerDict: ...
     @overload
+    def __getitem__(self, key: Literal["jsExecutables"]) -> JSExecutableDict: ...
+    @overload
     def __getitem__(self, key: Literal["importSource"]) -> ImportSourceDict: ...
     def __getitem__(self, key: VdomDictKeys) -> Any:
         return super().__getitem__(key)
@@ -839,6 +844,10 @@ def __setitem__(
         self, key: Literal["eventHandlers"], value: EventHandlerDict
     ) -> None: ...
     @overload
+    def __setitem__(
+        self, key: Literal["jsExecutables"], value: JSExecutableDict
+    ) -> None: ...
+    @overload
     def __setitem__(
         self, key: Literal["importSource"], value: ImportSourceDict
     ) -> None: ...
@@ -871,6 +880,7 @@ class VdomJson(TypedDict):
     children: NotRequired[list[Any]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[dict[str, JsonEventTarget]]
+    jsExecutables: NotRequired[dict[str, JavaScript]]
     importSource: NotRequired[JsonImportSource]
 
 
@@ -923,9 +933,15 @@ class EventHandlerType(Protocol):
 EventHandlerMapping = Mapping[str, EventHandlerType]
 """A generic mapping between event names to their handlers"""
 
-EventHandlerDict: TypeAlias = dict[str, EventHandlerType | JavaScript]
+EventHandlerDict: TypeAlias = dict[str, EventHandlerType]
 """A dict mapping between event names to their handlers"""
 
+JSExecutableMapping = Mapping[str, JavaScript]
+"""A generic mapping between event names to their javascript"""
+
+JSExecutableDict: TypeAlias = dict[str, JavaScript]
+"""A dict mapping between attribute names to their javascript"""
+
 
 class VdomConstructor(Protocol):
     """Standard function for constructing a :class:`VdomDict`"""

src/reactpy/web/templates/react.js

@@ -29,7 +29,7 @@ export function bind(node, config) {
 function wrapEventHandlers(props) {
   const newProps = Object.assign({}, props);
   for (const [key, value] of Object.entries(props)) {
-    if (typeof value === "function" && value.toString().includes(".sendMessage")) {
+    if (typeof value === "function" && value.isHandler) {
       newProps[key] = makeJsonSafeEventHandler(value);
     }
   }