Escape prop name in preserve jsx (#7429)

Author: nojaf

compiler/core/js_dump.ml

@@ -1124,7 +1124,9 @@ and print_jsx cxt ?(spread_props : J.expression option)
     else
       (List.fold_left (fun acc (n, x) ->
            P.space f;
-           P.string f n;
+           let prop_name = Js_dump_property.property_key_string n in
+
+           P.string f prop_name;
            P.string f "=";
            P.string f "{";
            let next = expression ~level:0 acc f x in

compiler/core/js_dump_property.ml

@@ -81,9 +81,11 @@ let property_access f s =
         | _ -> Js_dump_string.pp_string f s
         | exception _ -> Js_dump_string.pp_string f s)
 
+let property_key_string (s : string) : string =
+  let s = Ext_ident.unwrap_uppercase_exotic s in
+  if obj_property_no_need_quot s then s else Js_dump_string.escape_to_string s
+
 let property_key (s : J.property_name) : string =
   match s with
-  | Lit s ->
-    let s = Ext_ident.unwrap_uppercase_exotic s in
-    if obj_property_no_need_quot s then s else Js_dump_string.escape_to_string s
+  | Lit s -> property_key_string s
   | Symbol_name -> {|[Symbol.for("name")]|}

compiler/core/js_dump_property.mli

@@ -25,3 +25,5 @@
 val property_access : Ext_pp.t -> string -> unit
 
 val property_key : J.property_name -> string
+
+val property_key_string : string -> string

tests/tests/src/preserve_jsx_test.mjs

@@ -111,6 +111,19 @@ let _external_component_with_children = <QueryClientProvider>
 <Preserve_jsx_test$B/>
 </QueryClientProvider>;
 
+function make(props) {
+  return <p>
+  {"foo"}
+  {props["\\\"MyWeirdProp\""]}
+  </p>;
+}
+
+let MyWeirdComponent = {
+  make: make
+};
+
+let _escaped_jsx_prop = <make MyWeirdProp={"bar"}/>;
+
 export {
   React,
   ReactDOM,
@@ -133,5 +146,7 @@ export {
   A,
   B,
   _external_component_with_children,
+  MyWeirdComponent,
+  _escaped_jsx_prop,
 }
 /* _single_element_child Not a pure module */

tests/tests/src/preserve_jsx_test.res

@@ -155,3 +155,15 @@ let _external_component_with_children =
     <strong />
     <B />
   </A>
+
+module MyWeirdComponent = {
+  type props = {\"MyWeirdProp": string}
+
+  let make = props =>
+    <p>
+      {React.string("foo")}
+      {React.string(props.\"MyWeirdProp")}
+    </p>
+}
+
+let _escaped_jsx_prop = <MyWeirdComponent \"MyWeirdProp"="bar" />