Add support for typeAnnotations in sort-comp (fixes jsx-eslint#235)

Author: dozoisch

docs/rules/sort-comp.md

@@ -89,6 +89,7 @@ The default configuration is:
 * `lifecycle` is referring to the `lifecycle` group defined in `groups`.
 * `everything-else` is a special group that match all the methods that do not match any of the other groups.
 * `render` is referring to the `render` method.
+* `type-annotations`. This group is not speficied by default, but can be used enforce flow annotations to be at the top.
 
 You can override this configuration to match your needs.
 
@@ -171,6 +172,48 @@ var Hello = React.createClass({
 });
 ```
 
+If you want to flow annotations to be at the top:
+
+```js
+"react/sort-comp": [1, {
+  order: [
+    'type-annotations',
+    'static-methods',
+    'lifecycle',
+    'everything-else',
+    'render',
+  ],
+}]
+```
+
+With the above configuration, the following patterns are considered warnings:
+
+```js
+class Hello extends React.Component<any, Props, void> {
+  onClick() { this._someElem = true; }
+  props: Props;
+  _someElem: bool;
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
+With the above configuration, the following patterns are not considered warnings:
+
+```js
+type Props = {};
+class Hello extends React.Component<any, Props, void> {
+  props: Props;
+  _someElem: bool;
+  onClick() { this._someElem = true; }
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
+
 ## When Not To Use It
 
 This rule is a formatting preference and not following it won't negatively affect the quality of your code. If components organisation isn't a part of your coding standards, then you can leave this rule off.

lib/rules/sort-comp.js

@@ -136,6 +136,15 @@ module.exports = {
         }
       }
 
+      if (method.typeAnnotation) {
+        for (i = 0, j = methodsOrder.length; i < j; i++) {
+          if (methodsOrder[i] === 'type-annotations') {
+            indexes.push(i);
+            break;
+          }
+        }
+      }
+
       // Either this is not a static method or static methods are not specified
       // in the methodsOrder.
       if (indexes.length === 0) {
@@ -353,7 +362,8 @@ module.exports = {
       var propertiesInfos = properties.map(function(node) {
         return {
           name: getPropertyName(node),
-          static: node.static
+          static: node.static,
+          typeAnnotation: !!node.typeAnnotation && node.value === null
         };
       });
 

tests/lib/rules/sort-comp.js

@@ -203,6 +203,51 @@ ruleTester.run('sort-comp', rule, {
       '});'
     ].join('\n'),
     parser: 'babel-eslint'
+  }, {
+    // Type Annotations should be first
+    code: [
+      'class Hello extends React.Component {',
+      '  props: { text: string };',
+      '  constructor() {}',
+      '  render() {',
+      '    return <div>{this.props.text}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    options: [{
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        'everything-else',
+        'render'
+      ]
+    }]
+  }, {
+    // Properties with Type Annotations should not be at the top
+    code: [
+      'class Hello extends React.Component {',
+      '  props: { text: string };',
+      '  constructor() {}',
+      '  state: Object = {};',
+      '  render() {',
+      '    return <div>{this.props.text}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    options: [{
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        'everything-else',
+        'render'
+      ]
+    }]
   }],
 
   invalid: [{
@@ -273,5 +318,65 @@ ruleTester.run('sort-comp', rule, {
     parser: 'babel-eslint',
     parserOptions: parserOptions,
     errors: [{message: 'render should be placed after displayName'}]
+  }, {
+    // Type Annotations should not be at the top by default
+    code: [
+      'class Hello extends React.Component {',
+      '  props: { text: string };',
+      '  constructor() {}',
+      '  state: Object = {};',
+      '  render() {',
+      '    return <div>{this.props.text}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{message: 'props should be placed after state'}]
+  }, {
+    // Type Annotations should be first
+    code: [
+      'class Hello extends React.Component {',
+      '  constructor() {}',
+      '  props: { text: string };',
+      '  render() {',
+      '    return <div>{this.props.text}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{message: 'constructor should be placed after props'}],
+    options: [{
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        'everything-else',
+        'render'
+      ]
+    }]
+  }, {
+    // Properties with Type Annotations should not be at the top
+    code: [
+      'class Hello extends React.Component {',
+      '  props: { text: string };',
+      '  state: Object = {};',
+      '  constructor() {}',
+      '  render() {',
+      '    return <div>{this.props.text}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{message: 'state should be placed after constructor'}],
+    options: [{
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        'everything-else',
+        'render'
+      ]
+    }]
   }]
 });