From 604dad76dccc8ac83d28b3307279df51cfd5f98a Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Mon, 17 Jun 2019 10:10:41 -0600
Subject: [PATCH 1/5] 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
---
 packages/remark-mdx/block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remark-mdx/block.js b/packages/remark-mdx/block.js
index bf91aceb2..2259ab7a5 100644
--- a/packages/remark-mdx/block.js
+++ b/packages/remark-mdx/block.js
@@ -26,7 +26,7 @@ const elementCloseExpression = /^$/
 const otherElementOpenExpression = new RegExp(openCloseTag.source + '\\s*$')
 
 function blockHtml(eat, value, silent) {
-  const blocks = '[a-z\\.]+(\\.){0,1}[a-z\\.]'
+  const blocks = '[a-z0-9\\.]+(\\.){0,1}[a-z0-9\\.]'
   const elementOpenExpression = new RegExp(
     '^</?(' + blocks + ')(?=(\\s|/?>|$))',
     'i'

From 71a58fa29577927d30655e2d1aa044959d498fc2 Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Fri, 12 Jul 2019 09:12:34 -0600
Subject: [PATCH 2/5] Add more test cases

---
 .../test/__snapshots__/test.js.snap           | 175 +++---------------
 packages/remark-mdx/test/test.js              |  28 ++-
 2 files changed, 44 insertions(+), 159 deletions(-)

diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
index c2b204d2f..4fc2161b6 100644
--- 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,11 @@ export default function MDXContent({
     <Baz mdxType=\\"Baz\\">
   Hi!
     </Baz>
+    <Paragraph bg='red.500' color='white' mdxType=\\"Paragraph\\">Foo</Paragraph>
+    <Button mdxType=\\"Button\\">
+  Hi!
+    </Button>
+    <h1>Hello, world!</h1>
     </MDXLayout>;
 }
 
@@ -36,156 +43,26 @@ MDXContent.isMDXComponent = true;"
 `;
 
 exports[`maintains the proper positional info 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "position": Position {
-        "end": Object {
-          "column": 1,
-          "line": 3,
-          "offset": 25,
-        },
-        "indent": Array [
-          1,
-        ],
-        "start": Object {
-          "column": 1,
-          "line": 2,
-          "offset": 1,
-        },
-      },
-      "type": "import",
-      "value": "import Foo from './bar'
-",
-    },
-    Object {
-      "position": Position {
-        "end": Object {
-          "column": 1,
-          "line": 4,
-          "offset": 53,
-        },
-        "indent": Array [
-          1,
-        ],
-        "start": Object {
-          "column": 1,
-          "line": 3,
-          "offset": 25,
-        },
-      },
-      "type": "export",
-      "value": "export { Baz } from './foo'
-",
-    },
-    Object {
-      "default": true,
-      "position": Position {
-        "end": Object {
-          "column": 19,
-          "line": 4,
-          "offset": 71,
-        },
-        "indent": Array [],
-        "start": Object {
-          "column": 1,
-          "line": 4,
-          "offset": 53,
-        },
-      },
-      "type": "export",
-      "value": "export default Foo",
-    },
-    Object {
-      "children": Array [
-        Object {
-          "position": Position {
-            "end": Object {
-              "column": 17,
-              "line": 6,
-              "offset": 89,
-            },
-            "indent": Array [],
-            "start": Object {
-              "column": 3,
-              "line": 6,
-              "offset": 75,
-            },
-          },
-          "type": "text",
-          "value": "Hello, world! ",
-        },
-        Object {
-          "position": Position {
-            "end": Object {
-              "column": 45,
-              "line": 6,
-              "offset": 117,
-            },
-            "indent": Array [],
-            "start": Object {
-              "column": 17,
-              "line": 6,
-              "offset": 89,
-            },
-          },
-          "type": "jsx",
-          "value": "<Foo bar={{ baz: 'qux' }} />",
-        },
-      ],
-      "depth": 1,
-      "position": Position {
-        "end": Object {
-          "column": 45,
-          "line": 6,
-          "offset": 117,
-        },
-        "indent": Array [],
-        "start": Object {
-          "column": 1,
-          "line": 6,
-          "offset": 73,
-        },
-      },
-      "type": "heading",
-    },
-    Object {
-      "position": Position {
-        "end": Object {
-          "column": 7,
-          "line": 10,
-          "offset": 137,
-        },
-        "indent": Array [
-          1,
-          1,
-        ],
-        "start": Object {
-          "column": 1,
-          "line": 8,
-          "offset": 119,
-        },
-      },
-      "type": "jsx",
-      "value": "<Baz>
+"import Foo from './bar'
+
+export { Baz } from './foo'
+
+export default Foo
+
+# Hello, world! <Foo bar={{ baz: 'qux' }} />
+
+<Baz>
   Hi!
-</Baz>",
-    },
-  ],
-  "position": Object {
-    "end": Object {
-      "column": 1,
-      "line": 11,
-      "offset": 138,
-    },
-    "start": Object {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
+</Baz>
+
+<Paragraph bg='red.500' color='white'>Foo</Paragraph>
+
+<Button>
+  Hi!
+</Button>
+
+<h1>Hello, world!</h1>
+"
 `;
 
 exports[`removes newlines between imports and exports 1`] = `
diff --git a/packages/remark-mdx/test/test.js b/packages/remark-mdx/test/test.js
index 87d010b54..40e6eadc4 100644
--- a/packages/remark-mdx/test/test.js
+++ b/packages/remark-mdx/test/test.js
@@ -16,6 +16,14 @@ export default Foo
 <Baz>
   Hi!
 </Baz>
+
+<Paragraph bg='red.500' color='white'>Foo</Paragraph>
+
+<Button>
+  Hi!
+</Button>
+
+<h1>Hello, world!</h1>
 `
 
 // Manually apply all mdx transformations for now
@@ -34,15 +42,6 @@ const transpile = mdx => {
   return result.contents
 }
 
-const parse = mdx => {
-  const result = unified()
-    .use(remarkParse)
-    .use(remarkMdx)
-    .parse(mdx)
-
-  return result
-}
-
 const stringify = mdx => {
   const result = unified()
     .use(remarkParse)
@@ -60,11 +59,20 @@ it('correctly transpiles', () => {
 })
 
 it('maintains the proper positional info', () => {
-  const result = parse(FIXTURE)
+  const result = stringify(FIXTURE)
 
   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><h1/)
+})
+
 it('removes newlines between imports and exports', () => {
   const fixture = [
     'import Foo1 from "./foo"',

From c039a81e65b7a13770e69484df2595d784b44bac Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Fri, 12 Jul 2019 09:28:59 -0600
Subject: [PATCH 3/5] Add more test cases, make block parsing more flexible

---
 packages/remark-mdx/block.js                        |  5 ++++-
 packages/remark-mdx/test/__snapshots__/test.js.snap | 10 ++++++++++
 packages/remark-mdx/test/test.js                    |  6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/remark-mdx/block.js b/packages/remark-mdx/block.js
index 2259ab7a5..f2f4c0837 100644
--- 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-z0-9\\.]+(\\.){0,1}[a-z0-9\\.]'
+  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
index 4fc2161b6..f7eee2a26 100644
--- a/packages/remark-mdx/test/__snapshots__/test.js.snap
+++ b/packages/remark-mdx/test/__snapshots__/test.js.snap
@@ -34,6 +34,10 @@ export default function MDXContent({
     <Button mdxType=\\"Button\\">
   Hi!
     </Button>
+    <>Foo</>
+    <>
+  Foo
+    </>
     <h1>Hello, world!</h1>
     </MDXLayout>;
 }
@@ -61,6 +65,12 @@ export default Foo
   Hi!
 </Button>
 
+<>Foo</>
+
+<>
+  Foo
+</>
+
 <h1>Hello, world!</h1>
 "
 `;
diff --git a/packages/remark-mdx/test/test.js b/packages/remark-mdx/test/test.js
index 40e6eadc4..6674eea63 100644
--- a/packages/remark-mdx/test/test.js
+++ b/packages/remark-mdx/test/test.js
@@ -23,6 +23,12 @@ export default Foo
   Hi!
 </Button>
 
+<>Foo</>
+
+<>
+  Foo
+</>
+
 <h1>Hello, world!</h1>
 `
 

From 1c0111557daed0c846f1e784a0904d06ced09781 Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Fri, 12 Jul 2019 09:29:30 -0600
Subject: [PATCH 4/5] Add missing fragment test

---
 packages/remark-mdx/test/test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/remark-mdx/test/test.js b/packages/remark-mdx/test/test.js
index 6674eea63..dde3a7c77 100644
--- a/packages/remark-mdx/test/test.js
+++ b/packages/remark-mdx/test/test.js
@@ -76,6 +76,7 @@ it('does not wrap an block level elements in a paragraph', () => {
   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/)
 })
 

From 0dd302e21b61075b474f6dbe75ca628ed6659489 Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Fri, 12 Jul 2019 09:43:47 -0600
Subject: [PATCH 5/5] Undo change that's no longer needed

---
 .../test/__snapshots__/test.js.snap           | 265 ++++++++++++++++--
 packages/remark-mdx/test/test.js              |  11 +-
 2 files changed, 252 insertions(+), 24 deletions(-)

diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
index f7eee2a26..5c2df1559 100644
--- a/packages/remark-mdx/test/__snapshots__/test.js.snap
+++ b/packages/remark-mdx/test/__snapshots__/test.js.snap
@@ -47,32 +47,251 @@ MDXContent.isMDXComponent = true;"
 `;
 
 exports[`maintains the proper positional info 1`] = `
-"import Foo from './bar'
-
-export { Baz } from './foo'
-
-export default Foo
-
-# Hello, world! <Foo bar={{ baz: 'qux' }} />
-
-<Baz>
+Object {
+  "children": Array [
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 1,
+          "line": 3,
+          "offset": 25,
+        },
+        "indent": Array [
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 2,
+          "offset": 1,
+        },
+      },
+      "type": "import",
+      "value": "import Foo from './bar'
+",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 1,
+          "line": 4,
+          "offset": 53,
+        },
+        "indent": Array [
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 3,
+          "offset": 25,
+        },
+      },
+      "type": "export",
+      "value": "export { Baz } from './foo'
+",
+    },
+    Object {
+      "default": true,
+      "position": Position {
+        "end": Object {
+          "column": 19,
+          "line": 4,
+          "offset": 71,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 4,
+          "offset": 53,
+        },
+      },
+      "type": "export",
+      "value": "export default Foo",
+    },
+    Object {
+      "children": Array [
+        Object {
+          "position": Position {
+            "end": Object {
+              "column": 17,
+              "line": 6,
+              "offset": 89,
+            },
+            "indent": Array [],
+            "start": Object {
+              "column": 3,
+              "line": 6,
+              "offset": 75,
+            },
+          },
+          "type": "text",
+          "value": "Hello, world! ",
+        },
+        Object {
+          "position": Position {
+            "end": Object {
+              "column": 45,
+              "line": 6,
+              "offset": 117,
+            },
+            "indent": Array [],
+            "start": Object {
+              "column": 17,
+              "line": 6,
+              "offset": 89,
+            },
+          },
+          "type": "jsx",
+          "value": "<Foo bar={{ baz: 'qux' }} />",
+        },
+      ],
+      "depth": 1,
+      "position": Position {
+        "end": Object {
+          "column": 45,
+          "line": 6,
+          "offset": 117,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 6,
+          "offset": 73,
+        },
+      },
+      "type": "heading",
+    },
+    Object {
+      "position": Position {
+        "end": Object {
+          "column": 7,
+          "line": 10,
+          "offset": 137,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 8,
+          "offset": 119,
+        },
+      },
+      "type": "jsx",
+      "value": "<Baz>
   Hi!
-</Baz>
-
-<Paragraph bg='red.500' color='white'>Foo</Paragraph>
-
-<Button>
+</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>
-
-<>Foo</>
-
-<>
+</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
-</>
-
-<h1>Hello, world!</h1>
-"
+</>",
+    },
+    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": 25,
+      "offset": 267,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
 `;
 
 exports[`removes newlines between imports and exports 1`] = `
diff --git a/packages/remark-mdx/test/test.js b/packages/remark-mdx/test/test.js
index dde3a7c77..a05fb6fde 100644
--- a/packages/remark-mdx/test/test.js
+++ b/packages/remark-mdx/test/test.js
@@ -48,6 +48,15 @@ const transpile = mdx => {
   return result.contents
 }
 
+const parse = mdx => {
+  const result = unified()
+    .use(remarkParse)
+    .use(remarkMdx)
+    .parse(mdx)
+
+  return result
+}
+
 const stringify = mdx => {
   const result = unified()
     .use(remarkParse)
@@ -65,7 +74,7 @@ it('correctly transpiles', () => {
 })
 
 it('maintains the proper positional info', () => {
-  const result = stringify(FIXTURE)
+  const result = parse(FIXTURE)
 
   expect(result).toMatchSnapshot()
 })