This is a currently broken work in progress refactor of how we handle JSX. It aims to introduce an intermediate representation that will make it easier for us to output following different formatting rules.

This should make it possible to re-use the same code for JSX, HTML, and FBT (Facebook translations).

The basic idea I wanted to explore here was an intermediate representation format.

The idea is to have a collection of alternating children and separators (one of space, new line, or nothing).

<div><br /><br /></div>
children = [nothing, BR, nothing, BR, nothing];

---

<div> Some text <br /> </div>
children = [space, "Some text", space, BR, space];

---

<div>
  <br />
  <br />
</div>
children = [newline, BR, newline, BR, newline];

From this intermediate representation we could then generate the output using one of 3 sets of rules:

• JSX
• FBT
• HTML

When playing around with this the idea seemed to work OK, although if I recall correctly there are some edge cases that make it difficult to cleanly separate the AST -> Intermediate -> Prettier doc stages.