-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1831 from sergei-startsev/no-unsafe-rule
Added `no-unsafe` rule
- Loading branch information
Showing
5 changed files
with
304 additions
and
0 deletions.
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
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,47 @@ | ||
# Prevent usage of `UNSAFE_` methods (react/no-unsafe) | ||
|
||
Certain legacy lifecycle methods are [unsafe for use in async React applications][async_rendering] and cause warnings in [_strict mode_][strict_mode]. These also happen to be the lifecycles that cause the most [confusion within the React community][component_lifecycle_changes]. | ||
|
||
[async_rendering]: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html | ||
[strict_mode]: https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles | ||
[component_lifecycle_changes]: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes | ||
|
||
The rule checks the following methods: `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, `UNSAFE_componentWillUpdate`. | ||
|
||
## Rule Details | ||
|
||
The following patterns are considered warnings: | ||
|
||
```jsx | ||
class Foo extends React.Component { | ||
UNSAFE_componentWillMount() {} | ||
UNSAFE_componentWillReceiveProps() {} | ||
UNSAFE_componentWillUpdate() {} | ||
} | ||
``` | ||
|
||
```jsx | ||
const Foo = createReactClass({ | ||
UNSAFE_componentWillMount: function() {}, | ||
UNSAFE_componentWillReceiveProps: function() {}, | ||
UNSAFE_componentWillUpdate: function() {} | ||
}); | ||
``` | ||
|
||
The following patterns are **not** considered warnings: | ||
|
||
```jsx | ||
class Foo extends Bar { | ||
UNSAFE_componentWillMount() {} | ||
UNSAFE_componentWillReceiveProps() {} | ||
UNSAFE_componentWillUpdate() {} | ||
} | ||
``` | ||
|
||
```jsx | ||
const Foo = bar({ | ||
UNSAFE_componentWillMount: function() {}, | ||
UNSAFE_componentWillReceiveProps: function() {}, | ||
UNSAFE_componentWillUpdate: function() {} | ||
}); | ||
``` |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
/** | ||
* @fileoverview Prevent usage of UNSAFE_ methods | ||
* @author Sergei Startsev | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const Components = require('../util/Components'); | ||
const astUtil = require('../util/ast'); | ||
const docsUrl = require('../util/docsUrl'); | ||
const versionUtil = require('../util/version'); | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Prevent usage of UNSAFE_ methods', | ||
category: 'Best Practices', | ||
recommended: false, | ||
url: docsUrl('no-unsafe') | ||
}, | ||
schema: [] | ||
}, | ||
|
||
create: Components.detect((context, components, utils) => { | ||
const isApplicable = versionUtil.testReactVersion(context, '16.3.0'); | ||
if (!isApplicable) { | ||
return {}; | ||
} | ||
|
||
/** | ||
* Returns a list of unsafe methods | ||
* @returns {Array} A list of unsafe methods | ||
*/ | ||
function getUnsafeMethods() { | ||
return [ | ||
'UNSAFE_componentWillMount', | ||
'UNSAFE_componentWillReceiveProps', | ||
'UNSAFE_componentWillUpdate' | ||
]; | ||
} | ||
|
||
/** | ||
* Checks if a passed method is unsafe | ||
* @param {string} method Life cycle method | ||
* @returns {boolean} Returns true for unsafe methods, otherwise returns false | ||
*/ | ||
function isUnsafe(method) { | ||
const unsafeMethods = getUnsafeMethods(); | ||
return unsafeMethods.indexOf(method) !== -1; | ||
} | ||
|
||
/** | ||
* Reports the error for an unsafe method | ||
* @param {ASTNode} node The AST node being checked | ||
* @param {string} method Life cycle method | ||
*/ | ||
function checkUnsafe(node, method) { | ||
if (!isUnsafe(method)) { | ||
return; | ||
} | ||
|
||
context.report({ | ||
node: node, | ||
message: `${method} is unsafe for use in async rendering, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html` | ||
}); | ||
} | ||
|
||
/** | ||
* Returns life cycle methods if available | ||
* @param {ASTNode} node The AST node being checked. | ||
* @returns {Array} The array of methods. | ||
*/ | ||
function getLifeCycleMethods(node) { | ||
const properties = astUtil.getComponentProperties(node); | ||
return properties.map(property => astUtil.getPropertyName(property)); | ||
} | ||
|
||
/** | ||
* Checks life cycle methods | ||
* @param {ASTNode} node The AST node being checked. | ||
*/ | ||
function checkLifeCycleMethods(node) { | ||
if (utils.isES5Component(node) || utils.isES6Component(node)) { | ||
const methods = getLifeCycleMethods(node); | ||
methods.forEach(method => checkUnsafe(node, method)); | ||
} | ||
} | ||
|
||
return { | ||
ClassDeclaration: checkLifeCycleMethods, | ||
ClassExpression: checkLifeCycleMethods, | ||
ObjectExpression: checkLifeCycleMethods | ||
}; | ||
}) | ||
}; |
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,155 @@ | ||
/** | ||
* @fileoverview Prevent usage of UNSAFE_ methods | ||
* @author Sergei Startsev | ||
*/ | ||
'use strict'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const rule = require('../../../lib/rules/no-unsafe'); | ||
const RuleTester = require('eslint').RuleTester; | ||
|
||
const parserOptions = { | ||
ecmaVersion: 2018, | ||
sourceType: 'module', | ||
ecmaFeatures: { | ||
jsx: true | ||
} | ||
}; | ||
|
||
function errorMessage(method) { | ||
return `${method} is unsafe for use in async rendering, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html`; | ||
} | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ruleTester = new RuleTester({parserOptions}); | ||
ruleTester.run('no-unsafe', rule, { | ||
valid: [ | ||
{ | ||
code: ` | ||
class Foo extends React.Component { | ||
componentDidUpdate() {} | ||
render() {} | ||
} | ||
`, | ||
settings: {react: {version: '16.4.0'}} | ||
}, | ||
{ | ||
code: ` | ||
const Foo = createReactClass({ | ||
componentDidUpdate: function() {}, | ||
render: function() {} | ||
}); | ||
`, | ||
settings: {react: {version: '16.4.0'}} | ||
}, | ||
{ | ||
code: ` | ||
class Foo extends Bar { | ||
UNSAFE_componentWillMount() {} | ||
UNSAFE_componentWillReceiveProps() {} | ||
UNSAFE_componentWillUpdate() {} | ||
} | ||
`, | ||
settings: {react: {version: '16.4.0'}} | ||
}, | ||
{ | ||
code: ` | ||
const Foo = bar({ | ||
UNSAFE_componentWillMount: function() {}, | ||
UNSAFE_componentWillReceiveProps: function() {}, | ||
UNSAFE_componentWillUpdate: function() {}, | ||
}); | ||
`, | ||
settings: {react: {version: '16.4.0'}} | ||
}, | ||
{ | ||
code: ` | ||
class Foo extends React.Component { | ||
UNSAFE_componentWillMount() {} | ||
UNSAFE_componentWillReceiveProps() {} | ||
UNSAFE_componentWillUpdate() {} | ||
} | ||
`, | ||
settings: {react: {version: '16.2.0'}} | ||
}, | ||
{ | ||
code: ` | ||
const Foo = createReactClass({ | ||
UNSAFE_componentWillMount: function() {}, | ||
UNSAFE_componentWillReceiveProps: function() {}, | ||
UNSAFE_componentWillUpdate: function() {}, | ||
}); | ||
`, | ||
settings: {react: {version: '16.2.0'}} | ||
} | ||
], | ||
|
||
invalid: [ | ||
{ | ||
code: ` | ||
class Foo extends React.Component { | ||
UNSAFE_componentWillMount() {} | ||
UNSAFE_componentWillReceiveProps() {} | ||
UNSAFE_componentWillUpdate() {} | ||
} | ||
`, | ||
settings: {react: {version: '16.3.0'}}, | ||
errors: [ | ||
{ | ||
message: errorMessage('UNSAFE_componentWillMount'), | ||
line: 2, | ||
column: 7, | ||
type: 'ClassDeclaration' | ||
}, | ||
{ | ||
message: errorMessage('UNSAFE_componentWillReceiveProps'), | ||
line: 2, | ||
column: 7, | ||
type: 'ClassDeclaration' | ||
}, | ||
{ | ||
message: errorMessage('UNSAFE_componentWillUpdate'), | ||
line: 2, | ||
column: 7, | ||
type: 'ClassDeclaration' | ||
} | ||
] | ||
}, | ||
{ | ||
code: ` | ||
const Foo = createReactClass({ | ||
UNSAFE_componentWillMount: function() {}, | ||
UNSAFE_componentWillReceiveProps: function() {}, | ||
UNSAFE_componentWillUpdate: function() {}, | ||
}); | ||
`, | ||
settings: {react: {version: '16.3.0'}}, | ||
errors: [ | ||
{ | ||
message: errorMessage('UNSAFE_componentWillMount'), | ||
line: 2, | ||
column: 38, | ||
type: 'ObjectExpression' | ||
}, | ||
{ | ||
message: errorMessage('UNSAFE_componentWillReceiveProps'), | ||
line: 2, | ||
column: 38, | ||
type: 'ObjectExpression' | ||
}, | ||
{ | ||
message: errorMessage('UNSAFE_componentWillUpdate'), | ||
line: 2, | ||
column: 38, | ||
type: 'ObjectExpression' | ||
} | ||
] | ||
} | ||
] | ||
}); |