Better handle JSX block parsing in remark-mdx (#415)

* Add failing test for inline jsx issue

* Add repro test

* Add and modify remark html block parser

* Skip failing test that shouldn't pass yet

Author: johno

packages/mdx/test/index.test.js

@@ -356,6 +356,16 @@ test('Should process filepath and pass it to the plugins', async () => {
   expect(result).toMatch(/HELLO, WORLD!/)
 })
 
+test.skip('Should handle inline JSX', async () => {
+  const result = await mdx(
+    'Hello, <span style={{ color: "tomato" }}>world</span>'
+  )
+
+  expect(result).toContain(
+    '<MDXTag name="p" components={components}>Hello, <span style={{ color: "tomato" }}>world</span></MDXTag>'
+  )
+})
+
 test('Should parse and render footnotes', async () => {
   const result = await mdx(
     'This is a paragraph with a [^footnote]\n\n[^footnote]: Here is the footnote'

packages/remark-mdx/block.js

@@ -0,0 +1,113 @@
+// Source copied and then modified from
+// https://github.com/remarkjs/remark/blob/master/packages/remark-parse/lib/tokenize/html-block.js
+//
+// MIT License https://github.com/remarkjs/remark/blob/master/license
+
+const {openCloseTag} = require('./tag')
+
+module.exports = blockHtml
+
+const tab = '\t'
+const space = ' '
+const lineFeed = '\n'
+const lessThan = '<'
+
+const rawOpenExpression = /^<(script|pre|style)(?=(\s|>|$))/i
+const rawCloseExpression = /<\/(script|pre|style)>/i
+const commentOpenExpression = /^<!--/
+const commentCloseExpression = /-->/
+const instructionOpenExpression = /^<\?/
+const instructionCloseExpression = /\?>/
+const directiveOpenExpression = /^<![A-Za-z]/
+const directiveCloseExpression = />/
+const cdataOpenExpression = /^<!\[CDATA\[/
+const cdataCloseExpression = /\]\]>/
+const elementCloseExpression = /^$/
+const otherElementOpenExpression = new RegExp(openCloseTag.source + '\\s*$')
+
+function blockHtml(eat, value, silent) {
+  const blocks = '[a-z\\.]+(\\.){0,1}[a-z\\.]'
+  const elementOpenExpression = new RegExp(
+    '^</?(' + blocks + ')(?=(\\s|/?>|$))',
+    'i'
+  )
+  const length = value.length
+  let index = 0
+  let next
+  let line
+  let offset
+  let character
+  let count
+  let sequence
+  let subvalue
+
+  const sequences = [
+    [rawOpenExpression, rawCloseExpression, true],
+    [commentOpenExpression, commentCloseExpression, true],
+    [instructionOpenExpression, instructionCloseExpression, true],
+    [directiveOpenExpression, directiveCloseExpression, true],
+    [cdataOpenExpression, cdataCloseExpression, true],
+    [elementOpenExpression, elementCloseExpression, true],
+    [otherElementOpenExpression, elementCloseExpression, false]
+  ]
+
+  // Eat initial spacing.
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== tab && character !== space) {
+      break
+    }
+
+    index++
+  }
+
+  if (value.charAt(index) !== lessThan) {
+    return
+  }
+
+  next = value.indexOf(lineFeed, index + 1)
+  next = next === -1 ? length : next
+  line = value.slice(index, next)
+  offset = -1
+  count = sequences.length
+
+  while (++offset < count) {
+    if (sequences[offset][0].test(line)) {
+      sequence = sequences[offset]
+      break
+    }
+  }
+
+  if (!sequence) {
+    return
+  }
+
+  if (silent) {
+    return sequence[2]
+  }
+
+  index = next
+
+  if (!sequence[1].test(line)) {
+    while (index < length) {
+      next = value.indexOf(lineFeed, index + 1)
+      next = next === -1 ? length : next
+      line = value.slice(index + 1, next)
+
+      if (sequence[1].test(line)) {
+        if (line) {
+          index = next
+        }
+
+        break
+      }
+
+      index = next
+    }
+  }
+
+  subvalue = value.slice(0, index)
+
+  return eat(subvalue)({type: 'html', value: subvalue})
+}

packages/remark-mdx/index.js

@@ -1,5 +1,6 @@
 const isAlphabetical = require('is-alphabetical')
 const extractImportsAndExports = require('./extract-imports-and-exports')
+const block = require('./block')
 const {tag} = require('./tag')
 
 const IMPORT_REGEX = /^import/
@@ -37,7 +38,7 @@ function attachParser(parser) {
   const methods = parser.prototype.blockMethods
 
   blocks.esSyntax = tokenizeEsSyntax
-  blocks.html = wrap(blocks.html)
+  blocks.html = wrap(block)
   inlines.html = wrap(inlines.html, inlineJsx)
 
   methods.splice(methods.indexOf('paragraph'), 0, 'esSyntax')
@@ -89,7 +90,7 @@ function attachCompiler(compiler) {
   proto.visitors = Object.assign({}, proto.visitors, {
     import: stringifyEsSyntax,
     export: stringifyEsSyntax,
-    jsx: proto.visitors.html
+    jsx: stringifyEsSyntax
   })
 }
 

packages/remark-mdx/package.json

@@ -24,6 +24,7 @@
   "files": [
     "index.js",
     "tag.js",
+    "block.js",
     "extract-imports-and-exports.js"
   ],
   "dependencies": {

packages/remark-mdx/test/fixtures/inline-parsing.js

@@ -65,10 +65,16 @@ module.exports = [
     description: 'Handles links',
     mdx: 'Hello, <Component>{props.world}</Component> and a moustache! }: <https://johno.com>'
   },
+  {
+    description: 'Ignores links inside JSX blocks',
+    mdx: [
+      '# Hello, world!',
+      '<Component>from https://johno.com</Component>'
+    ].join('\n\n')
+  },
   {
     description: 'Handles multiline JSX blocks',
-    mdx: `
-      <Image
+    mdx: `<Image
         src={asset(\`\${SOME_CONSTANT}/some.png\`)}
         width="123"
         height="456"