Add aliases option to check aliases of unsafe methods

Avoid breaking changes by adding the non-prefixed methods behind the option
jsx-eslint · Dec 10, 2018 · 8d2c7a9 · 8d2c7a9
1 parent 65116d6
commit 8d2c7a9
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 42 deletions.
diff --git 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": [<enabled>, { "checkAliases": <boolean> }]
+...
+```
+
+### `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() {}
 });
-```
+```
diff --git 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
@@ -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: [
         {