make jsx component abstract

rescript-lang · Jun 20, 2023 · 785bc59 · 785bc59
1 parent 6a9fe4a
commit 785bc59
Show file tree

Hide file tree

Showing 42 changed files with 202 additions and 141 deletions.
diff --git a/jscomp/build_tests/react_ppx/input.js b/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 });
diff --git a/jscomp/others/jsxC.res b/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"
diff --git a/jscomp/others/jsxU.res b/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"
diff --git a/jscomp/syntax/src/reactjs_jsx_v4.ml b/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 =
         {

diff --git a/jscomp/syntax/tests/ppx/react/abstract.res b/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, ()))
diff --git a/jscomp/syntax/tests/ppx/react/expected/abstract.res.txt b/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
+}
diff --git a/jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt b/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"
   }

diff --git a/jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt b/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"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt b/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"
   }

diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt b/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"})
diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt b/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"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt b/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"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt b/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"
   }

diff --git a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt b/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"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt b/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,
   >
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt b/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt
@@ -95,7 +95,7 @@ module V4C = {
         ],
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4C$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4C$FancyInput" = React.component((props: props<_>, ref) => make(props, ref))
 
       \"ForwardRef$V4C$FancyInput"
     })
@@ -116,7 +116,7 @@ module V4C = {
     )
   }
   let make = {
-    let \"ForwardRef$V4C" = props => make(props)
+    let \"ForwardRef$V4C" = React.component(props => make(props))
 
     \"ForwardRef$V4C"
   }
@@ -150,7 +150,9 @@ module V4CUncurried = {
         ],
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4CUncurried$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4CUncurried$FancyInput" = React.component((props: props<_>, ref) =>
+        make(props, ref)
+      )
 
       \"ForwardRef$V4CUncurried$FancyInput"
     })
@@ -171,7 +173,7 @@ module V4CUncurried = {
     )
   }
   let make = {
-    let \"ForwardRef$V4CUncurried" = props => make(props)
+    let \"ForwardRef$V4CUncurried" = React.component(props => make(props))
 
     \"ForwardRef$V4CUncurried"
   }
@@ -205,7 +207,7 @@ module V4A = {
         },
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4A$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4A$FancyInput" = React.component((props: props<_>, ref) => make(props, ref))
 
       \"ForwardRef$V4A$FancyInput"
     })
@@ -225,7 +227,7 @@ module V4A = {
     )
   }
   let make = {
-    let \"ForwardRef$V4A" = props => make(props)
+    let \"ForwardRef$V4A" = React.component(props => make(props))
 
     \"ForwardRef$V4A"
   }
@@ -257,7 +259,9 @@ module V4AUncurried = {
         },
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4AUncurried$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4AUncurried$FancyInput" = React.component((props: props<_>, ref) =>
+        make(props, ref)
+      )
 
       \"ForwardRef$V4AUncurried$FancyInput"
     })
@@ -277,7 +281,7 @@ module V4AUncurried = {
     )
   }
   let make = {
-    let \"ForwardRef$V4AUncurried" = props => make(props)
+    let \"ForwardRef$V4AUncurried" = React.component(props => make(props))
 
     \"ForwardRef$V4AUncurried"
   }