power-linter 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 # power-linter
 
-power-linter — собственный линтер (ESLint) и форматтер (Prettier) с расширяемой архитектурой для произвольных правил.
+power-linter — линтер (ESLint) и форматтер (Prettier) с расширяемой архитектурой для произвольных правил.
 
 - конфиги eslint и prettier из коробки
 - кастомные правила-линтера (see `eslint-plugin-rules`)

package/package.json

@@ -1,50 +1,43 @@
 {
-  "name": "power-linter",
-  "version": "1.0.0",
-  "description": "power-linter — линтер (ESLint) и форматтер (Prettier) с расширяемой архитектурой для произвольных правил.",
-  "main": "src/index.js",
-  "author": "vollmond148259",
-  "license": "MIT",
-  "keywords": [
-    "eslint",
-    "prettier",
-    "linter",
-    "config",
-    "eslint-plugin",
-    "eslint-config",
-    "eslint-rules",
-    "custom-rules",
-    "code-style"
-  ],
-  "dependencies": {
-    "eslint": "^8.56.0",
-    "prettier": "^3.2.5",
-    "@babel/eslint-parser": "^7.19.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-rules": "file:./eslint-plugin-rules",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0"
-  },
-  "peerDependencies": {
-    "eslint": "^8.0.0"
-  },
-  "files": [
-    "src/"
-  ],
-  "scripts": {
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --config src/eslint/config.js",
-    "format": "prettier --write .",
-    "codemod:classToFC": "node scripts/classToFC/run-codemod.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Vollmond148259/power-linter.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Vollmond148259/power-linter/issues"
-  },
-  "homepage": "https://github.com/Vollmond148259/power-linter#readme"
+    "name": "power-linter",
+    "version": "1.0.2",
+    "description": "power-linter — линтер (ESLint) и форматтер (Prettier) с расширяемой архитектурой для произвольных правил.",
+    "main": "src/index.js",
+    "author": "",
+    "license": "MIT",
+    "keywords": [
+        "eslint",
+        "prettier",
+        "linter",
+        "config",
+        "eslint-plugin",
+        "eslint-config",
+        "eslint-rules",
+        "custom-rules",
+        "code-style"
+    ],
+    "dependencies": {
+        "eslint": "^8.56.0",
+        "prettier": "^3.2.5",
+        "@babel/eslint-parser": "^7.19.1",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-rules": "file:./eslint-plugin-rules-1.0.0.tgz",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
+    },
+    "peerDependencies": {
+        "eslint": "^8.0.0"
+    },
+    "files": [
+        "src/",
+        "scripts/"
+    ],
+    "scripts": {
+        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --config src/eslint/config.js",
+        "format": "prettier --write .",
+        "codemod:classToFC": "node scripts/classToFC/run-codemod.js"
+    }
 }

package/scripts/classToFC/class-to-functional.js

@@ -0,0 +1,463 @@
+/**
+ * Codemod для преобразования классовых React компонентов в функциональные
+ *
+ * Условия применения:
+ * - Компонент не использует this.state
+ * - Компонент имеет от 1 до 4 методов класса
+ * - Компонент не имеет сложных lifecycle методов
+ *
+ * Использование:
+ * npm run codemod:classToFC -- <file-path>
+ */
+
+/**
+ * Проверяет, является ли класс React компонентом
+ */
+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;
+}
+
+/**
+ * Проверяет, содержит ли узел использование this.state или this.setState
+ */
+function hasStateUsage(node, j) {
+    let hasState = false;
+    j(node)
+        .find(j.MemberExpression, {
+            object: { type: 'ThisExpression' },
+            property: { name: 'state' },
+        })
+        .forEach(() => {
+            hasState = true;
+        });
+    j(node)
+        .find(j.CallExpression, {
+            callee: {
+                type: 'MemberExpression',
+                object: { type: 'ThisExpression' },
+                property: { name: 'setState' },
+            },
+        })
+        .forEach(() => {
+            hasState = true;
+        });
+    return hasState;
+}
+
+/**
+ * Получает имя компонента
+ */
+function getComponentName(node, j, path) {
+    if (node.type === 'ClassDeclaration' && node.id) {
+        return node.id.name;
+    }
+    if (node.type === 'ClassExpression') {
+        let currentPath = path;
+        while (currentPath) {
+            const { parent } = currentPath;
+            if (parent && parent.value) {
+                if (parent.value.type === 'VariableDeclarator' && parent.value.id) {
+                    return parent.value.id.name;
+                }
+                if (parent.value.type === 'ExportDefaultDeclaration') {
+                    return null;
+                }
+            }
+            currentPath = parent;
+        }
+    }
+    return null;
+}
+
+/**
+ * Проверяет, является ли метод методом жизненного цикла
+ */
+function isLifecycleMethod(methodName) {
+    const lifecycleMethods = [
+        'componentDidMount',
+        'componentDidUpdate',
+        'componentWillUnmount',
+        'componentWillMount',
+        'componentWillReceiveProps',
+        'UNSAFE_componentWillMount',
+        'UNSAFE_componentWillReceiveProps',
+        'UNSAFE_componentWillUpdate',
+        'shouldComponentUpdate',
+        'getSnapshotBeforeUpdate',
+    ];
+    return lifecycleMethods.includes(methodName) || methodName.startsWith('component');
+}
+
+/**
+ * Преобразует методы класса в функции внутри компонента
+ */
+function convertMethodsToFunctions(classBody) {
+    const methods = [];
+    const lifecycleMethods = [];
+    const staticProperties = [];
+    classBody.body.forEach((member) => {
+        if (member.type === 'MethodDefinition') {
+            const methodName = member.key.name;
+            if (methodName === 'render' || methodName === 'constructor') {
+                return;
+            }
+            if (isLifecycleMethod(methodName)) {
+                lifecycleMethods.push(member);
+            } else {
+                methods.push(member);
+            }
+        } else if (member.type === 'Property' || member.type === 'ClassProperty') {
+            if (member.static) {
+                staticProperties.push(member);
+            } else if (member.key && member.key.name !== 'render') {
+                const methodName = member.key.name;
+                if (isLifecycleMethod(methodName)) {
+                    lifecycleMethods.push(member);
+                } else {
+                    methods.push(member);
+                }
+            }
+        }
+    });
+    return { methods, lifecycleMethods, staticProperties };
+}
+
+/**
+ * Заменяет this.props на props в узле
+ */
+function replaceThisProps(node, j) {
+    j(node)
+        .find(j.MemberExpression, {
+            object: { type: 'ThisExpression' },
+            property: { name: 'props' },
+        })
+        .replaceWith(() => j.identifier('props'));
+}
+
+/**
+ * Заменяет this.methodName на methodName
+ */
+function replaceThisMethods(node, methodNames, j) {
+    methodNames.forEach((methodName) => {
+        j(node)
+            .find(j.MemberExpression, {
+                object: { type: 'ThisExpression' },
+                property: { name: methodName },
+            })
+            .replaceWith(() => j.identifier(methodName));
+    });
+}
+
+/**
+ * Преобразует методы жизненного цикла в хуки React
+ */
+function convertLifecycleMethodsToHooks(lifecycleMethods, j) {
+    const hooks = [];
+    let needsUseEffect = false;
+    lifecycleMethods.forEach((method) => {
+        const methodName = method.key.name;
+        let methodBody;
+        if (method.type === 'MethodDefinition') {
+            methodBody = method.value.body;
+        } else if (method.type === 'Property' || method.type === 'ClassProperty') {
+            methodBody = method.value.body;
+        }
+        if (!methodBody) {
+            return;
+        }
+        replaceThisProps(methodBody, j);
+        if (methodName === 'componentDidMount') {
+            needsUseEffect = true;
+            hooks.push(
+                j.expressionStatement(
+                    j.callExpression(j.identifier('useEffect'), [
+                        j.arrowFunctionExpression([], methodBody),
+                        j.arrayExpression([]),
+                    ])
+                )
+            );
+        } else if (methodName === 'componentWillUnmount') {
+            needsUseEffect = true;
+            let cleanupFunction;
+            if (methodBody.type === 'BlockStatement') {
+                cleanupFunction = j.arrowFunctionExpression([], methodBody);
+            } else {
+                cleanupFunction = j.arrowFunctionExpression([], j.blockStatement([j.returnStatement(methodBody)]));
+            }
+            const effectBody = j.blockStatement([j.returnStatement(cleanupFunction)]);
+            hooks.push(
+                j.expressionStatement(
+                    j.callExpression(j.identifier('useEffect'), [
+                        j.arrowFunctionExpression([], effectBody),
+                        j.arrayExpression([]),
+                    ])
+                )
+            );
+        } else if (methodName === 'componentDidUpdate') {
+            needsUseEffect = true;
+            const params = method.type === 'MethodDefinition' ? method.value.params : method.value.params || [];
+            if (params.length > 0) {
+                hooks.push(
+                    j.expressionStatement(
+                        j.callExpression(j.identifier('useEffect'), [
+                            j.arrowFunctionExpression([], methodBody),
+                            j.arrayExpression([j.identifier('props')]),
+                        ])
+                    )
+                );
+            } else {
+                hooks.push(
+                    j.expressionStatement(
+                        j.callExpression(j.identifier('useEffect'), [j.arrowFunctionExpression([], methodBody)])
+                    )
+                );
+            }
+        } else if (methodName === 'UNSAFE_componentWillReceiveProps' || methodName === 'componentWillReceiveProps') {
+            needsUseEffect = true;
+            const params = method.type === 'MethodDefinition' ? method.value.params : method.value.params || [];
+            if (params.length > 0 && params[0].name) {
+                j(methodBody)
+                    .find(j.Identifier, { name: params[0].name })
+                    .replaceWith(() => j.identifier('props'));
+            }
+            hooks.push(
+                j.expressionStatement(
+                    j.callExpression(j.identifier('useEffect'), [
+                        j.arrowFunctionExpression([], methodBody),
+                        j.arrayExpression([j.identifier('props')]),
+                    ])
+                )
+            );
+        }
+    });
+
+    return { hooks, needsUseEffect };
+}
+
+/**
+ * Создает функциональный компонент из классового
+ */
+function createFunctionalComponent(classNode, j, path) {
+    const className = getComponentName(classNode, j, path);
+    const classBody = classNode.body;
+    if (hasStateUsage(classNode, j)) {
+        return null;
+    }
+    const { methods, lifecycleMethods, staticProperties } = convertMethodsToFunctions(classBody);
+    const renderMethod = classBody.body.find((member) => {
+        if (member.type === 'MethodDefinition' && member.key.name === 'render') {
+            return true;
+        }
+        return (
+            (member.type === 'Property' || member.type === 'ClassProperty') &&
+            member.key &&
+            member.key.name === 'render'
+        );
+    });
+    if (!renderMethod) {
+        return null;
+    }
+    let renderBody;
+    if (renderMethod.type === 'MethodDefinition') {
+        renderBody = renderMethod.value.body;
+    } else {
+        renderBody = renderMethod.value.body;
+    }
+    if (!renderBody) {
+        return null;
+    }
+    const { hooks, needsUseEffect } = convertLifecycleMethodsToHooks(lifecycleMethods, j);
+    const componentStatements = [];
+    const methodNames = [];
+    componentStatements.push(...hooks);
+    methods.forEach((method) => {
+        const methodName = method.key.name;
+        methodNames.push(methodName);
+        let methodBody;
+        let isArrow = false;
+        let params = [];
+        if (method.type === 'MethodDefinition') {
+            methodBody = method.value.body;
+            params = method.value.params || [];
+        } else if (method.type === 'Property' || method.type === 'ClassProperty') {
+            if (method.value.type === 'ArrowFunctionExpression') {
+                methodBody = method.value.body;
+                params = method.value.params || [];
+                isArrow = true;
+            } else {
+                methodBody = method.value.body;
+                params = method.value.params || [];
+            }
+        }
+        if (methodBody) {
+            replaceThisProps(methodBody, j);
+            replaceThisMethods(methodBody, methodNames, j);
+            if (isArrow || method.type === 'Property' || method.type === 'ClassProperty') {
+                componentStatements.push(
+                    j.variableDeclaration('const', [
+                        j.variableDeclarator(j.identifier(methodName), j.arrowFunctionExpression(params, methodBody)),
+                    ])
+                );
+            } else {
+                componentStatements.push(
+                    j.variableDeclaration('const', [
+                        j.variableDeclarator(j.identifier(methodName), j.functionExpression(null, params, methodBody)),
+                    ])
+                );
+            }
+        }
+    });
+    replaceThisProps(renderBody, j);
+    replaceThisMethods(renderBody, methodNames, j);
+    let componentBody;
+    if (renderBody.type === 'BlockStatement') {
+        componentBody = j.blockStatement([...componentStatements, ...renderBody.body]);
+    } else {
+        componentBody = j.blockStatement([...componentStatements, j.returnStatement(renderBody)]);
+    }
+    const componentParams = [j.identifier('props')];
+    const arrowFunction = j.arrowFunctionExpression(componentParams, componentBody);
+    let componentDeclaration;
+    if (className) {
+        componentDeclaration = j.variableDeclaration('const', [
+            j.variableDeclarator(j.identifier(className), arrowFunction),
+        ]);
+    } else {
+        componentDeclaration = j.variableDeclaration('const', [
+            j.variableDeclarator(j.identifier('Component'), arrowFunction),
+        ]);
+    }
+    const result = [componentDeclaration];
+    if (staticProperties.length > 0 && className) {
+        staticProperties.forEach((staticProp) => {
+            const propName = staticProp.key.name;
+            result.push(
+                j.expressionStatement(
+                    j.assignmentExpression(
+                        '=',
+                        j.memberExpression(j.identifier(className), j.identifier(propName)),
+                        staticProp.value
+                    )
+                )
+            );
+        });
+    }
+    return { result, needsUseEffect };
+}
+
+module.exports = function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let hasTransformations = false;
+    let needsUseEffect = false;
+    root.find(j.ClassDeclaration).forEach((path) => {
+        if (isReactComponentClass(path.node)) {
+            const transformed = createFunctionalComponent(path.node, j, path);
+            if (transformed) {
+                j(path).replaceWith(...transformed.result);
+                if (transformed.needsUseEffect) {
+                    needsUseEffect = true;
+                }
+                hasTransformations = true;
+            }
+        }
+    });
+    root.find(j.ClassExpression).forEach((path) => {
+        if (isReactComponentClass(path.node)) {
+            const transformed = createFunctionalComponent(path.node, j, path);
+            if (transformed) {
+                const parent = path.parent.value;
+                if (parent && parent.type === 'ReturnStatement') {
+                    const arrowFunction = transformed.result[0].declarations[0].init;
+                    j(path.parent).replaceWith(j.returnStatement(arrowFunction));
+                } else if (parent && parent.type === 'VariableDeclarator') {
+                    j(path.parent.parent).replaceWith(...transformed.result);
+                } else {
+                    j(path).replaceWith(...transformed.result);
+                }
+                if (transformed.needsUseEffect) {
+                    needsUseEffect = true;
+                }
+                hasTransformations = true;
+            }
+        }
+    });
+    root.find(j.ImportDeclaration, {
+        source: { value: 'react' },
+    }).forEach((path) => {
+        const specifiers = path.value.specifiers || [];
+        const componentSpecifier = specifiers.find(
+            (s) => s.type === 'ImportSpecifier' && s.imported.name === 'Component'
+        );
+        const useEffectSpecifier = specifiers.find(
+            (s) => s.type === 'ImportSpecifier' && s.imported.name === 'useEffect'
+        );
+        if (needsUseEffect && !useEffectSpecifier) {
+            const newSpecifier = j.importSpecifier(j.identifier('useEffect'));
+            if (specifiers.length === 0) {
+                path.value.specifiers = [newSpecifier];
+            } else {
+                path.value.specifiers.push(newSpecifier);
+            }
+        }
+        if (componentSpecifier) {
+            const componentName = componentSpecifier.local.name;
+            const hasOtherUsage = root.find(j.Identifier, { name: componentName }).some((p) => {
+                const parent = p.parent.value;
+                return (
+                    parent.type !== 'ImportSpecifier' ||
+                    (parent.type === 'ImportSpecifier' && parent.imported.name !== 'Component')
+                );
+            });
+            if (!hasOtherUsage) {
+                const newSpecifiers = specifiers.filter((s) => s !== componentSpecifier);
+                if (newSpecifiers.length === 0) {
+                    const hasDefault = specifiers.some(
+                        (s) => s.type === 'ImportDefaultSpecifier' || s.type === 'ImportNamespaceSpecifier'
+                    );
+                    if (!hasDefault) {
+                        j(path).remove();
+                    } else {
+                        path.value.specifiers = newSpecifiers;
+                    }
+                } else {
+                    path.value.specifiers = newSpecifiers;
+                }
+            }
+        }
+    });
+    if (needsUseEffect) {
+        const reactImports = root.find(j.ImportDeclaration, {
+            source: { value: 'react' },
+        });
+        if (reactImports.length === 0) {
+            const useEffectImport = j.importDeclaration(
+                [j.importSpecifier(j.identifier('useEffect'))],
+                j.literal('react')
+            );
+            root.find(j.Program).get('body', 0).insertBefore(useEffectImport);
+        }
+    }
+    return hasTransformations ? root.toSource({ quote: 'single', trailingComma: true }) : null;
+};

package/scripts/classToFC/run-codemod.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+/**
+ * Обертка для запуска codemod скрипта
+ *
+ * Использование:
+ * npm run codemod:classToFC -- <file-path>
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const filePath = process.argv[2];
+if (!filePath) {
+    console.error('Ошибка: Укажите путь к файлу для преобразования');
+    console.error('Использование: npm run codemod:classToFC -- <file-path>');
+    process.exit(1);
+}
+// Определяем корень проекта: если запускаемся из power-linter, используем родительскую директорию
+const currentDir = process.cwd();
+const isPowerLinterDir = currentDir.endsWith('power-linter') || path.basename(currentDir) === 'power-linter';
+const projectRoot = isPowerLinterDir ? path.join(currentDir, '..') : currentDir;
+const absolutePath = path.isAbsolute(filePath) ? filePath : path.join(projectRoot, filePath);
+if (!fs.existsSync(absolutePath)) {
+    console.error(`Ошибка: Файл не найден: ${absolutePath}`);
+    process.exit(1);
+}
+const ext = path.extname(absolutePath);
+if (!['.js', '.jsx', '.ts', '.tsx'].includes(ext)) {
+    console.error(`Ошибка: Файл должен иметь расширение .js, .jsx, .ts или .tsx`);
+    process.exit(1);
+}
+const codemodPath = path.join(__dirname, 'class-to-functional.js');
+// eslint-disable-next-line no-console
+console.log(`Преобразование файла: ${filePath}`);
+// eslint-disable-next-line no-console
+console.log(`Использование codemod: ${codemodPath}`);
+try {
+    const command = `npx jscodeshift -t "${codemodPath}" "${absolutePath}"`;
+    // eslint-disable-next-line no-console
+    console.log(`Выполнение: ${command}`);
+    execSync(command, {
+        stdio: 'inherit',
+        cwd: projectRoot,
+    });
+    // eslint-disable-next-line no-console
+    console.log('\n✓ Преобразование завершено успешно!');
+    // eslint-disable-next-line no-console
+    console.log('Проверьте файл и при необходимости внесите ручные исправления.');
+} catch (error) {
+    console.error('\n✗ Ошибка при выполнении преобразования:', error.message);
+    process.exit(1);
+}