Suggest using JSX fragment where appropriate (#7714)

* suggest using jsx fragment where appropriate

* changelog

* update message

Author: zth

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 # 12.0.0-beta.4 (Unreleased)
 
+#### :nail_care: Polish
+
+- Apply heuristic to suggest using JSX fragments where we guess that might be what the user wanted. https://github.com/rescript-lang/rescript/pull/7714
+
 # 12.0.0-beta.3
 
 #### :boom: Breaking Change
@@ -50,7 +54,6 @@
 - Remove all leftovers of `pinned-dependencies` handling. https://github.com/rescript-lang/rescript/pull/7686
 - Add `rust-version` field to Rewatch's `Cargo.toml`. https://github.com/rescript-lang/rescript/pull/7701
 
-
 # 12.0.0-beta.2
 
 #### :boom: Breaking Change

compiler/ml/error_message_utils.ml

@@ -353,14 +353,29 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
     ->
     fprintf ppf
       "@,@,Dicts are written like: @{<info>dict{\"a\": 1, \"b\": 2}@}@,"
-  | _, Some ({Types.desc = Tconstr (_p1, _, _)}, {desc = Tconstr (p2, _, _)})
+  | ( _,
+      Some
+        (({Types.desc = Tconstr (_p1, _, _)} as ty), {desc = Tconstr (p2, _, _)})
+    )
     when Path.same Predef.path_unit p2 ->
-    fprintf ppf
-      "\n\n\
-      \  - Did you mean to assign this to a variable?\n\
-      \  - If you don't care about the result of this expression, you can \
-       assign it to @{<info>_@} via @{<info>let _ = ...@} or pipe it to \
-       @{<info>ignore@} via @{<info>expression->ignore@}\n\n"
+    fprintf ppf "\n\n";
+    let is_jsx_element =
+      match Ctype.expand_head env ty with
+      | {desc = Tconstr (Pdot (Pident {name = "Jsx"}, "element", _), _, _)} ->
+        true
+      | _ -> false
+    in
+    if is_jsx_element then
+      fprintf ppf
+        "  - Did you forget to wrap this + adjacent JSX in a JSX fragment \
+         (@{<info><></>@})?\n\
+        \  - Did you mean to assign this to a variable?\n\n"
+    else
+      fprintf ppf
+        "  - Did you mean to assign this to a variable?\n\
+        \  - If you don't care about the result of this expression, you can \
+         assign it to @{<info>_@} via @{<info>let _ = ...@} or pipe it to \
+         @{<info>ignore@} via @{<info>expression->ignore@}\n\n"
   | _, Some ({desc = Tobject _}, ({Types.desc = Tconstr _} as t1))
     when is_record_type ~extract_concrete_typedecl ~env t1 ->
     fprintf ppf
@@ -714,7 +729,7 @@ let type_clash_context_maybe_option ty_expected ty_res =
 
 let type_clash_context_in_statement sexp =
   match sexp.Parsetree.pexp_desc with
-  | Pexp_apply _ -> Some (Statement FunctionCall)
+  | Pexp_apply {transformed_jsx = false} -> Some (Statement FunctionCall)
   | _ -> None
 
 let print_contextual_unification_error ppf t1 t2 =

tests/build_tests/super_errors/expected/jsx_maybe_missing_fragment.res.expected

@@ -0,0 +1,15 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_maybe_missing_fragment.res:18:3-8
+
+  16 │ 
+  17 │ let x = {
+  18 │   <> </>
+  19 │   <> </>
+  20 │ }
+
+  This has type: React.element (defined as Jsx.element)
+  But it's expected to have type: unit
+
+  - Did you forget to wrap this + adjacent JSX in a JSX fragment (<></>)?
+  - Did you mean to assign this to a variable?

tests/build_tests/super_errors/fixtures/jsx_maybe_missing_fragment.res

@@ -0,0 +1,20 @@
+@@config({
+  flags: ["-bs-jsx", "4"],
+})
+
+module React = {
+  type element = Jsx.element
+  type componentLike<'props, 'return> = 'props => 'return
+  type component<'props> = Jsx.component<'props>
+
+  @module("react/jsx-runtime")
+  external jsx: (component<'props>, 'props) => element = "jsx"
+
+  type fragmentProps = {children?: element}
+  @module("react/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
+}
+
+let x = {
+  <> </>
+  <> </>
+}