From a4aaa5571b651146e14d91b73a04f778c81155c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Wed, 25 Oct 2023 16:45:07 +0200
Subject: [PATCH] correctly print exotic JSX names

---
 jscomp/syntax/src/res_printer.ml                     | 12 ++++++------
 .../syntax/tests/printer/expr/expected/jsx.res.txt   | 12 ++++++++++++
 jscomp/syntax/tests/printer/expr/jsx.res             |  4 ++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/jscomp/syntax/src/res_printer.ml b/jscomp/syntax/src/res_printer.ml
index f85094a7c7..5921ed50a9 100644
--- a/jscomp/syntax/src/res_printer.ml
+++ b/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.
diff --git a/jscomp/syntax/tests/printer/expr/expected/jsx.res.txt b/jscomp/syntax/tests/printer/expr/expected/jsx.res.txt
index 35f7b9ef58..1234bb6ecd 100644
--- a/jscomp/syntax/tests/printer/expr/expected/jsx.res.txt
+++ b/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 />
 
diff --git a/jscomp/syntax/tests/printer/expr/jsx.res b/jscomp/syntax/tests/printer/expr/jsx.res
index 074d89769f..e44a26cd1f 100644
--- a/jscomp/syntax/tests/printer/expr/jsx.res
+++ b/jscomp/syntax/tests/printer/expr/jsx.res
@@ -6,6 +6,8 @@ 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>
@@ -13,6 +15,8 @@ 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