Explore to make JSX component abstract

jscomp/others/jsxC.res

@@ -36,7 +36,7 @@ external string: string => element = "%identity"
 external array: array<element> => element = "%identity"
 
 type componentLike<'props, 'return> = 'props => 'return
-type component<'props> = componentLike<'props, element>
+type component<'props>
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike<'props, element> => component<'props> = "%identity"

jscomp/others/jsxU.res

@@ -14,7 +14,7 @@ external string: string => element = "%identity"
 external array: array<element> => element = "%identity"
 
 type componentLike<'props, 'return> = 'props => 'return
-type component<'props> = componentLike<'props, element>
+type component<'props>
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike<'props, element> => component<'props> = "%identity"

jscomp/syntax/src/jsx_v4.ml

@@ -977,6 +977,12 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
              innerExpression
          else innerExpression)
     in
+    (* making component abstract *)
+    let fullExpression =
+      Exp.apply
+        (Exp.ident (Location.mknoloc @@ Ldot (Lident "React", "component")))
+        [(Nolabel, fullExpression)]
+    in
     let fullExpression =
       if !Config.uncurried = Uncurried then
         fullExpression
@@ -1174,7 +1180,7 @@ let transformStructureItem ~config item =
             (name, ptyp_attributes, returnValue.ptyp_loc, type_) :: types )
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _innerType, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr ~loc:pstr_loc
@@ -1194,8 +1200,8 @@ let transformStructureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = pstr_loc; txt = moduleAccessName config "componentLike"},
-            [retPropsType; innerType] )
+          ( {loc = pstr_loc; txt = moduleAccessName config "component"},
+            [retPropsType] )
       in
       let newStructure =
         {
@@ -1282,7 +1288,7 @@ let transformSignatureItem ~config item =
           (returnValue, (name, attrs, returnValue.ptyp_loc, type_) :: types)
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _innerType, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr
@@ -1301,8 +1307,8 @@ let transformSignatureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = psig_loc; txt = moduleAccessName config "componentLike"},
-            [retPropsType; innerType] )
+          ( {loc = psig_loc; txt = moduleAccessName config "component"},
+            [retPropsType] )
       in
       let newStructure =
         {

jscomp/syntax/tests/ppx/react/abstract.res

@@ -0,0 +1,12 @@
+module SomeComp2 = {
+  type props = {x: int}
+  @module("SomeModule")
+  external make: props => React.element = "SomeComp2"
+}
+
+let _ = <SomeComp2 x=42 />
+
+@@jsxConfig({version: 3})
+
+@react.component
+let rec make = (~foo, ()) => React.createElement(make, makeProps(~foo, ()))

jscomp/syntax/tests/ppx/react/expected/abstract.res.txt

@@ -0,0 +1,21 @@
+module SomeComp2 = {
+  type props = {x: int}
+  @module("SomeModule")
+  external make: props => React.element = "SomeComp2"
+}
+
+let _ = React.jsx(SomeComp2.make, {x: 42})
+
+@@jsxConfig({version: 3})
+@obj external makeProps: (~foo: 'foo, ~key: string=?, unit) => {"foo": 'foo} = ""
+
+let rec make = {
+  @merlin.focus
+  let rec \"make$Internal" =
+    @warning("-16") (~foo, ()) => React.createElement(make, makeProps(~foo, ()))
+  and make = {
+    let \"Abstract" = (\"Props": {"foo": 'foo}) => \"make$Internal"(~foo=\"Props"["foo"], ())
+    \"Abstract"
+  }
+  make
+}

jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt

@@ -12,7 +12,7 @@ module C0 = {
     React.string(text)
   }
   let make = {
-    let \"AliasProps$C0" = (props: props<_>) => make(props)
+    let \"AliasProps$C0" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C0"
   }
@@ -30,7 +30,7 @@ module C1 = {
     React.string(p ++ text)
   }
   let make = {
-    let \"AliasProps$C1" = (props: props<_>) => make(props)
+    let \"AliasProps$C1" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C1"
   }
@@ -48,7 +48,7 @@ module C2 = {
     React.string(bar)
   }
   let make = {
-    let \"AliasProps$C2" = (props: props<_>) => make(props)
+    let \"AliasProps$C2" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C2"
   }
@@ -72,7 +72,7 @@ module C3 = {
     }
   }
   let make = {
-    let \"AliasProps$C3" = (props: props<_>) => make(props)
+    let \"AliasProps$C3" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C3"
   }
@@ -90,7 +90,7 @@ module C4 = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement(b)})
   }
   let make = {
-    let \"AliasProps$C4" = (props: props<_>) => make(props)
+    let \"AliasProps$C4" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C4"
   }
@@ -108,7 +108,7 @@ module C5 = {
     x + y + z
   }
   let make = {
-    let \"AliasProps$C5" = (props: props<_>) => make(props)
+    let \"AliasProps$C5" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C5"
   }
@@ -118,13 +118,13 @@ module C6 = {
   module type Comp = {
     type props = {}
 
-    let make: React.componentLike<props, React.element>
+    let make: React.component<props>
   }
   type props<'comp, 'x> = {comp: 'comp, x: 'x}
 
   let make = ({comp: module(Comp: Comp), x: (a, b), _}: props<_, _>) => React.jsx(Comp.make, {})
   let make = {
-    let \"AliasProps$C6" = (props: props<_>) => make(props)
+    let \"AliasProps$C6" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C6"
   }

jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt

@@ -8,7 +8,9 @@ module C0 = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement({React.int(a)})})
   }
   let make = {
-    let \"AsyncAwait$C0" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+    let \"AsyncAwait$C0" = React.component((props: props<_>) =>
+      JsxPPXReactSupport.asyncComponent(make(props))
+    )
 
     \"AsyncAwait$C0"
   }
@@ -24,7 +26,9 @@ module C1 = {
     }
   }
   let make = {
-    let \"AsyncAwait$C1" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+    let \"AsyncAwait$C1" = React.component((props: props<_>) =>
+      JsxPPXReactSupport.asyncComponent(make(props))
+    )
 
     \"AsyncAwait$C1"
   }

jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt

@@ -4,7 +4,7 @@ let make = ({msg, _}: props<_>) => {
   ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
 }
 let make = {
-  let \"CommentAtTop" = (props: props<_>) => make(props)
+  let \"CommentAtTop" = React.component((props: props<_>) => make(props))
 
   \"CommentAtTop"
 }

jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt

@@ -13,7 +13,7 @@ module C0 = {
     React.int(a + b)
   }
   let make = {
-    let \"DefaultValueProp$C0" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C0" = React.component((props: props<_>) => make(props))
     \"DefaultValueProp$C0"
   }
 }
@@ -30,7 +30,7 @@ module C1 = {
     React.int(a + b)
   }
   let make = {
-    let \"DefaultValueProp$C1" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C1" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C1"
   }
@@ -49,7 +49,7 @@ module C2 = {
     React.string(a)
   }
   let make = {
-    let \"DefaultValueProp$C2" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C2" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C2"
   }
@@ -69,7 +69,7 @@ module C3 = {
     }
   }
   let make = {
-    let \"DefaultValueProp$C3" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C3" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C3"
   }

jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt

@@ -16,7 +16,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.createElement(Foo.component, {a: 1, b: "1"})
@@ -27,7 +27,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"})

jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt

@@ -24,8 +24,7 @@ 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"
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -37,6 +36,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"
 }

jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt

@@ -22,7 +22,7 @@ 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"
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -34,5 +34,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"
 }

jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt

@@ -24,7 +24,7 @@ module V4C = {
     ReactDOM.createDOMElementVariadic("div", [{msg->React.string}])
   }
   let make = {
-    let \"FileLevelConfig$V4C" = (props: props<_>) => make(props)
+    let \"FileLevelConfig$V4C" = React.component((props: props<_>) => make(props))
 
     \"FileLevelConfig$V4C"
   }
@@ -39,7 +39,7 @@ module V4A = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
   }
   let make = {
-    let \"FileLevelConfig$V4A" = (props: props<_>) => make(props)
+    let \"FileLevelConfig$V4A" = React.component((props: props<_>) => make(props))
 
     \"FileLevelConfig$V4A"
   }

jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt

@@ -77,7 +77,7 @@ module Select = {
     ReactDOM.createDOMElementVariadic("div", [])
   }
   let make = {
-    let \"FirstClassModules$Select" = (props: props<_>) => make(props)
+    let \"FirstClassModules$Select" = React.component((props: props<_>) => make(props))
 
     \"FirstClassModules$Select"
   }
@@ -96,13 +96,12 @@ module External = {
   }
 
   @module("c")
-  external make: React.componentLike<
+  external make: React.component<
     props<
       module(T with type t = 'a and type key = 'key),
       option<'key>,
       (option<'key> => unit),
       array<'a>,
     >,
-    React.element,
   > = "default"
 }

jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt

@@ -45,13 +45,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,
   >
 }