Browse Source

fix: Adjacent JSX elements should be allowed in mdx (#6332)

* fix: adjacent JSX elements should be allowed in mdx

* chore: update CHANGELOG.unreleased.md for PR

* fix: adjacent JSX elements format issue of line

* fix: get html text from ast correctly

* fix: self closing issue

* fix: finally find out how to get original text from position

* chore: reset unnecessary changes

* fix: additional text after jsx should also be allowed

* fix: regression of empty text

* docs: add missing links

* fix linting...
master
JounQin 3 years ago
committed by Lipis
parent
commit
998f98aade
  1. 1
      .ignore
  2. 52
      CHANGELOG.unreleased.md
  3. 10
      src/language-markdown/mdx.js
  4. 28
      src/language-markdown/parser-markdown.js
  5. 7
      src/language-markdown/printer-markdown.js
  6. 18
      src/language-markdown/utils.js
  7. 36
      tests/mdx/__snapshots__/jsfmt.spec.js.snap
  8. 9
      tests/mdx/jsx.mdx

1
.ignore

@ -1,3 +1,2 @@
website/static/lib
dist

52
CHANGELOG.unreleased.md

@ -44,6 +44,56 @@ const link = <a href="example.com">http://example.com</a>;
-->
#### MDX: Adjacent JSX elements should be allowed in mdx ([#6332] by [@JounQin])
Previous versions would not format adjacent JSX elements in mdx, this has been fixed in this version.
<!-- prettier-ignore -->
```jsx
// Input
<Hello>
test <World /> test
</Hello>123
// Output (Prettier stable)
SyntaxError: Unexpected token (3:9)
1 | <Hello>
2 | test <World /> test
> 3 | </Hello>123
| ^
// Output (Prettier master)
<Hello>
test <World /> test
</Hello>123 ^
// Input
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
// Output (Prettier stable)
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (4:1)
2 | test <World /> test
3 | </Hello>
> 4 | <Hello>
| ^
5 | test <World /> test
6 | </Hello>123
// Output (Prettier master)
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
```
#### TypeScript: Print comment following a JSX element with generic ([#6209] by [@duailibe])
Previous versions would not print this comment, this has been fixed in this version.
@ -274,7 +324,9 @@ Flag used with `--write` to avoid re-checking files that were not changed since
[#6236]: https://github.com/prettier/prettier/pull/6236
[#6270]: https://github.com/prettier/prettier/pull/6270
[#6289]: https://github.com/prettier/prettier/pull/6289
[#6332]: https://github.com/prettier/prettier/pull/6332
[@duailibe]: https://github.com/duailibe
[@gavinjoyce]: https://github.com/gavinjoyce
[@sosukesuzuki]: https://github.com/sosukesuzuki
[@g-harel]: https://github.com/g-harel
[@jounqin]: https://github.com/JounQin

10
src/language-markdown/mdx.js

@ -24,9 +24,10 @@
* THE SOFTWARE.
*/
const IMPORT_REGEX = /^import/;
const EXPORT_REGEX = /^export/;
const BLOCKS_REGEX = "[a-z\\.]+(\\.){0,1}[a-z\\.]";
const IMPORT_REGEX = /^import\s/;
const EXPORT_REGEX = /^export\s/;
const BLOCKS_REGEX = "[a-z\\.]*(\\.){0,1}[a-z][a-z0-9\\.]*";
const COMMENT_REGEX = "<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->";
const EMPTY_NEWLINE = "\n\n";
const isImport = text => IMPORT_REGEX.test(text);
@ -60,5 +61,6 @@ function esSyntax() {
module.exports = {
esSyntax,
BLOCKS_REGEX
BLOCKS_REGEX,
COMMENT_REGEX
};

28
src/language-markdown/parser-markdown.js

@ -7,6 +7,7 @@ const parseFrontMatter = require("../utils/front-matter");
const { mapAst, INLINE_NODE_WRAPPER_TYPES } = require("./utils");
const mdx = require("./mdx");
const remarkMath = require("remark-math");
const htmlParser = require("../language-html/parser-html").parsers.html;
/**
* based on [MDAST](https://github.com/syntax-tree/mdast) with following modifications:
@ -50,16 +51,37 @@ function identity(x) {
function htmlToJsx() {
return ast =>
mapAst(ast, (node, index, [parent]) => {
mapAst(ast, (node, _index, [parent]) => {
if (
node.type !== "html" ||
/^<!--[\s\S]*-->$/.test(node.value) ||
node.value.match(mdx.COMMENT_REGEX) ||
INLINE_NODE_WRAPPER_TYPES.indexOf(parent.type) !== -1
) {
return node;
}
return Object.assign({}, node, { type: "jsx" });
const nodes = htmlParser.parse(node.value).children;
// find out if there are adjacent JSX elements which should be allowed in mdx alike in markdown
if (nodes.length <= 1) {
return Object.assign({}, node, { type: "jsx" });
}
return nodes.reduce((newNodes, { sourceSpan: position, type }) => {
const value = node.value
.slice(position.start.offset, position.end.offset)
.trim();
if (value) {
newNodes.push({
type: type === "element" ? "jsx" : type,
value,
position
});
}
return newNodes;
}, []);
});
}

7
src/language-markdown/printer-markdown.js

@ -35,7 +35,12 @@ const { replaceEndOfLineWith } = require("../common/util");
const TRAILING_HARDLINE_NODES = ["importExport"];
const SINGLE_LINE_NODE_TYPES = ["heading", "tableCell", "link"];
const SIBLING_NODE_TYPES = ["listItem", "definition", "footnoteDefinition"];
const SIBLING_NODE_TYPES = [
"listItem",
"definition",
"footnoteDefinition",
"jsx"
];
function genericPrint(path, options, print) {
const node = path.getValue();

18
src/language-markdown/utils.js

@ -202,11 +202,21 @@ function mapAst(ast, handler) {
return (function preorder(node, index, parentStack) {
parentStack = parentStack || [];
const newNode = Object.assign({}, handler(node, index, parentStack));
let newNode = handler(node, index, parentStack);
if (Array.isArray(newNode)) {
return newNode;
}
newNode = Object.assign({}, newNode);
if (newNode.children) {
newNode.children = newNode.children.map((child, index) => {
return preorder(child, index, [newNode].concat(parentStack));
});
newNode.children = newNode.children.reduce((nodes, child, index) => {
let newNodes = preorder(child, index, [newNode].concat(parentStack));
if (!Array.isArray(newNodes)) {
newNodes = [newNodes];
}
nodes.push.apply(nodes, newNodes);
return nodes;
}, []);
}
return newNode;

36
tests/mdx/__snapshots__/jsfmt.spec.js.snap

@ -241,9 +241,18 @@ printWidth: 80
---
<Hello>
test <World /> test
</Hello>123
---
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
---
@ -256,9 +265,18 @@ printWidth: 80
---
<Hello>
test <World /> test
</Hello>123
---
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
---
@ -281,9 +299,18 @@ semi: false
---
<Hello>
test <World /> test
</Hello>123
---
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
---
@ -296,9 +323,18 @@ semi: false
---
<Hello>
test <World /> test
</Hello>123
---
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
---

9
tests/mdx/jsx.mdx

@ -3,9 +3,18 @@
---
<Hello>
test <World /> test
</Hello>123
---
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
---

Loading…
Cancel
Save