Improve block parsing for alphanumeric component names (#604)

* Improve block parsing for alphanumeric component names Component names and HTML can be alphanumeric. This updates the block parsing regex to reflect that. Closes #593 * Add more test cases * Add more test cases, make block parsing more flexible * Add missing fragment test * Undo change that's no longer needed
mdx-js · Jul 12, 2019 · cbcd78c · cbcd78c
1 parent 998b472
commit cbcd78c
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 3 deletions.
diff --git a/packages/remark-mdx/block.js b/packages/remark-mdx/block.js
@@ -24,13 +24,15 @@ const cdataOpenExpression = /^<!\[CDATA\[/
 const cdataCloseExpression = /\]\]>/
 const elementCloseExpression = /^$/
 const otherElementOpenExpression = new RegExp(openCloseTag.source + '\\s*$')
+const fragmentOpenExpression = /^<>/
 
 function blockHtml(eat, value, silent) {
-  const blocks = '[a-z\\.]+(\\.){0,1}[a-z\\.]'
+  const blocks = '[a-z\\.]*(\\.){0,1}[a-z][a-z0-9\\.]*'
   const elementOpenExpression = new RegExp(
     '^</?(' + blocks + ')(?=(\\s|/?>|$))',
     'i'
   )
+
   const length = value.length
   let index = 0
   let next
@@ -48,6 +50,7 @@ function blockHtml(eat, value, silent) {
     [directiveOpenExpression, directiveCloseExpression, true],
     [cdataOpenExpression, cdataCloseExpression, true],
     [elementOpenExpression, elementCloseExpression, true],
+    [fragmentOpenExpression, elementCloseExpression, true],
     [otherElementOpenExpression, elementCloseExpression, false]
   ]
 

diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
@@ -10,6 +10,8 @@ const makeShortcode = name => function MDXDefaultShortcode(props) {
   return <div {...props}/>
 };
 const Baz = makeShortcode(\\"Baz\\");
+const Paragraph = makeShortcode(\\"Paragraph\\");
+const Button = makeShortcode(\\"Button\\");
 const layoutProps = {
   
 };
@@ -28,6 +30,15 @@ export default function MDXContent({
     <Baz mdxType=\\"Baz\\">
   Hi!
     </Baz>
+    <Paragraph bg='red.500' color='white' mdxType=\\"Paragraph\\">Foo</Paragraph>
+    <Button mdxType=\\"Button\\">
+  Hi!
+    </Button>
+    <>Foo</>
+    <>
+  Foo
+    </>
+    <h1>Hello, world!</h1>
     </MDXLayout>;
 }
 
@@ -171,12 +182,107 @@ Object {
   Hi!
 </Baz>",
     },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 54,
+          "line": 12,
+          "offset": 192,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 12,
+          "offset": 139,
+        },
+      },
+      "type": "jsx",
+      "value": "<Paragraph bg='red.500' color='white'>Foo</Paragraph>",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 10,
+          "line": 16,
+          "offset": 218,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 14,
+          "offset": 194,
+        },
+      },
+      "type": "jsx",
+      "value": "<Button>
+  Hi!
+</Button>",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 9,
+          "line": 18,
+          "offset": 228,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 18,
+          "offset": 220,
+        },
+      },
+      "type": "jsx",
+      "value": "<>Foo</>",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 4,
+          "line": 22,
+          "offset": 242,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 20,
+          "offset": 230,
+        },
+      },
+      "type": "jsx",
+      "value": "<>
+  Foo
+</>",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 23,
+          "line": 24,
+          "offset": 266,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 24,
+          "offset": 244,
+        },
+      },
+      "type": "jsx",
+      "value": "<h1>Hello, world!</h1>",
+    },
   ],
   "position": Object {
     "end": Object {
       "column": 1,
-      "line": 11,
-      "offset": 138,
+      "line": 25,
+      "offset": 267,
     },
     "start": Object {
       "column": 1,

diff --git a/packages/remark-mdx/test/test.js b/packages/remark-mdx/test/test.js
@@ -16,6 +16,20 @@ export default Foo
 <Baz>
   Hi!
 </Baz>
+
+<Paragraph bg='red.500' color='white'>Foo</Paragraph>
+
+<Button>
+  Hi!
+</Button>
+
+<>Foo</>
+
+<>
+  Foo
+</>
+
+<h1>Hello, world!</h1>
 `
 
 // Manually apply all mdx transformations for now
@@ -65,6 +79,16 @@ it('maintains the proper positional info', () => {
   expect(result).toMatchSnapshot()
 })
 
+it('does not wrap an block level elements in a paragraph', () => {
+  const result = transpile(FIXTURE)
+
+  expect(result).not.toMatch(/<p><Baz/)
+  expect(result).not.toMatch(/<p><Button/)
+  expect(result).not.toMatch(/<p><Paragraph>/)
+  expect(result).not.toMatch(/<p><>/)
+  expect(result).not.toMatch(/<p><h1/)
+})
+
 it('removes newlines between imports and exports', () => {
   const fixture = [
     'import Foo1 from "./foo"',