* Fix MDX html parsing errors For MDX wrap JSX parsing in a fragment before sending it of to babel for parsing and formatting. In MDX adjacent JSX tags are permitted in the root. An option sent to the babel parser omits printing the root fragment and instead just prints its children. Solves #6943 * an attempt to address JounQin's comments * use <$>...</$> instead of <>...</> * refactoring
1.2 KiB
1.2 KiB
Fix MDX html parsing errors (#6949 by @Tigge & @thorn0)
MDX parsing for JSX failed when encountering JSX elements that where not
parsable as HTML. Such as <Tag value={{a: 'b'}}>test</Tag>
<!-- Input -->
<Tag value={ {a : 'b' } }>test</ Tag>
<Foo bg={ 'red' } >
<div style={{ display: 'block'} }>
<Bar >hi </Bar>
{ hello }
{ /* another comment */}
</div>
</Foo>
<!-- Prettier stable -->
```
SyntaxError: Unexpected closing tag "Tag". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:35)
> 1 | <Tag value={ {a : 'b' } }>test</ Tag>
| ^
2 |
3 | <Foo bg={ 'red' } >
4 | <div style={{ display: 'block'} }>
```
<!-- Prettier master -->
<Tag value={{ a: "b" }}>test</Tag>
<Foo bg={"red"}>
<div style={{ display: "block" }}>
<Bar>hi </Bar>
{hello}
{/* another comment */}
</div>
</Foo>