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.
Closes GH-1382.

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

package.json

@@ -26,9 +26,9 @@
     "publish": "lerna publish --force-publish=\"*\"",
     "publish-ci": "lerna publish -y --canary --preid ci --pre-dist-tag ci",
     "publish-next": "lerna publish --force-publish=\"*\" --pre-dist-tag next --preid next",
-    "test-api": "lerna run test-api --no-private",
-    "test-coverage": "lerna run test-coverage --no-private",
-    "test-types": "lerna run test-types --no-private",
+    "test-api": "lerna run test-api",
+    "test-coverage": "lerna run test-coverage",
+    "test-types": "lerna run test-types",
     "test": "yarn build && yarn lint && yarn test-coverage"
   },
   "dependencies": {},

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/babel-plugin-html-attributes-to-jsx/package.json

@@ -1,38 +1,5 @@
 {
   "private": true,
   "name": "babel-plugin-html-attributes-to-jsx",
-  "version": "2.0.0-next.8",
-  "description": "Coerce HTML attributes into something JSX and React friendly",
-  "repository": "mdx-js/mdx",
-  "homepage": "https://mdxjs.com",
-  "bugs": "https://github.com/mdx-js/mdx/issues",
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/unified"
-  },
-  "author": "Christopher Biscardi <[email protected]> (https://www.christopherbiscardi.com)",
-  "contributors": [
-    "Christopher Biscardi <[email protected]> (https://www.christopherbiscardi.com)",
-    "John Otander <[email protected]> (http://johnotander.com)",
-    "JounQin <[email protected]> (https://www.1stg.me)"
-  ],
-  "license": "MIT",
-  "files": [
-    "index.js",
-    "translations.js"
-  ],
-  "keywords": [
-    "mdx",
-    "markdown",
-    "react",
-    "jsx",
-    "remark",
-    "babel"
-  ],
-  "dependencies": {
-    "@babel/types": "7.10.5",
-    "camelcase-css": "2.0.1",
-    "style-to-object": "0.3.0"
-  },
   "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
 }

packages/babel-plugin-html-attributes-to-jsx/readme.md

@@ -1,23 +1,6 @@
 # babel-plugin-html-attributes-to-jsx
 
-[![Build][build-badge]][build]
-[![Downloads][downloads-badge]][downloads]
-[![Sponsors][sponsors-badge]][opencollective]
-[![Backers][backers-badge]][opencollective]
-[![Chat][chat-badge]][chat]
-
 Deprecated!
 
 Coerce HTML attributes into React properties.
 Created for but no longer used in [MDX](https://mdxjs.com).
-
-[build-badge]: https://github.com/mdx-js/mdx/workflows/CI/badge.svg
-[build]: https://github.com/mdx-js/mdx/actions
-[downloads-badge]: https://img.shields.io/npm/dm/babel-plugin-html-attributes-to-jsx.svg
-[downloads]: https://www.npmjs.com/package/babel-plugin-html-attributes-to-jsx
-[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
-[backers-badge]: https://opencollective.com/unified/backers/badge.svg
-[opencollective]: https://opencollective.com/unified
-[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
-[chat]: https://github.com/mdx-js/mdx/discussions
-[mdx]: https://mdxjs.com