Fix invalid JSX being generated for empty fragments (#8077)

* Fix invalid JSX being generated for empty fragments

* Reduce code duplication

* Added TODO

* CHANGELOG

Author: cknitt

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Fix signature matching for externals when abstract alias hides function arity. https://github.com/rescript-lang/rescript/pull/8045
 - Fix arity detection for arrows returning nested generics. https://github.com/rescript-lang/rescript/pull/8064
 - Fix error handling when rescript.json parsing fails and improve error message. https://github.com/rescript-lang/rescript/pull/8067
+- Fix invalid JSX being generated for empty fragments. https://github.com/rescript-lang/rescript/pull/8077
 
 #### :memo: Documentation
 

compiler/core/js_dump.ml

@@ -1105,14 +1105,22 @@ and print_indented_list (f : P.t) (parent_expr_level : int) (cxt : cxt)
 and print_jsx cxt ?(spread_props : J.expression option)
     ?(key : J.expression option) ~(level : int) f (fnName : string)
     (tag : J.expression) (fields : (string * J.expression) list) : cxt =
+  (* TODO: make fragment detection respect custom JSX runtime modules instead of
+     assuming "JsxRuntime". *)
+  let is_fragment =
+    match tag.expression_desc with
+    | J.Var (J.Qualified ({id = {name = "JsxRuntime"}}, Some "Fragment")) ->
+      true
+    | _ -> false
+  in
   let print_tag cxt =
     match tag.expression_desc with
     (* "div" or any other primitive tag *)
     | J.Str {txt} ->
       P.string f txt;
       cxt
     (* fragment *)
-    | J.Var (J.Qualified ({id = {name = "JsxRuntime"}}, Some "Fragment")) -> cxt
+    | _ when is_fragment -> cxt
     (* A user defined component or external component *)
     | _ -> expression ~level cxt f tag
   in
@@ -1129,6 +1137,11 @@ and print_jsx cxt ?(spread_props : J.expression option)
           else Some [e]
         else None)
       fields
+    (* For fragments without children we normalize to an empty list so they
+       print as <></> instead of </> which is invalid JSX. *)
+    |> function
+    | None when is_fragment -> Some []
+    | other -> other
   in
   let print_props cxt props =
     (* If a key is present, should be printed before the spread props,
@@ -1169,7 +1182,7 @@ and print_jsx cxt ?(spread_props : J.expression option)
       match children_opt with
       | Some _ -> cxt
       | None ->
-        (* Put a space the tag name and /> *)
+        (* Put a space between the tag name and /> *)
         P.space f;
         cxt)
     else

tests/tests/src/jsx_preserve_test.mjs

@@ -192,6 +192,8 @@ let _props_with_hyphen = <label
   data-testid={"test"}
 />;
 
+let _empty_fragment = <></>;
+
 let _fragment = <>
   {"Hello, world!"}
 </>;
@@ -271,6 +273,7 @@ export {
   ComponentWithOptionalProps,
   _optional_props,
   _props_with_hyphen,
+  _empty_fragment,
   _fragment,
   _youtube_iframe,
   X,

tests/tests/src/jsx_preserve_test.res

@@ -124,6 +124,8 @@ let _optional_props = <ComponentWithOptionalProps i=1 s="test" element={<div />}
 
 let _props_with_hyphen = <label ariaLabel={"close sidebar"} dataTestId="test" />
 
+let _empty_fragment = <> </>
+
 let _fragment = <> {Jsx.string("Hello, world!")} </>
 
 let _youtube_iframe =