Skip to content

Commit

Permalink
Replace Babel w/ estree (#1399)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
wooorm authored Dec 20, 2020
1 parent e760cee commit 521f092
Show file tree
Hide file tree
Showing 17 changed files with 272 additions and 881 deletions.
57 changes: 0 additions & 57 deletions packages/babel-plugin-apply-mdx-type-props/index.js

This file was deleted.

37 changes: 2 additions & 35 deletions packages/babel-plugin-apply-mdx-type-props/package.json
Original file line number Diff line number Diff line change
@@ -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 <johnotander@gmail.com> (http://johnotander.com)",
"contributors": [
"JounQin <admin@1stg.me> (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"
}
117 changes: 4 additions & 113 deletions packages/babel-plugin-apply-mdx-type-props/readme.md
Original file line number Diff line number Diff line change
@@ -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 = () => (
<div>
<Button />
</div>
)

export default () => (
<>
<h1>Hello!</h1>
<TomatoBox />
</>
)
```

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 = () => (
<div>
<Button mdxType="Button" />
</div>
)

export default () => (
<>
<h1>Hello!</h1>
<TomatoBox mdxType="TomatoBox" />
</>
)
```

```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.
56 changes: 0 additions & 56 deletions packages/babel-plugin-apply-mdx-type-props/test/index.test.js

This file was deleted.

71 changes: 0 additions & 71 deletions packages/babel-plugin-extract-export-names/index.js

This file was deleted.

34 changes: 2 additions & 32 deletions packages/babel-plugin-extract-export-names/package.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,4 @@
{
"name": "babel-plugin-extract-export-names",
"version": "2.0.0-next.8",
"description": "Extract export names",
"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 <johnotander@gmail.com> (http://johnotander.com)",
"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-extract-export-names"
}
Loading

0 comments on commit 521f092

Please sign in to comment.