Consider groups of sortable attributes

Author: Overload119

lib/rules/jsx-sort-props.js

@@ -48,40 +48,65 @@ function alphabeticalCompare(a, b, ignoreCase) {
   return a.localeCompare(b);
 }
 
+/**
+ * Create an array of arrays where each subarray is composed of attributes
+ * that are considered sortable.
+ * @param {Array<JSXSpreadAttribute|JSXAttribute>} attributes
+ * @return {Array<Array<JSXAttribute>}
+ */
+function getGroupsOfSortableAttributes(attributes) {
+  const sortableAttributeGroups = [];
+  let groupCount = 0;
+  for (var i = 0; i < attributes.length; i++) {
+    const lastAttr = attributes[i - 1];
+    // If we have no groups or if the last attribute was JSXSpreadAttribute
+    // then we start a new group. Append attributes to the group until we
+    // come across another JSXSpreadAttribute or exhaust the array.
+    if (
+      !lastAttr ||
+      (lastAttr.type === 'JSXSpreadAttribute' &&
+        attributes[i].type !== 'JSXSpreadAttribute')
+    ) {
+      groupCount++;
+      sortableAttributeGroups[groupCount - 1] = [];
+    }
+    if (attributes[i].type !== 'JSXSpreadAttribute') {
+      sortableAttributeGroups[groupCount - 1].push(attributes[i]);
+    }
+  }
+  return sortableAttributeGroups;
+}
+
 function generateFixerFunction(node, context) {
   var sourceCode = context.getSourceCode();
   var attributes = node.attributes.slice(0);
   var configuration = context.options[0] || {};
   var ignoreCase = configuration.ignoreCase || false;
 
   // Sort props according to the context. Only supports ignoreCase.
-  // Since we cannot safely move JSXSpreadAttributes (due to potential variable overrides),
-  // we only consider the sortable attributes.
-  const sortableAttributes = attributes.filter(function(attr) {
-    return attr.type !== 'JSXSpreadAttribute';
-  });
-
-  sortableAttributes.sort(function(a, b) {
-    return alphabeticalCompare(propName(a), propName(b), ignoreCase);
+  // Since we cannot safely move JSXSpreadAttribute (due to potential variable overrides),
+  // we only consider groups of sortable attributes.
+  const sortableAttributeGroups = getGroupsOfSortableAttributes(attributes);
+  const sortedAttributeGroups = sortableAttributeGroups.slice(0).map(function(group) {
+    return group.slice(0).sort(function(a, b) {
+      return alphabeticalCompare(propName(a), propName(b), ignoreCase);
+    });
   });
 
   return function(fixer) {
-    // Replace each unsorted attribute with the sorted one.
     const fixers = [];
-    let skipIndex = 0; // skip over spread attributes
-
-    node.attributes.forEach(function(attr, index) {
-      if (attr.type === 'JSXSpreadAttribute') {
-        skipIndex++;
-        return;
-      }
 
-      var sortedAttr = sortableAttributes[index - skipIndex];
-      var sortedAttrText = sourceCode.getText(sortedAttr);
-      fixers.push(
-        fixer.replaceTextRange([attr.start, attr.end], sortedAttrText)
-      );
+    // Replace each unsorted attribute with the sorted one.
+    sortableAttributeGroups.forEach(function(sortableGroup, ii) {
+      sortableGroup.forEach(function(attr, jj) {
+        var sortedAttr = sortedAttributeGroups[ii][jj];
+        var sortedAttrText = sourceCode.getText(sortedAttr);
+        fixers.push(
+          fixer.replaceTextRange([attr.start, attr.end], sortedAttrText)
+        );
+      });
     });
+
     return fixers;
   };
 }

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

@@ -166,7 +166,7 @@ ruleTester.run('jsx-sort-props', rule, {
     {
       code: '<App c {...this.props} b a />;',
       errors: [expectedError],
-      output: '<App a {...this.props} b c />;'
+      output: '<App c {...this.props} a b />;'
     },
     {
       code: '<App a A />;',
@@ -197,7 +197,7 @@ ruleTester.run('jsx-sort-props', rule, {
     },
     {
       code: '<App d="d" b="b" {...this.props} c="a" a="c" />;',
-      output: '<App a="c" b="b" {...this.props} c="a" d="d" />;',
+      output: '<App b="b" d="d" {...this.props} a="c" c="a" />;',
       errors: 2
     },
     {
@@ -218,11 +218,11 @@ ruleTester.run('jsx-sort-props', rule, {
         '<App',
         '_onClick={function(){}}',
         'a={true}',
-        'b={false}',
         'onHandle={function(){}}',
         'r',
-        '{...this.props}',
         'z',
+        '{...this.props}',
+        'b={false}',
         '{...otherProps}>',
         '  {test}',
         '</App>'