test.re

/*
Before: <Foo /> => Foo.make [||]
        <Foo> bar </Foo> => Foo.make [|bar|]
After: <Foo /> => Foo.make ()
       <Foo> bar </Foo> => Foo.make bar
*/

/* no key warning, because children isn't wrapping n times after being passed down */
/* currently needs the desugared non-jsx form */
<div> children </div>

/* Foo.make mandating an array (for various purposes) */
let bar = [|Rr.string "hello"|];
<Foo> bar </Foo>

/* Foo.make mandating a 2-tuple (for e.g. a LeftRight layout, title/body) */
let bar = ("hello", <Baz />);
<Foo> bar </Foo>
/* really nice */
<Foo> ("hello", <Baz />) </Foo>

/* static snippet. No key warning because we do `React.createElement.apply` under the hood. */
/* uglier, but likely worth it because of all the new composite element tricks now */
<span> [|<div/ >, <div/ >|] </span>

/* passing a list, because Foo does head appends to it */
<Foo> [<Bar />, <div />] </Foo>

/* children callback, all the rage */
<Motion> (fun spring => <Bar x=spring.x />) </Motion>

/* passing other stuff */
<TitleBar> "Hello" </TitleBar>

/* invalid now */
<span> <div> <div> </span>

/* more children tricks */
<Foo> [...children, <Bar />, <div />] </Foo>
/* frees this, no parentheses */
<Foo> Js.Array.concat blabla children </Foo>

/* convert arbitrary children payload to dom-friendly data */
<span> Array.of_list children </span>

/* future */
<Foo> <> whatever you want </> </Foo>