Upgrade eslint from v8 to v9

.github/workflows/build-test.yml

@@ -35,6 +35,11 @@ jobs:
       - name: Build
         run: pnpm run build
 
+      - name: Install dependencies in example project
+        # In order to lint both our main project and the example sub-project, we
+        # need to install the dependencies for the example project too.
+        run: pnpm run example:install
+
       - name: Type check
         # Though this largely happens as part of `pnpm run build`, there are
         # some files that are not part of the publishable build but which we'd

eslint.config.mjs

@@ -0,0 +1,189 @@
+import comments from "@eslint-community/eslint-plugin-eslint-comments/configs";
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import importPlugin from "eslint-plugin-import";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import reactPlugin from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tssUnusedClasses from "eslint-plugin-tss-unused-classes";
+import globals from "globals";
+// eslint-disable-next-line import/no-unresolved
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: ["**/dist/**"],
+  },
+  {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.strictTypeChecked,
+      reactPlugin.configs.flat.recommended,
+      reactPlugin.configs.flat["jsx-runtime"],
+      /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access */
+      importPlugin.flatConfigs.recommended,
+      importPlugin.flatConfigs.typescript,
+      jsxA11y.flatConfigs.recommended,
+      comments.recommended,
+      eslintConfigPrettier,
+    ],
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "tss-unused-classes": tssUnusedClasses,
+    },
+
+    linterOptions: {
+      reportUnusedDisableDirectives: "warn",
+    },
+
+    languageOptions: {
+      ...reactPlugin.configs.flat.recommended.languageOptions,
+      ...jsxA11y.flatConfigs.recommended.languageOptions,
+      /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access */
+
+      globals: {
+        ...globals.browser,
+      },
+
+      sourceType: "commonjs",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        projectService: {
+          defaultProject: "tsconfig.json",
+          allowDefaultProject: ["eslint.config.mjs", ".prettierrc.cjs"],
+        },
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+
+      "@typescript-eslint/ban-ts-comment": [
+        "error",
+        {
+          "ts-expect-error": "allow-with-description",
+          minimumDescriptionLength: 10,
+        },
+      ],
+
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-exports": "error",
+
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          fixStyle: "inline-type-imports",
+        },
+      ],
+
+      "@typescript-eslint/no-import-type-side-effects": "error",
+
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        {
+          checksVoidReturn: false,
+        },
+      ],
+
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+        },
+      ],
+
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: [
+            "./src/demo/**",
+            "./src/**/__tests__/**",
+            "vite.config.mts",
+            "eslint.config.mjs",
+          ],
+          includeTypes: true,
+        },
+      ],
+
+      "import/no-mutable-exports": "error",
+      "import/no-unused-modules": "error",
+
+      "import/no-duplicates": [
+        "error",
+        {
+          "prefer-inline": true,
+        },
+      ],
+
+      "no-console": [
+        "warn",
+        {
+          allow: ["warn", "error"],
+        },
+      ],
+
+      "no-restricted-imports": "off",
+
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "lodash",
+              message:
+                'Please use specific module imports like "lodash/foo" instead of "lodash".',
+              allowTypeImports: true,
+            },
+            {
+              name: "@mui/icons-material",
+              message:
+                "Please use second-level default path imports rather than top-level named imports. See https://github.com/sjdemartini/mui-tiptap/issues/154",
+            },
+          ],
+
+          patterns: [
+            {
+              group: ["@mui/*/*/*"],
+              message:
+                'Imports of third-level MUI "private" paths are not allowed per https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports',
+            },
+          ],
+        },
+      ],
+
+      "react/button-has-type": "error",
+
+      "react/function-component-definition": "warn",
+
+      "react/jsx-no-useless-fragment": [
+        "warn",
+        {
+          allowExpressions: true,
+        },
+      ],
+
+      "react-refresh/only-export-components": [
+        "warn",
+        {
+          allowConstantExport: true,
+        },
+      ],
+
+      "tss-unused-classes/unused-classes": "warn",
+    },
+  }
+);

example/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {

example/src/App.tsx

@@ -22,11 +22,9 @@ export default function App() {
   const [paletteMode, setPaletteMode] = useState<PaletteMode>(
     systemSettingsPrefersDarkMode ? "dark" : "light"
   );
-  const togglePaletteMode = useCallback(
-    () =>
-      setPaletteMode((prevMode) => (prevMode === "light" ? "dark" : "light")),
-    []
-  );
+  const togglePaletteMode = useCallback(() => {
+    setPaletteMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+  }, []);
   const theme = useMemo(
     () =>
       createTheme({

example/src/PageContentWithEditor.tsx

@@ -202,7 +202,9 @@ export default function PageContentWithEditor() {
       <Divider sx={{ mt: 5, mb: 2 }} />
 
       <Button
-        onClick={() => setHtmlResult(rteRef.current?.editor?.getHTML() ?? "")}
+        onClick={() => {
+          setHtmlResult(rteRef.current?.editor?.getHTML() ?? "");
+        }}
       >
         Save and display HTML
       </Button>

example/src/PageContentWithEditorSimple.tsx

@@ -32,7 +32,12 @@ export default function PageContentWithEditorSimple() {
         )}
       />
 
-      <Button onClick={() => console.log(rteRef.current?.editor?.getHTML())}>
+      <Button
+        onClick={() => {
+          // eslint-disable-next-line no-console
+          console.log(rteRef.current?.editor?.getHTML());
+        }}
+      >
         Log HTML
       </Button>
     </div>