Rewrite .eslintrc.es6.js to new config format

[MAILPOET-5015]

mailpoet/eslint.config.js

@@ -1,4 +1,5 @@
 const es5Config = require('@mailpoet/eslint-config/eslint-es5.config');
+const es6Config = require('@mailpoet/eslint-config/eslint-es6.config');
 
 module.exports = [
   {
@@ -8,4 +9,8 @@ module.exports = [
     ...config,
     files: ['assets/js/src/**/*.js'],
   })),
+  ...es6Config.map((config) => ({
+    ...config,
+    files: ['assets/js/src/**/*.jsx', 'tests/javascript/**/*.js'],
+  })),
 ];

mailpoet/package.json

@@ -4,8 +4,7 @@
     "extends @wordpress/browserslist-config"
   ],
   "scripts": {
-    "lint": "eslint --max-warnings 0 'assets/js/src/**' && pnpm run lint6 && pnpm run lint-ts && pnpm run lint-tests",
+    "lint": "eslint --max-warnings 0 'assets/js/src/**' && pnpm run lint-ts && pnpm run lint-tests",
-    "lint6": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.es6.js --max-warnings 0 'assets/js/src/**/*.jsx' 'tests/javascript/**/*.js'",
     "lint-ts": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.ts.js --max-warnings 0 'assets/js/src/**/*.tsx' 'assets/js/src/**/*.ts'",
     "lint-tests": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.tests_newsletter_editor.js --max-warnings 0 'tests/javascript_newsletter_editor'",
     "autoprefixer": "postcss assets/dist/css/*.css --use autoprefixer --no-map --replace",
@@ -21,8 +20,7 @@
   },
   "lint-staged": {
     "*.{scss,css}": "pnpm run stylelint",
-    "!(*spec).js": "eslint --max-warnings 0",
+    "!(*spec).{js,jsx}": "eslint --max-warnings 0",
-    "*.jsx": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.es6.js --max-warnings 0",
     "*.{tsx,ts}": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.ts.js --max-warnings 0",
     "**/newsletter_editor/**/*spec.js": "ESLINT_USE_FLAT_CONFIG=false eslint -c ../packages/js/eslint-config/.eslintrc.tests_newsletter_editor.js --max-warnings 0",
     "*.php": [

packages/js/eslint-config/.eslintrc.es6.js

@@ -1,55 +0,0 @@
-module.exports = {
-  extends: ['airbnb', 'plugin:react/jsx-runtime', 'prettier'],
-  env: {
-    amd: true,
-    browser: true,
-    mocha: true,
-  },
-  parser: '@babel/eslint-parser',
-  parserOptions: {
-    ecmaVersion: 6,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  plugins: ['react-hooks', 'no-only-tests'],
-  settings: {
-    'import/resolver': 'webpack',
-  },
-  rules: {
-    // Hooks
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    // Exceptions
-    'no-only-tests/no-only-tests': 2,
-    'no-script-url': 0,
-    'class-methods-use-this': 0,
-    'react/jsx-props-no-spreading': 0,
-    'import/extensions': 0, // we wouldn't be able to import jQuery without this line
-    'import/prefer-default-export': 0, // we want to stop using default exports and start using named exports
-    'react/destructuring-assignment': 0, // that would be too many changes to fix this one
-    'prefer-destructuring': 0, // that would be too many changes to fix this one
-    'jsx-a11y/label-has-for': [
-      2,
-      {
-        required: { some: ['nesting', 'id'] }, // some of our labels are hidden and we cannot nest those
-      },
-    ],
-    'jsx-a11y/anchor-is-valid': 0, // cannot fix this one, it would break wprdpress themes
-    'jsx-a11y/label-has-associated-control': [
-      2,
-      {
-        either: 'either', // control has to be either nested or associated via htmlFor
-      },
-    ],
-    'import/no-default-export': 1, // no default exports
-  },
-  overrides: [
-    {
-      files: ['*.spec.js'],
-      rules: {
-        'no-unused-expressions': 'off',
-      },
-    },
-  ],
-};

packages/js/eslint-config/eslint-es6.config.js

@@ -0,0 +1,67 @@
+const babelParser = require('@babel/eslint-parser');
+const FlatCompat = require('@eslint/eslintrc').FlatCompat;
+const airbnbConfig = require('eslint-config-airbnb');
+const prettierConfig = require('eslint-config-prettier');
+const webpackResolver = require('eslint-import-resolver-webpack');
+const noOnlyTestsPlugin = require('eslint-plugin-no-only-tests');
+const reactJsxRuntimeConfig = require('eslint-plugin-react/configs/jsx-runtime');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const globals = require('globals');
+
+// compat configs
+const compat = new FlatCompat({ baseDirectory: __dirname });
+const airbnbCompatConfig = compat.config(airbnbConfig);
+const prettierCompatConfig = compat.config(prettierConfig);
+
+// React plugin is already defined by airbnb config. This fixes:
+//   TypeError: Key "plugins": Cannot redefine plugin "react"
+delete reactJsxRuntimeConfig.plugins.react;
+
+module.exports = [
+  ...airbnbCompatConfig,
+  reactJsxRuntimeConfig,
+  ...prettierCompatConfig,
+  {
+    languageOptions: {
+      parser: babelParser,
+      globals: {
+        ...globals.browser,
+      },
+    },
+    settings: {
+      'import/resolver': { webpack: webpackResolver },
+    },
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+      'no-only-tests': noOnlyTestsPlugin,
+    },
+    rules: {
+      // Hooks
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      // Exceptions
+      'no-only-tests/no-only-tests': 2,
+      'no-script-url': 0,
+      'class-methods-use-this': 0,
+      'react/jsx-props-no-spreading': 0,
+      'import/extensions': 0, // we wouldn't be able to import jQuery without this line
+      'import/prefer-default-export': 0, // we want to stop using default exports and start using named exports
+      'react/destructuring-assignment': 0, // that would be too many changes to fix this one
+      'prefer-destructuring': 0, // that would be too many changes to fix this one
+      'jsx-a11y/label-has-for': [
+        2,
+        {
+          required: { some: ['nesting', 'id'] }, // some of our labels are hidden and we cannot nest those
+        },
+      ],
+      'jsx-a11y/anchor-is-valid': 0, // cannot fix this one, it would break wprdpress themes
+      'jsx-a11y/label-has-associated-control': [
+        2,
+        {
+          either: 'either', // control has to be either nested or associated via htmlFor
+        },
+      ],
+      'import/no-default-export': 1, // no default exports
+    },
+  },
+];