explicit error message for optional component props, since they have another syntax

Author: zth

compiler/ml/error_message_utils.ml

@@ -426,7 +426,7 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
          single JSX element.@,"
         (with_configured_jsx_module "array")
     | _ -> ())
-  | ( Some (RecordField {optional = true; field_name}),
+  | ( Some (RecordField {optional = true; field_name; jsx = None}),
       Some ({desc = Tconstr (p, _, _)}, _) )
     when Path.same Predef.path_option p ->
     fprintf ppf
@@ -444,6 +444,24 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
        @{<info>{%s: ?%s@}}"
       field_name field_name
       (Parser.extract_text_at_loc loc)
+  | ( Some (RecordField {optional = true; field_name; jsx = Some _}),
+      Some ({desc = Tconstr (p, _, _)}, _) )
+    when Path.same Predef.path_option p ->
+    fprintf ppf
+      "@,\
+       @,\
+       @{<info>%s@} is an optional component prop, and you're passing an \
+       optional value to it.@,\
+       Values passed to an optional component prop don't need to be wrapped in \
+       an option. You might need to adjust the type of the value supplied.\n\
+      \       @,\
+       Possible solutions: @,\
+       - Unwrap the option from the value you're passing in@,\
+       - If you really do want to pass the optional value, prepend the value \
+       with @{<info>?@} to show you want to pass the option, like: \
+       @{<info>%s=?%s@}"
+      field_name field_name
+      (Parser.extract_text_at_loc loc)
   | ( Some (FunctionArgument {optional = true}),
       Some ({desc = Tconstr (p, _, _)}, _) )
     when Path.same Predef.path_option p ->

tests/build_tests/super_errors/expected/jsx_custom_component_optional_prop.res.expected

@@ -0,0 +1,18 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_custom_component_optional_prop.res:33:34
+
+  31 │ let o = Some(1.)
+  32 │ 
+  33 │ let x = <CustomComponent someOpt=o />
+  34 │ 
+
+  This has type: option<float>
+  But the component prop someOpt is expected to have type: float
+  
+  someOpt is an optional component prop, and you're passing an optional value to it.
+  Values passed to an optional component prop don't need to be wrapped in an option. You might need to adjust the type of the value supplied.
+       
+  Possible solutions: 
+  - Unwrap the option from the value you're passing in
+  - If you really do want to pass the optional value, prepend the value with ? to show you want to pass the option, like: someOpt=?o

tests/build_tests/super_errors/expected/jsx_custom_component_type_mismatch.res.expected

@@ -0,0 +1,13 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_custom_component_type_mismatch.res:31:34-40
+
+  29 │ }
+  30 │ 
+  31 │ let x = <CustomComponent someOpt="hello" />
+  32 │ 
+
+  This has type: string
+  But the component prop someOpt is expected to have type: float
+  
+  You can convert string to float with Float.fromString.

tests/build_tests/super_errors/fixtures/jsx_custom_component_optional_prop.res

@@ -0,0 +1,33 @@
+@@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"
+
+  external float: float => element = "%identity"
+}
+
+module CustomComponent = {
+  @react.component
+  let make = (~someOpt=?) => {
+    React.float(
+      switch someOpt {
+      | Some(5.) => 1.
+      | _ => 2.
+      },
+    )
+  }
+}
+
+let o = Some(1.)
+
+let x = <CustomComponent someOpt=o />