fix: JSX fragment should be allowed in mdx

CHANGELOG.unreleased.md

@@ -44,6 +44,28 @@ const link = <a href="example.com">http://example.com</a>;
 
 -->
 
+#### MDX: JSX fragment should be allowed in mdx ([#6342] by [@JounQin])
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+<><Hello>
+    test   <World />   test
+</Hello></>
+
+// Output (Prettier stable)
+SyntaxError: Unexpected token (1:2)
+> 1 | </Hello></>
+    |  ^
+
+// Output (Prettier master)
+<>
+  <Hello>
+    test <World /> test
+  </Hello>
+</>
+```
+
 #### 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.
@@ -65,7 +87,7 @@ SyntaxError: Unexpected token (3:9)
 // Output (Prettier master)
 <Hello>
   test <World /> test
-</Hello>123      ^
+</Hello>123
 
 
 // Input
@@ -325,6 +347,7 @@ Flag used with `--write` to avoid re-checking files that were not changed since
 [#6270]: https://github.com/prettier/prettier/pull/6270
 [#6289]: https://github.com/prettier/prettier/pull/6289
 [#6332]: https://github.com/prettier/prettier/pull/6332
+[#6342]: https://github.com/prettier/prettier/pull/6342
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki

src/language-markdown/mdx.js

@@ -26,7 +26,7 @@
 
 const IMPORT_REGEX = /^import\s/;
 const EXPORT_REGEX = /^export\s/;
-const BLOCKS_REGEX = "[a-z\\.]*(\\.){0,1}[a-z][a-z0-9\\.]*";
+const BLOCKS_REGEX = "[a-z\\.]*(\\.){0,1}[a-z]{0,1}[a-z0-9\\.]*";
 const COMMENT_REGEX = "<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->";
 const EMPTY_NEWLINE = "\n\n";
 

src/language-markdown/parser-markdown.js

@@ -60,10 +60,18 @@ function htmlToJsx() {
         return node;
       }
 
-      const nodes = htmlParser.parse(node.value).children;
+      let nodes;
+
+      try {
+        nodes = htmlParser.parse(node.value).children;
+      } catch (e) {
+        // do nothing, it could be JSX fragment here
+        // or, it will be caught by "jsx" parser
+        // FIXME: adjacent JSX fragments could not be parsed, should we care about that?
+      }
 
       // find out if there are adjacent JSX elements which should be allowed in mdx alike in markdown
-      if (nodes.length <= 1) {
+      if (!nodes || nodes.length <= 1) {
         return Object.assign({}, node, { type: "jsx" });
       }
 

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

@@ -256,6 +256,12 @@ printWidth: 80
 
 ---
 
+<><Hello>
+    test   <World />   test
+</Hello></>
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |
@@ -280,6 +286,14 @@ printWidth: 80
 
 ---
 
+<>
+  <Hello>
+    test <World /> test
+  </Hello>
+</>
+
+---
+
 | Column 1 | Column 2            |
 | -------- | ------------------- |
 | Text     | <Hello>Text</Hello> |
@@ -314,6 +328,12 @@ semi: false
 
 ---
 
+<><Hello>
+    test   <World />   test
+</Hello></>
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |
@@ -338,6 +358,14 @@ semi: false
 
 ---
 
+<>
+  <Hello>
+    test <World /> test
+  </Hello>
+</>
+
+---
+
 | Column 1 | Column 2            |
 | -------- | ------------------- |
 | Text     | <Hello>Text</Hello> |

tests/mdx/jsx.mdx

@@ -18,6 +18,12 @@
 
 ---
 
+<><Hello>
+    test   <World />   test
+</Hello></>
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |