typed keys 2

ppx/reason_react_ppx.ml

@@ -54,6 +54,12 @@ module Binding = struct
            { txt = Longident.Ldot (Lident "React", "array"); loc })
         [ (nolabel, children) ]
 
+    let unsafeArray ~loc children =
+      Builder.pexp_apply ~loc
+        (Builder.pexp_ident ~loc
+           { txt = Longident.Ldot (Lident "React", "unsafeArray"); loc })
+        [ (nolabel, children) ]
+
     let componentLike ~loc props return =
       Ptyp_constr
         ( { loc; txt = Ldot (Lident "React", "componentLike") },
@@ -448,7 +454,7 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
     when list = [] ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
         Some (label, key),
-        Some (Binding.React.array ~loc children) )
+        Some (Binding.React.unsafeArray ~loc children) )
   | Some (ListLiteral { pexp_desc = Pexp_array list }), [] when list = [] ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") },
         None,
@@ -458,13 +464,13 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
          children *)
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxsKeyed") },
         Some (label, key),
-        Some (Binding.React.array ~loc children) )
+        Some (Binding.React.unsafeArray ~loc children) )
   | Some (ListLiteral children), [] ->
       (* this is a hack to support react components that introspect into their
          children *)
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
         None,
-        Some (Binding.React.array ~loc children) )
+        Some (Binding.React.unsafeArray ~loc children) )
   | None, (label, key) :: _ ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
         Some (label, key),

src/React.re

@@ -301,14 +301,16 @@ module Event = {
 };
 
 type element;
+type elementKeyed;
 type componentLike('props, 'return) = 'props => 'return;
 type component('props) = componentLike('props, element);
 
 external null: element = "null";
 external float: float => element = "%identity";
 external int: int => element = "%identity";
 external string: string => element = "%identity";
-external array: array(element) => element = "%identity";
+external array: array(elementKeyed) => element = "%identity";
+external unsafeArray: array(element) => element = "%identity";
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike('props, element) => component('props) =
@@ -328,7 +330,7 @@ external createElementVariadic:
 
 [@mel.module "react/jsx-runtime"]
 external jsxKeyed:
-  (component('props), 'props, ~key: string=?, unit) => element =
+  (component('props), 'props, ~key: string=?, unit) => elementKeyed =
   "jsx";
 
 [@mel.module "react/jsx-runtime"]

src/React.rei

@@ -1,12 +1,14 @@
 type element;
+type elementKeyed;
 type componentLike('props, 'return) = 'props => 'return;
 type component('props) = componentLike('props, element);
 
 external null: element = "null";
 external float: float => element = "%identity";
 external int: int => element = "%identity";
 external string: string => element = "%identity";
-external array: array(element) => element = "%identity";
+external array: array(elementKeyed) => element = "%identity";
+external unsafeArray: array(element) => element = "%identity";
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike('props, element) => component('props) =
@@ -26,7 +28,7 @@ external createElementVariadic:
 
 [@mel.module "react/jsx-runtime"]
 external jsxKeyed:
-  (component('props), 'props, ~key: string=?, unit) => element =
+  (component('props), 'props, ~key: string=?, unit) => elementKeyed =
   "jsx";
 
 [@mel.module "react/jsx-runtime"]

src/ReactDOM.re

@@ -1535,7 +1535,7 @@ external createDOMElementVariadic:
   "createElement";
 
 [@mel.module "react/jsx-runtime"]
-external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.element =
+external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.elementKeyed =
   "jsx";
 
 [@mel.module "react/jsx-runtime"]

src/ReactDOM.rei

@@ -1536,7 +1536,7 @@ external createDOMElementVariadic:
   "createElement";
 
 [@mel.module "react/jsx-runtime"]
-external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.element =
+external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.elementKeyed =
   "jsx";
 
 [@mel.module "react/jsx-runtime"]

test/Hooks__test.re

@@ -55,7 +55,7 @@ module DummyStatefulComponent = {
   let make = (~initialValue=0, ()) => {
     let (value, setValue) = React.useState(() => initialValue);
 
-    <button key="asdf" onClick={_ => setValue(value => value + 1)}>
+    <button onClick={_ => setValue(value => value + 1)}>
       value->React.int
     </button>;
   };

test/React__test.re

@@ -283,9 +283,12 @@ describe("React", () => {
     act(() => {
       ReactDOM.Client.render(
         root,
-        <React.Fragment key=?title>
-          <div> "Child"->React.string </div>
-        </React.Fragment>,
+        [|
+          <React.Fragment key=?title>
+            <div> "Child"->React.string </div>
+          </React.Fragment>,
+        |]
+        ->React.array,
       )
     });
 
@@ -309,9 +312,12 @@ describe("React", () => {
     };
 
     let render = author =>
-      <div key={author.Author.name}>
-        <div> <img src={author.imageUrl} /> </div>
-      </div>;
+      [|
+        <div key={author.Author.name}>
+          <div> <img src={author.imageUrl} /> </div>
+        </div>,
+      |]
+      ->React.array;
 
     act(() => {
       ReactDOM.Client.render(