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
parent
788bd7afcd
commit
998f98aade
|
@ -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])
|
#### 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.
|
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
|
[#6236]: https://github.com/prettier/prettier/pull/6236
|
||||||
[#6270]: https://github.com/prettier/prettier/pull/6270
|
[#6270]: https://github.com/prettier/prettier/pull/6270
|
||||||
[#6289]: https://github.com/prettier/prettier/pull/6289
|
[#6289]: https://github.com/prettier/prettier/pull/6289
|
||||||
|
[#6332]: https://github.com/prettier/prettier/pull/6332
|
||||||
[@duailibe]: https://github.com/duailibe
|
[@duailibe]: https://github.com/duailibe
|
||||||
[@gavinjoyce]: https://github.com/gavinjoyce
|
[@gavinjoyce]: https://github.com/gavinjoyce
|
||||||
[@sosukesuzuki]: https://github.com/sosukesuzuki
|
[@sosukesuzuki]: https://github.com/sosukesuzuki
|
||||||
[@g-harel]: https://github.com/g-harel
|
[@g-harel]: https://github.com/g-harel
|
||||||
|
[@jounqin]: https://github.com/JounQin
|
||||||
|
|
|
@ -24,9 +24,10 @@
|
||||||
* THE SOFTWARE.
|
* THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const IMPORT_REGEX = /^import/;
|
const IMPORT_REGEX = /^import\s/;
|
||||||
const EXPORT_REGEX = /^export/;
|
const EXPORT_REGEX = /^export\s/;
|
||||||
const BLOCKS_REGEX = "[a-z\\.]+(\\.){0,1}[a-z\\.]";
|
const BLOCKS_REGEX = "[a-z\\.]*(\\.){0,1}[a-z][a-z0-9\\.]*";
|
||||||
|
const COMMENT_REGEX = "<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->";
|
||||||
const EMPTY_NEWLINE = "\n\n";
|
const EMPTY_NEWLINE = "\n\n";
|
||||||
|
|
||||||
const isImport = text => IMPORT_REGEX.test(text);
|
const isImport = text => IMPORT_REGEX.test(text);
|
||||||
|
@ -60,5 +61,6 @@ function esSyntax() {
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
esSyntax,
|
esSyntax,
|
||||||
BLOCKS_REGEX
|
BLOCKS_REGEX,
|
||||||
|
COMMENT_REGEX
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,6 +7,7 @@ const parseFrontMatter = require("../utils/front-matter");
|
||||||
const { mapAst, INLINE_NODE_WRAPPER_TYPES } = require("./utils");
|
const { mapAst, INLINE_NODE_WRAPPER_TYPES } = require("./utils");
|
||||||
const mdx = require("./mdx");
|
const mdx = require("./mdx");
|
||||||
const remarkMath = require("remark-math");
|
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:
|
* based on [MDAST](https://github.com/syntax-tree/mdast) with following modifications:
|
||||||
|
@ -50,16 +51,37 @@ function identity(x) {
|
||||||
|
|
||||||
function htmlToJsx() {
|
function htmlToJsx() {
|
||||||
return ast =>
|
return ast =>
|
||||||
mapAst(ast, (node, index, [parent]) => {
|
mapAst(ast, (node, _index, [parent]) => {
|
||||||
if (
|
if (
|
||||||
node.type !== "html" ||
|
node.type !== "html" ||
|
||||||
/^<!--[\s\S]*-->$/.test(node.value) ||
|
node.value.match(mdx.COMMENT_REGEX) ||
|
||||||
INLINE_NODE_WRAPPER_TYPES.indexOf(parent.type) !== -1
|
INLINE_NODE_WRAPPER_TYPES.indexOf(parent.type) !== -1
|
||||||
) {
|
) {
|
||||||
return node;
|
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;
|
||||||
|
}, []);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,7 +35,12 @@ const { replaceEndOfLineWith } = require("../common/util");
|
||||||
|
|
||||||
const TRAILING_HARDLINE_NODES = ["importExport"];
|
const TRAILING_HARDLINE_NODES = ["importExport"];
|
||||||
const SINGLE_LINE_NODE_TYPES = ["heading", "tableCell", "link"];
|
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) {
|
function genericPrint(path, options, print) {
|
||||||
const node = path.getValue();
|
const node = path.getValue();
|
||||||
|
|
|
@ -202,11 +202,21 @@ function mapAst(ast, handler) {
|
||||||
return (function preorder(node, index, parentStack) {
|
return (function preorder(node, index, parentStack) {
|
||||||
parentStack = 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) {
|
if (newNode.children) {
|
||||||
newNode.children = newNode.children.map((child, index) => {
|
newNode.children = newNode.children.reduce((nodes, child, index) => {
|
||||||
return preorder(child, index, [newNode].concat(parentStack));
|
let newNodes = preorder(child, index, [newNode].concat(parentStack));
|
||||||
});
|
if (!Array.isArray(newNodes)) {
|
||||||
|
newNodes = [newNodes];
|
||||||
|
}
|
||||||
|
nodes.push.apply(nodes, newNodes);
|
||||||
|
return nodes;
|
||||||
|
}, []);
|
||||||
}
|
}
|
||||||
|
|
||||||
return newNode;
|
return newNode;
|
||||||
|
|
|
@ -241,9 +241,18 @@ printWidth: 80
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<Hello>
|
<Hello>
|
||||||
test <World /> test
|
test <World /> test
|
||||||
</Hello>
|
</Hello>
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -256,9 +265,18 @@ printWidth: 80
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<Hello>
|
<Hello>
|
||||||
test <World /> test
|
test <World /> test
|
||||||
</Hello>
|
</Hello>
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -281,9 +299,18 @@ semi: false
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<Hello>
|
<Hello>
|
||||||
test <World /> test
|
test <World /> test
|
||||||
</Hello>
|
</Hello>
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -296,9 +323,18 @@ semi: false
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<Hello>
|
<Hello>
|
||||||
test <World /> test
|
test <World /> test
|
||||||
</Hello>
|
</Hello>
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,18 @@
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<Hello>
|
<Hello>
|
||||||
test <World /> test
|
test <World /> test
|
||||||
</Hello>
|
</Hello>
|
||||||
|
<Hello>
|
||||||
|
test <World /> test
|
||||||
|
</Hello>123
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue