correctly print exotic JSX names (#6451)

* correctly print exotic JSX names

* update changelog

Author: tsnobip

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Fix using dynamic import of module in block instead of async function https://github.com/rescript-lang/rescript-compiler/pull/6434
 - Fix issue with using dynamic import of module in uncurried mode https://github.com/rescript-lang/rescript-compiler/pull/6434
 - Fix build error where JSX v4 transformation of the discouraged forwardRef in uncurried mode https://github.com/rescript-lang/rescript-compiler/pull/6447
+- Fix printing of exotic JSX names https://github.com/rescript-lang/rescript-compiler/pull/6451
 
 #### :nail_care: Polish
 

jscomp/syntax/src/res_printer.ml

@@ -4354,19 +4354,19 @@ and printJsxProp ~state arg cmtTbl =
  * Navabar.createElement -> Navbar
  * Staff.Users.createElement -> Staff.Users *)
 and printJsxName {txt = lident} =
+  let printIdent = printIdentLike ~allowUident:true in
   let rec flatten acc lident =
     match lident with
-    | Longident.Lident txt -> txt :: acc
-    | Ldot (lident, txt) ->
-      let acc = if txt = "createElement" then acc else txt :: acc in
-      flatten acc lident
+    | Longident.Lident txt -> printIdent txt :: acc
+    | Ldot (lident, "createElement") -> flatten acc lident
+    | Ldot (lident, txt) -> flatten (printIdent txt :: acc) lident
     | _ -> acc
   in
   match lident with
-  | Longident.Lident txt -> Doc.text txt
+  | Longident.Lident txt -> printIdent txt
   | _ as lident ->
     let segments = flatten [] lident in
-    Doc.join ~sep:Doc.dot (List.map Doc.text segments)
+    Doc.join ~sep:Doc.dot segments
 
 and printArgumentsWithCallbackInFirstPosition ~dotted ~state args cmtTbl =
   (* Because the same subtree gets printed twice, we need to copy the cmtTbl.

jscomp/syntax/tests/printer/expr/expected/jsx.res.txt

@@ -4,6 +4,8 @@ let x = <Foo.Bar className="container" />
 let x = <Foo.Bar.Baz className="container" />
 let x = <Foo.bar className="container" />
 let x = <Foo.baz className="multiline" />
+let x = <\"custom-tag" className="container" />
+let x = <Foo.\"custom-tag" className="container" />
 
 // https://github.com/rescript-lang/syntax/issues/570
 let x =
@@ -35,6 +37,16 @@ let x =
     {a}
     {b}
   </A>
+let x =
+  <\"custom-tag" className="container">
+    {a}
+    <B />
+  </\"custom-tag">
+let x =
+  <Foo.\"custom-tag" className="container">
+    {a}
+    <B />
+  </Foo.\"custom-tag">
 
 let x = <div className="container" className2="container2" className3="container3" onClick />
 

jscomp/syntax/tests/printer/expr/jsx.res

@@ -6,13 +6,17 @@ let x = <Foo.bar className="container" />
 let x = <Foo.baz
  className="multiline"
 />
+let x = <\"custom-tag" className="container" />
+let x = <Foo.\"custom-tag" className="container" />
 
 // https://github.com/rescript-lang/syntax/issues/570
 let x = <A> <B> <C> <D /> <E /> </C> <F> <G /> <H /> </F> </B> </A>
 let x = <A> {children} <B/> </A>
 let x = <A> <B/> {children} </A>
 let x = <A> {a} </A>
 let x = <A> {a} {b} </A>
+let x = <\"custom-tag" className="container" > {a} <B/> </\"custom-tag">
+let x = <Foo.\"custom-tag" className="container" > {a} <B/> </Foo.\"custom-tag">
 
 let x =
   <div