-
-
Notifications
You must be signed in to change notification settings - Fork 27k
Adds Babel plugin babel-plugin-optimize-react #6219
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
base: main
Are you sure you want to change the base?
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# babel-plugin-optimize-react-hooks | ||
|
||
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be configurable or ideally communicate with targets/browserslists/ There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 commentThe 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? |
||
|
||
```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'); | ||
} | ||
``` | ||
|
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\\"); | ||
}" | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks 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[`Babel plugin optimize React hooks should support transform hook imports 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState | ||
} = React;" | ||
`; | ||
|
||
exports[`Babel plugin optimize React hooks should support transform hook imports with aliasing 1`] = ` | ||
"import React from \\"react\\"; | ||
const { | ||
useState: foo | ||
} = React;" | ||
`; |
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(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
'use strict'; | ||
|
||
const plugin = require('../index.js'); | ||
const babel = require('@babel/core'); | ||
|
||
function transform(code) { | ||
return babel.transform(code, { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is gonna load babelrc / babel.config.js, not sure if you want that here also - would be good to have tests both with & without There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I see you have no babelrc files in this package, but probably better disable config loading with babel.transform(code, {
babelrc: false,
configFile: false,
plugins: [plugin],
}).code just to be more future proof There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good call on testing with other plugins. Destructuring optimization seems to be ignored when used alongside I'll work on a PR to this one. At least with a test, hopefully with a fix. |
||
plugins: [plugin], | ||
}).code; | ||
} | ||
|
||
describe('React hook transforms', () => { | ||
it('should support transform hook imports', () => { | ||
const test = ` | ||
import React, {useState} from "react"; | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support transform hook imports with aliasing', () => { | ||
const test = ` | ||
import React, {useState as foo} from "react"; | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from imports', () => { | ||
const test = ` | ||
import React, {useState} from "react"; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = useState(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from imports #2', () => { | ||
const test = ` | ||
import React from "react"; | ||
const {useState} = React; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = useState(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from imports #3', () => { | ||
const test = ` | ||
import React from "react"; | ||
const useState = React.useState; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = useState(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from imports #4', () => { | ||
const test = ` | ||
import React from "react"; | ||
const foo = React.useState; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = foo(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from imports #5', () => { | ||
const test = ` | ||
import React, {useState as foo} from "react"; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = foo(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
|
||
it('should support destructuring hooks from require calls', () => { | ||
const test = ` | ||
const React = require("react"); | ||
const {useState} = React; | ||
|
||
export function MyComponent() { | ||
const [counter, setCounter] = useState(0); | ||
|
||
return React.createElement("div", null, counter); | ||
} | ||
`; | ||
const output = transform(test); | ||
expect(output).toMatchSnapshot(); | ||
}); | ||
}); |
Uh oh!
There was an error while loading. Please reload this page.