Reformatting JSX Children

[justafish]

When parsing the following

<If cond={1 === 1}>
  <h1>OH HAI</h1>
</If>

The top level JSX element (If) has the following children:

0: "\n " Literal
1: "<h1>OH HAI</h1>" JSXElement
2: "\n " Literal

Is it safe to just simply throw away any instances of Literal "\n " and "\n" when visiting JSXElements, or is there a way to have the parser not pick these up in the first place?

[benjamn]

JSX preserves leading/trailing whitespace as JSXText nodes because JSX is more whitespace-sensitive than most other kinds of JS syntax, and that whitespace needs to be passed as strings to the function calls that JSX is translated to.

I have a theory about what was happening here:

if (1 === 1) {

    ;

  <h1>OH HAI</h1>;


  ;
};

With the original <If> parent node stripped off, those whitespace-only JSXText nodes were ending up without a JSXElement parent, so the printer was treating them as ordinary ExpressionStatements.

So, yes, I think it's safe to throw away those string literals in this case, specifically because JSXText nodes should always have a JSXElement as their parent.

It might make sense, then, to change the printer case for JSXText to print nothing (or throw an exception) if path.getParentNode() is not a JSXElement.