Fix support for comments

packages/mdx/md-ast-to-mdx-ast.js

@@ -2,7 +2,14 @@ const visit = require('unist-util-visit')
 
 module.exports = options => tree => {
   visit(tree, 'html', node => {
-    node.type = node.mdxType || 'jsx'
+    if (
+      node.value.startsWith('<!--') &&
+      node.value.endsWith('-->')
+    ) {
+      node.type = 'comment'
+    } else {
+      node.type = node.mdxType || 'jsx'
+    }
   })
 
   return tree

packages/mdx/mdx-ast-to-mdx-hast.js

@@ -61,6 +61,11 @@ module.exports = function mdxAstToMdxHast() {
           type: 'export'
         })
       },
+      comment(h, node) {
+        return Object.assign({}, node, {
+          type: 'comment'
+        })
+      },
       jsx(h, node) {
         return Object.assign({}, node, {
           type: 'jsx'

packages/mdx/mdx-hast-to-jsx.js

@@ -27,12 +27,6 @@ function toJSX(node, parentNode = {}, options = {}) {
         continue
       }
 
-      if (childNode.type === 'jsx') {
-        childNode.value = childNode.value
-          .replace('<!--', '{/*')
-          .replace('-->', '*/}')
-      }
-
       jsxNodes.push(childNode)
     }
 
@@ -90,6 +84,12 @@ function toJSX(node, parentNode = {}, options = {}) {
     return '{`' + node.value.replace(/`/g, '\\`').replace(/\$/g, '\\$') + '`}'
   }
 
+  if (node.type === 'comment') {
+    return node.value
+      .replace('<!--', '{/*')
+      .replace('-->', '*/}')
+  }
+
   if (node.type === 'import' || node.type === 'export' || node.type === 'jsx') {
     return node.value
   }

packages/mdx/test/fixtures/blog-post.md

@@ -20,7 +20,6 @@ I'm an awesome paragraph.
   <Bar>hi</Bar>
     {hello}
     {/* another commment */}
-    <!-- one more comment -->
 </Foo>
 
 ```

packages/mdx/test/index.test.js

@@ -86,20 +86,39 @@ COPY start.sh /home/start.sh
 
 it('Should support comments', async () => {
   const result = await mdx(`
-A paragraph
 <!-- a Markdown comment -->
+A paragraph
+
+Some text <!-- an inline comment -->
+
 \`\`\`md
-<!-- a code block Markdown comment -->
+<!-- a code block string -->
 \`\`\`
+
 <div>
   {/* a nested JSX comment */}
-  <!-- a nested Markdown comment -->
+  <!-- div content -->
 </div>
+
+<!-- a comment above -->
+- list item
+<!-- a comment below -->
+
+--> should be as-is
+
+<MyComp content={\`
+  <!-- a template literal -->
+\`}
   `)
   expect(result).toContain('{/* a Markdown comment */}')
-  expect(result).toContain('<!-- a code block Markdown comment -->')
+  expect(result).toContain('{/* an inline comment */}')
+  expect(result).toContain('<!-- a code block string -->')
   expect(result).toContain('{/* a nested JSX comment */}')
-  expect(result).toContain('{/* a nested Markdown comment */}')
+  expect(result).toContain('<!-- div content -->')
+  expect(result).toContain('{/* a comment above */}')
+  expect(result).toContain('{/* a comment below */}')
+  expect(result).toContain('--> should be as-is')
+  expect(result).toContain('<!-- a template literal -->')
 })
 
 it('Should not include export wrapper if skipExport is true', async () => {