[New] add sort-default-props and deprecate jsx-sort-default-props

Part 1 of #1834

CHANGELOG.md

@@ -7,8 +7,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Added
 * [`hook-use-state`]: add `allowDestructuredState` option ([#3449][] @ljharb)
+* add [`sort-default-props`] and deprecate [`jsx-sort-default-props`] ([#1861][] @alexzherdev)
 
 [#3449]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3449
+[#1861]: https://github.com/jsx-eslint/eslint-plugin-react/pull/1861
 
 ## [7.31.9] - 2022.10.09
 
@@ -4023,6 +4025,7 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`require-render-return`]: docs/rules/require-render-return.md
 [`self-closing-comp`]: docs/rules/self-closing-comp.md
 [`sort-comp`]: docs/rules/sort-comp.md
+[`sort-default-props`]: docs/rules/sort-default-props.md
 [`sort-prop-types`]: docs/rules/sort-prop-types.md
 [`state-in-constructor`]: docs/rules/state-in-constructor.md
 [`static-property-placement`]: docs/rules/static-property-placement.md

README.md

@@ -172,6 +172,7 @@ Enable the rules that you would like to use.
 | ✔ |  |  | [react/require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function |
 |  | 🔧 |  | [react/self-closing-comp](docs/rules/self-closing-comp.md) | Disallow extra closing tags for components without children |
 |  |  |  | [react/sort-comp](docs/rules/sort-comp.md) | Enforce component methods order |
+|  |  |  | [react/sort-default-props](docs/rules/sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting |
 |  |  |  | [react/sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting |
 |  |  |  | [react/state-in-constructor](docs/rules/state-in-constructor.md) | Enforce class component state initialization style |
 |  |  |  | [react/static-property-placement](docs/rules/static-property-placement.md) | Enforces where React component static properties should be positioned. |
@@ -216,7 +217,7 @@ Enable the rules that you would like to use.
 |  |  |  | [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components |
 |  | 🔧 |  | [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props |
 |  |  |  | [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Disallow JSX prop spreading |
-|  |  |  | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting |
+|  |  |  | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting. ❌ This rule is deprecated. |
 |  | 🔧 |  | [react/jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting |
 |  | 🔧 |  | [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Enforce spacing before closing bracket in JSX. ❌ This rule is deprecated. |
 |  | 🔧 |  | [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Enforce whitespace in and around the JSX opening and closing brackets |

docs/rules/jsx-sort-default-props.md

@@ -1,6 +1,6 @@
 # Enforce defaultProps declarations alphabetical sorting (react/jsx-sort-default-props)
 
-💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.
+❌ This rule is deprecated. Please use the [`sort-default-props`](./sort-default-props.md) rule instead.
 
 Some developers prefer to sort `defaultProps` declarations alphabetically to be able to find necessary declarations easier at a later time. Others feel that it adds complexity and becomes a burden to maintain.
 

docs/rules/sort-default-props.md

@@ -0,0 +1,187 @@
+# Enforce defaultProps declarations alphabetical sorting (react/sort-default-props)
+
+💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.
+
+Some developers prefer to sort `defaultProps` declarations alphabetically to be able to find necessary declarations easier at a later time. Others feel that it adds complexity and becomes a burden to maintain.
+
+## Rule Details
+
+This rule checks all components and verifies that all `defaultProps` declarations are sorted alphabetically. A spread attribute resets the verification. The default configuration of the rule is case-sensitive.
+
+The following patterns are considered warnings:
+
+```jsx
+var Component = createReactClass({
+...
+  getDefaultProps: function() {
+    return {
+      z: "z",
+      a: "a",
+      b: "b"
+    };
+  },
+...
+});
+
+class Component extends React.Component {
+  ...
+}
+Component.defaultProps = {
+  z: "z",
+  a: "a",
+  b: "b"
+};
+
+class Component extends React.Component {
+  static defaultProps = {
+    z: "z",
+    y: "y",
+    a: "a"
+  }
+  render() {
+    return <div />;
+  }
+}
+
+const Component = (props) => (...);
+Component.defaultProps = {
+  z: "z",
+  y: "y",
+  a: "a"
+};
+
+const defaults = {
+  b: "b"
+};
+const types = {
+  a: PropTypes.string,
+  b: PropTypes.string,
+  c: PropTypes.string'
+};
+function StatelessComponentWithSpreadInPropTypes({ a, b, c }) {
+  return <div>{a}{b}{c}</div>;
+}
+StatelessComponentWithSpreadInPropTypes.propTypes = types;
+StatelessComponentWithSpreadInPropTypes.defaultProps = {
+  c: "c",
+  a: "a",
+  ...defaults,
+};
+
+export default class ClassWithSpreadInPropTypes extends BaseClass {
+  static propTypes = {
+    a: PropTypes.string,
+    b: PropTypes.string,
+    c: PropTypes.string,
+    d: PropTypes.string,
+    e: PropTypes.string,
+    f: PropTypes.string
+  }
+  static defaultProps = {
+    b: "b",
+    a: "a",
+    ...c.defaultProps,
+    f: "f",
+    e: "e",
+    ...d.defaultProps
+  }
+}
+```
+
+The following patterns are considered okay and do **not** cause warnings:
+
+```jsx
+var Component = createReactClass({
+...
+  getDefaultProps: function() {
+    return {
+      a: "a",
+      b: "b",
+      c: "c"
+    };
+  },
+...
+});
+
+class Component extends React.Component {
+  ...
+}
+Component.defaultProps = {
+  a: "a",
+  b: "b",
+  c: "c"
+};
+
+class Component extends React.Component {
+  static defaultProps = {
+    a: PropTypes.any,
+    b: PropTypes.any,
+    c: PropTypes.any
+  }
+  render() {
+    return <div />;
+  }
+}
+
+const Component = (props) => (...);
+Component.defaultProps = {
+  a: "a",
+  y: "y",
+  z: "z"
+};
+
+const defaults = {
+  b: "b"
+};
+const types = {
+  a: PropTypes.string,
+  b: PropTypes.string,
+  c: PropTypes.string'
+};
+function StatelessComponentWithSpreadInPropTypes({ a, b, c }) {
+  return <div>{a}{b}{c}</div>;
+}
+StatelessComponentWithSpreadInPropTypes.propTypes = types;
+StatelessComponentWithSpreadInPropTypes.defaultProps = {
+  a: "a",
+  c: "c",
+  ...defaults,
+};
+
+export default class ClassWithSpreadInPropTypes extends BaseClass {
+  static propTypes = {
+    a: PropTypes.string,
+    b: PropTypes.string,
+    c: PropTypes.string,
+    d: PropTypes.string,
+    e: PropTypes.string,
+    f: PropTypes.string
+  }
+  static defaultProps = {
+    a: "a",
+    b: "b",
+    ...c.defaultProps,
+    e: "e",
+    f: "f",
+    ...d.defaultProps
+  }
+}
+```
+
+## Rule Options
+
+```js
+...
+"react/sort-default-props": [<enabled>, {
+  "ignoreCase": <boolean>,
+}]
+...
+```
+
+### `ignoreCase`
+
+When `true` the rule ignores the case-sensitivity of the declarations order.
+
+## 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 `defaultProps` declarations isn't a part of your coding standards, then you can leave this rule off.

index.js

@@ -98,6 +98,7 @@ const allRules = {
   'require-render-return': require('./lib/rules/require-render-return'),
   'self-closing-comp': require('./lib/rules/self-closing-comp'),
   'sort-comp': require('./lib/rules/sort-comp'),
+  'sort-default-props': require('./lib/rules/sort-default-props'),
   'sort-prop-types': require('./lib/rules/sort-prop-types'),
   'state-in-constructor': require('./lib/rules/state-in-constructor'),
   'static-property-placement': require('./lib/rules/static-property-placement'),

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

@@ -1,13 +1,17 @@
 /**
  * @fileoverview Enforce default props alphabetical sorting
  * @author Vladimir Kattsov
+ * @deprecated
  */
 
 'use strict';
 
 const variableUtil = require('../util/variable');
 const docsUrl = require('../util/docsUrl');
 const report = require('../util/report');
+const log = require('../util/log');
+
+let isWarnedForDeprecation = false;
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -19,6 +23,7 @@ const messages = {
 
 module.exports = {
   meta: {
+    deprecated: true,
     docs: {
       description: 'Enforce defaultProps declarations alphabetical sorting',
       category: 'Stylistic Issues',
@@ -168,6 +173,15 @@ module.exports = {
 
         checkNode(node.parent.right);
       },
+
+      Program() {
+        if (isWarnedForDeprecation) {
+          return;
+        }
+
+        log('The react/jsx-sort-default-props rule is deprecated. It has been renamed to `react/sort-default-props`.');
+        isWarnedForDeprecation = true;
+      },
     };
   },
 };