fix: add ESLint compatibility types and update plugins exports, closes #1200

- Add CompatibleConfig and CompatiblePlugin interface definitions
- Update all plugin packages to use new compatibility types
- Add documentation for new compatibility interfaces
- Update package.json files across examples and packages
- Add compatibility-types.ts to shared package

Author: Rel1cx

examples/next/eslint.config.js

@@ -4,6 +4,7 @@ import eslintPluginNext from "@next/eslint-plugin-next";
 import gitignore from "eslint-config-flat-gitignore";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
 import TSCONFIG from "./tsconfig.json" with { type: "json" };
@@ -13,7 +14,7 @@ const GLOB_JS = ["**/*.js", "**/*.jsx"];
 const GLOB_APP = ["app/**/*.{js,ts,jsx,tsx}"];
 const GLOB_CONFIG = ["**/*.config.{js,mjs,ts,tsx}"];
 
-export default tseslint.config(
+export default defineConfig([
   gitignore(),
   {
     files: GLOB_TS,
@@ -65,4 +66,4 @@ export default tseslint.config(
       "no-console": "off",
     },
   },
-);
+]);

examples/next/eslint.config.mjs

@@ -3,7 +3,7 @@ import eslintJs from "@eslint/js";
 import eslintPluginNext from "@next/eslint-plugin-next";
 import gitignore from "eslint-config-flat-gitignore";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
-import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
 import TSCONFIG from "./tsconfig.json" with { type: "json" };
@@ -13,7 +13,7 @@ const GLOB_JS = ["**/*.js", "**/*.jsx"];
 const GLOB_APP = ["app/**/*.{js,ts,jsx,tsx}"];
 const GLOB_CONFIG = ["**/*.config.{js,mjs,ts,tsx}"];
 
-export default tseslint.config(
+export default defineConfig([
   gitignore(),
   {
     files: GLOB_TS,
@@ -65,4 +65,4 @@ export default tseslint.config(
       "no-console": "off",
     },
   },
-);
+]);

examples/react-dom/eslint.config.js

@@ -2,14 +2,15 @@ import eslintReact from "@eslint-react/eslint-plugin";
 import eslintJs from "@eslint/js";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
 import TSCONFIG_APP from "./tsconfig.app.json" with { type: "json" };
 import TSCONFIG_NODE from "./tsconfig.node.json" with { type: "json" };
 
 const GLOB_TS = ["**/*.ts", "**/*.tsx"];
 
-export default tseslint.config(
+export default defineConfig([
   {
     files: GLOB_TS,
     extends: [
@@ -60,4 +61,4 @@ export default tseslint.config(
       ...eslintPluginReactHooks.configs.recommended.rules,
     },
   },
-);
+]);

examples/with-ts-blank-eslint-parser/eslint.config.js

@@ -1,16 +1,15 @@
-// @ts-check
 import eslintReact from "@eslint-react/eslint-plugin";
 import eslintJs from "@eslint/js";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig } from "eslint/config";
 import globals from "globals";
 import tsBlankEslintParser from "ts-blank-eslint-parser";
-import tseslint from "typescript-eslint";
 
 import TSCONFIG_APP from "./tsconfig.app.json" with { type: "json" };
 import TSCONFIG_NODE from "./tsconfig.node.json" with { type: "json" };
 
-export default tseslint.config(
+export default defineConfig([
   // base configuration for browser environment source files
   {
     files: TSCONFIG_APP.include,
@@ -54,4 +53,4 @@ export default tseslint.config(
       ...eslintPluginReactHooks.configs.recommended.rules,
     },
   },
-);
+]);

packages/plugins/eslint-plugin-react-debug/package.json

@@ -43,7 +43,7 @@
     "./package.json"
   ],
   "scripts": {
-    "build": "tsup --dts-resolve",
+    "build": "tsup",
     "lint:publish": "publint",
     "lint:ts": "tsc --noEmit",
     "publish": "pnpm run build && pnpm run lint:publish"

packages/plugins/eslint-plugin-react-debug/src/index.ts

@@ -1,9 +1,10 @@
 import type { RulePreset } from "@eslint-react/kit";
+import type { CompatibleConfig } from "@eslint-react/shared";
 
 import * as allConfig from "./configs/all";
 import { plugin } from "./plugin";
 
-function makeConfig(config: { name: string; rules: RulePreset }) {
+function toFlatConfig(config: CompatibleConfig) {
   return {
     ...config,
     plugins: {
@@ -12,7 +13,7 @@ function makeConfig(config: { name: string; rules: RulePreset }) {
   };
 }
 
-function makeLegacyConfig({ rules }: { rules: RulePreset }) {
+function toLegacyConfig({ rules }: { rules: RulePreset }) {
   return {
     plugins: ["react-debug"],
     rules,
@@ -22,7 +23,7 @@ function makeLegacyConfig({ rules }: { rules: RulePreset }) {
 export default {
   ...plugin,
   configs: {
-    ["all"]: makeConfig(allConfig),
-    ["all-legacy"]: makeLegacyConfig(allConfig),
+    ["all"]: toFlatConfig(allConfig),
+    ["all-legacy"]: toLegacyConfig(allConfig),
   },
 };

packages/plugins/eslint-plugin-react-debug/src/plugin.ts

@@ -1,11 +1,14 @@
+import type { CompatiblePlugin } from "@eslint-react/shared";
+
 import { name, version } from "../package.json";
+
 import classComponent from "./rules/class-component";
 import functionComponent from "./rules/function-component";
 import hook from "./rules/hook";
 import isFromReact from "./rules/is-from-react";
 import jsx from "./rules/jsx";
 
-export const plugin = {
+export const plugin: CompatiblePlugin = {
   meta: {
     name,
     version,
@@ -21,4 +24,4 @@ export const plugin = {
     /** @deprecated Use `hook` instead */
     "react-hooks": hook,
   },
-} as const;
+};

packages/plugins/eslint-plugin-react-dom/package.json

@@ -43,7 +43,7 @@
     "./package.json"
   ],
   "scripts": {
-    "build": "tsup --dts-resolve",
+    "build": "tsup",
     "lint:publish": "publint",
     "lint:ts": "tsc --noEmit",
     "publish": "pnpm run build && pnpm run lint:publish"

packages/plugins/eslint-plugin-react-dom/src/index.ts

@@ -1,9 +1,10 @@
 import type { RulePreset } from "@eslint-react/kit";
+import type { CompatibleConfig } from "@eslint-react/shared";
 
 import * as recommendedConfig from "./configs/recommended";
 import { plugin } from "./plugin";
 
-function makeConfig(config: { name: string; rules: RulePreset }) {
+function toFlatConfig(config: CompatibleConfig) {
   return {
     ...config,
     plugins: {
@@ -12,7 +13,7 @@ function makeConfig(config: { name: string; rules: RulePreset }) {
   };
 }
 
-function makeLegacyConfig({ rules }: { rules: RulePreset }) {
+function toLegacyConfig({ rules }: { rules: RulePreset }) {
   return {
     plugins: ["react-dom"],
     rules,
@@ -22,7 +23,7 @@ function makeLegacyConfig({ rules }: { rules: RulePreset }) {
 export default {
   ...plugin,
   configs: {
-    ["recommended"]: makeConfig(recommendedConfig),
-    ["recommended-legacy"]: makeLegacyConfig(recommendedConfig),
+    ["recommended"]: toFlatConfig(recommendedConfig),
+    ["recommended-legacy"]: toLegacyConfig(recommendedConfig),
   },
 };

packages/plugins/eslint-plugin-react-dom/src/plugin.ts

@@ -1,4 +1,7 @@
+import type { CompatiblePlugin } from "@eslint-react/shared";
+
 import { name, version } from "../package.json";
+
 import noDangerouslySetInnerHTML from "./rules/no-dangerously-set-innerhtml";
 import noDangerouslySetInnerHTMLWithChildren from "./rules/no-dangerously-set-innerhtml-with-children";
 import noFindDomNode from "./rules/no-find-dom-node";
@@ -16,7 +19,7 @@ import noUnsafeTargetBlank from "./rules/no-unsafe-target-blank";
 import noUseFormState from "./rules/no-use-form-state";
 import noVoidElementsWithChildren from "./rules/no-void-elements-with-children";
 
-export const plugin = {
+export const plugin: CompatiblePlugin = {
   meta: {
     name,
     version,
@@ -43,4 +46,4 @@ export const plugin = {
     /** @deprecated Use `no-void-elements-with-children` instead */
     "no-children-in-void-dom-elements": noVoidElementsWithChildren,
   },
-} as const;
+};