From eed6cf460b0567fcd4ab7ff12e800c5819de8b52 Mon Sep 17 00:00:00 2001 From: Titus Wormer Date: Sun, 20 Dec 2020 14:48:01 +0100 Subject: [PATCH] Replace Babel w/ estree MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This removes the last three custom Babel plugins we had and replaces them with estree versions. Furthermore, it removes `@babel/generator`. For the plugins, we were only looking at ESM import/exports, but right now we’re delegating work to `periscopic` to look at which things are defined in the top-level scope. It’s a bit more complex, but this matches better with intentions, fixes some bugs, and prepares for a potential future where other ES constructs are allowed, so all in all should be a nice improvement. For serializing, we’re switching to `astring`, and handling JSX for now internally (could be externalized later). `astring` seems fast and is incredibly small, but is not very popular. We might perhaps see bugs is serialization in the future because of that, but all our tests seem fine, so I’m not too worried about that. Estree remains a somewhat fragmented ecosystem, such as that the tree walkers in `periscopic` and `astring` are different, so we might also consider writing our own serializer in the future. Or, when we implement Babel’s React JSX transform ourselves, could switch to another generator, or at least drop the JSX serialization code here. Because of these changes, we can drop `@babel/core` and `@babel/generator` from `@mdx-js/mdx`, which drops the bundle size of from 349kb to 111kb. That’s 68%. Pretty nice. This should improve downloading and parsing time of bundles significantly. Of course, we currently still have JSX in the output, so folks will have to resort to Babel (or `buble-jsx-only`) in another step. For performance, v2 (micromark) was already an improvement over v1. On 1000 simple files totalling about 1mb of MDX: * v1: 3739ms * v2: 2734ms (26% faster) * v2 (w/o babel): 1392ms (63% faster). Of course, this all really depends on what type of stuff is in your MDX. But it looks pretty sweet! ✨ Related to GH-1046. Related to GH-1152. Related to GH-1338. Closes GH-704. Closes GH-1384. --- .../index.js | 57 -------- .../package.json | 37 +---- .../readme.md | 117 +-------------- .../test/index.test.js | 56 ------- .../index.js | 71 --------- .../package.json | 34 +---- .../readme.md | 89 +---------- .../test/index.test.js | 138 ------------------ .../index.js | 28 ---- .../package.json | 37 +---- .../readme.md | 89 +---------- .../test/index.test.js | 62 -------- packages/mdx/estree-to-js.js | 116 +++++++++++++++ packages/mdx/mdx-hast-to-jsx.js | 125 +++++++++------- packages/mdx/package.json | 11 +- packages/mdx/test/index.test.js | 34 ++++- yarn.lock | 52 ++++--- 17 files changed, 272 insertions(+), 881 deletions(-) delete mode 100644 packages/babel-plugin-apply-mdx-type-props/index.js delete mode 100644 packages/babel-plugin-apply-mdx-type-props/test/index.test.js delete mode 100644 packages/babel-plugin-extract-export-names/index.js delete mode 100644 packages/babel-plugin-extract-export-names/test/index.test.js delete mode 100644 packages/babel-plugin-extract-import-names/index.js delete mode 100644 packages/babel-plugin-extract-import-names/test/index.test.js create mode 100644 packages/mdx/estree-to-js.js diff --git a/packages/babel-plugin-apply-mdx-type-props/index.js b/packages/babel-plugin-apply-mdx-type-props/index.js deleted file mode 100644 index 9a3c256ba..000000000 --- a/packages/babel-plugin-apply-mdx-type-props/index.js +++ /dev/null @@ -1,57 +0,0 @@ -const {declare} = require('@babel/helper-plugin-utils') - -const startsWithCapitalLetter = str => /^[A-Z]/.test(str) - -class BabelPluginApplyMdxTypeProp { - constructor() { - const names = [] - this.state = {names} - - this.plugin = declare(api => { - api.assertVersion(7) - const {types: t} = api - - return { - visitor: { - 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) - - path.node.attributes.push( - t.jSXAttribute( - t.jSXIdentifier(`mdxType`), - t.stringLiteral(jsxName) - ) - ) - } - } - } - } - }) - } -} - -module.exports = BabelPluginApplyMdxTypeProp diff --git a/packages/babel-plugin-apply-mdx-type-props/package.json b/packages/babel-plugin-apply-mdx-type-props/package.json index 660a132ed..8bf7c2f44 100644 --- a/packages/babel-plugin-apply-mdx-type-props/package.json +++ b/packages/babel-plugin-apply-mdx-type-props/package.json @@ -1,37 +1,4 @@ { - "name": "babel-plugin-apply-mdx-type-prop", - "version": "2.0.0-next.8", - "description": "Apply the MDX type prop used in the MDX pragma", - "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": "John Otander (http://johnotander.com)", - "contributors": [ - "JounQin (https://www.1stg.me)" - ], - "license": "MIT", - "files": [ - "index.js" - ], - "keywords": [ - "mdx", - "markdown", - "react", - "jsx", - "remark", - "babel" - ], - "dependencies": { - "@babel/helper-plugin-utils": "^7.10.4" - }, - "scripts": { - "test-api": "jest test", - "test-coverage": "jest test --coverage", - "test": "yarn test-coverage" - }, - "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1" + "private": true, + "name": "babel-plugin-apply-mdx-type-prop" } diff --git a/packages/babel-plugin-apply-mdx-type-props/readme.md b/packages/babel-plugin-apply-mdx-type-props/readme.md index a60e7dbb1..b0c3651a6 100644 --- a/packages/babel-plugin-apply-mdx-type-props/readme.md +++ b/packages/babel-plugin-apply-mdx-type-props/readme.md @@ -1,117 +1,8 @@ # babel-plugin-apply-mdx-type-prop -[![Build][build-badge]][build] -[![Downloads][downloads-badge]][downloads] -[![Sponsors][sponsors-badge]][opencollective] -[![Backers][backers-badge]][opencollective] -[![Chat][chat-badge]][chat] +Deprecated! -Create a Babel plugin to both add `mdxType` props to components and extract all -those found named. -Used by [MDX][]. +Created for but no longer used in [MDX](https://mdxjs.com). -## Install - -[npm][]: - -```sh -npm install babel-plugin-apply-mdx-type-prop -``` - -[yarn][]: - -```sh -yarn add babel-plugin-apply-mdx-type-prop -``` - -## Use - -Say we have the following code in `input.jsx`: - -```jsx -export const Foo = () => ( -
-
-) - -export default () => ( - <> -

Hello!

- - -) -``` - -And our script, `example.js`: - -```js -const fs = require('fs') -const babel = require('@babel/core') -const BabelPluginApplyMdxTypeProp = require('babel-plugin-apply-mdx-type-prop') - -// Construct one for every file you’re processing. -const applyMdxTypeProp = new BabelPluginApplyMdxTypeProp() - -const result = babel.transformSync(fs.readFileSync('./input.jsx'), { - configFile: false, - plugins: ['@babel/plugin-syntax-jsx', applyMdxTypeProp.plugin] -}) - -console.log(result.code) -console.log(applyMdxTypeProp.state.names) -``` - -Now, running `node example` yields: - -```jsx -export const Foo = () => ( -
-
-) - -export default () => ( - <> -

Hello!

- - -) -``` - -```js -['Button', 'TomatoBox'] -``` - -## API - -### `BabelPluginApplyMdxTypeProp()` - -Constructor for an instance to transform and capture MDX types. - -Note that this isn’t a Babel plugin but _creates_ one. - -###### Returns - -Instance with: - -* `plugin` — Plugin for Babel -* `state` — Object with a `names` field listing all (including duplicates) - found types - -## License - -MIT - -[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-apply-mdx-type-prop.svg -[downloads]: https://www.npmjs.com/package/babel-plugin-apply-mdx-type-prop -[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 -[npm]: https://docs.npmjs.com/cli/install -[yarn]: https://yarnpkg.com/cli/add +This used to add `mdxType`, `parentName` props to JSX elements, +and track which components were used. diff --git a/packages/babel-plugin-apply-mdx-type-props/test/index.test.js b/packages/babel-plugin-apply-mdx-type-props/test/index.test.js deleted file mode 100644 index 9c6202b6b..000000000 --- a/packages/babel-plugin-apply-mdx-type-props/test/index.test.js +++ /dev/null @@ -1,56 +0,0 @@ -const babel = require('@babel/core') - -const BabelPluginApplyMdxTypeProp = require('..') - -const transform = value => { - const plugin = new BabelPluginApplyMdxTypeProp() - - const result = babel.transformSync(value, { - configFile: false, - plugins: [require('@babel/plugin-syntax-jsx'), plugin.plugin] - }) - - return { - ...result, - state: plugin.state - } -} - -describe('babel-plugin-add-mdx-type-prop', () => { - test('should add `mdxType` to components', () => { - expect(transform('var d =
').code).toEqual( - 'var d =
;' - ) - }) - - test('should support (as in, ignore) fragments', () => { - expect(transform('var d = <>