prefer separate component file

Author: DianaSuvorova

README.md

@@ -47,3 +47,4 @@ Then configure the rules you want to use under the rules section.
 * [react-redux/connect-prefer-named-arguments](docs/rules/connect-prefer-named-arguments.md) Enforces that all connect arguments have specific names.
 * [react-redux/mapStateToProps-prefer-parameters-names](docs/rules/mapStateToProps-prefer-parameters-names.md) Enforces that all mapStateToProps parameters have specific names.
 * [react-redux/mapDispatchToProps-prefer-parameters-names](docs/rules/mapDispatchToProps-prefer-parameters-names.md) Enforces that all mapDispatchToProps parameters have specific names.
+* [react-redux/prefer-separate-component-file](docs/rules/prefer-separate-component-file.md) Enforces that all connected components are defined in a separate file.

docs/rules/connect-prefer-minimum-two-arguments.md

@@ -8,7 +8,7 @@ This rule enforces that Second argument is provided explicitly.
 
 ## Rule details
 
-The following pattern is considered warnings:
+The following pattern is considered incorrect:
 
 ```js
 connect(mapStateToProps, null, mergeProps)(Component)

docs/rules/connect-prefer-named-arguments.md

@@ -10,7 +10,7 @@ This rule enforces that all of the provided parameters should follow the above n
 
 ## Rule details
 
-The following patterns are considered warnings:
+The following patterns are considered incorrect:
 
 ```js
 connect(mapStateToProps, actionCreators)(TodoApp)
@@ -23,7 +23,7 @@ connect(state => state)(TodoApp)
 The following patterns are considered correct:
 
 ```js
-connect(mapStateToProps, actionCreators, mergeProps)(TodoApp)
+connect(mapStateToProps, mapDispatchToProps, mergeProps)(TodoApp)
 ```
 
 ```js

docs/rules/mapDispatchToProps-prefer-parameters-names.md

@@ -8,7 +8,7 @@ This rule enforces that all of the provided parameters should follow the above n
 
 ## Rule details
 
-The following pattern is considered warnings:
+The following pattern is considered incorrect:
 
 ```js
 const mapDispatchToProps = (anyOtherName) => {}

docs/rules/mapStateToProps-prefer-parameters-names.md

@@ -8,7 +8,7 @@ This rule enforces that all of the provided parameters should follow the above n
 
 ## Rule details
 
-The following pattern is considered warnings:
+The following pattern is considered incorrect:
 
 ```js
 const mapStateToProps = (anyOtherName) => {}

docs/rules/prefer-separate-component-file.md

@@ -0,0 +1,24 @@
+#  Enforces that all connected components are defined in a separate file (react-redux/prefer-separate-component-file)
+
+And imports it to the container.
+
+## Rule details
+
+The following pattern is considered incorrect:
+
+```js
+const Component = () => {};
+connect(mapStateToProps, null)(Component)
+```
+
+The following patterns are considered correct:
+
+```js
+import Component from './component';
+connect(mapStateToProps, mapDispatchToProps)(Component)
+```
+
+```js
+const Component = require('./component')
+connect(mapStateToProps, mapDispatchToProps)(Component)
+```

index.js

@@ -1,9 +1,9 @@
 const rules = {
   'connect-prefer-minimum-two-arguments': require('./lib/rules/connect-prefer-minimum-two-arguments'),
-  'connect-prefer-named-arguments': require('./lib/rules/connect-prefer-named-parameters'),
+  'connect-prefer-named-arguments': require('./lib/rules/connect-prefer-named-arguments'),
   'mapStateToProps-prefer-parameters-names': require('./lib/rules/mapStateToProps-prefer-parameters-names'),
   'mapDispatchToProps-prefer-parameters-names': require('./lib/rules/mapDispatchToProps-prefer-parameters-names'),
-
+  'prefer-separate-component-file': require('./lib/rules/prefer-separate-component-file'),
 };
 
 module.exports = {
@@ -14,6 +14,7 @@ module.exports = {
       'react-redux/connect-prefer-named-arguments': 2,
       'react-redux/mapStateToProps-prefer-parameters-names': 2,
       'react-redux/mapDispatchToProps-prefer-parameters-names': 2,
+      'prefer-separate-component-file/mapDispatchToProps-prefer-parameters-names': 1,
     },
     all: {
       rules,

lib/rules/prefer-separate-component-file.js

@@ -0,0 +1,33 @@
+const isReactReduxConnect = require('../isReactReduxConnect');
+
+const report = function (context, node) {
+  context.report({
+    message: 'Connected component should be defined in a separate file.',
+    node,
+  });
+};
+
+module.exports = function (context) {
+  return {
+    CallExpression(node) {
+      if (isReactReduxConnect(node)) {
+        const component =
+          node.parent &&
+          node.parent.arguments &&
+          node.parent.arguments[0];
+        if (component) {
+          const vars = context.getScope().variables;
+          vars.forEach((definedVar) => {
+            if (component.name === definedVar.name) {
+              definedVar.defs.forEach((def) => {
+                if (!(def.type === 'ImportBinding' || context.getSource(def.node).includes('require'))) {
+                  report(context, component);
+                }
+              });
+            }
+          });
+        }
+      }
+    },
+  };
+};

package.json

@@ -13,8 +13,8 @@
   "scripts": {
     "lint": "eslint ./",
     "test": "npm run lint && mocha tests --recursive",
-    "test-single": "mocha tests/lib/rules/connect-prefer-named-arguments",
-    "debug-test": "mocha --debug-brk --inspect tests/lib/rules/mapDispatchToProps-prefer-parameters-names"
+    "test-single": "mocha tests/lib/rules/prefer-separate-component-file",
+    "debug-test": "mocha --debug-brk --inspect tests/lib/rules/prefer-separate-component-file"
   },
   "repository": {
   "type": "git",

tests/lib/rules/prefer-separate-component-file.js

@@ -19,9 +19,16 @@ ruleTester.run('prefer-separate-component-file', rule, {
       connect(mapStateToProps, mapDispatchToProps)(Component)`,
     `const Component = require('./component')
      connect(mapStateToProps, mapDispatchToProps)(Component)`,
+    `import {Component} from './component';
+       connect(mapStateToProps, mapDispatchToProps)(Component)`,
   ],
-  invalid: [
-    ` const Component = () => {};
-      connect(mapStateToProps, null)(Component)`,
-  ],
+  invalid: [{
+    code: `const Component = () => {};
+          connect(mapStateToProps, null)(Component)`,
+    errors: [
+      {
+        message: 'Connected component should be defined in a separate file.',
+      },
+    ],
+  }],
 });