feat(sort-jsx-props): adds partitionByNewLine

Author: hugop95

docs/content/rules/sort-jsx-props.mdx

@@ -200,6 +200,12 @@ Allows you to specify names or patterns for JSX elements that should be ignored
 
 You can specify their names or a regexp pattern to ignore, for example: `'^Table.+'` to ignore all object types whose names begin with the word Table.
 
+### partitionByNewLine
+
+<sub>default: `false`</sub>
+
+When `true`, the rule will not sort members if there is an empty line between them. This can be useful for keeping logically separated groups of members in their defined order.
+
 ### groups
 
 <sub>
@@ -299,6 +305,7 @@ Custom group matching takes precedence over predefined group matching.
                   ignoreCase: true,
                   specialCharacters: 'keep',
                   ignorePattern: [],
+                  partitionByNewLine: false,
                   newlinesBetween: 'ignore',
                   groups: [],
                   customGroups: {},
@@ -327,6 +334,7 @@ Custom group matching takes precedence over predefined group matching.
                 ignoreCase: true,
                 specialCharacters: 'keep',
                 ignorePattern: [],
+                partitionByNewLine: false,
                 newlinesBetween: 'ignore',
                 groups: [],
                 customGroups: {},

rules/sort-jsx-props.ts

@@ -3,6 +3,7 @@ import type { TSESTree } from '@typescript-eslint/types'
 import type { SortingNode } from '../types/sorting-node'
 
 import {
+  partitionByNewLineJsonSchema,
   specialCharactersJsonSchema,
   newlinesBetweenJsonSchema,
   customGroupsJsonSchema,
@@ -13,6 +14,7 @@ import {
   groupsJsonSchema,
   orderJsonSchema,
 } from '../utils/common-json-schemas'
+import { validateNewlinesAndPartitionConfiguration } from '../utils/validate-newlines-and-partition-configuration'
 import { validateCustomSortConfiguration } from '../utils/validate-custom-sort-configuration'
 import { validateGroupsConfiguration } from '../utils/validate-groups-configuration'
 import { getEslintDisabledLines } from '../utils/get-eslint-disabled-lines'
@@ -22,6 +24,7 @@ import { sortNodesByGroups } from '../utils/sort-nodes-by-groups'
 import { getNewlinesErrors } from '../utils/get-newlines-errors'
 import { makeNewlinesFixes } from '../utils/make-newlines-fixes'
 import { createEslintRule } from '../utils/create-eslint-rule'
+import { getLinesBetween } from '../utils/get-lines-between'
 import { getGroupNumber } from '../utils/get-group-number'
 import { getSourceCode } from '../utils/get-source-code'
 import { rangeToDiff } from '../utils/range-to-diff'
@@ -45,6 +48,7 @@ type Options<T extends string[]> = [
     newlinesBetween: 'ignore' | 'always' | 'never'
     specialCharacters: 'remove' | 'trim' | 'keep'
     locales: NonNullable<Intl.LocalesArgument>
+    partitionByNewLine: boolean
     ignorePattern: string[]
     order: 'desc' | 'asc'
     ignoreCase: boolean
@@ -67,6 +71,7 @@ type Group<T extends string[]> =
 let defaultOptions: Required<Options<string[]>[0]> = {
   specialCharacters: 'keep',
   newlinesBetween: 'ignore',
+  partitionByNewLine: false,
   type: 'alphabetical',
   ignorePattern: [],
   ignoreCase: true,
@@ -92,6 +97,7 @@ export default createEslintRule<Options<string[]>, MESSAGE_ID>({
         ['multiline', 'shorthand', 'unknown'],
         Object.keys(options.customGroups),
       )
+      validateNewlinesAndPartitionConfiguration(options)
 
       let sourceCode = getSourceCode(context)
 
@@ -111,50 +117,60 @@ export default createEslintRule<Options<string[]>, MESSAGE_ID>({
         sourceCode,
       })
 
-      let parts: SortingNode[][] = node.openingElement.attributes.reduce(
-        (
-          accumulator: SortingNode[][],
-          attribute: TSESTree.JSXSpreadAttribute | TSESTree.JSXAttribute,
-        ) => {
-          if (attribute.type === 'JSXSpreadAttribute') {
-            accumulator.push([])
-            return accumulator
-          }
+      let formattedMembers: SortingNode[][] =
+        node.openingElement.attributes.reduce(
+          (
+            accumulator: SortingNode[][],
+            attribute: TSESTree.JSXSpreadAttribute | TSESTree.JSXAttribute,
+          ) => {
+            if (attribute.type === 'JSXSpreadAttribute') {
+              accumulator.push([])
+              return accumulator
+            }
 
-          let name =
-            attribute.name.type === 'JSXNamespacedName'
-              ? `${attribute.name.namespace.name}:${attribute.name.name.name}`
-              : attribute.name.name
+            let name =
+              attribute.name.type === 'JSXNamespacedName'
+                ? `${attribute.name.namespace.name}:${attribute.name.name.name}`
+                : attribute.name.name
 
-          let { setCustomGroups, defineGroup, getGroup } = useGroups(options)
+            let { setCustomGroups, defineGroup, getGroup } = useGroups(options)
 
-          setCustomGroups(options.customGroups, name)
+            setCustomGroups(options.customGroups, name)
 
-          if (attribute.value === null) {
-            defineGroup('shorthand')
-          } else if (attribute.loc.start.line !== attribute.loc.end.line) {
-            defineGroup('multiline')
-          }
+            if (attribute.value === null) {
+              defineGroup('shorthand')
+            } else if (attribute.loc.start.line !== attribute.loc.end.line) {
+              defineGroup('multiline')
+            }
 
-          let jsxNode: SortingNode = {
-            isEslintDisabled: isNodeEslintDisabled(
-              attribute,
-              eslintDisabledLines,
-            ),
-            size: rangeToDiff(attribute, sourceCode),
-            group: getGroup(),
-            node: attribute,
-            name,
-          }
+            let sortingNode: SortingNode = {
+              isEslintDisabled: isNodeEslintDisabled(
+                attribute,
+                eslintDisabledLines,
+              ),
+              size: rangeToDiff(attribute, sourceCode),
+              group: getGroup(),
+              node: attribute,
+              name,
+            }
 
-          accumulator.at(-1)!.push(jsxNode)
+            let lastSortingNode = accumulator.at(-1)?.at(-1)
+            if (
+              options.partitionByNewLine &&
+              lastSortingNode &&
+              getLinesBetween(sourceCode, lastSortingNode, sortingNode)
+            ) {
+              accumulator.push([])
+            }
 
-          return accumulator
-        },
-        [[]],
-      )
+            accumulator.at(-1)!.push(sortingNode)
+
+            return accumulator
+          },
+          [[]],
+        )
 
-      for (let nodes of parts) {
+      for (let nodes of formattedMembers) {
         let sortNodesExcludingEslintDisabled = (
           ignoreEslintDisabledNodes: boolean,
         ): SortingNode[] =>
@@ -245,6 +261,7 @@ export default createEslintRule<Options<string[]>, MESSAGE_ID>({
             },
             type: 'array',
           },
+          partitionByNewLine: partitionByNewLineJsonSchema,
           specialCharacters: specialCharactersJsonSchema,
           newlinesBetween: newlinesBetweenJsonSchema,
           customGroups: customGroupsJsonSchema,