-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds Babel plugin babel-plugin-optimize-react #6219
Open
trueadm
wants to merge
4
commits into
facebook:main
Choose a base branch
from
trueadm:add-babel-plugin-optimize-react
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+761
−0
Open
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2013-present, Facebook, Inc. | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# babel-plugin-optimize-react | ||
|
||
This Babel 7 plugin optimizes React hooks by transforming common patterns into more effecient output when using with tools such as [Create React App](https://github.com/facebook/create-react-app). For example, with this plugin the following output is optimized as shown: | ||
|
||
```js | ||
// Original | ||
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1_["useState"])(Math.random()), | ||
_State2 = Object(_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 1), | ||
value = _useState2[0]; | ||
|
||
// With this plugin | ||
var useState = react__WEBPACK_IMPORTED_MODULE_1_.useState; | ||
var __ref__0 = useState(Math.random()); | ||
var value = __ref__0[0]; | ||
``` | ||
|
||
## Named imports to hooks get transformed | ||
|
||
```js | ||
// Original | ||
import React, {useState} from 'react'; | ||
|
||
// With this plugin | ||
import React from 'react'; | ||
const {useState} = React; | ||
``` | ||
|
||
## Array destructuring transform for React's built-in hooks | ||
|
||
```js | ||
// Original | ||
const [counter, setCounter] = useState(0); | ||
|
||
// With this plugin | ||
const __ref__0 = useState(0); | ||
const counter = __ref__0[0]; | ||
const setCounter = __ref__0[1]; | ||
``` | ||
|
||
## React.createElement becomes a hoisted constant | ||
|
||
```js | ||
// Original | ||
import React from 'react'; | ||
|
||
function MyComponent() { | ||
return React.createElement('div', null, 'Hello world'); | ||
} | ||
|
||
// With this plugin | ||
import React from 'react'; | ||
const __reactCreateElement__ = React.createElement; | ||
|
||
function MyComponent() { | ||
return __reactCreateElement__('div', null, 'Hello world'); | ||
} | ||
``` | ||
|
30 changes: 30 additions & 0 deletions
30
packages/babel-plugin-optimize-react/__tests__/__snapshots__/createElement-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`React createElement transforms should transform React.createElement calls #2 1`] = ` | ||
"const React = require(\\"react\\"); | ||
|
||
const __reactCreateElement__ = React.createElement; | ||
export function MyComponent() { | ||
return __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\")); | ||
}" | ||
`; | ||
|
||
exports[`React createElement transforms should transform React.createElement calls #3 1`] = ` | ||
"const React = require(\\"react\\"); | ||
|
||
const __reactCreateElement__ = React.createElement; | ||
|
||
const node = __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\")); | ||
|
||
export function MyComponent() { | ||
return node; | ||
}" | ||
`; | ||
|
||
exports[`React createElement transforms should transform React.createElement calls 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
export function MyComponent() { | ||
return __reactCreateElement__(\\"div\\"); | ||
}" | ||
`; |
131 changes: 131 additions & 0 deletions
131
packages/babel-plugin-optimize-react/__tests__/__snapshots__/hooks-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`React hook transforms should support destructuring hooks from imports #2 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
const { | ||
useState | ||
} = React; | ||
export function MyComponent() { | ||
const _ref_0 = useState(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support destructuring hooks from imports #3 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
const useState = React.useState; | ||
export function MyComponent() { | ||
const _ref_0 = useState(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support destructuring hooks from imports #4 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
const foo = React.useState; | ||
export function MyComponent() { | ||
const _ref_0 = foo(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support destructuring hooks from imports #5 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
const { | ||
useState: foo | ||
} = React; | ||
export function MyComponent() { | ||
const _ref_0 = foo(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support destructuring hooks from imports 1`] = ` | ||
"import React from \\"react\\"; | ||
const __reactCreateElement__ = React.createElement; | ||
const { | ||
useState | ||
} = React; | ||
export function MyComponent() { | ||
const _ref_0 = useState(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support destructuring hooks from require calls 1`] = ` | ||
"const React = require(\\"react\\"); | ||
|
||
const __reactCreateElement__ = React.createElement; | ||
const { | ||
useState | ||
} = React; | ||
export function MyComponent() { | ||
const _ref_0 = useState(0); | ||
|
||
const setCounter = _ref_0[1]; | ||
const counter = _ref_0[0]; | ||
return __reactCreateElement__(\\"div\\", null, counter); | ||
}" | ||
`; | ||
|
||
exports[`React hook transforms should support hook CJS require with no default 1`] = ` | ||
"const { | ||
useState | ||
} = require(\\"react\\");" | ||
`; | ||
|
||
exports[`React hook transforms should support hook imports with aliasing 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState: foo | ||
} = React;" | ||
`; | ||
|
||
exports[`React hook transforms should support hook imports with no default 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState | ||
} = React;" | ||
`; | ||
|
||
exports[`React hook transforms should support mixed hook imports 1`] = ` | ||
"import React from \\"react\\"; | ||
import { memo } from \\"react\\"; | ||
const { | ||
useState | ||
} = React;" | ||
`; | ||
|
||
exports[`React hook transforms should support mixed hook imports with no default 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState | ||
} = React; | ||
import { memo } from \\"react\\";" | ||
`; | ||
|
||
exports[`React hook transforms should support transform hook imports 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState | ||
} = React;" | ||
`; |
50 changes: 50 additions & 0 deletions
50
packages/babel-plugin-optimize-react/__tests__/createElement-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
'use strict'; | ||
|
||
const plugin = require('../index.js'); | ||
const babel = require('@babel/core'); | ||
|
||
function transform(code) { | ||
return babel.transform(code, { | ||
plugins: [plugin], | ||
}).code; | ||
} | ||
|
||
describe('React createElement transforms', () => { | ||
it('should transform React.createElement calls', () => { | ||
const test = ` | ||
import React from "react"; | ||
|
||
export function MyComponent() { | ||
return React.createElement("div"); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should transform React.createElement calls #2', () => { | ||
const test = ` | ||
const React = require("react"); | ||
|
||
export function MyComponent() { | ||
return React.createElement("div", null, React.createElement("span", null, "Hello world!")); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should transform React.createElement calls #3', () => { | ||
const test = ` | ||
const React = require("react"); | ||
|
||
const node = React.createElement("div", null, React.createElement("span", null, "Hello world!")); | ||
|
||
export function MyComponent() { | ||
return node; | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be configurable or ideally communicate with targets/browserslists/
@babel/preset-env
. Array spread syntax is supported by all evergreen browsers and that for quite some time now. The optimization is only interesting if you need to support IE11. See example preset-env without IE11There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We opted to do this because the runtime performance of spread syntax was considerably slower in all browsers when I tests this compared to the transformed version. This might have changed since, as this plugin was created 7 months ago.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense. Not sure what the current status of destructuring optimizations in v8 but they had plans to improve it a few months ago. Do you have some numbers about the performance gain?