Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support "custom children" in uppercase components #822

Open
jchavarri opened this issue Nov 21, 2023 · 1 comment · May be fixed by #823
Open

Support "custom children" in uppercase components #822

jchavarri opened this issue Nov 21, 2023 · 1 comment · May be fixed by #823

Comments

@jchavarri
Copy link
Collaborator

jchavarri commented Nov 21, 2023

Consider the following component:

module Test = {
  type t = {foo: int};
  [@react.component]
  let make = (~children) => {
    let () = Array.iter(c => Js.log(c.foo), children);
    <div />;
  };
};

An a usage:

let el = <Test> {foo: 2} {foo:3} </Test>

This fails with

11 |   ((Test.createElement ~children:[{ Test.foo = 2 }; { Test.foo = 3 }] ())
                                       ^^^^^^^^^^^^^^^^
Error: This expression has type Test.t but an expression was expected of type React.element

The reason is that the PPX compiles the above into:

let el =
  React.jsxs(
    Test.make,
    Test.makeProps(
      ~children=React.array([|{Test.foo: 2}, {Test.foo: 3}|]),
      (),
    ),
  );

And React.array expects (correctly) an array of elements as input.

I wonder if the PPX could skip the call to React.array for elements that are produced using custom components (i.e. the upper case ones)? In those cases, the component author has full control, so if they pass an array, we can allow the type inside the array to be anything, really.

@davesnx
Copy link
Member

davesnx commented Jun 5, 2024

This will force all usages of children to be either fragments, or wrapped in React.array.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants