eslint-plugin-power-esrules 0.1.10 → 0.1.12

package/INTEGRATION_GUIDE.md

@@ -12,6 +12,7 @@
   - `use-state-naming.js` - проверка именования useState хуков
   - `class-to-functional.js` - определение классовых компонентов для конвертации в функциональные  
   - `import-sorting.js` - сортировка импортов
+  - `props-destructuring-sort.js` - сортировка деструктурированных props
 
 ### Правила плагина
 
@@ -66,6 +67,16 @@
 #### 7. `import-sorting`
 **Назначение:** Сортирует импорты согласно правилам установленным в команде разработки.
 
+#### 8. `props-destructuring-sort`
+**Назначение:** Сортирует деструктурированные props React-компонентов по алфавиту.
+
+**Логика:**
+- `const { ... } = props` — только внутри функционального React-компонента
+- `const { ... } = this.props` — только внутри классового React-компонента (`Component` / `PureComponent`)
+- Первый параметр `({ ... })` — только у React-компонента (имя с заглавной буквы, JSX в теле, или обёртка `memo` / `forwardRef` / `lazy`)
+- Rest-элемент (`...rest`) остаётся последним
+- Автоисправление при сохранении (eslint --fix), как у `import-sorting`
+
 ## Что нужно для интеграции
 
 ### 1. npm install eslint-plugin-power-esrules

package/index.js

@@ -7,6 +7,7 @@ module.exports = {
     "use-state-naming": require("./lib/rules/use-state-naming"),
     "class-to-functional": require("./lib/rules/class-to-functional"),
     "import-sorting": require("./lib/rules/import-sorting"),
+    "props-destructuring-sort": require("./lib/rules/props-destructuring-sort"),
     "require-data-testid": require("./lib/rules/require-data-testid"),
   },
   configs: {
@@ -20,7 +21,8 @@ module.exports = {
         "power-esrules/use-state-naming": "warn",
         "power-esrules/class-to-functional": "error",
         "power-esrules/import-sorting": "error",
-        "power-esrules/require-data-testid": "error",
+        "power-esrules/props-destructuring-sort": "error",
+        "power-esrules/require-data-testid": "warn",
       },
     },
   },

package/lib/rules/props-destructuring-sort.js

@@ -0,0 +1,391 @@
+/**
+ * Rule: props-destructuring-sort
+ *
+ * Сортирует деструктурированные props React-компонентов по алфавиту:
+ * - const { ... } = props (внутри функционального React-компонента)
+ * - const { ... } = this.props (внутри классового React-компонента)
+ * - function Component({ ... }) и аналогичные стрелочные/function expression
+ */
+
+const REACT_WRAPPER_CALLEES = new Set(["memo", "forwardRef", "lazy"]);
+
+const NESTED_FUNCTION_TYPES = new Set([
+  "FunctionDeclaration",
+  "FunctionExpression",
+  "ArrowFunctionExpression",
+]);
+
+function isPropsInitializer(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === "Identifier" && node.name === "props") {
+    return true;
+  }
+  if (
+    node.type === "MemberExpression" &&
+    !node.computed &&
+    node.object.type === "ThisExpression" &&
+    node.property.type === "Identifier" &&
+    node.property.name === "props"
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function isReactComponentName(name) {
+  if (!name || typeof name !== "string") {
+    return false;
+  }
+  return /^[A-Z]/.test(name);
+}
+
+function isReactComponentClass(node) {
+  if (
+    !node ||
+    (node.type !== "ClassDeclaration" && node.type !== "ClassExpression")
+  ) {
+    return false;
+  }
+  if (!node.superClass) {
+    return false;
+  }
+  const { superClass } = node;
+  if (superClass.type === "Identifier") {
+    return (
+      superClass.name === "Component" || superClass.name === "PureComponent"
+    );
+  }
+  if (
+    superClass.type === "MemberExpression" &&
+    superClass.object &&
+    superClass.object.type === "Identifier" &&
+    superClass.object.name === "React" &&
+    superClass.property &&
+    superClass.property.type === "Identifier" &&
+    (superClass.property.name === "Component" ||
+      superClass.property.name === "PureComponent")
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function getCalleeName(callee) {
+  if (!callee) {
+    return null;
+  }
+  if (callee.type === "Identifier") {
+    return callee.name;
+  }
+  if (
+    callee.type === "MemberExpression" &&
+    !callee.computed &&
+    callee.property.type === "Identifier"
+  ) {
+    return callee.property.name;
+  }
+  return null;
+}
+
+function isWrappedByReactWrapper(funcNode) {
+  let current = funcNode.parent;
+  while (current) {
+    if (current.type === "CallExpression") {
+      const calleeName = getCalleeName(current.callee);
+      if (calleeName && REACT_WRAPPER_CALLEES.has(calleeName)) {
+        return current.arguments[0] === funcNode;
+      }
+    }
+    current = current.parent;
+  }
+  return false;
+}
+
+function getReactComponentName(funcNode) {
+  if (funcNode.type === "FunctionDeclaration" && funcNode.id) {
+    return funcNode.id.name;
+  }
+  const { parent } = funcNode;
+  if (parent?.type === "VariableDeclarator" && parent.id?.type === "Identifier") {
+    return parent.id.name;
+  }
+  if (parent?.type === "AssignmentExpression" && parent.left?.type === "Identifier") {
+    return parent.left.name;
+  }
+  return null;
+}
+
+function nodeContainsJSX(node) {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+  if (node.type === "JSXElement" || node.type === "JSXFragment") {
+    return true;
+  }
+  for (const key of Object.keys(node)) {
+    if (key === "parent") {
+      continue;
+    }
+    const value = node[key];
+    if (!value) {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (!item || typeof item !== "object" || !item.type) {
+          continue;
+        }
+        if (NESTED_FUNCTION_TYPES.has(item.type)) {
+          continue;
+        }
+        if (nodeContainsJSX(item)) {
+          return true;
+        }
+      }
+    } else if (typeof value === "object" && value.type) {
+      if (NESTED_FUNCTION_TYPES.has(value.type)) {
+        continue;
+      }
+      if (nodeContainsJSX(value)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function functionBodyContainsJSX(funcNode) {
+  const { body } = funcNode;
+  if (!body) {
+    return false;
+  }
+  if (body.type === "JSXElement" || body.type === "JSXFragment") {
+    return true;
+  }
+  return nodeContainsJSX(body);
+}
+
+function isReactComponentFunction(funcNode) {
+  if (!funcNode || !NESTED_FUNCTION_TYPES.has(funcNode.type)) {
+    return false;
+  }
+  if (isWrappedByReactWrapper(funcNode)) {
+    return true;
+  }
+  const componentName = getReactComponentName(funcNode);
+  if (isReactComponentName(componentName)) {
+    return true;
+  }
+  return functionBodyContainsJSX(funcNode);
+}
+
+function getEnclosingFunction(node) {
+  let current = node.parent;
+  while (current) {
+    if (NESTED_FUNCTION_TYPES.has(current.type)) {
+      return current;
+    }
+    current = current.parent;
+  }
+  return null;
+}
+
+function isInsideReactClass(node) {
+  let current = node.parent;
+  while (current) {
+    if (current.type === "ClassDeclaration" || current.type === "ClassExpression") {
+      return isReactComponentClass(current);
+    }
+    current = current.parent;
+  }
+  return false;
+}
+
+function isInsideReactComponentFunction(node) {
+  const enclosingFunction = getEnclosingFunction(node);
+  if (!enclosingFunction) {
+    return false;
+  }
+  return isReactComponentFunction(enclosingFunction);
+}
+
+function getPropertySortKey(prop) {
+  if (prop.type === "RestElement") {
+    return null;
+  }
+  if (prop.type === "Property") {
+    if (prop.key.type === "Identifier" && !prop.computed) {
+      return prop.key.name;
+    }
+    if (prop.key.type === "Literal") {
+      return String(prop.key.value);
+    }
+  }
+  return "";
+}
+
+function partitionProperties(properties) {
+  const regular = [];
+  const rest = [];
+  for (const prop of properties) {
+    if (prop.type === "RestElement") {
+      rest.push(prop);
+    } else {
+      regular.push(prop);
+    }
+  }
+  return { regular, rest };
+}
+
+function isAlphabeticallySorted(regular) {
+  for (let i = 1; i < regular.length; i += 1) {
+    const prevKey = getPropertySortKey(regular[i - 1]);
+    const currentKey = getPropertySortKey(regular[i]);
+    if (prevKey.localeCompare(currentKey) > 0) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function sortObjectPatternProperties(properties) {
+  const { regular, rest } = partitionProperties(properties);
+  const sortedRegular = [...regular].sort((a, b) =>
+    getPropertySortKey(a).localeCompare(getPropertySortKey(b)),
+  );
+  return [...sortedRegular, ...rest];
+}
+
+function getPropertiesSeparator(sourceCode, properties) {
+  if (properties.length < 2) {
+    return ", ";
+  }
+  const comma = sourceCode.getTokenAfter(properties[0], {
+    filter: (token) => token.value === ",",
+  });
+  if (!comma) {
+    return ", ";
+  }
+  return sourceCode.text.slice(comma.range[0], properties[1].range[0]);
+}
+
+function buildSortedObjectPatternText(patternNode, sortedProperties, sourceCode) {
+  const openBrace = sourceCode.getFirstToken(patternNode);
+  const closeBrace = sourceCode.getLastToken(patternNode);
+  const originalProperties = patternNode.properties;
+  const separator = getPropertiesSeparator(sourceCode, originalProperties);
+
+  let innerText = "";
+  for (let i = 0; i < sortedProperties.length; i += 1) {
+    innerText += sourceCode.getText(sortedProperties[i]);
+    if (i < sortedProperties.length - 1) {
+      innerText += separator;
+    }
+  }
+
+  const afterOpenBrace = sourceCode.text.slice(
+    openBrace.range[1],
+    originalProperties[0].range[0],
+  );
+  const lastOriginal = originalProperties[originalProperties.length - 1];
+  const beforeCloseBrace = sourceCode.text.slice(
+    lastOriginal.range[1],
+    closeBrace.range[0],
+  );
+
+  return `{${afterOpenBrace}${innerText}${beforeCloseBrace}}`;
+}
+
+function checkObjectPattern(patternNode, context) {
+  const { properties } = patternNode;
+  if (!properties || properties.length < 2) {
+    return;
+  }
+
+  const { regular } = partitionProperties(properties);
+  if (regular.length < 2 || isAlphabeticallySorted(regular)) {
+    return;
+  }
+
+  const sourceCode = context.getSourceCode();
+  context.report({
+    node: patternNode,
+    messageId: "incorrectOrder",
+    fix(fixer) {
+      const sortedProperties = sortObjectPatternProperties(properties);
+      const sortedText = buildSortedObjectPatternText(
+        patternNode,
+        sortedProperties,
+        sourceCode,
+      );
+      return fixer.replaceText(patternNode, sortedText);
+    },
+  });
+}
+
+function checkFunctionParams(funcNode, context) {
+  if (!isReactComponentFunction(funcNode)) {
+    return;
+  }
+  const { params } = funcNode;
+  if (!params || params.length === 0) {
+    return;
+  }
+  const firstParam = params[0];
+  if (firstParam.type === "ObjectPattern") {
+    checkObjectPattern(firstParam, context);
+  }
+}
+
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description:
+        "Сортирует деструктурированные props React-компонентов по алфавиту",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      incorrectOrder:
+        "Деструктурированные props должны быть отсортированы по алфавиту",
+    },
+  },
+
+  create(context) {
+    return {
+      VariableDeclarator(node) {
+        if (node.id.type !== "ObjectPattern" || !isPropsInitializer(node.init)) {
+          return;
+        }
+        const isThisProps =
+          node.init.type === "MemberExpression" &&
+          node.init.object.type === "ThisExpression";
+        if (isThisProps) {
+          if (!isInsideReactClass(node)) {
+            return;
+          }
+        } else if (!isInsideReactComponentFunction(node)) {
+          return;
+        }
+        checkObjectPattern(node.id, context);
+      },
+
+      FunctionDeclaration(node) {
+        checkFunctionParams(node, context);
+      },
+
+      FunctionExpression(node) {
+        checkFunctionParams(node, context);
+      },
+
+      ArrowFunctionExpression(node) {
+        checkFunctionParams(node, context);
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-power-esrules",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "custom ESLint rules",
   "main": "index.js",
   "peerDependencies": {
@@ -27,5 +27,8 @@
   "bugs": {
     "url": "https://github.com/Vollmond148259/eslint-plugin-power-esrules/issues"
   },
-  "homepage": "https://github.com/Vollmond148259/eslint-plugin-power-esrules#readme"
+  "homepage": "https://github.com/Vollmond148259/eslint-plugin-power-esrules#readme",
+  "devDependencies": {
+    "eslint": "^8.57.1"
+  }
 }

package/tests/props-destructuring-sort.test.js

@@ -0,0 +1,157 @@
+const { RuleTester } = require("eslint");
+const rule = require("../lib/rules/props-destructuring-sort");
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: "module",
+    ecmaFeatures: { jsx: true },
+  },
+});
+
+ruleTester.run("props-destructuring-sort", rule, {
+  valid: [
+  {
+    name: "sorted destructuring from props in functional component",
+    code: `
+      function MyComponent(props) {
+        const { alpha, beta } = props;
+        return <div>{alpha}{beta}</div>;
+      }
+    `,
+  },
+  {
+    name: "single property from props",
+    code: `
+      function MyComponent(props) {
+        const { only } = props;
+        return <div>{only}</div>;
+      }
+    `,
+  },
+  {
+    name: "unsorted props outside React component",
+    code: `
+      function util(props) {
+        const { z, a } = props;
+        return z + a;
+      }
+    `,
+  },
+  {
+    name: "sorted params in arrow component",
+    code: `
+      const MyComponent = ({ alpha, beta }) => <div>{alpha}{beta}</div>;
+    `,
+  },
+  {
+    name: "sorted this.props in class component",
+    code: `
+      class MyComponent extends React.Component {
+        render() {
+          const { alpha, beta } = this.props;
+          return <div>{alpha}{beta}</div>;
+        }
+      }
+    `,
+  },
+  {
+    name: "rest element last when already sorted",
+    code: `
+      function MyComponent(props) {
+        const { alpha, beta, ...rest } = props;
+        return <div>{alpha}</div>;
+      }
+    `,
+  },
+  ],
+
+  invalid: [
+  {
+    name: "const from props in functional component",
+    code: `
+      function MyComponent(props) {
+        const { zebra, alpha } = props;
+        return <div>{zebra}{alpha}</div>;
+      }
+    `,
+    output: `
+      function MyComponent(props) {
+        const { alpha, zebra } = props;
+        return <div>{zebra}{alpha}</div>;
+      }
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  {
+    name: "destructured params in function declaration",
+    code: `
+      function MyComponent({ zebra, alpha }) {
+        return <div>{zebra}{alpha}</div>;
+      }
+    `,
+    output: `
+      function MyComponent({ alpha, zebra }) {
+        return <div>{zebra}{alpha}</div>;
+      }
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  {
+    name: "destructured params in arrow component with JSX",
+    code: `
+      const MyComponent = ({ zebra, alpha }) => <div>{zebra}{alpha}</div>;
+    `,
+    output: `
+      const MyComponent = ({ alpha, zebra }) => <div>{zebra}{alpha}</div>;
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  {
+    name: "this.props in class component",
+    code: `
+      class MyComponent extends Component {
+        render() {
+          const { zebra, alpha } = this.props;
+          return <div>{zebra}{alpha}</div>;
+        }
+      }
+    `,
+    output: `
+      class MyComponent extends Component {
+        render() {
+          const { alpha, zebra } = this.props;
+          return <div>{zebra}{alpha}</div>;
+        }
+      }
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  {
+    name: "rest stays last after sort",
+    code: `
+      function MyComponent(props) {
+        const { zebra, alpha, ...rest } = props;
+        return <div>{zebra}</div>;
+      }
+    `,
+    output: `
+      function MyComponent(props) {
+        const { alpha, zebra, ...rest } = props;
+        return <div>{zebra}</div>;
+      }
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  {
+    name: "memo-wrapped component params",
+    code: `
+      const MyComponent = memo(({ zebra, alpha }) => <div>{zebra}</div>);
+    `,
+    output: `
+      const MyComponent = memo(({ alpha, zebra }) => <div>{zebra}</div>);
+    `,
+    errors: [{ messageId: "incorrectOrder" }],
+  },
+  ],
+});