diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml index dd77662c..a237572a 100644 --- a/cli/reactjs_jsx_v4.ml +++ b/cli/reactjs_jsx_v4.ml @@ -459,7 +459,17 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs recursivelyTransformedArgsForMake @ match childrenExpr with - | Exact children -> [(labelled "children", children)] + | Exact children -> + [ + ( labelled "children", + Exp.apply ~attrs:optionalAttr + (Exp.ident + { + txt = Ldot (Lident "ReactDOM", "someElement"); + loc = Location.none; + }) + [(Nolabel, children)] ); + ] | ListLiteral {pexp_desc = Pexp_array list} when list = [] -> [] | ListLiteral expression -> (* this is a hack to support react components that introspect into their children *) diff --git a/tests/ppx/react/expected/commentAtTop.res.txt b/tests/ppx/react/expected/commentAtTop.res.txt index 4ccf56e8..b2c0af59 100644 --- a/tests/ppx/react/expected/commentAtTop.res.txt +++ b/tests/ppx/react/expected/commentAtTop.res.txt @@ -4,7 +4,7 @@ type props<'msg> = { // test React JSX file @react.component let make = ({msg, _}: props<'msg>) => { - ReactDOM.jsx("div", {children: {msg->React.string}}) + ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})}) } let make = { let \"CommentAtTop" = (props: props<_>) => make(props) diff --git a/tests/ppx/react/expected/fileLevelConfig.res.txt b/tests/ppx/react/expected/fileLevelConfig.res.txt index 185df25c..b83a88e2 100644 --- a/tests/ppx/react/expected/fileLevelConfig.res.txt +++ b/tests/ppx/react/expected/fileLevelConfig.res.txt @@ -41,7 +41,7 @@ module V4A = { @react.component let make = ({msg, _}: props<'msg>) => { - ReactDOM.jsx("div", {children: {msg->React.string}}) + ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})}) } let make = { let \"FileLevelConfig$V4A" = (props: props<_>) => make(props) diff --git a/tests/ppx/react/expected/forwardRef.res.txt b/tests/ppx/react/expected/forwardRef.res.txt index f534ea4b..a9f2701d 100644 --- a/tests/ppx/react/expected/forwardRef.res.txt +++ b/tests/ppx/react/expected/forwardRef.res.txt @@ -167,9 +167,8 @@ module V4A = { ReactDOM.jsx( "div", { - children: React.jsx( - FancyInput.make, - {ref: input, children: {React.string("Click to focus")}}, + children: ?ReactDOM.someElement( + React.jsx(FancyInput.make, {ref: input, children: {React.string("Click to focus")}}), ), }, ) diff --git a/tests/ppx/react/expected/optimizeAutomaticMode.res.txt b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt new file mode 100644 index 00000000..6cbff453 --- /dev/null +++ b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt @@ -0,0 +1,20 @@ +@@jsxConfig({version: 4, mode: "automatic"}) + +module User = { + type t = {firstName: string, lastName: string} + + let format = user => "Dr." ++ user.lastName + type props<'doctor> = { + doctor: 'doctor, + } + + @react.component + let make = ({doctor, _}: props<'doctor>) => { + ReactDOM.jsx("h1", {id: "h1", children: ?ReactDOM.someElement({React.string(format(doctor))})}) + } + let make = { + let \"OptimizeAutomaticMode$User" = (props: props<_>) => make(props) + + \"OptimizeAutomaticMode$User" + } +} diff --git a/tests/ppx/react/optimizeAutomaticMode.res b/tests/ppx/react/optimizeAutomaticMode.res new file mode 100644 index 00000000..6470a3b2 --- /dev/null +++ b/tests/ppx/react/optimizeAutomaticMode.res @@ -0,0 +1,12 @@ +@@jsxConfig({version: 4, mode: "automatic"}) + +module User = { + type t = {firstName: string, lastName: string} + + let format = user => "Dr." ++ user.lastName + + @react.component + let make = (~doctor) => { +

{React.string(format(doctor))}

+ } +}