Allow stateless components to return null in React 15

jsx-eslint · Apr 10, 2016 · c2dfef5 · c2dfef5
1 parent ba987db
commit c2dfef5
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 7 deletions.
diff --git a/lib/rules/prefer-stateless-function.js b/lib/rules/prefer-stateless-function.js
@@ -7,6 +7,7 @@
 'use strict';
 
 var Components = require('../util/Components');
+var versionUtil = require('../util/version');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -209,7 +210,15 @@ module.exports = Components.detect(function(context, components, utils) {
         }
         scope = scope.upper;
       }
-      if (!blockNode || !blockNode.key || blockNode.key.name !== 'render' || utils.isReturningJSX(node, true)) {
+      var isRender = blockNode && blockNode.key && blockNode.key.name === 'render';
+      var allowNull = versionUtil.test(context, '15.0.0'); // Stateless components can return null since React 15
+      var isReturningJSX = utils.isReturningJSX(node, !allowNull);
+      var isReturningNull = node.argument && (node.argument.value === null || node.argument.value === false);
+      if (
+        !isRender ||
+        (allowNull && (isReturningJSX || isReturningNull)) ||
+        (!allowNull && isReturningJSX)
+      ) {
         return;
       }
       markReturnAsInvalid(node);

diff --git a/tests/lib/rules/prefer-stateless-function.js b/tests/lib/rules/prefer-stateless-function.js
@@ -154,7 +154,7 @@ ruleTester.run('prefer-stateless-function', rule, {
       ].join('\n'),
       parser: 'babel-eslint'
     }, {
-      // Can return null (ES6)
+      // Can return null (ES6, React 0.14.0)
       code: [
         'class Foo extends React.Component {',
         '  render() {',
@@ -165,9 +165,14 @@ ruleTester.run('prefer-stateless-function', rule, {
         '  }',
         '}'
       ].join('\n'),
-      parser: 'babel-eslint'
+      parser: 'babel-eslint',
+      settings: {
+        react: {
+          version: '0.14.0'
+        }
+      }
     }, {
-      // Can return null (ES5)
+      // Can return null (ES5, React 0.14.0)
       code: [
         'var Foo = React.createClass({',
         '  render: function() {',
@@ -178,17 +183,27 @@ ruleTester.run('prefer-stateless-function', rule, {
         '  }',
         '});'
       ].join('\n'),
-      parserOptions: parserOptions
+      parserOptions: parserOptions,
+      settings: {
+        react: {
+          version: '0.14.0'
+        }
+      }
     }, {
-      // Can return null (shorthand if in return)
+      // Can return null (shorthand if in return, React 0.14.0)
       code: [
         'class Foo extends React.Component {',
         '  render() {',
         '    return true ? <div /> : null;',
         '  }',
         '}'
       ].join('\n'),
-      parser: 'babel-eslint'
+      parser: 'babel-eslint',
+      settings: {
+        react: {
+          version: '0.14.0'
+        }
+      }
     }, {
       code: [
         'export default (Component) => (',
@@ -341,6 +356,51 @@ ruleTester.run('prefer-stateless-function', rule, {
       errors: [{
         message: 'Component should be written as a pure function'
       }]
+    }, {
+      // Can return null (ES6)
+      code: [
+        'class Foo extends React.Component {',
+        '  render() {',
+        '    if (!this.props.foo) {',
+        '      return null;',
+        '    }',
+        '    return <div>{this.props.foo}</div>;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [{
+        message: 'Component should be written as a pure function'
+      }]
+    }, {
+      // Can return null (ES5)
+      code: [
+        'var Foo = React.createClass({',
+        '  render: function() {',
+        '    if (!this.props.foo) {',
+        '      return null;',
+        '    }',
+        '    return <div>{this.props.foo}</div>;',
+        '  }',
+        '});'
+      ].join('\n'),
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Component should be written as a pure function'
+      }]
+    }, {
+      // Can return null (shorthand if in return)
+      code: [
+        'class Foo extends React.Component {',
+        '  render() {',
+        '    return true ? <div /> : null;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [{
+        message: 'Component should be written as a pure function'
+      }]
     }
   ]
 });