(melange.emit
+ > (alias foo)
+ > (target foo)
+ > (libraries reason-react)
+ > (preprocess
+ > (pps melange.ppx reason-react-ppx)))
+ > EOF
+
+ $ dune build
+ File "component.re", line 2, characters 11-51:
+ 2 | let make = (~key) => key->React.string
;
+ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ Error: ~key cannot be accessed from the component props. Please set the key where the component is being used.
+ [1]
diff --git a/ppx/test/record-props-error.t/input.re b/ppx/test/record-props-error.t/input.re
new file mode 100644
index 000000000..32a555110
--- /dev/null
+++ b/ppx/test/record-props-error.t/input.re
@@ -0,0 +1,6 @@
+module Record_props = {
+ [@react.component {no_props: string}]
+ let make = (~lola) => {
+ {React.string(lola)}
;
+ };
+};
diff --git a/ppx/test/record-props-error.t/run.t b/ppx/test/record-props-error.t/run.t
new file mode 100644
index 000000000..d2440098d
--- /dev/null
+++ b/ppx/test/record-props-error.t/run.t
@@ -0,0 +1,8 @@
+Since we generate invalid syntax for the argument of the make fn `(Props : <>)`
+We need to output ML syntax here, otherwise refmt could not parse it.
+ $ ../ppx.sh --output ml input.re
+ File "output.ml", line 5, characters 68-76:
+ 5 | no_props
+ ^^^^^^^^
+ Error: [@react.component] only accepts 'props' as a field, given: no_props
+ [1]
diff --git a/ppx/test/record-props.t/input.re b/ppx/test/record-props.t/input.re
new file mode 100644
index 000000000..4ad19da60
--- /dev/null
+++ b/ppx/test/record-props.t/input.re
@@ -0,0 +1,6 @@
+module Record_props = {
+ [@react.component {props: string}]
+ let make = (~lola) => {
+ {React.string(lola)}
;
+ };
+};
diff --git a/ppx/test/record-props.t/run.t b/ppx/test/record-props.t/run.t
new file mode 100644
index 000000000..fee6dc40a
--- /dev/null
+++ b/ppx/test/record-props.t/run.t
@@ -0,0 +1,19 @@
+Since we generate invalid syntax for the argument of the make fn `(Props : <>)`
+We need to output ML syntax here, otherwise refmt could not parse it.
+ $ ../ppx.sh --output ml input.re
+ module Record_props =
+ struct
+ external makeProps :
+ lola:'lola -> ?key:string -> unit -> < lola: 'lola > Js.t = ""
+ [@@mel.obj ]
+ let make =
+ ((fun ~lola ->
+ ReactDOM.jsx "div"
+ (((ReactDOM.domProps)[@merlin.hide ])
+ ~children:(React.string lola) ()))
+ [@warning "-16"])
+ let make =
+ let Output$Record_props (string : < lola: 'lola > Js.t) =
+ make ~lola:(string ## lola) in
+ Output$Record_props
+ end
diff --git a/ppx/test/upper.t/run.t b/ppx/test/upper.t/run.t
index a5ed6a84c..e3f259ba1 100644
--- a/ppx/test/upper.t/run.t
+++ b/ppx/test/upper.t/run.t
@@ -4,10 +4,7 @@
let upper_children_single = foo =>
React.jsx(Upper.make, Upper.makeProps(~children=foo, ()));
let upper_children_multiple = (foo, bar) =>
- React.jsxs(
- Upper.make,
- Upper.makeProps(~children=React.array([|foo, bar|]), ()),
- );
+ React.jsxs(Upper.make, Upper.makeProps(~children=[|foo, bar|], ()));
let upper_children =
React.jsx(
Page.make,
diff --git a/test/React__test.re b/test/React__test.re
index 1866e07e2..1e9fd65c1 100644
--- a/test/React__test.re
+++ b/test/React__test.re
@@ -23,15 +23,17 @@ module DummyComponentThatMapsChildren = {
[@react.component]
let make = (~children, ()) => {
- {children->React.Children.mapWithIndex((element, index) => {
- React.cloneElement(
- element,
- {
- "key": string_of_int(index),
- "data-index": index,
- },
- )
- })}
+ {children
+ ->React.array
+ ->React.Children.mapWithIndex((element, index) => {
+ React.cloneElement(
+ element,
+ {
+ "key": string_of_int(index),
+ "data-index": index,
+ },
+ )
+ })}
;
};
};
@@ -417,4 +419,30 @@ describe("React", () => {
expect(Memo.renders^)->toBe(2);
});
+
+ test("Can define components with custom children", () => {
+ let container = getContainer(container);
+ let root = ReactDOM.Client.createRoot(container);
+
+ module Test = {
+ type t = {name: string};
+ [@react.component]
+ let make = (~children) => {
+ Array.map(children, c =>
+ {React.string(c.name)}
+ )
+ ->React.array;
+ };
+ };
+
+ act(() => {
+ ReactDOM.Client.render(
+ root,
+ {Test.name: "foo"} {name: "bar"} ,
+ )
+ });
+
+ expect(container->DOM.findBySelector("div[name='foo']")->Option.isSome)
+ ->toBe(true);
+ });
});