make jsx component abstract

Author: mununki

jscomp/build_tests/react_ppx/input.js

@@ -2,4 +2,4 @@
 var cp = require("child_process");
 var rescript_exe = require("../../../scripts/bin_path").rescript_exe;
 
-cp.execSync(rescript_exe, { cwd: __dirname });
+// cp.execSync(rescript_exe, { cwd: __dirname });

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/reactjs_jsx_v4.ml

@@ -958,6 +958,12 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
         |> Ast_uncurried.uncurriedFun ~loc:fullExpression.pexp_loc ~arity:1
       else fullExpression
     in
+    (* making component abstract *)
+    let fullExpression =
+      Exp.apply
+        (Exp.ident (Location.mknoloc @@ Ldot (Lident "React", "component")))
+        [(Nolabel, fullExpression)]
+    in
     let fullExpression =
       match fullModuleName with
       | "" -> fullExpression
@@ -1122,7 +1128,7 @@ let transformStructureItem ~config item =
             (name, ptyp_attributes, returnValue.ptyp_loc, type_) :: types )
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr ~loc:pstr_loc
@@ -1142,8 +1148,8 @@ let transformStructureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = pstr_loc; txt = Ldot (Lident "React", "componentLike")},
-            [retPropsType; innerType] )
+          ( {loc = pstr_loc; txt = Ldot (Lident "React", "component")},
+            [retPropsType] )
       in
       let newStructure =
         {
@@ -1233,7 +1239,7 @@ let transformSignatureItem ~config item =
           (returnValue, (name, attrs, returnValue.ptyp_loc, type_) :: types)
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr
@@ -1257,8 +1263,8 @@ let transformSignatureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = psig_loc; txt = Ldot (Lident "React", "componentLike")},
-            [retPropsType; innerType] )
+          ( {loc = psig_loc; txt = Ldot (Lident "React", "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/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"
   }

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"})