Implement JavaScript type and handle eval

Author: shawncrawley

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

@@ -198,8 +198,23 @@ function createEventHandler(
   name: string,
   { target, preventDefault, stopPropagation }: ReactPyVdomEventHandler,
 ): [string, () => void] {
-  if (target.indexOf("javascript:") == 0) {
-    return [name, eval(target.replace("javascript:", ""))];
+  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,

src/reactpy/core/layout.py

@@ -41,6 +41,7 @@
     ComponentType,
     Context,
     EventHandlerDict,
+    JavaScript,
     Key,
     LayoutEventMessage,
     LayoutUpdateMessage,
@@ -118,7 +119,7 @@ async def deliver(self, event: LayoutEventMessage | dict[str, Any]) -> None:
         # we just ignore the event.
         handler = self._event_handlers.get(event["target"])
 
-        if handler is not None and not isinstance(handler, str):
+        if handler is not None and not isinstance(handler, JavaScript):
             try:
                 await handler.function(event["data"])
             except Exception:
@@ -277,8 +278,8 @@ def _render_model_attributes(
 
         model_event_handlers = new_state.model.current["eventHandlers"] = {}
         for event, handler in handlers_by_event.items():
-            if isinstance(handler, str):
-                target = handler
+            if isinstance(handler, JavaScript):
+                target = "__javascript__: " + handler
                 prevent_default = False
                 stop_propagation = False
             else:
@@ -308,8 +309,8 @@ def _render_model_event_handlers_without_old_state(
 
         model_event_handlers = new_state.model.current["eventHandlers"] = {}
         for event, handler in handlers_by_event.items():
-            if isinstance(handler, str):
-                target = handler
+            if isinstance(handler, JavaScript):
+                target = "__javascript__: " + handler
                 prevent_default = False
                 stop_propagation = False
             else:

src/reactpy/core/vdom.py

@@ -2,6 +2,7 @@
 from __future__ import annotations
 
 import json
+import re
 from collections.abc import Mapping, Sequence
 from typing import (
     Any,
@@ -23,12 +24,15 @@
     EventHandlerDict,
     EventHandlerType,
     ImportSourceDict,
+    JavaScript,
     VdomAttributes,
     VdomChildren,
     VdomDict,
     VdomJson,
 )
 
+EVENT_ATTRIBUTE_PATTERN = re.compile(r"^on[A-Z]")
+
 VDOM_JSON_SCHEMA = {
     "$schema": "http://json-schema.org/draft-07/schema",
     "$ref": "#/definitions/element",
@@ -216,16 +220,16 @@ def separate_attributes_and_event_handlers(
     attributes: Mapping[str, Any],
 ) -> tuple[VdomAttributes, EventHandlerDict]:
     _attributes: VdomAttributes = {}
-    _event_handlers: dict[str, EventHandlerType | str] = {}
+    _event_handlers: dict[str, EventHandlerType | JavaScript] = {}
 
     for k, v in attributes.items():
-        handler: EventHandlerType | str
+        handler: EventHandlerType | JavaScript
 
         if callable(v):
             handler = EventHandler(to_event_handler_function(v))
-        elif isinstance(v, str) and v.startswith("javascript:"):
-            handler = v
-        elif isinstance(v, EventHandler):
+        elif EVENT_ATTRIBUTE_PATTERN.match(k) and isinstance(v, str):
+            handler = JavaScript(v)
+        elif isinstance(v, (EventHandler, JavaScript)):
             handler = v
         else:
             _attributes[k] = v

src/reactpy/types.py

@@ -885,6 +885,10 @@ class JsonImportSource(TypedDict):
     fallback: Any
 
 
+class JavaScript(str):
+    pass
+
+
 class EventHandlerFunc(Protocol):
     """A coroutine which can handle event data"""
 
@@ -919,7 +923,7 @@ class EventHandlerType(Protocol):
 EventHandlerMapping = Mapping[str, EventHandlerType]
 """A generic mapping between event names to their handlers"""
 
-EventHandlerDict: TypeAlias = dict[str, EventHandlerType | str]
+EventHandlerDict: TypeAlias = dict[str, EventHandlerType | JavaScript]
 """A dict mapping between event names to their handlers"""
 
 

src/reactpy/web/templates/react.js

@@ -29,12 +29,8 @@ 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") {
-      if (value.toString().includes(".sendMessage")) {
-          newProps[key] = makeJsonSafeEventHandler(value);
-      } else {
-          newProps[key] = value;
-      }
+    if (typeof value === "function" && value.toString().includes(".sendMessage")) {
+      newProps[key] = makeJsonSafeEventHandler(value);
     }
   }
   return newProps;

tests/test_core/test_events.py

@@ -223,18 +223,15 @@ def outer_click_is_not_triggered(event):
     await poll(lambda: clicked.current).until_is(True)
 
 
-async def test_javascript_event(display: DisplayFixture):
+async def test_javascript_event_as_arrow_function(display: DisplayFixture):
     @reactpy.component
     def App():
         return reactpy.html.div(
             reactpy.html.div(
                 reactpy.html.button(
                     {
                         "id": "the-button",
-                        "onClick": """javascript: () => {
-                            let parent = document.getElementById("the-parent");
-                            parent.appendChild(document.createElement("div"));
-                        }""",
+                        "onClick": '(e) => e.target.innerText = "Thank you!"',
                     },
                     "Click Me",
                 ),
@@ -256,6 +253,30 @@ def App():
     assert len(generated_divs) == 3
 
 
+async def test_javascript_event_as_this_statement(display: DisplayFixture):
+    @reactpy.component
+    def App():
+        return reactpy.html.div(
+            reactpy.html.div(
+                reactpy.html.button(
+                    {
+                        "id": "the-button",
+                        "onClick": 'this.innerText = "Thank you!"',
+                    },
+                    "Click Me",
+                ),
+                reactpy.html.div({"id": "the-parent"}),
+            )
+        )
+
+    await display.show(lambda: App())
+
+    button = await display.page.wait_for_selector("#the-button", state="attached")
+    assert await button.inner_text() == "Click Me"
+    await button.click()
+    assert await button.inner_text() == "Thank you!"
+
+
 async def test_javascript_event_after_state_update(display: DisplayFixture):
     @reactpy.component
     def App():

tests/test_web/js_fixtures/ag-grid-react.js

@@ -0,0 +1,76 @@
+import React from "https://esm.sh/[email protected]"
+import ReactDOM from "https://esm.sh/[email protected]/client"
+import {AgGridReact} from "https://esm.sh/[email protected][email protected],[email protected],[email protected]";
+export {AgGridReact};
+
+loadCSS("https://unpkg.com/@ag-grid-community/[email protected]/ag-grid.css");
+loadCSS("https://unpkg.com/@ag-grid-community/[email protected]/ag-theme-quartz.css")
+
+function loadCSS(href) {  
+    var head = document.getElementsByTagName('head')[0];
+
+    if (document.querySelectorAll(`link[href="${href}"]`).length === 0) {
+        // Creating link element 
+        var style = document.createElement('link');
+        style.id = href;
+        style.href = href;
+        style.type = 'text/css';
+        style.rel = 'stylesheet';
+        head.append(style);
+    }
+}
+
+export function bind(node, config) {
+    const root = ReactDOM.createRoot(node);
+    return {
+        create: (component, props, children) =>
+            React.createElement(component, wrapEventHandlers(props), ...children),
+        render: (element) => root.render(element),
+        unmount: () => root.unmount()
+    };
+}
+
+function wrapEventHandlers(props) {
+    const newProps = Object.assign({}, props);
+    for (const [key, value] of Object.entries(props)) {
+        if (typeof value === "function" && value.toString().includes('.sendMessage')) {
+            newProps[key] = makeJsonSafeEventHandler(value);
+        }
+    }
+    return newProps;
+}
+
+function stringifyToDepth(val, depth, replacer, space) {
+    depth = isNaN(+depth) ? 1 : depth;
+    function _build(key, val, depth, o, a) { // (JSON.stringify() has it's own rules, which we respect here by using it for property iteration)
+        return !val || typeof val != 'object' ? val : (a=Array.isArray(val), JSON.stringify(val, function(k,v){ if (a || depth > 0) { if (replacer) v=replacer(k,v); if (!k) return (a=Array.isArray(v),val=v); !o && (o=a?[]:{}); o[k] = _build(k, v, a?depth:depth-1); } }), o||(a?[]:{}));
+    }
+    return JSON.stringify(_build('', val, depth), null, space);
+}
+
+function makeJsonSafeEventHandler(oldHandler) {
+    // Since we can't really know what the event handlers get passed we have to check if
+    // they are JSON serializable or not. We can allow normal synthetic events to pass
+    // through since the original handler already knows how to serialize those for us.
+    return function safeEventHandler() {
+
+        var filteredArguments = [];
+        Array.from(arguments).forEach(function (arg) {
+            if (typeof arg === "object" && arg.nativeEvent) {
+                // this is probably a standard React synthetic event
+                filteredArguments.push(arg);
+            } else {
+                filteredArguments.push(JSON.parse(stringifyToDepth(arg, 3, (key, value) => {
+                    if (key === '') return value;
+                    try {
+                        JSON.stringify(value);
+                        return value;
+                    } catch (err) {
+                        return (typeof value === 'object') ? value : undefined;
+                    }
+                })))
+            }
+        });
+        oldHandler(...Array.from(filteredArguments));
+    };
+}

tests/test_web/test_module.py

@@ -13,6 +13,7 @@
     poll,
 )
 from reactpy.web.module import NAME_SOURCE, WebModule
+from reactpy.types import JavaScript
 
 JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
 
@@ -389,6 +390,55 @@ async def test_subcomponent_notation_as_obj_attrs(display: DisplayFixture):
     assert len(form_label) == 1
 
 
+async def test_ag_grid_table(display: DisplayFixture):
+    module = reactpy.web.module_from_file(
+        "ag-grid-react", JS_FIXTURES_DIR / "ag-grid-react.js"
+    )
+    AgGridReact = reactpy.web.export(module, "AgGridReact")
+
+    @reactpy.component
+    def App():
+        dummy_bool, set_dummy_bool = reactpy.hooks.use_state(False)
+        row_data, set_row_data = reactpy.hooks.use_state([
+            { "make": "Tesla", "model": "Model Y", "price": 64950, "electric": True },
+            { "make": "Ford", "model": "F-Series", "price": 33850, "electric": False },
+            { "make": "Toyota", "model": "Corolla", "price": 29600, "electric": False },
+        ])
+        col_defs, set_col_defs = reactpy.hooks.use_state([
+            { "field": "make" },
+            { "field": "model" },
+            { "field": "price" },
+            { "field": "electric" },
+        ])
+        default_col_def = {"flex": 1}
+        row_selection = reactpy.hooks.use_memo(lambda: {"mode": "singleRow"})
+        
+        return reactpy.html.div(
+            {"id": "the-parent", "style": {"height": "100vh", "width": "100vw"}, "class": "ag-theme-quartz"},
+            AgGridReact({
+                "style": {"height": "500px"},
+                "rowData": row_data,
+                "columnDefs": col_defs,
+                "defaultColDef": default_col_def,
+                "selection": row_selection,
+                "onRowSelected": lambda x: set_dummy_bool(not dummy_bool),
+                "getRowId": JavaScript("(params) => String(params.data.model);")
+            })
+        )
+
+    await display.show(
+        lambda: App()
+    )
+
+    table_body = await display.page.wait_for_selector(".ag-body-viewport", state="attached")
+    checkboxes = await table_body.query_selector_all(".ag-checkbox-input")
+    await checkboxes[0].click()
+    # Regrab checkboxes, since they should rerender
+    checkboxes = await table_body.query_selector_all(".ag-checkbox-input")
+    checked = await checkboxes[0].is_checked()
+    assert checked is True
+
+
 def test_module_from_string():
     reactpy.web.module_from_string("temp", "old")
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):