feat: support ESLint Flat Configs

[arthurgeron]

feat: support ESLint Flat Configs

• Closes Support flat config #50

Key Changes

• Added support for ESLint v9 flat configs (eslint.config.js) + compatibility layer between ESLint v8 and v9

Maintained backward compatibility with ESLint v8 traditional configs (.eslintrc.js)

• Created example projects demonstrating implementation in both configurations
• Test cases were extracted into isolate modules that are now ran on both ESLint V8 and V9 to verify compatibility and avoid regressions
• Updated plugin to export in both CommonJS and ESM formats
• Included detailed migration guide for users upgrading to ESLint v9
• Fixed Husky pre-commit hooks to properly validate code

Technical Implementation

The implementation uses a compatibility layer to handle differences between ESLint v8 and v9 APIs, particularly around rule context, scope handling, and configuration formats. This allows the same rule logic to work seamlessly in both environments without code duplication.

New Example Projects

Example projects' configurations now include custom rule options demonstrating how to:

• Ignore specific components with ignoredComponents
• Exclude props from memo requirements with ignoredPropNames
• Configure strictness of checks with strict option
• Customize hook behavior with ignoredHookCallsNames

Documentation Updates

• Added migration guide for transitioning to ESLint v9
• Updated README with configuration examples for both formats
• Included examples demonstrating proper usage
• Added ESLint guidelines and best practices documentation

Testing

All rule functionality has been tested with both ESLint v8 and v9 configurations to ensure consistent behavior across environments. The test suite includes:

• Shared test cases for all rules
• Separate test runners for ESLint v8 and v9
• Example projects with working configurations

Developer Impact

Possible approaches:

1. Continue using the plugin with ESLint v8 traditional configs
2. Migrate to ESLint v9 flat configs when ready
3. Follow the migration guide now for a smooth transition

Utilize enhanced rule options for more granular control

This version has been tagged as 2.5.0--beta5 for testing before the final release.

[sedlukha]

Hey @arthurgeron , I really appreciate the work you're doing on this plugin! I'd be happy to help test it early and provide feedback if that would be helpful. Thanks!

[arthurgeron]

Thank you, @sedlukha.
I'd appreciate if you could test 2.5.0--beta1 release and give some feedback.

[sedlukha]

@arthurgeron when i try to use

Option 2: Using the recommended config

import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
export default [
  // Other configs...
  flatConfig.configs.recommended,
];

it returns error:

Oops! Something went wrong! :(

ESLint: 9.22.0


A config object has a "plugins" key defined as an array of strings. It looks something like this:

    {
        "plugins": ["@arthurgeron/react-usememo"]
    }

Flat config requires "plugins" to be an object, like this:

    {
        plugins: {
            @arthurgeron/react-usememo: pluginObject
        }
    }

[sedlukha]

@arthurgeron this type of config

Option 1: Importing the default config

import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
export default [
  {
    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true,
      },
    },
    plugins: {
      '@arthurgeron/react-usememo': flatConfig,
    },
    rules: {
      '@arthurgeron/react-usememo/require-usememo': 'error',
      '@arthurgeron/react-usememo/require-memo': 'error',
      '@arthurgeron/react-usememo/require-usememo-children': 'error',
    },
  },
];

fails with error too:

Oops! Something went wrong! :(

ESLint: 9.22.0

TypeError: Key "languageOptions": Unexpected key "ecmaFeatures" found.

but without ecmaFeatures if fails with next error:

Oops! Something went wrong! :(

ESLint: 9.22.0

TypeError: context.getScope is not a function
Occurred while linting ...pathToFile
Rule: "@arthurgeron/react-usememo/require-usememo-children"

[rakleed]

@arthurgeron I recommend checking this migration guide: https://eslint.org/docs/latest/extend/plugin-migration-flat-config, seems like you skip some parts of it

[arthurgeron]

I'm figuring out a way to test both V8 and V9, but there are many dependencies related. I might have to only support v9 and make this a new major.

[sedlukha]

@arthurgeron could you please create new beta release? i will test on my projects

[arthurgeron]

@arthurgeron could you please create new beta release? i will test on my projects

Surely, just keep in mind not all rules are working with ESLint V9, yet.
I've also added a example project with ESLint's Flat Config.

@2.5.0--beta3 has been released.

[arthurgeron]

@sedlukha could you please test @2.5.0--beta4?

[arthurgeron]

Looking for volunteers to test out @2.5.0--beta5 as the final beta before the release.