diff --git a/CHANGELOG.md b/CHANGELOG.md index d6ea41d..02c7bc2 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/React.bs.js b/src/React.bs.js index 59ea219..5eb6a50 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -8,18 +8,18 @@ function component(prim) { return prim; } -function createElementWithKey(component, props, key) { - return React.createElement(component, Object.assign(props, { - key: key - })); +function createElementWithKey(key, component, props) { + return React.createElement(component, key !== undefined ? Object.assign(props, { + key: key + }) : props); } -function createElementVariadicWithKey(component, props, elements, key) { +function createElementVariadicWithKey(key, component, props, elements) { return Caml_splice_call.spliceApply(React.createElement, [ component, - Object.assign(props, { - key: key - }), + key !== undefined ? Object.assign(props, { + key: key + }) : props, elements ]); } diff --git a/src/React.res b/src/React.res index 7ccad0d..69d967d 100644 --- a/src/React.res +++ b/src/React.res @@ -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=?, 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 = "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" diff --git a/src/ReactDOM.res b/src/ReactDOM.res index e6a6b63..72bce53 100644 --- a/src/ReactDOM.res +++ b/src/ReactDOM.res @@ -1109,16 +1109,16 @@ external createDOMElementVariadic: ( external someElement: React.element => option = "%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.")