Ensure consistent capitalization for JavaScript

Author: shawncrawley

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

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

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

@@ -190,9 +190,9 @@ export function createAttributes(
         ),
       ),
       ...Object.fromEntries(
-        Object.entries(model.inlineJavascript || {}).map(
+        Object.entries(model.inlineJavaScript || {}).map(
           ([name, inlineJavaScript]) =>
-            createInlineJavascript(name, inlineJavaScript),
+            createInlineJavaScript(name, inlineJavaScript),
         ),
       ),
     }),
@@ -224,10 +224,12 @@ function createEventHandler(
   return [name, eventHandler];
 }
 
-function createInlineJavascript(
+function createInlineJavaScript(
   name: string,
   inlineJavaScript: string,
 ): [string, () => void] {
+  /* Function that will execute the string-like InlineJavaScript 
+  via eval in the most appropriate way */
   const wrappedExecutable = function (...args: any[]) {
     function handleExecution(...args: any[]) {
       const evalResult = eval(inlineJavaScript);
@@ -236,8 +238,14 @@ function createInlineJavascript(
       }
     }
     if (args.length > 0 && args[0] instanceof Event) {
+      /* If being triggered by an event, set the event's current
+      target to "this". This ensures that inline
+      javascript statements such as the following work:
+      html.button({"onclick": 'this.value = "Clicked!"'}, "Click Me")*/
       return handleExecution.call(args[0].currentTarget, ...args);
     } else {
+      /* If not being triggered by an event, do not set "this" and
+      just call normally */
       return handleExecution(...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 "inlineJavascript" in raw_model:
-            inline_javascript = raw_model["inlineJavascript"].copy()
-            new_state.model.current["inlineJavascript"] = inline_javascript
+        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

@@ -24,8 +24,8 @@
     EventHandlerDict,
     EventHandlerType,
     ImportSourceDict,
-    InlineJavascriptDict,
-    JavaScript,
+    InlineJavaScript,
+    InlineJavaScriptDict,
     VdomAttributes,
     VdomChildren,
     VdomDict,
@@ -47,7 +47,7 @@
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
                 "eventHandlers": {"$ref": "#/definitions/elementEventHandlers"},
-                "inlineJavascript": {"$ref": "#/definitions/elementInlineJavascripts"},
+                "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"],
         },
-        "elementInlineJavascripts": {
+        "elementInlineJavaScripts": {
             "type": "object",
             "patternProperties": {
                 ".*": "str",
@@ -195,7 +195,7 @@ def __call__(
                 **({"attributes": attributes} if attributes else {}),
                 **({"eventHandlers": event_handlers} if event_handlers else {}),
                 **(
-                    {"inlineJavascript": inline_javascript} if inline_javascript else {}
+                    {"inlineJavaScript": inline_javascript} if inline_javascript else {}
                 ),
                 **({"importSource": self.import_source} if self.import_source else {}),
             }
@@ -231,19 +231,19 @@ def separate_attributes_and_children(
 
 def separate_attributes_handlers_and_inline_javascript(
     attributes: Mapping[str, Any],
-) -> tuple[VdomAttributes, EventHandlerDict, InlineJavascriptDict]:
+) -> tuple[VdomAttributes, EventHandlerDict, InlineJavaScriptDict]:
     _attributes: VdomAttributes = {}
     _event_handlers: dict[str, EventHandlerType] = {}
-    _inline_javascript: dict[str, JavaScript] = {}
+    _inline_javascript: dict[str, InlineJavaScript] = {}
 
     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):
-            _inline_javascript[k] = JavaScript(v)
-        elif isinstance(v, JavaScript):
+            _inline_javascript[k] = InlineJavaScript(v)
+        elif isinstance(v, InlineJavaScript):
             _inline_javascript[k] = v
         else:
             _attributes[k] = v

src/reactpy/types.py

@@ -768,7 +768,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
-    "inlineJavascript",
+    "inlineJavaScript",
     "importSource",
 ]
 ALLOWED_VDOM_KEYS = {
@@ -777,7 +777,7 @@ class DangerouslySetInnerHTML(TypedDict):
     "children",
     "attributes",
     "eventHandlers",
-    "inlineJavascript",
+    "inlineJavaScript",
     "importSource",
 }
 
@@ -790,7 +790,7 @@ class VdomTypeDict(TypedDict):
     children: NotRequired[Sequence[ComponentType | VdomChild]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[EventHandlerDict]
-    inlineJavascript: NotRequired[InlineJavascriptDict]
+    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["inlineJavascript"]) -> InlineJavascriptDict: ...
+    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["inlineJavascript"], value: InlineJavascriptDict
+        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]]
-    inlineJavascript: NotRequired[dict[str, JavaScript]]
+    inlineJavaScript: NotRequired[dict[str, InlineJavaScript]]
     importSource: NotRequired[JsonImportSource]
 
 
@@ -895,7 +895,7 @@ class JsonImportSource(TypedDict):
     fallback: Any
 
 
-class JavaScript(str):
+class InlineJavaScript(str):
     """Simple subclass that flags a user's string in ReactPy VDOM attributes as executable JavaScript."""
 
     pass
@@ -938,10 +938,10 @@ class EventHandlerType(Protocol):
 EventHandlerDict: TypeAlias = dict[str, EventHandlerType]
 """A dict mapping between event names to their handlers"""
 
-InlineJavascriptMapping = Mapping[str, JavaScript]
+InlineJavaScriptMapping = Mapping[str, InlineJavaScript]
 """A generic mapping between attribute names to their inline javascript"""
 
-InlineJavascriptDict: TypeAlias = dict[str, JavaScript]
+InlineJavaScriptDict: TypeAlias = dict[str, InlineJavaScript]
 """A dict mapping between attribute names to their inline javascript"""
 
 

tests/test_utils.py

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

tests/test_web/test_module.py

@@ -12,7 +12,7 @@
     assert_reactpy_did_not_log,
     poll,
 )
-from reactpy.types import JavaScript
+from reactpy.types import InlineJavaScript
 from reactpy.web.module import NAME_SOURCE, WebModule
 
 JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
@@ -401,7 +401,7 @@ def App():
         return Component(
             {
                 "id": "my-div",
-                "setText": JavaScript('(prefixText) => prefixText + "TEST 123"'),
+                "setText": InlineJavaScript('(prefixText) => prefixText + "TEST 123"'),
             }
         )