JSX PPX: externals: React.componentLike -> React.component (#7952)

* JSX PPX: externals: React.componentLike -> React.component

* Analysis test output

* CHANGELOG

Author: cknitt

CHANGELOG.md

@@ -29,6 +29,8 @@
 
 #### :house: Internal
 
+- JSX PPX: use `React.component` instead of `React.componentLike` for externals. https://github.com/rescript-lang/rescript/pull/7952
+
 # 12.0.0-rc.1
 
 #### :nail_care: Polish

compiler/syntax/src/jsx_v4.ml

@@ -990,8 +990,8 @@ let transform_structure_item ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let new_external_type =
         Ptyp_constr
-          ( {loc = pstr_loc; txt = module_access_name config "componentLike"},
-            [ret_props_type; jsx_element_type config ~loc:pstr_loc] )
+          ( {loc = pstr_loc; txt = module_access_name config "component"},
+            [ret_props_type] )
       in
       let new_structure =
         {
@@ -1079,8 +1079,8 @@ let transform_signature_item ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let new_external_type =
         Ptyp_constr
-          ( {loc = psig_loc; txt = module_access_name config "componentLike"},
-            [ret_props_type; jsx_element_type config ~loc:psig_loc] )
+          ( {loc = psig_loc; txt = module_access_name config "component"},
+            [ret_props_type] )
       in
       let new_structure =
         {

tests/analysis_tests/tests/src/expected/Jsx2.resi.txt

@@ -1,5 +1,5 @@
 Hover src/Jsx2.resi 1:4
-{"contents": {"kind": "markdown", "value": "```rescript\nReact.element\n```\n\n---\n\n```\n \n```\n```rescript\ntype React.element = Jsx.element\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22React.res%22%2C0%2C0%5D)\n"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nprops<string>\n```\n\n---\n\n```\n \n```\n```rescript\ntype props<'first> = {first: 'first}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.resi%22%2C0%2C0%5D)\n"}}
 
 Hover src/Jsx2.resi 4:4
 {"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}

tests/syntax_tests/data/ppx/react/expected/aliasProps.res.txt

@@ -121,7 +121,7 @@ module C6 = {
     @res.jsxComponentProps
     type props = {}
 
-    let make: React.componentLike<props, React.element>
+    let make: React.component<props>
   }
   @res.jsxComponentProps
   type props<'comp, 'x> = {comp: 'comp, x: 'x}

tests/syntax_tests/data/ppx/react/expected/externalWithCustomName.res.txt

@@ -5,7 +5,7 @@ module Foo = {
   type props<'a, 'b> = {a: 'a, b: 'b}
 
   @module("Foo")
-  external component: React.componentLike<props<int, string>, React.element> = "component"
+  external component: React.component<props<int, string>> = "component"
 }
 
 let t = React.jsx(Foo.component, {a: 1, b: {"1"}})

tests/syntax_tests/data/ppx/react/expected/externalWithRef.res.txt

@@ -8,6 +8,5 @@ module V4C = {
   }
 
   @module("componentForwardRef")
-  external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
-    "component"
+  external make: React.component<props<string, ReactDOM.Ref.currentDomRef>> = "component"
 }

tests/syntax_tests/data/ppx/react/expected/externalWithTypeVariables.res.txt

@@ -8,5 +8,5 @@ module V4C = {
   }
 
   @module("c")
-  external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
+  external make: React.component<props<t<'a>, React.element>> = "component"
 }

tests/syntax_tests/data/ppx/react/expected/firstClassModules.resi.txt

@@ -13,13 +13,12 @@ module Select: {
     items: 'items,
   }
 
-  let make: React.componentLike<
+  let make: React.component<
     props<
       module(T with type t = 'a and type key = 'key),
       option<'key>,
       option<'key> => unit,
       array<'a>,
     >,
-    React.element,
   >
 }

tests/syntax_tests/data/ppx/react/expected/forwardRef.resi.txt

@@ -9,17 +9,14 @@ module V4C: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     @res.jsxComponentProps
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -32,17 +29,14 @@ module V4CUncurried: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     @res.jsxComponentProps
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -57,17 +51,14 @@ module V4A: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     @res.jsxComponentProps
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -80,16 +71,13 @@ module V4AUncurried: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     @res.jsxComponentProps
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }

tests/syntax_tests/data/ppx/react/expected/interface.resi.txt

@@ -1,12 +1,12 @@
 module A: {
   @res.jsxComponentProps
   type props<'x> = {x: 'x}
-  let make: React.componentLike<props<string>, React.element>
+  let make: React.component<props<string>>
 }
 
 module NoProps: {
   @res.jsxComponentProps
   type props = {}
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }