Refactor to generate JS AST

This PR changes the internals of the core `@mdx-js/mdx` package to generate a
JavaScript syntax tree instead of a string.
This fixes escaping issues such as #1219.
It makes `mdx-hast-to-jsx` much more palatable.
It also prevents several Babel parses.
It paves the way for passing in Babel plugins, which is useful for users, but
also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls
directly and make MDX’s output directly usable.

* `babel-plugin-apply-mdx-type-props`: add `parentType`
* `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace
* `mdx`: use `hast-util-to-estree` to transform hast to estree
* `mdx`: use `estree-to-babel` to transform estree to Babel
* `mdx`: generate estree/Babel instead of strings
* `mdx`: use `@babel/generator` to serialize Babel AST
* `vue`: stop supporting the react transform: (it doesn’t make sense)
* `vue`: fix support for props to components

Related to GH-741.
Related to GH-1152.

Closes GH-606.
Closes GH-1028.
Closes GH-1219.

packages/babel-plugin-apply-mdx-type-props/index.js

@@ -16,6 +16,27 @@ class BabelPluginApplyMdxTypeProp {
           JSXOpeningElement(path) {
             const jsxName = path.node.name.name
 
+            let parentPath = path.parentPath.parentPath
+            let parentName
+
+            while (parentPath) {
+              if (parentPath.node.type === 'JSXElement') {
+                parentName = parentPath.node.openingElement.name.name
+                break
+              }
+
+              parentPath = parentPath.parentPath
+            }
+
+            if (typeof parentName === 'string' && parentName !== 'MDXLayout') {
+              path.node.attributes.push(
+                t.jSXAttribute(
+                  t.jSXIdentifier(`parentName`),
+                  t.stringLiteral(parentName)
+                )
+              )
+            }
+
             if (startsWithCapitalLetter(jsxName)) {
               names.push(jsxName)
 

packages/babel-plugin-apply-mdx-type-props/test/index.test.js

@@ -19,7 +19,7 @@ const transform = value => {
 describe('babel-plugin-add-mdx-type-prop', () => {
   test('should add `mdxType` to components', () => {
     expect(transform('var d = <div><Button /></div>').code).toEqual(
-      'var d = <div><Button mdxType="Button" /></div>;'
+      'var d = <div><Button parentName="div" mdxType="Button" /></div>;'
     )
   })
 

packages/mdx/index.js

@@ -2,6 +2,7 @@ const unified = require('unified')
 const remarkParse = require('remark-parse')
 const remarkMdx = require('remark-mdx')
 const squeeze = require('remark-squeeze-paragraphs')
+const minifyWhitespace = require('rehype-minify-whitespace')
 const mdxAstToMdxHast = require('./mdx-ast-to-mdx-hast')
 const mdxHastToJsx = require('./mdx-hast-to-jsx')
 
@@ -19,6 +20,7 @@ function createMdxAstCompiler(options = {}) {
 function createCompiler(options = {}) {
   return createMdxAstCompiler(options)
     .use(options.rehypePlugins)
+    .use(minifyWhitespace, {newlines: true})
     .use(mdxHastToJsx, options)
 }