Refactor @mdx-js/mdx to clean code, test 100%

Code changes:

* Remove footnotes by default: if folks want that, they can add
  `remark-footnotes` themselves in `remarkPlugins`
* Remove undocumented and untested `options.compilers`
* Remove undocumented and untested `raw` node handling.
  The way it was done would result in bugs.
  If folks want HTML in MDX, they can use `rehype-raw` in
  `rehypePlugins`
* Defer plugin handling to `.use`
* Remove unused dependencies
* Refactor code

Tests:

* Make test cases smaller so that unrelated changes cause less failures
* Where possible, compare MDX output to JSX, so that stylistic differences
  are ignored, and our baseline is met
* Where possible, evaluate the MDX, to check that core, components, plugins,
  all actually work together
* Remove unneeded tests, such as where covered by `remark-mdx` or
  `remark-mdxjs`
* Add tests for everything that’s exposed by this package
* 100% coverage

Closes GH-1347.

Reviewed-by: Christian Murphy <[email protected]>

Author: wooorm

packages/mdx/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "corejs": 3,
+        "useBuiltIns": "usage"
+      }
+    ],
+    "@babel/react"
+  ]
+}

packages/mdx/index.js

@@ -1,120 +1,51 @@
 const unified = require('unified')
-const toMDAST = require('remark-parse')
+const remarkParse = require('remark-parse')
 const remarkMdx = require('remark-mdx')
 const remarkMdxJs = require('remark-mdxjs')
-const footnotes = require('remark-footnotes')
 const squeeze = require('remark-squeeze-paragraphs')
-const visit = require('unist-util-visit')
-const raw = require('hast-util-raw')
 const mdxAstToMdxHast = require('./mdx-ast-to-mdx-hast')
 const mdxHastToJsx = require('./mdx-hast-to-jsx')
 
-const DEFAULT_OPTIONS = {
-  remarkPlugins: [],
-  rehypePlugins: [],
-  compilers: []
-}
-
-function createMdxAstCompiler(options) {
-  const plugins = options.remarkPlugins
-
-  const fn = unified()
-    .use(toMDAST, options)
-    .use(remarkMdx, options)
-    .use(remarkMdxJs, options)
-    .use(footnotes, options)
-    .use(squeeze, options)
-
-  plugins.forEach(plugin => {
-    // Handle [plugin, pluginOptions] syntax
-    if (Array.isArray(plugin) && plugin.length > 1) {
-      fn.use(plugin[0], plugin[1])
-    } else {
-      fn.use(plugin)
-    }
-  })
+const pragma = `/* @jsx mdx */`
 
-  fn.use(mdxAstToMdxHast, options)
-
-  return fn
-}
-
-function applyHastPluginsAndCompilers(compiler, options) {
-  const plugins = options.rehypePlugins
-
-  const compilers = options.compilers
-
-  // Convert raw nodes into HAST
-  compiler.use(() => ast => {
-    visit(ast, 'raw', node => {
-      const {children, tagName, properties} = raw(node)
-      node.type = 'element'
-      node.children = children
-      node.tagName = tagName
-
-      node.properties = properties
-    })
-  })
-
-  plugins.forEach(plugin => {
-    // Handle [plugin, pluginOptions] syntax
-    if (Array.isArray(plugin) && plugin.length > 1) {
-      compiler.use(plugin[0], plugin[1])
-    } else {
-      compiler.use(plugin)
-    }
-  })
-
-  compiler.use(mdxHastToJsx, options)
-
-  for (const compilerPlugin of compilers) {
-    compiler.use(compilerPlugin, options)
-  }
-
-  return compiler
+function createMdxAstCompiler(options = {}) {
+  return unified()
+    .use(remarkParse)
+    .use(remarkMdx)
+    .use(remarkMdxJs)
+    .use(squeeze)
+    .use(options.remarkPlugins)
+    .use(mdxAstToMdxHast)
 }
 
 function createCompiler(options = {}) {
-  const opts = Object.assign({}, DEFAULT_OPTIONS, options)
-  const compiler = createMdxAstCompiler(opts)
-  const compilerWithPlugins = applyHastPluginsAndCompilers(compiler, opts)
-
-  return compilerWithPlugins
+  return createMdxAstCompiler(options)
+    .use(options.rehypePlugins)
+    .use(mdxHastToJsx, options)
 }
 
-function sync(mdx, options = {}) {
-  const compiler = createCompiler(options)
+function createConfig(mdx, options) {
+  const config = {contents: mdx}
 
-  const fileOpts = {contents: mdx}
   if (options.filepath) {
-    fileOpts.path = options.filepath
+    config.path = options.filepath
   }
 
-  const {contents} = compiler.processSync(fileOpts)
+  return config
+}
 
-  return `/* @jsx mdx */
-${contents}`
+function sync(mdx, options = {}) {
+  const file = createCompiler(options).processSync(createConfig(mdx, options))
+  return pragma + '\n' + String(file)
 }
 
 async function compile(mdx, options = {}) {
-  const compiler = createCompiler(options)
-
-  const fileOpts = {contents: mdx}
-  if (options.filepath) {
-    fileOpts.path = options.filepath
-  }
-
-  const {contents} = await compiler.process(fileOpts)
-
-  return `/* @jsx mdx */
-${contents}`
+  const file = await createCompiler(options).process(createConfig(mdx, options))
+  return pragma + '\n' + String(file)
 }
 
-compile.sync = sync
-
 module.exports = compile
-exports = compile
-exports.sync = sync
-exports.createMdxAstCompiler = createMdxAstCompiler
-exports.createCompiler = createCompiler
-exports.default = compile
+compile.default = compile
+compile.sync = sync
+compile.createMdxAstCompiler = createMdxAstCompiler
+compile.createCompiler = createCompiler

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

@@ -1,102 +1,80 @@
-const toHAST = require('mdast-util-to-hast')
+const toHast = require('mdast-util-to-hast')
 const all = require('mdast-util-to-hast/lib/all')
 const detab = require('detab')
 const u = require('unist-builder')
 
 function mdxAstToMdxHast() {
-  return (tree, _file) => {
-    const handlers = {
-      // `inlineCode` gets passed as `code` by the HAST transform.
-      // This makes sure it ends up being `inlineCode`
-      inlineCode(h, node) {
-        return Object.assign({}, node, {
-          type: 'element',
-          tagName: 'inlineCode',
-          properties: {},
-          children: [
-            {
-              type: 'text',
-              value: node.value
-            }
-          ]
-        })
-      },
-      code(h, node) {
-        const value = node.value ? detab(node.value + '\n') : ''
-        const lang = node.lang
-        const props = {}
+  return tree => {
+    return toHast(tree, {
+      handlers: {
+        // `inlineCode` gets passed as `code` by the HAST transform.
+        // This makes sure it ends up being `inlineCode`
+        inlineCode(h, node) {
+          return h(node, 'inlineCode', [{type: 'text', value: node.value}])
+        },
+        code(h, node) {
+          const value = node.value ? detab(node.value + '\n') : ''
+          const lang = node.lang
+          const props = {}
 
-        if (lang) {
-          props.className = ['language-' + lang]
-        }
+          if (lang) {
+            props.className = ['language-' + lang]
+          }
+
+          props.metastring = node.meta
 
-        // MDAST sets `node.meta` to `null` instead of `undefined` if
-        // not present, which React doesn't like.
-        props.metastring = node.meta || undefined
+          // To do: this handling seems not what users expect:
+          // <https://github.com/mdx-js/mdx/issues/702>.
+          const meta =
+            node.meta &&
+            node.meta.split(' ').reduce((acc, cur) => {
+              if (cur.split('=').length > 1) {
+                const t = cur.split('=')
+                acc[t[0]] = t[1]
+                return acc
+              }
 
-        const meta =
-          node.meta &&
-          node.meta.split(' ').reduce((acc, cur) => {
-            if (cur.split('=').length > 1) {
-              const t = cur.split('=')
-              acc[t[0]] = t[1]
+              acc[cur] = true
               return acc
-            }
+            }, {})
 
-            acc[cur] = true
-            return acc
-          }, {})
+          if (meta) {
+            Object.keys(meta).forEach(key => {
+              const isClassKey = key === 'class' || key === 'className'
+              if (props.className && isClassKey) {
+                props.className.push(meta[key])
+              } else {
+                props[key] = meta[key]
+              }
+            })
+          }
 
-        if (meta) {
-          Object.keys(meta).forEach(key => {
-            const isClassKey = key === 'class' || key === 'className'
-            if (props.className && isClassKey) {
-              props.className.push(meta[key])
-            } else {
-              props[key] = meta[key]
-            }
-          })
+          return h(node.position, 'pre', [
+            h(node, 'code', props, [u('text', value)])
+          ])
+        },
+        // To do: rename to `mdxJsImport`
+        import(h, node) {
+          return Object.assign({}, node, {type: 'import'})
+        },
+        // To do: rename to `mdxJsExport`
+        export(h, node) {
+          return Object.assign({}, node, {type: 'export'})
+        },
+        mdxBlockElement(h, node) {
+          return Object.assign({}, node, {children: all(h, node)})
+        },
+        mdxSpanElement(h, node) {
+          return Object.assign({}, node, {children: all(h, node)})
+        },
+        mdxBlockExpression(h, node) {
+          return Object.assign({}, node, {type: 'mdxBlockExpression'})
+        },
+        mdxSpanExpression(h, node) {
+          return Object.assign({}, node, {type: 'mdxSpanExpression'})
         }
-
-        return h(node.position, 'pre', [
-          h(node, 'code', props, [u('text', value)])
-        ])
-      },
-      // To do: rename to `mdxJsImport`
-      import(h, node) {
-        return Object.assign({}, node, {
-          type: 'import'
-        })
-      },
-      // To do: rename to `mdxJsExport`
-      export(h, node) {
-        return Object.assign({}, node, {
-          type: 'export'
-        })
-      },
-      mdxBlockElement(h, node) {
-        return Object.assign({}, node, {children: all(h, node)})
-      },
-      mdxSpanElement(h, node) {
-        return Object.assign({}, node, {children: all(h, node)})
-      },
-      mdxBlockExpression(h, node) {
-        return Object.assign({}, node, {
-          type: 'mdxBlockExpression'
-        })
-      },
-      mdxSpanExpression(h, node) {
-        return Object.assign({}, node, {
-          type: 'mdxSpanExpression'
-        })
       }
-    }
-
-    const hast = toHAST(tree, {
-      handlers
     })
-
-    return hast
   }
 }