Fix key prop type (#74)

* fix-key-type

* rename jsx binding

* fix key type for ReactDOM jsx runtime

* update changelog

* add key imperatively

* Revert "add key imperatively"

This reverts commit 2f48356.

* change jsx runtime binding

* update changelog

Author: mununki

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.11.0-rc.3
+
+- Changed `React.jsxKeyed(s)`, `ReactDOM.jsxKeyed(s)` having key as optional argument.
+
 ## 0.11.0-rc.2
 
 - Fixed JSX PPX V3 backward compatibility.

src/React.bs.js

@@ -16,15 +16,18 @@ let component = Jsx.component
 
 %%private(
   @inline
-  let addKeyProp = (p: 'props, k: string): 'props =>
-    Obj.magic(Js.Obj.assign(Obj.magic(p), {"key": k}))
+  let addKeyProp = (~key: option<string>=?, p: 'props): 'props =>
+    switch key {
+    | Some(key) => Obj.magic(Js.Obj.assign(Obj.magic(p), {"key": key}))
+    | None => p
+    }
 )
 
 @module("react")
 external createElement: (component<'props>, 'props) => element = "createElement"
 
-let createElementWithKey = (component, props, key) =>
-  createElement(component, addKeyProp(props, key))
+let createElementWithKey = (~key=?, component, props) =>
+  createElement(component, addKeyProp(~key?, props))
 
 @module("react")
 external cloneElement: (element, 'props) => element = "cloneElement"
@@ -36,20 +39,20 @@ 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) =>
+  createElementVariadic(component, addKeyProp(~key?, props), elements)
 
 @module("react/jsx-runtime")
-external jsxKeyed: (component<'props>, 'props, string) => element = "jsx"
+external jsx: (component<'props>, 'props) => element = "jsx"
 
 @module("react/jsx-runtime")
-external jsx: (component<'props>, 'props) => element = "jsx"
+external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
 
 @module("react/jsx-runtime")
 external jsxs: (component<'props>, 'props) => element = "jsxs"
 
 @module("react/jsx-runtime")
-external jsxsKeyed: (component<'props>, 'props, string) => element = "jsxs"
+external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
 
 type fragmentProps<'children> = {children: 'children}
 
@@ -413,13 +416,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/React.res

@@ -1109,16 +1109,16 @@ external createDOMElementVariadic: (
 external someElement: React.element => option<React.element> = "%identity"
 
 @module("react/jsx-runtime")
-external jsxKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsx"
+external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"
 
 @module("react/jsx-runtime")
-external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"
+external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
 
 @module("react/jsx-runtime")
 external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs"
 
 @module("react/jsx-runtime")
-external jsxsKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsxs"
+external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
 
 // Currently, not used by JSX ppx
 @deprecated("Please use ReactDOM.createElement instead.")