Special JSX children error message (rescript-lang#7044)

* special case error message when passing children to a JSX component that does not accept children

* changelog

Author: zth

CHANGELOG.md

@@ -22,6 +22,7 @@
 
 #### :nail_care: Polish
 
+- Improve error message when passing `children` prop to a component that doesn't accept it. https://github.com/rescript-lang/rescript-compiler/pull/7044
 - Improve error messages for pattern matching on option vs non-option, and vice versa. https://github.com/rescript-lang/rescript-compiler/pull/7035
 - Improve bigint literal comparison. https://github.com/rescript-lang/rescript-compiler/pull/7029
 - Improve output of `@variadic` bindings. https://github.com/rescript-lang/rescript-compiler/pull/7030

jscomp/build_tests/super_errors/expected/component_missing_prop_children.res.expected

@@ -0,0 +1,11 @@
+
+  We've found a bug for you!
+  /.../fixtures/component_missing_prop_children.res:6:35-42
+
+  4 │   type props<'name> = {name: 'name}
+  5 │ 
+  6 │   let make = (): props<'name> => {children: ""}
+  7 │ }
+  8 │ 
+
+  This JSX component does not accept child elements. It has no children prop

jscomp/build_tests/super_errors/fixtures/component_missing_prop_children.res

@@ -0,0 +1,7 @@
+// Since the React transform isn't active in the tests, mimic what the transform outputs.
+module Component = {
+  @res.jsxComponentProps
+  type props<'name> = {name: 'name}
+
+  let make = (): props<'name> => {children: ""}
+}

jscomp/ml/error_message_utils.ml

@@ -287,8 +287,13 @@ let print_component_name ppf (p : Path.t) =
 let print_component_wrong_prop_error ppf (p : Path.t)
     (_fields : Types.label_declaration list) name =
   fprintf ppf "@[<v>";
-  fprintf ppf
-    "@[<2>The prop @{<error>%s@} does not belong to the JSX component " name;
+  (match name with
+  | "children" ->
+    fprintf ppf
+      "@[<2>This JSX component does not accept child elements. It has no @{<error>children@} prop "
+  | _ ->
+    fprintf ppf
+      "@[<2>The prop @{<error>%s@} does not belong to the JSX component " name);
   print_component_name ppf p;
   fprintf ppf "@]@,@,"