From 5e09771ae19b52bdb50061da15265b1093b6b61b Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sat, 22 Oct 2022 02:38:18 +0900 Subject: [PATCH 1/8] fix-key-type --- src/React.bs.js | 35 +++++++++++++++++++++++++++-------- src/React.res | 31 +++++++++++++++++++++++-------- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/src/React.bs.js b/src/React.bs.js index 59ea219..788531d 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -3,27 +3,44 @@ var React = require("react"); var Caml_splice_call = require("rescript/lib/js/caml_splice_call.js"); +var JsxRuntime = require("react/jsx-runtime"); 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 ]); } +function jsxWithKey(key, component, props) { + if (key !== undefined) { + return JsxRuntime.jsx(component, props, key); + } else { + return JsxRuntime.jsx(component, props); + } +} + +function jsxsWithKey(key, component, props) { + if (key !== undefined) { + return JsxRuntime.jsxs(component, props, key); + } else { + return JsxRuntime.jsxs(component, props); + } +} + var Ref = {}; var Children = {}; @@ -47,6 +64,8 @@ var Uncurried = {}; exports.component = component; exports.createElementWithKey = createElementWithKey; exports.createElementVariadicWithKey = createElementVariadicWithKey; +exports.jsxWithKey = jsxWithKey; +exports.jsxsWithKey = jsxsWithKey; exports.Ref = Ref; exports.Children = Children; exports.Context = Context; diff --git a/src/React.res b/src/React.res index 7ccad0d..3bd33d6 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,8 +39,8 @@ 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" @@ -45,12 +48,24 @@ external jsxKeyed: (component<'props>, 'props, string) => element = "jsx" @module("react/jsx-runtime") external jsx: (component<'props>, 'props) => element = "jsx" +let jsxWithKey = (~key=?, component, props) => + switch key { + | Some(key) => jsxKeyed(component, props, key) + | None => jsx(component, props) + } + @module("react/jsx-runtime") external jsxs: (component<'props>, 'props) => element = "jsxs" @module("react/jsx-runtime") external jsxsKeyed: (component<'props>, 'props, string) => element = "jsxs" +let jsxsWithKey = (~key=?, component, props) => + switch key { + | Some(key) => jsxsKeyed(component, props, key) + | None => jsxs(component, props) + } + type fragmentProps<'children> = {children: 'children} @module("react/jsx-runtime") external jsxFragment: component> = "Fragment" @@ -413,13 +428,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" From 10f640008699960dbecedf1d6b85c6d574932828 Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sat, 22 Oct 2022 11:42:14 +0900 Subject: [PATCH 2/8] rename jsx binding --- src/React.bs.js | 8 ++++---- src/React.res | 14 +++++++------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/React.bs.js b/src/React.bs.js index 788531d..f472e8c 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -25,7 +25,7 @@ function createElementVariadicWithKey(key, component, props, elements) { ]); } -function jsxWithKey(key, component, props) { +function jsx(key, component, props) { if (key !== undefined) { return JsxRuntime.jsx(component, props, key); } else { @@ -33,7 +33,7 @@ function jsxWithKey(key, component, props) { } } -function jsxsWithKey(key, component, props) { +function jsxs(key, component, props) { if (key !== undefined) { return JsxRuntime.jsxs(component, props, key); } else { @@ -64,8 +64,8 @@ var Uncurried = {}; exports.component = component; exports.createElementWithKey = createElementWithKey; exports.createElementVariadicWithKey = createElementVariadicWithKey; -exports.jsxWithKey = jsxWithKey; -exports.jsxsWithKey = jsxsWithKey; +exports.jsx = jsx; +exports.jsxs = jsxs; exports.Ref = Ref; exports.Children = Children; exports.Context = Context; diff --git a/src/React.res b/src/React.res index 3bd33d6..5d44501 100644 --- a/src/React.res +++ b/src/React.res @@ -43,27 +43,27 @@ 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 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 jsxWithKey = (~key=?, component, props) => +let jsx = (~key=?, component, props) => switch key { | Some(key) => jsxKeyed(component, props, key) - | None => jsx(component, props) + | 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 jsxsWithKey = (~key=?, component, props) => +let jsxs = (~key=?, component, props) => switch key { | Some(key) => jsxsKeyed(component, props, key) - | None => jsxs(component, props) + | None => jsxsNotKeyed(component, props) } type fragmentProps<'children> = {children: 'children} From 9b0fe1bc548b89ad5b0ddc3acc5bfe85da1630da Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sat, 22 Oct 2022 12:27:08 +0900 Subject: [PATCH 3/8] fix key type for ReactDOM jsx runtime --- src/ReactDOM.bs.js | 21 ++++++++++++++++++++- src/ReactDOM.res | 18 +++++++++++++++--- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/ReactDOM.bs.js b/src/ReactDOM.bs.js index b65084d..e16d444 100644 --- a/src/ReactDOM.bs.js +++ b/src/ReactDOM.bs.js @@ -1,6 +1,7 @@ // Generated by ReScript, PLEASE EDIT WITH CARE 'use strict'; +var JsxRuntime = require("react/jsx-runtime"); var Root = {}; @@ -12,10 +13,28 @@ var Ref = {}; var Props = {}; +function jsx(key, element, props) { + if (key !== undefined) { + return JsxRuntime.jsx(element, props, key); + } else { + return JsxRuntime.jsx(element, props); + } +} + +function jsxs(key, element, props) { + if (key !== undefined) { + return JsxRuntime.jsxs(element, props, key); + } else { + return JsxRuntime.jsxs(element, props); + } +} + var Style; exports.Client = Client; exports.Ref = Ref; exports.Props = Props; +exports.jsx = jsx; +exports.jsxs = jsxs; exports.Style = Style; -/* No side effect */ +/* react/jsx-runtime Not a pure module */ diff --git a/src/ReactDOM.res b/src/ReactDOM.res index e6a6b63..68e89a3 100644 --- a/src/ReactDOM.res +++ b/src/ReactDOM.res @@ -1109,17 +1109,29 @@ external createDOMElementVariadic: ( external someElement: React.element => option = "%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" From adc1a55b424c089efc7c83dbbd07528d7ca0b3dc Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sun, 23 Oct 2022 00:53:32 +0900 Subject: [PATCH 4/8] update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6ea41d..911c6f5 100644 --- a/CHANGELOG.md +++ b/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. From 2f48356f83a11034b748d2d6b16a378aee600808 Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sun, 23 Oct 2022 14:36:47 +0900 Subject: [PATCH 5/8] add key imperatively --- src/React.bs.js | 10 ++++------ src/React.res | 21 ++++++++------------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/src/React.bs.js b/src/React.bs.js index f472e8c..f5b0875 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -10,17 +10,15 @@ function component(prim) { } function createElementWithKey(key, component, props) { - return React.createElement(component, key !== undefined ? Object.assign(props, { - key: key - }) : props); + props.key = key; + return React.createElement(component, props); } function createElementVariadicWithKey(key, component, props, elements) { + props.key = key; return Caml_splice_call.spliceApply(React.createElement, [ component, - key !== undefined ? Object.assign(props, { - key: key - }) : props, + props, elements ]); } diff --git a/src/React.res b/src/React.res index 5d44501..613c718 100644 --- a/src/React.res +++ b/src/React.res @@ -14,20 +14,13 @@ type component<'props> = Jsx.component<'props> let component = Jsx.component -%%private( - @inline - 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 = (~key=?, component, props) => - createElement(component, addKeyProp(~key?, props)) +let createElementWithKey = (~key=?, component, props) => { + let _ = Obj.magic(props)["key"] = key + createElement(component, props) +} @module("react") external cloneElement: (element, 'props) => element = "cloneElement" @@ -39,8 +32,10 @@ external isValidElement: 'a => bool = "isValidElement" external createElementVariadic: (component<'props>, 'props, array) => element = "createElement" -let createElementVariadicWithKey = (~key=?, component, props, elements) => - createElementVariadic(component, addKeyProp(~key?, props), elements) +let createElementVariadicWithKey = (~key=?, component, props, elements) => { + let _ = Obj.magic(props)["key"] = key + createElementVariadic(component, props, elements) +} @module("react/jsx-runtime") external jsxNotKeyed: (component<'props>, 'props) => element = "jsx" From 3f0f2e969746300968a3a8ac3cc25f8b91dc716f Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sun, 23 Oct 2022 18:53:57 +0900 Subject: [PATCH 6/8] Revert "add key imperatively" This reverts commit 2f48356f83a11034b748d2d6b16a378aee600808. --- src/React.bs.js | 10 ++++++---- src/React.res | 21 +++++++++++++-------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/React.bs.js b/src/React.bs.js index f5b0875..f472e8c 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -10,15 +10,17 @@ function component(prim) { } function createElementWithKey(key, component, props) { - props.key = key; - return React.createElement(component, props); + return React.createElement(component, key !== undefined ? Object.assign(props, { + key: key + }) : props); } function createElementVariadicWithKey(key, component, props, elements) { - props.key = key; return Caml_splice_call.spliceApply(React.createElement, [ component, - props, + key !== undefined ? Object.assign(props, { + key: key + }) : props, elements ]); } diff --git a/src/React.res b/src/React.res index 613c718..5d44501 100644 --- a/src/React.res +++ b/src/React.res @@ -14,13 +14,20 @@ type component<'props> = Jsx.component<'props> let component = Jsx.component +%%private( + @inline + 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 = (~key=?, component, props) => { - let _ = Obj.magic(props)["key"] = key - createElement(component, props) -} +let createElementWithKey = (~key=?, component, props) => + createElement(component, addKeyProp(~key?, props)) @module("react") external cloneElement: (element, 'props) => element = "cloneElement" @@ -32,10 +39,8 @@ external isValidElement: 'a => bool = "isValidElement" external createElementVariadic: (component<'props>, 'props, array) => element = "createElement" -let createElementVariadicWithKey = (~key=?, component, props, elements) => { - let _ = Obj.magic(props)["key"] = key - createElementVariadic(component, props, elements) -} +let createElementVariadicWithKey = (~key=?, component, props, elements) => + createElementVariadic(component, addKeyProp(~key?, props), elements) @module("react/jsx-runtime") external jsxNotKeyed: (component<'props>, 'props) => element = "jsx" From 234798b97ecf6b1a979196c97f46a36d97361289 Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sun, 23 Oct 2022 19:34:46 +0900 Subject: [PATCH 7/8] change jsx runtime binding --- src/React.bs.js | 19 ------------------- src/React.res | 20 ++++---------------- src/ReactDOM.bs.js | 21 +-------------------- src/ReactDOM.res | 20 ++++---------------- 4 files changed, 9 insertions(+), 71 deletions(-) diff --git a/src/React.bs.js b/src/React.bs.js index f472e8c..5eb6a50 100644 --- a/src/React.bs.js +++ b/src/React.bs.js @@ -3,7 +3,6 @@ var React = require("react"); var Caml_splice_call = require("rescript/lib/js/caml_splice_call.js"); -var JsxRuntime = require("react/jsx-runtime"); function component(prim) { return prim; @@ -25,22 +24,6 @@ function createElementVariadicWithKey(key, component, props, elements) { ]); } -function jsx(key, component, props) { - if (key !== undefined) { - return JsxRuntime.jsx(component, props, key); - } else { - return JsxRuntime.jsx(component, props); - } -} - -function jsxs(key, component, props) { - if (key !== undefined) { - return JsxRuntime.jsxs(component, props, key); - } else { - return JsxRuntime.jsxs(component, props); - } -} - var Ref = {}; var Children = {}; @@ -64,8 +47,6 @@ var Uncurried = {}; exports.component = component; exports.createElementWithKey = createElementWithKey; exports.createElementVariadicWithKey = createElementVariadicWithKey; -exports.jsx = jsx; -exports.jsxs = jsxs; exports.Ref = Ref; exports.Children = Children; exports.Context = Context; diff --git a/src/React.res b/src/React.res index 5d44501..69d967d 100644 --- a/src/React.res +++ b/src/React.res @@ -43,28 +43,16 @@ let createElementVariadicWithKey = (~key=?, component, props, elements) => createElementVariadic(component, addKeyProp(~key?, props), elements) @module("react/jsx-runtime") -external jsxNotKeyed: (component<'props>, 'props) => element = "jsx" +external jsx: (component<'props>, 'props) => element = "jsx" @module("react/jsx-runtime") -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) - } +external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx" @module("react/jsx-runtime") -external jsxsNotKeyed: (component<'props>, 'props) => element = "jsxs" +external jsxs: (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) - } +external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs" type fragmentProps<'children> = {children: 'children} diff --git a/src/ReactDOM.bs.js b/src/ReactDOM.bs.js index e16d444..b65084d 100644 --- a/src/ReactDOM.bs.js +++ b/src/ReactDOM.bs.js @@ -1,7 +1,6 @@ // Generated by ReScript, PLEASE EDIT WITH CARE 'use strict'; -var JsxRuntime = require("react/jsx-runtime"); var Root = {}; @@ -13,28 +12,10 @@ var Ref = {}; var Props = {}; -function jsx(key, element, props) { - if (key !== undefined) { - return JsxRuntime.jsx(element, props, key); - } else { - return JsxRuntime.jsx(element, props); - } -} - -function jsxs(key, element, props) { - if (key !== undefined) { - return JsxRuntime.jsxs(element, props, key); - } else { - return JsxRuntime.jsxs(element, props); - } -} - var Style; exports.Client = Client; exports.Ref = Ref; exports.Props = Props; -exports.jsx = jsx; -exports.jsxs = jsxs; exports.Style = Style; -/* react/jsx-runtime Not a pure module */ +/* No side effect */ diff --git a/src/ReactDOM.res b/src/ReactDOM.res index 68e89a3..72bce53 100644 --- a/src/ReactDOM.res +++ b/src/ReactDOM.res @@ -1109,28 +1109,16 @@ external createDOMElementVariadic: ( external someElement: React.element => option = "%identity" @module("react/jsx-runtime") -external jsxNotKeyed: (string, JsxDOM.domProps) => Jsx.element = "jsx" +external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx" @module("react/jsx-runtime") -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) - } +external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx" @module("react/jsx-runtime") -external jsxsNotKeyed: (string, JsxDOM.domProps) => Jsx.element = "jsxs" +external jsxs: (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) - } +external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsxs" // Currently, not used by JSX ppx @deprecated("Please use ReactDOM.createElement instead.") From b8fa0f334c967f6d35130854454115666a7c3ec5 Mon Sep 17 00:00:00 2001 From: Woonki Moon Date: Sun, 23 Oct 2022 22:35:33 +0900 Subject: [PATCH 8/8] update changelog --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 911c6f5..02c7bc2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,7 @@ ## 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. +- Changed `React.jsxKeyed(s)`, `ReactDOM.jsxKeyed(s)` having key as optional argument. ## 0.11.0-rc.2