use React.createElementWithKey

instead Jsx.addKeyProp directly

Author: mununki

cli/reactjs_jsx_v4.ml

@@ -397,23 +397,18 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
        ]
       @ key)
   | _ -> (
-    let keyAddedProps ~keyExpr =
-      let propsType =
-        Typ.constr (Location.mknoloc @@ ident ~suffix:"props") [Typ.any ()]
-      in
-      Exp.apply
-        (Exp.ident
-           {loc = Location.none; txt = Ldot (Lident "Jsx", "addKeyProp")})
-        [(nolabel, Exp.constraint_ props propsType); (nolabel, keyExpr)]
-    in
     match (!childrenArg, keyProp) with
     | None, (_, keyExpr) :: _ ->
       Exp.apply ~attrs
         (Exp.ident
-           {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
+           {
+             loc = Location.none;
+             txt = Ldot (Lident "React", "createElementWithKey");
+           })
         [
           (nolabel, Exp.ident {txt = ident ~suffix:"make"; loc = callExprLoc});
-          (nolabel, keyAddedProps ~keyExpr);
+          (nolabel, props);
+          (nolabel, keyExpr);
         ]
     | None, [] ->
       Exp.apply ~attrs
@@ -428,12 +423,13 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
         (Exp.ident
            {
              loc = Location.none;
-             txt = Ldot (Lident "React", "createElementVariadic");
+             txt = Ldot (Lident "React", "createElementVariadicWithKey");
            })
         [
           (nolabel, Exp.ident {txt = ident ~suffix:"make"; loc = callExprLoc});
-          (nolabel, keyAddedProps ~keyExpr);
+          (nolabel, props);
           (nolabel, children);
+          (nolabel, keyExpr);
         ]
     | Some children, [] ->
       Exp.apply ~attrs

tests/ppx/react/expected/interface.res.txt

@@ -0,0 +1,19 @@
+module A = {
+  type props<'x> = {x: 'x}
+  @react.component let make = ({x, _}: props<'x>) => React.string(x)
+  let make = {
+    let \"Interface$A" = (props: props<_>) => make(props)
+    \"Interface$A"
+  }
+}
+
+module NoProps = {
+  type props = {}
+
+  @react.component let make = (_: props) => ReactDOM.jsx("div", {})
+  let make = {
+    let \"Interface$NoProps" = props => make(props)
+
+    \"Interface$NoProps"
+  }
+}

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

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

tests/ppx/react/expected/noPropsWithKey.res.txt

@@ -0,0 +1,38 @@
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4CA = {
+  type props = {}
+
+  @react.component let make = (_: props) => ReactDOMRe.createDOMElementVariadic("div", [])
+  let make = {
+    let \"NoPropsWithKey$V4CA" = props => make(props)
+
+    \"NoPropsWithKey$V4CA"
+  }
+}
+
+module V4CB = {
+  type props = {}
+
+  @module("c")
+  external make: React.componentLike<props, React.element> = "component"
+}
+
+module V4C = {
+  type props = {}
+
+  @react.component
+  let make = (_: props) =>
+    ReactDOMRe.createElement(
+      ReasonReact.fragment,
+      [
+        React.createElementWithKey(V4CA.make, {}, "k"),
+        React.createElementWithKey(V4CB.make, {}, "k"),
+      ],
+    )
+  let make = {
+    let \"NoPropsWithKey$V4C" = props => make(props)
+
+    \"NoPropsWithKey$V4C"
+  }
+}

tests/ppx/react/expected/removedKeyProp.res.txt

@@ -30,18 +30,14 @@ let make = (_: props) =>
   ReactDOMRe.createElement(
     ReasonReact.fragment,
     [
-      React.createElement(Foo.make, Jsx.addKeyProp(({x: "x", y: "y"}: Foo.props<_>), "k")),
+      React.createElementWithKey(Foo.make, {x: "x", y: "y"}, "k"),
       React.createElement(Foo.make, {x: "x", y: "y"}),
-      React.createElement(
+      React.createElementWithKey(
         HasChildren.make,
-        Jsx.addKeyProp(
-          (
-            {
-              children: React.createElement(Foo.make, {x: "x", y: "y"}),
-            }: HasChildren.props<_>
-          ),
-          "k",
-        ),
+        {
+          children: React.createElement(Foo.make, {x: "x", y: "y"}),
+        },
+        "k",
       ),
       React.createElement(
         HasChildren.make,

tests/ppx/react/interface.res

@@ -0,0 +1,9 @@
+module A = {
+  @react.component
+  let make = (~x) => React.string(x)
+}
+
+module NoProps = {
+  @react.component
+  let make = () => <div />
+}

tests/ppx/react/interface.resi

@@ -1,2 +1,9 @@
-@react.component
-let make: (~x:string) => React.element
+module A: {
+  @react.component
+  let make: (~x: string) => React.element
+}
+
+module NoProps: {
+  @react.component
+  let make: unit => React.element
+}

tests/ppx/react/noPropsWithKey.res

@@ -0,0 +1,16 @@
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4CA = {
+  @react.component
+  let make = () => <div />
+}
+
+module V4CB = {
+  @module("c") @react.component
+  external make: unit => React.element = "component"
+}
+
+module V4C = {
+  @react.component
+  let make = () => <><V4CA key="k" /> <V4CB key="k" /></>
+}