diff --git a/docs/rules/no-unsafe.md b/docs/rules/no-unsafe.md index 9b5ca65c73..ffdb3400d4 100644 --- a/docs/rules/no-unsafe.md +++ b/docs/rules/no-unsafe.md @@ -16,12 +16,6 @@ The rule checks the following methods: The following patterns are considered warnings: ```jsx -class Foo extends React.Component { - componentWillMount() {} - componentWillReceiveProps() {} - componentWillUpdate() {} -} -// or class Foo extends React.Component { UNSAFE_componentWillMount() {} UNSAFE_componentWillReceiveProps() {} @@ -30,12 +24,6 @@ class Foo extends React.Component { ``` ```jsx -const Foo = createReactClass({ - componentWillMount: function() {}, - componentWillReceiveProps: function() {}, - componentWillUpdate: function() {} -}); -// or const Foo = createReactClass({ UNSAFE_componentWillMount: function() {}, UNSAFE_componentWillReceiveProps: function() {}, @@ -46,12 +34,6 @@ const Foo = createReactClass({ The following patterns are **not** considered warnings: ```jsx -class Foo extends Bar { - componentWillMount() {} - componentWillReceiveProps() {} - componentWillUpdate() {} -} -// or class Foo extends Bar { UNSAFE_componentWillMount() {} UNSAFE_componentWillReceiveProps() {} @@ -61,14 +43,55 @@ class Foo extends Bar { ```jsx const Foo = bar({ + UNSAFE_componentWillMount: function() {}, + UNSAFE_componentWillReceiveProps: function() {}, + UNSAFE_componentWillUpdate: function() {} +}); +``` + +## Rule Options +```json +... +"react/no-unsafe": [, { "checkAliases": }] +... +``` + +### `checkAliases` (default: `false`) + +When `true` the rule will also check aliases of unsafe methods: `componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate`. + +The following patterns are considered warnings: + +```jsx +class Foo extends React.Component { + componentWillMount() {} + componentWillReceiveProps() {} + componentWillUpdate() {} +} +``` + +```jsx +const Foo = createReactClass({ componentWillMount: function() {}, componentWillReceiveProps: function() {}, componentWillUpdate: function() {} }); -// or +``` + +The following patterns are **not** considered warnings: + +```jsx +class Foo extends Bar { + componentWillMount() {} + componentWillReceiveProps() {} + componentWillUpdate() {} +} +``` + +```jsx const Foo = bar({ - UNSAFE_componentWillMount: function() {}, - UNSAFE_componentWillReceiveProps: function() {}, - UNSAFE_componentWillUpdate: function() {} + componentWillMount: function() {}, + componentWillReceiveProps: function() {}, + componentWillUpdate: function() {} }); -``` +``` \ No newline at end of file diff --git a/lib/rules/no-unsafe.js b/lib/rules/no-unsafe.js index c79244d832..704e004a65 100644 --- a/lib/rules/no-unsafe.js +++ b/lib/rules/no-unsafe.js @@ -22,31 +22,51 @@ module.exports = { recommended: false, url: docsUrl('no-unsafe') }, - schema: [] + schema: [ + { + type: 'object', + properties: { + checkAliases: { + default: false, + type: 'boolean' + } + }, + additionalProperties: false + } + ] }, create: Components.detect((context, components, utils) => { + const config = context.options[0] || {}; + const checkAliases = config.checkAliases || false; + const isApplicable = versionUtil.testReactVersion(context, '16.3.0'); if (!isApplicable) { return {}; } - const unsafe = {}; - unsafe.componentWillMount = unsafe.UNSAFE_componentWillMount = { - newMethod: 'componentDidMount', - details: - 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' - }; - unsafe.componentWillReceiveProps = unsafe.UNSAFE_componentWillReceiveProps = { - newMethod: 'getDerivedStateFromProps', - details: - 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' - }; - unsafe.componentWillUpdate = unsafe.UNSAFE_componentWillUpdate = { - newMethod: 'componentDidUpdate', - details: - 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' + const unsafe = { + UNSAFE_componentWillMount: { + newMethod: 'componentDidMount', + details: + 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' + }, + UNSAFE_componentWillReceiveProps: { + newMethod: 'getDerivedStateFromProps', + details: + 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' + }, + UNSAFE_componentWillUpdate: { + newMethod: 'componentDidUpdate', + details: + 'See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.' + } }; + if (checkAliases) { + unsafe.componentWillMount = unsafe.UNSAFE_componentWillMount; + unsafe.componentWillReceiveProps = unsafe.UNSAFE_componentWillReceiveProps; + unsafe.componentWillUpdate = unsafe.UNSAFE_componentWillUpdate; + } /** * Returns a list of unsafe methods diff --git a/tests/lib/rules/no-unsafe.js b/tests/lib/rules/no-unsafe.js index cd2e088eb1..b3184ba0e4 100644 --- a/tests/lib/rules/no-unsafe.js +++ b/tests/lib/rules/no-unsafe.js @@ -97,7 +97,7 @@ ruleTester.run('no-unsafe', rule, { componentWillUpdate() {} } `, - settings: {react: {version: '16.2.0'}} + settings: {react: {version: '16.4.0'}} }, { code: ` @@ -118,7 +118,7 @@ ruleTester.run('no-unsafe', rule, { componentWillUpdate: function() {}, }); `, - settings: {react: {version: '16.2.0'}} + settings: {react: {version: '16.4.0'}} }, { code: ` @@ -142,7 +142,8 @@ ruleTester.run('no-unsafe', rule, { componentWillUpdate() {} } `, - settings: {react: {version: '16.3.0'}}, + options: [{checkAliases: true}], + settings: {react: {version: '16.4.0'}}, errors: [ { message: errorMessage( @@ -227,6 +228,7 @@ ruleTester.run('no-unsafe', rule, { componentWillUpdate: function() {}, }); `, + options: [{checkAliases: true}], settings: {react: {version: '16.3.0'}}, errors: [ {