Check @react.component function return type

Author: cknitt

compiler/syntax/src/jsx_v4.ml

@@ -528,8 +528,16 @@ let vb_match_expr named_arg_list expr =
   in
   aux (List.rev named_arg_list)
 
+(* https://github.com/rescript-lang/rescript/issues/7722 *)
+let add_jsx_element_return_constraint config expression =
+  Exp.constraint_ expression
+    (Typ.constr
+       {txt = module_access_name config "element"; loc = expression.pexp_loc}
+       [])
+
 let map_binding ~config ~empty_loc ~pstr_loc ~file_name ~rec_flag binding =
   if Jsx_common.has_attr_on_binding Jsx_common.has_attr binding then (
+    (* @react.component *)
     check_multiple_components ~config ~loc:pstr_loc;
     let core_type_of_attr =
       Jsx_common.core_type_of_attrs binding.pvb_attributes
@@ -732,6 +740,7 @@ let map_binding ~config ~empty_loc ~pstr_loc ~file_name ~rec_flag binding =
       | [] -> Pat.any ()
       | _ -> Pat.record (List.rev patterns_with_label) Open
     in
+    let expression = add_jsx_element_return_constraint config expression in
     let expression =
       Exp.fun_ ~arity:(Some 1) ~async:is_async Nolabel None
         (Pat.constraint_ record_pattern
@@ -779,6 +788,7 @@ let map_binding ~config ~empty_loc ~pstr_loc ~file_name ~rec_flag binding =
     (Some props_record_type, binding, new_binding))
   else if Jsx_common.has_attr_on_binding Jsx_common.has_attr_with_props binding
   then
+    (* @react.componentWithProps *)
     let modified_binding =
       {
         binding with
@@ -835,21 +845,24 @@ let map_binding ~config ~empty_loc ~pstr_loc ~file_name ~rec_flag binding =
         | _ -> Pat.var {txt = "props"; loc}
       in
 
+      let expression =
+        Jsx_common.async_component ~async:is_async
+          (Exp.apply
+             (Exp.ident
+                {
+                  txt =
+                    Lident
+                      (match rec_flag with
+                      | Recursive -> internal_fn_name
+                      | Nonrecursive -> fn_name);
+                  loc;
+                })
+             [(Nolabel, Exp.ident {txt = Lident "props"; loc})])
+      in
+      let expression = add_jsx_element_return_constraint config expression in
       let wrapper_expr =
         Exp.fun_ ~arity:None Nolabel None props_pattern
-          ~attrs:binding.pvb_expr.pexp_attributes
-          (Jsx_common.async_component ~async:is_async
-             (Exp.apply
-                (Exp.ident
-                   {
-                     txt =
-                       Lident
-                         (match rec_flag with
-                         | Recursive -> internal_fn_name
-                         | Nonrecursive -> fn_name);
-                     loc;
-                   })
-                [(Nolabel, Exp.ident {txt = Lident "props"; loc})]))
+          ~attrs:binding.pvb_expr.pexp_attributes expression
       in
 
       let wrapper_expr = Ast_uncurried.uncurried_fun ~arity:1 wrapper_expr in
@@ -1282,7 +1295,7 @@ let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
   let args = [(nolabel, elementTag); (nolabel, props_record)] @ key_and_unit in
   Exp.apply ~loc ~attrs ~transformed_jsx:true jsx_expr args
 
-(* In most situations, the component name is the make function from a module. 
+(* In most situations, the component name is the make function from a module.
     However, if the name contains a lowercase letter, it means it probably an external component.
     In this case, we use the name as is.
     See tests/syntax_tests/data/ppx/react/externalWithCustomName.res

tests/build_tests/super_errors/expected/jsx_invalid_return_type.res.expected

@@ -0,0 +1,15 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_invalid_return_type.res:14:5-6
+
+  12 │   @react.component
+  13 │   let make = () => {
+  14 │     42 // This should be an error - returning int instead of React.elem
+     │ ent
+  15 │   }
+  16 │ }
+
+  This has type: int
+  But it's expected to have type: React.element (defined as Jsx.element)
+  
+  In JSX, all content must be JSX elements. You can convert int to a JSX element with React.int.

tests/build_tests/super_errors/expected/jsx_invalid_return_type_component_with_props.res.expected

@@ -0,0 +1,8 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_invalid_return_type_component_with_props.res
+
+  This has type: int
+  But it's expected to have type: React.element (defined as Jsx.element)
+  
+  In JSX, all content must be JSX elements. You can convert int to a JSX element with React.int.

tests/build_tests/super_errors/fixtures/jsx_invalid_return_type.res

@@ -0,0 +1,16 @@
+@@config({
+  flags: ["-bs-jsx", "4"],
+})
+
+module React = {
+  type element = Jsx.element
+  type componentLike<'props, 'return> = 'props => 'return
+  type component<'props> = Jsx.component<'props>
+}
+
+module BadComponent = {
+  @react.component
+  let make = () => {
+    42 // This should be an error - returning int instead of React.element
+  }
+}

tests/build_tests/super_errors/fixtures/jsx_invalid_return_type_component_with_props.res

@@ -0,0 +1,16 @@
+@@config({
+  flags: ["-bs-jsx", "4"],
+})
+
+module React = {
+  type element = Jsx.element
+  type componentLike<'props, 'return> = 'props => 'return
+  type component<'props> = Jsx.component<'props>
+}
+
+module BadComponent = {
+  @react.componentWithProps
+  let make = _props => {
+    42 // This should be an error - returning int instead of React.element
+  }
+}

tests/tests/src/alias_default_value_test.res

@@ -41,7 +41,7 @@ module C6 = {
   }
 
   @react.component
-  let make = (~comp as module(Comp: Comp), ~x as (a, b)) => Comp.xx
+  let make = (~comp as module(Comp: Comp), ~x as (a, b)) => Comp.xx->React.int
 }
 
 module C7 = {

tests/tests/src/jsxv4_newtype.mjs

@@ -26,7 +26,7 @@ let V4A2 = {
 };
 
 function Jsxv4_newtype$V4A3(props) {
-  return props.foo;
+  return null;
 }
 
 let V4A3 = {

tests/tests/src/jsxv4_newtype.res

@@ -28,6 +28,6 @@ module V4A3 = {
   @react.component
   let make = (type a, ~foo) => {
     module T = unpack(foo: T with type t = a)
-    foo
+    React.null
   }
 }