Add shorthandFirst option to jsx-sort-props (fixes #391)

Author: mathieumg

docs/rules/jsx-sort-props.md

@@ -26,6 +26,7 @@ The following patterns are considered okay and do not cause warnings:
 "jsx-sort-props": [<enabled>, {
   "callbacksLast": <boolean>,
   "shorthandFirst": <boolean>,
+  "shorthandLast": <boolean>,
   "ignoreCase": <boolean>
 }]
 ...
@@ -43,7 +44,7 @@ The following patterns are considered okay and do not cause warnings:
 
 ### `callbacksLast`
 
-When `true`, callbacks must be listed after all other props:
+When `true`, callbacks must be listed after all other props, even if `shorthandLast` is set :
 
 ```js
 <Hello tel={5555555} onClick={this._handleClick} />
@@ -57,6 +58,14 @@ When `true`, short hand props must be listed before all other props, but still r
 <Hello active validate name="John" tel={5555555} />
 ```
 
+### `shorthandLast`
+
+When `true`, short hand props must be listed after all other props (unless `callbacksLast` is set), but still respecting the alphabetical order:
+
+```js
+<Hello name="John" tel={5555555} active validate />
+```
+
 ## When not to use
 
 This rule is a formatting preference and not following it won't negatively affect the quality of your code. If alphabetizing props isn't a part of your coding standards, then you can leave this rule off.

lib/rules/jsx-sort-props.js

@@ -20,6 +20,7 @@ module.exports = function(context) {
   var ignoreCase = configuration.ignoreCase || false;
   var callbacksLast = configuration.callbacksLast || false;
   var shorthandFirst = configuration.shorthandFirst || false;
+  var shorthandLast = configuration.shorthandLast || false;
 
   return {
     JSXOpeningElement: function(node) {
@@ -68,6 +69,19 @@ module.exports = function(context) {
           }
         }
 
+        if (shorthandLast) {
+          if (!currentValue && previousValue) {
+            return decl;
+          }
+          if (currentValue && !previousValue) {
+            context.report({
+              node: memo,
+              message: 'Shorthand props must be listed after all other props'
+            });
+            return memo;
+          }
+        }
+
         if (currentPropName < previousPropName) {
           context.report({
             node: decl,
@@ -86,14 +100,18 @@ module.exports.schema = [{
   type: 'object',
   properties: {
     // Whether callbacks (prefixed with "on") should be listed at the very end,
-    // after all other props.
+    // after all other props. Supersedes shorthandLast.
     callbacksLast: {
       type: 'boolean'
     },
     // Whether shorthand properties (without a value) should be listed first
     shorthandFirst: {
       type: 'boolean'
     },
+    // Whether shorthand properties (without a value) should be listed last
+    shorthandLast: {
+      type: 'boolean'
+    },
     ignoreCase: {
       type: 'boolean'
     }

tests/lib/rules/jsx-sort-props.js

@@ -33,16 +33,27 @@ var expectedCallbackError = {
   message: 'Callbacks must be listed after all other props',
   type: 'JSXAttribute'
 };
-var expectedShorthandError = {
+var expectedShorthandFirstError = {
   message: 'Shorthand props must be listed before all other props',
   type: 'JSXAttribute'
 };
+var expectedShorthandLastError = {
+  message: 'Shorthand props must be listed after all other props',
+  type: 'JSXAttribute'
+};
 var callbacksLastArgs = [{
   callbacksLast: true
 }];
 var shorthandFirstArgs = [{
   shorthandFirst: true
 }];
+var shorthandLastArgs = [{
+  shorthandLast: true
+}];
+var shorthandAndCallbackLastArgs = [{
+  callbacksLast: true,
+  shorthandLast: true
+}];
 var ignoreCaseArgs = [{
   ignoreCase: true
 }];
@@ -67,7 +78,13 @@ ruleTester.run('jsx-sort-props', rule, {
     // Sorting shorthand props before others
     {code: '<App a b="b" />;', options: shorthandFirstArgs, parserOptions: parserOptions},
     {code: '<App z a="a" />;', options: shorthandFirstArgs, parserOptions: parserOptions},
-    {code: '<App x y z a="a" b="b" />;', options: shorthandFirstArgs, parserOptions: parserOptions}
+    {code: '<App x y z a="a" b="b" />;', options: shorthandFirstArgs, parserOptions: parserOptions},
+    {code: '<App a="a" b="b" x y z />;', options: shorthandLastArgs, parserOptions: parserOptions},
+    {
+      code: '<App a="a" b="b" x y z onBar onFoo />;',
+      options: shorthandAndCallbackLastArgs,
+      parserOptions: parserOptions
+    }
   ],
   invalid: [
     {code: '<App b a />;', errors: [expectedError], parserOptions: parserOptions},
@@ -91,10 +108,20 @@ ruleTester.run('jsx-sort-props', rule, {
       parserOptions: parserOptions
     }, {
       code: '<App a="a" b />;',
-      errors: [expectedShorthandError],
+      errors: [expectedShorthandFirstError],
       options: shorthandFirstArgs,
       parserOptions: parserOptions
     },
-    {code: '<App z x a="a" />;', errors: [expectedError], options: shorthandFirstArgs, parserOptions: parserOptions}
+    {code: '<App z x a="a" />;', errors: [expectedError], options: shorthandFirstArgs, parserOptions: parserOptions}, {
+      code: '<App b a="a" />;',
+      errors: [expectedShorthandLastError],
+      options: shorthandLastArgs,
+      parserOptions: parserOptions
+    }, {
+      code: '<App a="a" onBar onFoo z x />;',
+      errors: [shorthandAndCallbackLastArgs],
+      options: shorthandLastArgs,
+      parserOptions: parserOptions
+    }
   ]
 });