Merge pull request #31 from alexey-koran/develop

0.3.0

.husky/pre-commit

@@ -1,3 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 pnpm lint-staged

.nvmrc

@@ -1 +1 @@
-20.5.1
+22.4.1

.vscode/settings.json

@@ -16,7 +16,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "editor.quickSuggestions": {
@@ -47,15 +47,15 @@
   "css.validate": false,
   "less.validate": false,
   "scss.validate": false,
-  "eslint.experimental.useFlatConfig": true,
+  "eslint.useFlatConfig": true,
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.expand": false,
   "explorer.fileNesting.patterns": {
     "*.ts": "${capture}.ts",
     "*.tsx": "${capture}.module.pcss, ${capture}.ts, index.ts",
     ".env": "*.env, .env.*, .envrc, env.d.ts",
     ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
-    "webpack.config.*": "*.env, .env.*, .envrc, .postcssrc*, eslint.*, env.d.ts, postcss.config.*, prettier.*, svgo.config.*, stylelint.config.*, tailwind.config.*",
+    "webpack.config.*": "*.env, .env.*, .envrc, eslint.*, env.d.ts, postcss.config.*, prettier.*, svgo.config.*, stylelint.config.*, tailwind.config.*",
     "package.json": ".browserslist*, .commitlint*, .editorconfig, .eslint*, .github*, .lintstagedrc*, .npm*, .nvmrc, .pnpm*, package-lock.json, .prettier*, .stylelint*, .vscode*, commitlint*, lint-staged*, pnpm*, tsconfig.*",
     "README*": "AUTHORS, BACKERS*, CHANGELOG*, CITATION*, CODE_OF_CONDUCT*, CODEOWNERS, CONTRIBUTING*, CONTRIBUTORS, COPYING, CREDITS, GOVERNANCE.MD, HISTORY.MD, LICENSE*, MAINTAINERS, SECURITY.MD, SPONSORS*",
     "readme*": "authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, security.md, sponsors*",

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Alexey Koran
+Copyright (c) 2024 Alexey Koran
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,9 +2,9 @@
 
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHVzZSB4bGluazpocmVmPSIjYSIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNjI1IDEuNSkiLz4KICA8ZGVmcz4KICAgIDxwYXRoIGlkPSJhIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS40MjQuNzY4YTcgNyAwIDEgMCAzLjY1OCAxMC45NTdBOCA4IDAgMSAxIDExLjQyNC43NjhaIi8+CiAgICA8cGF0aCBpZD0iYiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC41NjguNTc2YTUuMjUgNS4yNSAwIDEgMCAyLjc0MyA4LjIxOEE2IDYgMCAxIDEgOC41NjguNTc2WiIvPgogIDwvZGVmcz4KPC9zdmc+Cg==)](CODE_OF_CONDUCT.md)
 
-[![Minimum node version](https://img.shields.io/badge/min%20node-16.20.1-orange?style=for-the-badge&logo=node.js)](https://nodejs.org/en/) [![Minimum npm version](https://img.shields.io/badge/min%20npm-8.19.4-orange?style=for-the-badge&logo=npm)](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+[![Minimum node version](https://img.shields.io/badge/min%20node-20.15.1-orange?style=for-the-badge&logo=node.js)](https://nodejs.org/en/) [![Minimum npm version](https://img.shields.io/badge/min%20npm-10.7.0-orange?style=for-the-badge&logo=npm)](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 
-[![Recommended node version](https://img.shields.io/badge/rec%20node-20.5.1-blue?style=for-the-badge&logo=node.js)](https://nodejs.org/en/) [![Recommended pnpm](https://img.shields.io/badge/rec%20pnpm-8.6.12-blue?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
+[![Recommended node version](https://img.shields.io/badge/rec%20node-22.4.1-blue?style=for-the-badge&logo=node.js)](https://nodejs.org/en/) [![Recommended pnpm](https://img.shields.io/badge/rec%20pnpm-9.5.0-blue?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
 
 **AS A PACKAGE MANAGER, I HIGHLY RECOMMEND USING** [PNPM](https://pnpm.io/)
 
@@ -80,19 +80,19 @@ pnpm prettier
 pnpm prettier:fix
 ```
 
-**Start eslint check on all files**
+**Start ESLint check on all files**
 
 ```bash
 pnpm lint
 ```
 
-**Start eslint autofix on all files**
+**Start ESLint autofix on all files**
 
 ```bash
 pnpm lint:fix
 ```
 
-**Start eslint autofix only on git staged files**
+**Start ESLint autofix only on git staged files**
 
 ```bash
 pnpm lint:fix-staged
@@ -116,13 +116,25 @@ pnpm lint:css:fix
 pnpm lint:css:fix-staged
 ```
 
-**Start prettier, eslint & stylelint check processes in order**
+**Start ESLint config inspector**
+
+```bash
+pnpm test:eslint-config
+```
+
+**Start Webpack config test**
+
+```bash
+pnpm test:webpack-config
+```
+
+**Start prettier, ESLint & stylelint check processes in order**
 
 ```bash
 pnpm lint-all
 ```
 
-**Start prettier, eslint & stylelint autofix processes in order**
+**Start prettier, ESLint & stylelint autofix processes in order**
 
 ```bash
 pnpm fix-all
@@ -148,4 +160,20 @@ pnpm svgo-all
 
 # Known issues:
 
-Temporary disabled postcss stylelint due to that it and stylelint-prettier don't support ESM
+Temporary disabled postcss stylelint (still buggy)
+
+Unstable packages (rc, beta & etc.):
+
+- [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
+- [@stylistic/eslint-plugin-js, @stylistic/eslint-plugin-jsx, @stylistic/eslint-plugin-ts](https://eslint.style/)
+- [typescript-eslint](https://www.npmjs.com/package/typescript-eslint)
+
+Unmet peer [email protected] for ESLint plugins (wait ESLint v9 support releases):
+
+- [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import)
+- [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)
+- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
+
+Use fixupPluginRules from [@eslint/compat](https://www.npmjs.com/package/@eslint/compat) to fix [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import) plugin rules
+
+Archived [postcss-assets](https://www.npmjs.com/package/postcss-assets) plugin

eslint.config.js

@@ -1,22 +1,21 @@
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
 import reactPlugin from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 
 import reactConfig from 'eslint-plugin-react/configs/recommended.js';
 
+import { fixupPluginRules } from '@eslint/compat';
 import eslint from '@eslint/js';
-import typescriptEslintPlugin from '@typescript-eslint/eslint-plugin';
-import typescriptEslintParser from '@typescript-eslint/parser';
-import prettierConfig from 'eslint-config-prettier';
+import stylisticJS from '@stylistic/eslint-plugin-js';
+import stylisticJSX from '@stylistic/eslint-plugin-jsx';
+import stylisticTS from '@stylistic/eslint-plugin-ts';
+// ESLint v9 compatibility utilities
 import pluginImport from 'eslint-plugin-import';
 import pluginImportConfig from 'eslint-plugin-import/config/recommended.js';
 import reactAccessibility from 'eslint-plugin-jsx-a11y';
 import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
-
-const projectDirname = dirname(fileURLToPath(import.meta.url));
+import typescriptEslint from 'typescript-eslint';
 
 const allJsExtensions = 'js,mjs,cjs,jsx,mjsx';
 const allTsExtensions = 'ts,mts,cts,tsx,mtsx';
@@ -46,6 +45,10 @@ const getTsNamingConventionRule = ({ isTsx }) => ({
       leadingUnderscore: 'forbid',
       trailingUnderscore: 'forbid',
     },
+    {
+      selector: 'import',
+      format: ['camelCase', 'PascalCase'],
+    },
     {
       selector: 'variable',
       format: ['strictCamelCase', 'UPPER_CASE', ...(isTsx ? ['StrictPascalCase'] : [])],
@@ -144,6 +147,7 @@ const baseRules = {
   'no-lone-blocks': 2,
   'no-self-compare': 2,
   'no-useless-call': 2,
+  'no-useless-assignment': 2,
   'no-multi-assign': 2,
   'no-new-wrappers': 2,
   'no-octal-escape': 2,
@@ -153,7 +157,6 @@ const baseRules = {
   'no-negated-condition': 2,
   'no-implicit-coercion': 2,
   'no-constructor-return': 2,
-  'newline-per-chained-call': 2,
   'no-promise-executor-return': 2,
   'no-new-native-nonconstructor': 2,
   'no-unmodified-loop-condition': 2,
@@ -265,7 +268,14 @@ const baseRules = {
       allowArrowFunctions: true,
     },
   ],
-  'spaced-comment': [
+  'array-callback-return': [
+    2,
+    {
+      allowImplicit: true,
+      checkForEach: true,
+    },
+  ],
+  '@stylistic/js/spaced-comment': [
     2,
     'always',
     {
@@ -278,13 +288,7 @@ const baseRules = {
       },
     },
   ],
-  'array-callback-return': [
-    2,
-    {
-      allowImplicit: true,
-      checkForEach: true,
-    },
-  ],
+  '@stylistic/js/newline-per-chained-call': 2,
 };
 
 const importRules = {
@@ -428,7 +432,6 @@ const typescriptRules = {
 
   // typescript-eslint/strict rules, default warn
   '@typescript-eslint/prefer-includes': 2,
-  '@typescript-eslint/no-throw-literal': 2,
   '@typescript-eslint/no-base-to-string': 2,
   '@typescript-eslint/no-dynamic-delete': 2,
   '@typescript-eslint/unified-signatures': 2,
@@ -437,13 +440,14 @@ const typescriptRules = {
   '@typescript-eslint/no-invalid-void-type': 2,
   '@typescript-eslint/prefer-function-type': 2,
   '@typescript-eslint/prefer-optional-chain': 2,
-  '@typescript-eslint/prefer-ts-expect-error': 2,
   '@typescript-eslint/no-unnecessary-condition': 2,
   '@typescript-eslint/consistent-type-definitions': 2,
   '@typescript-eslint/prefer-reduce-type-parameter': 2,
   '@typescript-eslint/consistent-indexed-object-style': 2,
   '@typescript-eslint/consistent-generic-constructors': 2,
   '@typescript-eslint/no-unnecessary-boolean-literal-compare': 2,
+  '@typescript-eslint/ban-ts-comment': 2,
+  '@typescript-eslint/only-throw-error': 2,
   '@typescript-eslint/array-type': [
     2,
     {
@@ -543,7 +547,7 @@ const typescriptRules = {
       enforceForJSX: true,
     },
   ],
-  '@typescript-eslint/padding-line-between-statements': [
+  '@stylistic/ts/padding-line-between-statements': [
     2,
     {
       blankLine: 'always',
@@ -582,7 +586,6 @@ const reactRules = {
   'react/jsx-props-no-spreading': 0,
 
   'react/jsx-fragments': 2,
-  'react/jsx-pascal-case': 2,
   'react/no-array-index-key': 2,
   'react-hooks/rules-of-hooks': 2,
   'react-hooks/exhaustive-deps': 2,
@@ -595,16 +598,6 @@ const reactRules = {
       allowDestructuredState: true,
     },
   ],
-  'react/jsx-sort-props': [
-    2,
-    {
-      callbacksLast: true,
-      ignoreCase: true,
-      noSortAlphabetically: true,
-      multiline: 'last',
-      reservedFirst: false,
-    },
-  ],
   'react/jsx-no-duplicate-props': [
     2,
     {
@@ -648,6 +641,7 @@ const reactRules = {
     {
       extensions: ['.jsx', '.mjsx', '.tsx', '.mtsx'],
       allow: 'as-needed',
+      ignoreFilesWithoutCode: true,
     },
   ],
   'react/function-component-definition': [
@@ -656,6 +650,17 @@ const reactRules = {
       namedComponents: 'arrow-function',
     },
   ],
+  '@stylistic/jsx/jsx-pascal-case': 2,
+  '@stylistic/jsx/jsx-sort-props': [
+    2,
+    {
+      callbacksLast: true,
+      ignoreCase: true,
+      noSortAlphabetically: true,
+      multiline: 'last',
+      reservedFirst: false,
+    },
+  ],
 };
 
 const config = [
@@ -672,12 +677,13 @@ const config = [
         ...globals.es2021,
         JSX: 'readonly',
       },
-      parser: typescriptEslintParser,
+      parser: typescriptEslint.parser,
       parserOptions: {
-        // start plugin:@typescript-eslint/recommended-requiring-type-checking
-        tsconfigRootDir: resolve(projectDirname),
-        project: ['./tsconfig.json'],
-        // end plugin:@typescript-eslint/recommended-requiring-type-checking
+        tsconfigRootDir: import.meta.dirname,
+        projectService: {
+          allowDefaultProject: ['./*.ts', './*.mts', './*.cts', './*.tsx', './*.mtsx'],
+          defaultProject: './tsconfig.json',
+        },
         ecmaFeatures: {
           jsx: true, // eslint-plugin-react
         },
@@ -686,11 +692,11 @@ const config = [
     },
     linterOptions: {
       noInlineConfig: true,
-      reportUnusedDisableDirectives: true,
+      reportUnusedDisableDirectives: 'error',
     },
     settings: {
+      'import/ignore': 'node_modules', // Temporary fix https://github.com/typescript-eslint/typescript-eslint/issues/9450
       'import/extensions': allExtensions,
-      'import/external-module-folders': ['node_modules'],
       // start eslint-import-resolver-typescript
       'import/parsers': {
         '@typescript-eslint/parser': ['.ts', '.mts', '.cts', '.tsx', '.mtsx'],
@@ -718,7 +724,13 @@ const config = [
       react: reactPlugin,
       'react-hooks': reactHooks,
       'jsx-a11y': reactAccessibility,
-      import: pluginImport,
+      // TODO: Remove after eslint-plugin-import update
+      // fixupPluginRules wraps each rule in the given plugin using fixupRule()
+      // and returns a new object that represents the plugin with the fixed-up rules
+      import: fixupPluginRules(pluginImport),
+      '@stylistic/js': stylisticJS,
+      '@stylistic/ts': stylisticTS,
+      '@stylistic/jsx': stylisticJSX,
       prettier: prettierPlugin,
     },
     rules: {
@@ -735,22 +747,19 @@ const config = [
   {
     files: [supportedTsFileTypes],
     plugins: {
-      '@typescript-eslint': typescriptEslintPlugin,
+      '@typescript-eslint': typescriptEslint.plugin,
     },
     rules: {
-      ...typescriptEslintPlugin.configs['eslint-recommended'].rules,
-      ...typescriptEslintPlugin.configs.recommended.rules,
-      ...typescriptEslintPlugin.configs['recommended-type-checked'].rules,
-      ...typescriptEslintPlugin.configs.strict.rules,
-      ...typescriptEslintPlugin.configs['strict-type-checked'].rules,
+      ...typescriptEslint.configs['strictTypeChecked'].rules,
+      ...typescriptEslint.configs['stylisticTypeChecked'].rules,
       ...getTsNamingConventionRule({ isTsx: false }),
       ...typescriptRules,
     },
   },
   {
     files: ['**/*.tsx'],
     plugins: {
-      '@typescript-eslint': typescriptEslintPlugin,
+      '@typescript-eslint': typescriptEslint.plugin,
     },
     rules: {
       ...getTsNamingConventionRule({ isTsx: true }),