Ink: Set `flexDirection="row"` on root node

[treshugart]

When you have JSX like:

<>
  {"one"}
  {"two"}
</>

The output is:

one
two

Similarly, even if you do:

<>{"one"}{"two"}</>

The output is the same.

In https://reactjs.org/docs/jsx-in-depth.html, it states:

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

It would seem that Ink treats separate JSX children as new lines and in the context of the JSX reference above, this would be a bug?

Some more examples:

---

JSX:

<>one{"\n"}two</>

Out:

one


two

---

JSX:

<>
  one
  two
</>

Out:

one two

---

Thanks for your help!

[vadimdemedes]

Figured it out, so actually it's caused by the usage of a fragment as a container for these text nodes. If you use <Box>, you will get the expected output:

<Box>
    {"one"}
    {"two"}
</Box>

Output for the above is onetwo, same as for:

<Box>
    {"one"}{"two"}
</Box>

It's due to the fact that by default all containers in Yoga have flexDirection="column" set, which is why two adjacent text nodes appeared on separate lines in your example. <Box>, however, normalizes this behavior to be similar to browsers, which have flexDirection="row" by default.

I'm not sure though that it's possible to fix this issue without a breaking change, so I will keep this issue open. Thanks for a great report, hope <Box> solution will help!

[treshugart]

Thank you so much, @vadimdemedes! Definitely agree re breaking change. I did some digging and came to a similar, but more naive conclusion. I'll give Box a try and let you know if I encounter any issues.

[LitoMore]

Thanks! This issue blocked me to refactor other components. Let me try with <Box>.

[vadimdemedes]

After using React Native, I came to a conclusion that flexDirection="column" would be the right default instead of row. In CLIs elements in the output usually go from top to bottom, not from left to right too. I think I'm going to leave column a default value for the root node. Changing a default value for flexDirection for <Box> is more expensive, because that would significantly increase the migration cost to Ink 3.