Rename "jsExecutables" to "inlineJavascript"

Author: shawncrawley

docs/source/about/changelog.rst

@@ -30,6 +30,7 @@ Unreleased
 - :pull:`1281` - Added ``reactpy.Vdom`` primitive interface for creating VDOM dictionaries.
 - :pull:`1281` - Added type hints to ``reactpy.html`` attributes.
 - :pull:`1285` - Added support for nested components in web modules
+- :pull:`1289` - Added support for inline JavaScript as event handlers or other attributes that expect a callable
 
 **Changed**
 

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

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

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

@@ -190,8 +190,8 @@ export function createAttributes(
         ),
       ),
       ...Object.fromEntries(
-        Object.entries(model.jsExecutables || {}).map(([name, executable]) =>
-          createJSExecutable(name, executable),
+        Object.entries(model.inlineJavascript || {}).map(([name, inlineJavaScript]) =>
+          createInlineJavascript(name, inlineJavaScript),
         ),
       ),
     }),
@@ -223,13 +223,13 @@ function createEventHandler(
   return [name, eventHandler];
 }
 
-function createJSExecutable(
+function createInlineJavascript(
   name: string,
-  executable: string,
+  inlineJavaScript: string,
 ): [string, () => void] {
   const wrappedExecutable = function (...args: any[]) {
     function handleExecution(...args: any[]) {
-      const evalResult = eval(executable);
+      const evalResult = eval(inlineJavaScript);
       if (typeof evalResult == "function") {
         return evalResult(...args);
       }

src/reactpy/core/layout.py

@@ -262,9 +262,9 @@ 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 "inlineJavascript" in raw_model:
+            inline_javascript = raw_model["inlineJavascript"].copy()
+            new_state.model.current["inlineJavascript"] = inline_javascript
 
         if old_state is None:
             self._render_model_event_handlers_without_old_state(

src/reactpy/core/vdom.py

@@ -25,14 +25,14 @@
     EventHandlerType,
     ImportSourceDict,
     JavaScript,
-    JSExecutableDict,
+    InlineJavascriptDict,
     VdomAttributes,
     VdomChildren,
     VdomDict,
     VdomJson,
 )
 
-EVENT_ATTRIBUTE_PATTERN = re.compile(r"^on\w+")
+EVENT_ATTRIBUTE_PATTERN = re.compile(r"^on[A-Z]\w+")
 
 VDOM_JSON_SCHEMA = {
     "$schema": "http://json-schema.org/draft-07/schema",
@@ -47,7 +47,7 @@
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
                 "eventHandlers": {"$ref": "#/definitions/elementEventHandlers"},
-                "jsExecutables": {"$ref": "#/definitions/elementJSExecutables"},
+                "inlineJavascript": {"$ref": "#/definitions/elementInlineJavascripts"},
                 "importSource": {"$ref": "#/definitions/importSource"},
             },
             # The 'tagName' is required because its presence is a useful indicator of
@@ -77,7 +77,7 @@
             },
             "required": ["target"],
         },
-        "elementJSExecutables": {
+        "elementInlineJavascripts": {
             "type": "object",
             "patternProperties": {
                 ".*": "str",
@@ -172,8 +172,8 @@ 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, js_executables = (
-            separate_attributes_handlers_and_executables(attributes)
+        attributes, event_handlers, inline_javascript = (
+            separate_attributes_handlers_and_inline_javascript(attributes)
         )
         if REACTPY_CHECK_JSON_ATTRS.current:
             json.dumps(attributes)
@@ -194,7 +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 {}),
+                **({"inlineJavascript": inline_javascript} if inline_javascript else {}),
                 **({"importSource": self.import_source} if self.import_source else {}),
             }
 
@@ -227,26 +227,26 @@ def separate_attributes_and_children(
     return _attributes, _children
 
 
-def separate_attributes_handlers_and_executables(
+def separate_attributes_handlers_and_inline_javascript(
     attributes: Mapping[str, Any],
-) -> tuple[VdomAttributes, EventHandlerDict, JSExecutableDict]:
+) -> tuple[VdomAttributes, EventHandlerDict, InlineJavascriptDict]:
     _attributes: VdomAttributes = {}
     _event_handlers: dict[str, EventHandlerType] = {}
-    _js_executables: dict[str, JavaScript] = {}
+    _inline_javascript: dict[str, JavaScript] = {}
 
     for k, v in attributes.items():
         if callable(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):
-            _js_executables[k] = JavaScript(v)
+            _inline_javascript[k] = JavaScript(v)
         elif isinstance(v, JavaScript):
-            _js_executables[k] = v
+            _inline_javascript[k] = v
         else:
             _attributes[k] = v
 
-    return _attributes, _event_handlers, _js_executables
+    return _attributes, _event_handlers, _inline_javascript
 
 
 def _flatten_children(children: Sequence[Any]) -> list[Any]:

src/reactpy/transforms.py

@@ -35,16 +35,21 @@ def normalize_style_attributes(self, vdom: dict[str, Any]) -> None:
                     if ":" in part
                 )
             }
-
+    
     @staticmethod
-    def html_props_to_reactjs(vdom: VdomDict) -> None:
-        """Convert HTML prop names to their ReactJS equivalents."""
-        if "attributes" in vdom:
-            items = cast(VdomAttributes, vdom["attributes"].items())
-            vdom["attributes"] = cast(
-                VdomAttributes,
-                {REACT_PROP_SUBSTITUTIONS.get(k, k): v for k, v in items},
-            )
+    def _attributes_to_reactjs(attributes: VdomAttributes):
+        """Convert HTML attribute names to their ReactJS equivalents.
+        
+        This method is private because it is called prior to instantiating a 
+        Vdom class from a parsed html string, so it does not need to be called
+        as part of this class's instantiation (see comments in __init__ above).
+        """
+        attrs = cast(VdomAttributes, attributes.items())
+        attrs = cast(
+            VdomAttributes,
+            {REACT_PROP_SUBSTITUTIONS.get(k, k): v for k, v in attrs},
+        )
+        return attrs
 
     @staticmethod
     def textarea_children_to_prop(vdom: VdomDict) -> None:

src/reactpy/types.py

@@ -768,7 +768,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
-    "jsExecutables",
+    "inlineJavascript",
     "importSource",
 ]
 ALLOWED_VDOM_KEYS = {
@@ -777,7 +777,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
-    "jsExecutables",
+    "inlineJavascript",
     "importSource",
 }
 
@@ -790,7 +790,7 @@ class VdomTypeDict(TypedDict):
     children: NotRequired[Sequence[ComponentType | VdomChild]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[EventHandlerDict]
-    jsExecutables: NotRequired[JSExecutableDict]
+    inlineJavascript: NotRequired[InlineJavascriptDict]
     importSource: NotRequired[ImportSourceDict]
 
 
@@ -821,7 +821,7 @@ def __getitem__(self, key: Literal["attributes"]) -> VdomAttributes: ...
     @overload
     def __getitem__(self, key: Literal["eventHandlers"]) -> EventHandlerDict: ...
     @overload
-    def __getitem__(self, key: Literal["jsExecutables"]) -> JSExecutableDict: ...
+    def __getitem__(self, key: Literal["inlineJavascript"]) -> InlineJavascriptDict: ...
     @overload
     def __getitem__(self, key: Literal["importSource"]) -> ImportSourceDict: ...
     def __getitem__(self, key: VdomDictKeys) -> Any:
@@ -845,7 +845,7 @@ def __setitem__(
     ) -> None: ...
     @overload
     def __setitem__(
-        self, key: Literal["jsExecutables"], value: JSExecutableDict
+        self, key: Literal["inlineJavascript"], value: InlineJavascriptDict
     ) -> None: ...
     @overload
     def __setitem__(
@@ -880,7 +880,7 @@ class VdomJson(TypedDict):
     children: NotRequired[list[Any]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[dict[str, JsonEventTarget]]
-    jsExecutables: NotRequired[dict[str, JavaScript]]
+    inlineJavascript: NotRequired[dict[str, JavaScript]]
     importSource: NotRequired[JsonImportSource]
 
 
@@ -938,11 +938,11 @@ class EventHandlerType(Protocol):
 EventHandlerDict: TypeAlias = dict[str, EventHandlerType]
 """A dict mapping between event names to their handlers"""
 
-JSExecutableMapping = Mapping[str, JavaScript]
-"""A generic mapping between attribute names to their javascript"""
+InlineJavascriptMapping = Mapping[str, JavaScript]
+"""A generic mapping between attribute names to their inline javascript"""
 
-JSExecutableDict: TypeAlias = dict[str, JavaScript]
-"""A dict mapping between attribute names to their javascript"""
+InlineJavascriptDict: TypeAlias = dict[str, JavaScript]
+"""A dict mapping between attribute names to their inline javascript"""
 
 
 class VdomConstructor(Protocol):

src/reactpy/utils.py

@@ -147,10 +147,11 @@ def _etree_to_vdom(
 
     # Recursively call _etree_to_vdom() on all children
     children = _generate_vdom_children(node, transforms, intercept_links)
+    attributes = RequiredTransforms._attributes_to_reactjs(dict(node.items()))
 
     # Convert the lxml node to a VDOM dict
     constructor = getattr(html, str(node.tag))
-    el = constructor(dict(node.items()), children)
+    el = constructor(attributes, children)
 
     # Perform necessary transformations on the VDOM attributes to meet VDOM spec
     RequiredTransforms(el, intercept_links)

tests/test_utils.py

@@ -194,12 +194,12 @@ def test_string_to_reactpy(case):
                 "key": "my-key",
             },
         },
-        # 9: Includes `jsExecutables` attribue
+        # 9: Includes `inlineJavascript` attribue
         {
             "source": """<button onclick="this.innerText = 'CLICKED'">Click Me</button>""",
             "model": {
                 "tagName": "button",
-                "jsExecutables": {"onclick": "this.innerText = 'CLICKED'"},
+                "inlineJavascript": {"onClick": "this.innerText = 'CLICKED'"},
                 "children": ["Click Me"],
             },
         },