Skip to content

Commit

Permalink
feat: Wrap React library
Browse files Browse the repository at this point in the history
  • Loading branch information
@anmonteiro
anmonteiro committed Sep 18, 2023
1 parent 0ccff71 commit 4d81337
Show file tree
Hide file tree
Showing 37 changed files with 4,528 additions and 2,352 deletions.
2 changes: 2 additions & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

* Remove legacy `ReactDOMRe` and `ReasonReact` modules (@anmonteiro in
[#782](https://github.com/reasonml/reason-react/pull/782))
* Wrap the `React` library, exposing just a single top-level module
(@anmonteiro in [#783](https://github.com/reasonml/reason-react/pull/783))

# 0.12.0

Expand Down
28 changes: 14 additions & 14 deletions ppx/reason_react_ppx.ml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,13 @@ module Binding = struct
let createElement ~loc ~attrs element children =
Builder.pexp_apply ~loc ~attrs
(Builder.pexp_ident ~loc
{ loc; txt = Ldot (Lident "ReactDOM", "createElement") })
{ loc; txt = Ldot (Ldot (Lident "React", "DOM"), "createElement") })
[ (nolabel, element); (nolabel, children) ]

let domProps ~applyLoc ~loc props =
Builder.pexp_apply ~loc:applyLoc
(Builder.pexp_ident ~loc:applyLoc ~attrs:merlinHideAttrs
{ loc; txt = Ldot (Lident "ReactDOM", "domProps") })
{ loc; txt = Ldot (Ldot (Lident "React", "DOM"), "domProps") })
props
end
end
Expand Down Expand Up @@ -435,46 +435,46 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
in
match (childrenExpr, keyProps) with
| Some (Exact children), (label, key) :: _ ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
Some children )
| Some (Exact children), [] ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") },
None,
Some children )
| ( Some (ListLiteral ({ pexp_desc = Pexp_array list } as children)),
(label, key) :: _ )
when list = [] ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
Some (Binding.React.array ~loc children) )
| Some (ListLiteral { pexp_desc = Pexp_array list }), [] when list = [] ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") },
None,
children )
| Some (ListLiteral children), (label, key) :: _ ->
(* this is a hack to support react components that introspect into their
children *)
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxsKeyed") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxsKeyed") },
Some (label, key),
Some (Binding.React.array ~loc children) )
| Some (ListLiteral children), [] ->
(* this is a hack to support react components that introspect into their
children *)
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxs") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
None,
Some (Binding.React.array ~loc children) )
| None, (label, key) :: _ ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
None )
| None, [] ->
( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
None,
None )
(Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") }, None, None)

let reactJsxExprAndChildren = jsxExprAndChildren ~ident:(Lident "React")

let reactJsxExprAndChildren = jsxExprAndChildren ~ident:"React"
let reactDomJsxExprAndChildren = jsxExprAndChildren ~ident:"ReactDOM"
let reactDomJsxExprAndChildren =
jsxExprAndChildren ~ident:(Ldot (Lident "React", "DOM"))

(* Builds an AST node for the entire `external` definition of props *)
let makeExternalDecl fnName loc namedArgListWithKeyAndRef namedTypeList =
Expand Down
50 changes: 25 additions & 25 deletions ppx/test/component.t/run.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
[@@mel.obj ]
let make =
((fun ~lola ->
ReactDOM.jsx "div"
(((ReactDOM.domProps)[@merlin.hide ])
React.DOM.jsx "div"
(((React.DOM.domProps)[@merlin.hide ])
~children:(React.string lola) ()))
[@warning "-16"])
let make =
Expand All @@ -27,9 +27,9 @@ We need to output ML syntax here, otherwise refmt could not parse it.
""[@@mel.obj ]
let make =
((fun ?(name= "") ->
ReactDOM.createElement React.jsxFragment
[|(ReactDOM.jsx "div"
(((ReactDOM.domProps)[@merlin.hide ])
React.DOM.createElement React.jsxFragment
[|(React.DOM.jsx "div"
(((React.DOM.domProps)[@merlin.hide ])
~children:(React.string ("First " ^ name)) ()));(
React.jsx Hello.make
(Hello.makeProps ~children:(React.string ("2nd " ^ name))
Expand All @@ -51,8 +51,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
let make =
((fun ~children ->
((fun ~buttonRef ->
ReactDOM.jsx "button"
(((ReactDOM.domProps)[@merlin.hide ]) ~children
React.DOM.jsx "button"
(((React.DOM.domProps)[@merlin.hide ]) ~children
~ref:buttonRef ~className:"FancyButton" ()))
[@warning "-16"]))
[@warning "-16"])
Expand All @@ -76,8 +76,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
((fun ~name ->
((fun ?isDisabled ->
let onClick event = Js.log event in
ReactDOM.jsx "button"
(((ReactDOM.domProps)[@merlin.hide ]) ~name ~onClick
React.DOM.jsx "button"
(((React.DOM.domProps)[@merlin.hide ]) ~name ~onClick
~disabled:isDisabled ()))
[@warning "-16"]))
[@warning "-16"])
Expand All @@ -94,8 +94,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
""[@@mel.obj ]
let make =
((fun ?(name= "joe") ->
ReactDOM.jsx "div"
(((ReactDOM.domProps)[@merlin.hide ])
React.DOM.jsx "div"
(((React.DOM.domProps)[@merlin.hide ])
~children:((Printf.sprintf "`name` is %s" name) |>
React.string) ()))
[@warning "-16"])
Expand All @@ -117,37 +117,37 @@ We need to output ML syntax here, otherwise refmt could not parse it.
let make =
((fun ~children ->
((fun ~moreProps ->
ReactDOM.jsxs "html"
(((ReactDOM.domProps)[@merlin.hide ])
React.DOM.jsxs "html"
(((React.DOM.domProps)[@merlin.hide ])
~children:(React.array
[|(ReactDOM.jsx "head"
(((ReactDOM.domProps)[@merlin.hide ])
~children:(ReactDOM.jsx "title"
(((ReactDOM.domProps)
[|(React.DOM.jsx "head"
(((React.DOM.domProps)[@merlin.hide ])
~children:(React.DOM.jsx "title"
(((React.DOM.domProps)
[@merlin.hide ])
~children:(React.string
("SSR React "
^
moreProps))
())) ()));(ReactDOM.jsxs
())) ()));(React.DOM.jsxs
"body"
(((ReactDOM.domProps)
(((React.DOM.domProps)
[@merlin.hide
])
~children:(
React.array
[|(
ReactDOM.jsx
React.DOM.jsx
"div"
(((ReactDOM.domProps)
(((React.DOM.domProps)
[@merlin.hide
])
~children
~id:"root"
()));(
ReactDOM.jsx
React.DOM.jsx
"script"
(((ReactDOM.domProps)
(((React.DOM.domProps)
[@merlin.hide
])
~src:"/static/client.js"
Expand All @@ -170,8 +170,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
]
let make =
((fun ~children ->
ReactDOM.jsx "div"
(((ReactDOM.domProps)[@merlin.hide ]) ~children
React.DOM.jsx "div"
(((React.DOM.domProps)[@merlin.hide ]) ~children
~ariaHidden:"true" ()))
[@warning "-16"])
let make =
Expand Down
14 changes: 7 additions & 7 deletions ppx/test/fragment.t/run.t
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
$ ../ppx.sh --output re input.re
let fragment = foo =>
[@bla] ReactDOM.createElement(React.jsxFragment, [|foo|]);
[@bla] React.DOM.createElement(React.jsxFragment, [|foo|]);
let poly_children_fragment = (foo, bar) =>
ReactDOM.createElement(React.jsxFragment, [|foo, bar|]);
React.DOM.createElement(React.jsxFragment, [|foo, bar|]);
let nested_fragment = (foo, bar, baz) =>
ReactDOM.createElement(
React.DOM.createElement(
React.jsxFragment,
[|foo, ReactDOM.createElement(React.jsxFragment, [|bar, baz|])|],
[|foo, React.DOM.createElement(React.jsxFragment, [|bar, baz|])|],
);
let nested_fragment_with_lower = foo =>
ReactDOM.createElement(
React.DOM.createElement(
React.jsxFragment,
[|
ReactDOM.jsx(
React.DOM.jsx(
"div",
([@merlin.hide] ReactDOM.domProps)(~children=foo, ()),
([@merlin.hide] React.DOM.domProps)(~children=foo, ()),
),
|],
);
2 changes: 1 addition & 1 deletion ppx/test/functor.t/run.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
((fun ~a ->
((fun ~b ->
print_endline "This function should be named `Test$Func`" M.x;
ReactDOM.jsx "div" (((ReactDOM.domProps)[@merlin.hide ]) ()))
React.DOM.jsx "div" (((React.DOM.domProps)[@merlin.hide ]) ()))
[@warning "-16"]))
[@warning "-16"])
let make =
Expand Down
Loading

0 comments on commit 4d81337

Please sign in to comment.