Fix key prop type

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.11.0-rc.3
+
+- Renamed `React.jsx(s)`, `ReactDOM.jsx(s)` to `React.jsx(s)NotKeyed`, `ReactDOM.jsx(s)NotKeyed`.
+- Added `React.jsx(s)`, `ReactDOM.jsx(s)` which are having key as optional argument.
+
 ## 0.11.0-rc.2
 
 - Fixed JSX PPX V3 backward compatibility.

src/React.res

@@ -14,17 +14,13 @@ type component<'props> = Jsx.component<'props>
 
 let component = Jsx.component
 
-%%private(
-  @inline
-  let addKeyProp = (p: 'props, k: string): 'props =>
-    Obj.magic(Js.Obj.assign(Obj.magic(p), {"key": k}))
-)
-
 @module("react")
 external createElement: (component<'props>, 'props) => element = "createElement"
 
-let createElementWithKey = (component, props, key) =>
-  createElement(component, addKeyProp(props, key))
+let createElementWithKey = (~key=?, component, props) => {
+  let _ = Obj.magic(props)["key"] = key
+  createElement(component, props)
+}
 
 @module("react")
 external cloneElement: (element, 'props) => element = "cloneElement"
@@ -36,21 +32,35 @@ external isValidElement: 'a => bool = "isValidElement"
 external createElementVariadic: (component<'props>, 'props, array<element>) => element =
   "createElement"
 
-let createElementVariadicWithKey = (component, props, elements, key) =>
-  createElementVariadic(component, addKeyProp(props, key), elements)
+let createElementVariadicWithKey = (~key=?, component, props, elements) => {
+  let _ = Obj.magic(props)["key"] = key
+  createElementVariadic(component, props, elements)
+}
 
 @module("react/jsx-runtime")
-external jsxKeyed: (component<'props>, 'props, string) => element = "jsx"
+external jsxNotKeyed: (component<'props>, 'props) => element = "jsx"
 
 @module("react/jsx-runtime")
-external jsx: (component<'props>, 'props) => element = "jsx"
+external jsxKeyed: (component<'props>, 'props, string) => element = "jsx"
+
+let jsx = (~key=?, component, props) =>
+  switch key {
+  | Some(key) => jsxKeyed(component, props, key)
+  | None => jsxNotKeyed(component, props)
+  }
 
 @module("react/jsx-runtime")
-external jsxs: (component<'props>, 'props) => element = "jsxs"
+external jsxsNotKeyed: (component<'props>, 'props) => element = "jsxs"
 
 @module("react/jsx-runtime")
 external jsxsKeyed: (component<'props>, 'props, string) => element = "jsxs"
 
+let jsxs = (~key=?, component, props) =>
+  switch key {
+  | Some(key) => jsxsKeyed(component, props, key)
+  | None => jsxsNotKeyed(component, props)
+  }
+
 type fragmentProps<'children> = {children: 'children}
 
 @module("react/jsx-runtime") external jsxFragment: component<fragmentProps<'children>> = "Fragment"
@@ -413,13 +423,13 @@ external useInsertionEffect7: (
 
 @module("react")
 external useSyncExternalStore: (
-  ~subscribe: @uncurry ((unit => unit) => ((. unit) => unit)),
+  ~subscribe: @uncurry (unit => unit, . unit) => unit,
   ~getSnapshot: @uncurry unit => 'state,
 ) => 'state = "useSyncExternalStore"
 
 @module("react")
 external useSyncExternalStoreWithServerSnapshot: (
-  ~subscribe: @uncurry ((unit => unit) => ((. unit) => unit)),
+  ~subscribe: @uncurry (unit => unit, . unit) => unit,
   ~getSnapshot: @uncurry unit => 'state,
   ~getServerSnapshot: @uncurry unit => 'state,
 ) => 'state = "useSyncExternalStore"

src/ReactDOM.res

@@ -1109,17 +1109,29 @@ external createDOMElementVariadic: (
 external someElement: React.element => option<React.element> = "%identity"
 
 @module("react/jsx-runtime")
-external jsxKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsx"
+external jsxNotKeyed: (string, JsxDOM.domProps) => Jsx.element = "jsx"
 
 @module("react/jsx-runtime")
-external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"
+external jsxKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsx"
+
+let jsx = (~key=?, element, props) =>
+  switch key {
+  | Some(key) => jsxKeyed(element, props, key)
+  | None => jsxNotKeyed(element, props)
+  }
 
 @module("react/jsx-runtime")
-external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs"
+external jsxsNotKeyed: (string, JsxDOM.domProps) => Jsx.element = "jsxs"
 
 @module("react/jsx-runtime")
 external jsxsKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsxs"
 
+let jsxs = (~key=?, element, props) =>
+  switch key {
+  | Some(key) => jsxsKeyed(element, props, key)
+  | None => jsxsNotKeyed(element, props)
+  }
+
 // Currently, not used by JSX ppx
 @deprecated("Please use ReactDOM.createElement instead.")
 external stringToComponent: string => React.component<'a> = "%identity"