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...

.ignore

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

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

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
 };

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;
+      }, []);
     });
 }
 

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();

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;

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
 
 ---
 

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
 
 ---