Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement
@babel/plugin-transform-react-pure-annotations
(#11428)
The new plugin is also enabled in `@babel/preset-react`
- Loading branch information
1 parent
93a5005
commit 6ba1f0d
Showing
39 changed files
with
221 additions
and
1 deletion.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/babel-plugin-transform-react-pure-annotations/.npmignore
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,3 @@ | ||
src | ||
test | ||
*.log |
25 changes: 25 additions & 0 deletions
25
packages/babel-plugin-transform-react-pure-annotations/package.json
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,25 @@ | ||
{ | ||
"name": "@babel/plugin-transform-react-pure-annotations", | ||
"version": "7.9.4", | ||
"description": "Mark top-level React method calls as pure for tree shaking", | ||
"repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-pure", | ||
"license": "MIT", | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"main": "lib/index.js", | ||
"keywords": [ | ||
"babel-plugin" | ||
], | ||
"dependencies": { | ||
"@babel/helper-annotate-as-pure": "^7.8.3", | ||
"@babel/helper-plugin-utils": "^7.8.3" | ||
}, | ||
"peerDependencies": { | ||
"@babel/core": "^7.0.0-0" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.9.0", | ||
"@babel/helper-plugin-test-runner": "^7.8.3" | ||
} | ||
} |
79 changes: 79 additions & 0 deletions
79
packages/babel-plugin-transform-react-pure-annotations/src/index.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,79 @@ | ||
import { declare } from "@babel/helper-plugin-utils"; | ||
import annotateAsPure from "@babel/helper-annotate-as-pure"; | ||
import { types as t } from "@babel/core"; | ||
|
||
// Mapping of React top-level methods that are pure. | ||
// This plugin adds a /*#__PURE__#/ annotation to calls to these methods, | ||
// so that terser and other minifiers can safely remove them during dead | ||
// code elimination. | ||
// See https://reactjs.org/docs/react-api.html | ||
const PURE_CALLS = new Map([ | ||
[ | ||
"react", | ||
[ | ||
"cloneElement", | ||
"createElement", | ||
"createFactory", | ||
"createRef", | ||
"forwardRef", | ||
"isValidElement", | ||
"memo", | ||
"lazy", | ||
], | ||
], | ||
["react-dom", ["createPortal"]], | ||
]); | ||
|
||
export default declare(api => { | ||
api.assertVersion(7); | ||
|
||
return { | ||
name: "transform-react-pure-annotations", | ||
visitor: { | ||
CallExpression(path) { | ||
if (isReactCall(path)) { | ||
annotateAsPure(path); | ||
} | ||
}, | ||
}, | ||
}; | ||
}); | ||
|
||
function isReactCall(path) { | ||
// If the callee is not a member expression, then check if it matches | ||
// a named import, e.g. `import {forwardRef} from 'react'`. | ||
if (!t.isMemberExpression(path.node.callee)) { | ||
const callee = path.get("callee"); | ||
for (const [module, methods] of PURE_CALLS) { | ||
for (const method of methods) { | ||
if (callee.referencesImport(module, method)) { | ||
return true; | ||
} | ||
} | ||
} | ||
|
||
return false; | ||
} | ||
|
||
// Otherwise, check if the member expression's object matches | ||
// a default import (`import React from 'react'`) or namespace | ||
// import (`import * as React from 'react'), and check if the | ||
// property matches one of the pure methods. | ||
for (const [module, methods] of PURE_CALLS) { | ||
const object = path.get("callee.object"); | ||
if ( | ||
object.referencesImport(module, "default") || | ||
object.referencesImport(module, "*") | ||
) { | ||
for (const method of methods) { | ||
if (t.isIdentifier(path.node.callee.property, { name: method })) { | ||
return true; | ||
} | ||
} | ||
|
||
return false; | ||
} | ||
} | ||
|
||
return false; | ||
} |
4 changes: 4 additions & 0 deletions
4
...bel-plugin-transform-react-pure-annotations/test/fixtures/react-dom/createPortal/input.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,4 @@ | ||
import * as React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
const Portal = ReactDOM.createPortal(React.createElement('div'), document.getElementById('test')); |
4 changes: 4 additions & 0 deletions
4
...plugin-transform-react-pure-annotations/test/fixtures/react-dom/createPortal/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
3 changes: 3 additions & 0 deletions
3
...l-plugin-transform-react-pure-annotations/test/fixtures/react-dom/createPortal/output.mjs
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,3 @@ | ||
import * as React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
const Portal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement('div'), document.getElementById('test')); |
3 changes: 3 additions & 0 deletions
3
...s/babel-plugin-transform-react-pure-annotations/test/fixtures/react/cloneElement/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
React.cloneElement(React.createElement('div')); |
4 changes: 4 additions & 0 deletions
4
...bel-plugin-transform-react-pure-annotations/test/fixtures/react/cloneElement/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
4 changes: 4 additions & 0 deletions
4
...babel-plugin-transform-react-pure-annotations/test/fixtures/react/cloneElement/output.mjs
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,4 @@ | ||
import React from 'react'; | ||
|
||
/*#__PURE__*/ | ||
React.cloneElement( /*#__PURE__*/React.createElement('div')); |
3 changes: 3 additions & 0 deletions
3
.../babel-plugin-transform-react-pure-annotations/test/fixtures/react/createElement/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
React.createElement('div'); |
4 changes: 4 additions & 0 deletions
4
...el-plugin-transform-react-pure-annotations/test/fixtures/react/createElement/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
4 changes: 4 additions & 0 deletions
4
...abel-plugin-transform-react-pure-annotations/test/fixtures/react/createElement/output.mjs
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,4 @@ | ||
import React from 'react'; | ||
|
||
/*#__PURE__*/ | ||
React.createElement('div'); |
3 changes: 3 additions & 0 deletions
3
.../babel-plugin-transform-react-pure-annotations/test/fixtures/react/createFactory/input.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,3 @@ | ||
import {createFactory} from 'react'; | ||
|
||
const div = createFactory('div'); |
4 changes: 4 additions & 0 deletions
4
...el-plugin-transform-react-pure-annotations/test/fixtures/react/createFactory/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
2 changes: 2 additions & 0 deletions
2
...abel-plugin-transform-react-pure-annotations/test/fixtures/react/createFactory/output.mjs
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,2 @@ | ||
import { createFactory } from 'react'; | ||
const div = /*#__PURE__*/createFactory('div'); |
3 changes: 3 additions & 0 deletions
3
...ages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/createRef/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
React.createRef(); |
4 changes: 4 additions & 0 deletions
4
.../babel-plugin-transform-react-pure-annotations/test/fixtures/react/createRef/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
4 changes: 4 additions & 0 deletions
4
...es/babel-plugin-transform-react-pure-annotations/test/fixtures/react/createRef/output.mjs
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,4 @@ | ||
import React from 'react'; | ||
|
||
/*#__PURE__*/ | ||
React.createRef(); |
3 changes: 3 additions & 0 deletions
3
...ges/babel-plugin-transform-react-pure-annotations/test/fixtures/react/forwardRef/input.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,3 @@ | ||
import {forwardRef} from 'react'; | ||
|
||
const Comp = forwardRef((props, ref) => null); |
4 changes: 4 additions & 0 deletions
4
...babel-plugin-transform-react-pure-annotations/test/fixtures/react/forwardRef/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
2 changes: 2 additions & 0 deletions
2
...s/babel-plugin-transform-react-pure-annotations/test/fixtures/react/forwardRef/output.mjs
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,2 @@ | ||
import { forwardRef } from 'react'; | ||
const Comp = /*#__PURE__*/forwardRef((props, ref) => null); |
3 changes: 3 additions & 0 deletions
3
...babel-plugin-transform-react-pure-annotations/test/fixtures/react/isValidElement/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
const isElement = React.isValidElement(React.createElement('div')); |
4 changes: 4 additions & 0 deletions
4
...l-plugin-transform-react-pure-annotations/test/fixtures/react/isValidElement/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
2 changes: 2 additions & 0 deletions
2
...bel-plugin-transform-react-pure-annotations/test/fixtures/react/isValidElement/output.mjs
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,2 @@ | ||
import React from 'react'; | ||
const isElement = /*#__PURE__*/React.isValidElement( /*#__PURE__*/React.createElement('div')); |
3 changes: 3 additions & 0 deletions
3
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/lazy/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
const SomeComponent = React.lazy(() => import('./SomeComponent')); |
4 changes: 4 additions & 0 deletions
4
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/lazy/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
2 changes: 2 additions & 0 deletions
2
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/lazy/output.mjs
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,2 @@ | ||
import React from 'react'; | ||
const SomeComponent = /*#__PURE__*/React.lazy(() => import('./SomeComponent')); |
3 changes: 3 additions & 0 deletions
3
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/memo/input.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,3 @@ | ||
import React from 'react'; | ||
|
||
const Comp = React.memo((props) => null); |
4 changes: 4 additions & 0 deletions
4
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/memo/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"plugins": ["transform-react-pure-annotations"] | ||
} |
2 changes: 2 additions & 0 deletions
2
packages/babel-plugin-transform-react-pure-annotations/test/fixtures/react/memo/output.mjs
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,2 @@ | ||
import React from 'react'; | ||
const Comp = /*#__PURE__*/React.memo(props => null); |
3 changes: 3 additions & 0 deletions
3
packages/babel-plugin-transform-react-pure-annotations/test/index.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,3 @@ | ||
import runner from "@babel/helper-plugin-test-runner"; | ||
|
||
runner(__dirname); |
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
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
3 changes: 3 additions & 0 deletions
3
packages/babel-preset-react/test/fixtures/preset-options/pure-false/input.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,3 @@ | ||
import {forwardRef} from 'react'; | ||
|
||
const Comp = forwardRef((props, ref) => null); |
4 changes: 4 additions & 0 deletions
4
packages/babel-preset-react/test/fixtures/preset-options/pure-false/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"presets": [["react", {"pure": false}]] | ||
} |
2 changes: 2 additions & 0 deletions
2
packages/babel-preset-react/test/fixtures/preset-options/pure-false/output.mjs
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,2 @@ | ||
import { forwardRef } from 'react'; | ||
const Comp = forwardRef((props, ref) => null); |
3 changes: 3 additions & 0 deletions
3
packages/babel-preset-react/test/fixtures/preset-options/pure/input.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,3 @@ | ||
import {forwardRef} from 'react'; | ||
|
||
const Comp = forwardRef((props, ref) => null); |
4 changes: 4 additions & 0 deletions
4
packages/babel-preset-react/test/fixtures/preset-options/pure/options.json
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,4 @@ | ||
{ | ||
"sourceType": "module", | ||
"presets": ["react"] | ||
} |
2 changes: 2 additions & 0 deletions
2
packages/babel-preset-react/test/fixtures/preset-options/pure/output.mjs
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,2 @@ | ||
import { forwardRef } from 'react'; | ||
const Comp = /*#__PURE__*/forwardRef((props, ref) => null); |