Fix legacy recommended config

Fixes
#14

Author: NickvanDyke

README.md

@@ -29,7 +29,7 @@ Add the plugin's recommended config to your ESLint configuration file.
 ```js
 {
   "extends": [
-    "plugin:react-you-might-not-need-an-effect/recommended"
+    "plugin:react-you-might-not-need-an-effect/legacy-recommended"
   ],
 }
 ```

src/index.js

@@ -7,24 +7,41 @@ const plugin = {
   meta: {
     name: pluginName,
   },
-  configs: {
-    recommended: {},
-  },
+  configs: {},
   rules: {
     [ruleName]: rule,
   },
 };
 
-Object.assign(plugin.configs.recommended, {
-  files: ["**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
-  plugins: {
-    // Object.assign above so we can reference `plugin` here
-    [pluginName]: plugin,
-  },
-  rules: {
-    [pluginName + "/" + ruleName]: "warn",
+Object.assign(plugin.configs, {
+  // flat config format
+  recommended: {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
+    plugins: {
+      // Object.assign above so we can reference `plugin` here
+      [pluginName]: plugin,
+    },
+    rules: {
+      [pluginName + "/" + ruleName]: "warn",
+    },
+    languageOptions: {
+      globals: {
+        // NOTE: Required so we can resolve global references to their upstream global variables
+        ...globals.browser,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
   },
-  languageOptions: {
+  // eslintrc format
+  "legacy-recommended": {
+    plugins: [pluginName],
+    rules: {
+      [pluginName + "/" + ruleName]: "warn",
+    },
     globals: {
       // NOTE: Required so we can resolve global references to their upstream global variables
       ...globals.browser,

test/config.test.js

@@ -0,0 +1,62 @@
+import { ESLint } from "eslint";
+import plugin from "../src/index.js";
+import assert from "assert";
+import { js } from "./rule-tester.js";
+import { LegacyESLint } from "eslint/use-at-your-own-risk";
+
+describe("Recommended config", () => {
+  const code = js`
+    import { useState, useEffect } from "react";
+
+    const MyComponent = () => {
+      const [state, setState] = useState(0);
+      const [otherState, setOtherState] = useState(0);
+
+      useEffect(() => {
+        setState(otherState * 2);
+      }, [state]);
+    };
+  `;
+
+  const runLintTest = async (eslintInstance, code) => {
+    const results = await eslintInstance.lintText(code);
+
+    assert.strictEqual(results.length, 1);
+    assert.ok(results[0].messages);
+    assert.ok(
+      results[0].messages.some(
+        (message) =>
+          message.ruleId ===
+          "react-you-might-not-need-an-effect/you-might-not-need-an-effect",
+      ),
+    );
+  };
+
+  it("Flat", async () => {
+    await runLintTest(
+      new ESLint({
+        // Use `overrideConfig` so it ignores the project's config
+        overrideConfig: [plugin.configs.recommended],
+      }),
+      code,
+    );
+  });
+
+  it("Legacy", async () => {
+    await runLintTest(
+      new LegacyESLint({
+        overrideConfig: {
+          extends: [
+            "plugin:react-you-might-not-need-an-effect/legacy-recommended",
+          ],
+          parserOptions: {
+            // To support the syntax in the code under test
+            ecmaVersion: 2020,
+            sourceType: "module",
+          },
+        },
+      }),
+      code,
+    );
+  });
+});

test/rule-tester.js

@@ -1,36 +1,15 @@
-// eslint-disable-next-line n/no-unsupported-features/node-builtins
-import assert from "node:assert";
+import assert from "assert";
 import { RuleTester } from "eslint";
-import { name as ruleName, rule as myRule } from "../src/rule.js";
-import globals from "globals";
+import plugin from "../src/index.js";
 
 // For syntax highlighting inside code under test
 export const js = String.raw;
 
-// Generic name I know, but it does a couple things, and inheritance is annoying.
-//
-// Normalizes whitespaces between the expected and actual `output` for tests with fixes.
-// Because formatting seriously complicates the fixer implementation and most people have a formatter anyway.
-// Not sure how hacky this is.
-// Seems like it might be standard practice for ESLint plugins?
-// Even the TS ESLint plugin mentions that it does not concern itself with formatting.
-//
-// Supports labelling tests as `todo` (and there's always more to do).
 export class MyRuleTester extends RuleTester {
   constructor(options) {
     super({
       ...options,
-      languageOptions: {
-        globals: {
-          // We use these in tests frequently
-          ...globals.browser,
-        },
-        parserOptions: {
-          ecmaFeatures: {
-            jsx: true,
-          },
-        },
-      },
+      languageOptions: plugin.configs.recommended.languageOptions,
     });
   }
 
@@ -61,7 +40,11 @@ export class MyRuleTester extends RuleTester {
         invalid: invalid.filter((test) => !test.todo),
       };
 
-      super.run(ruleName + variation, myRule, filteredTests);
+      super.run(
+        plugin.meta.name + variation,
+        plugin.rules["you-might-not-need-an-effect"],
+        filteredTests,
+      );
     } finally {
       // Restore the original strictEqual function to avoid unintended effects
       assert.strictEqual = originalStrictEqual;

types/index.d.ts

@@ -1,8 +1,9 @@
-import type { ESLint } from "eslint";
+import type { ESLint, Linter } from "eslint";
 
 declare const plugin: ESLint.Plugin & {
   configs: {
-    recommended: ESLint.ConfigData;
+    recommended: Linter.Config;
+    "legacy-recommended": Linter.LegacyConfig;
   };
 };
 export default plugin;