configure nextjs eslint rules

vivid-planet · Jan 22, 2025 · ff7bf73 · ff7bf73
1 parent df0447a
commit ff7bf73
Show file tree

Hide file tree

Showing 11 changed files with 320 additions and 72 deletions.
diff --git a/packages/eslint-config/nestjs.js b/packages/eslint-config/nestjs.js
@@ -1,6 +1,5 @@
 import coreConfig from "./core.js";
 import globals from "globals";
-import react from "eslint-plugin-react";
 
 /** @type {import('eslint')} */
 const config = [

diff --git a/packages/eslint-config/nextjs.js b/packages/eslint-config/nextjs.js
@@ -1,27 +1,70 @@
-module.exports = {
-    extends: [require.resolve("./core.js"), "next/core-web-vitals", "plugin:react/jsx-runtime"],
-    rules: {
-        "react/display-name": "off",
-        "react/jsx-curly-brace-presence": "error",
-        "react/prop-types": "off",
-        "react/self-closing-comp": "error",
-        "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
-        "@comet/no-private-sibling-import": ["error", ["gql", "sc", "gql.generated"]],
-        "no-restricted-imports": [
-            "error",
-            {
-                paths: [
-                    {
-                        name: "react",
-                        importNames: ["default"],
-                    },
-                    {
-                        name: "next/image",
-                        importNames: ["default"],
-                        message: "Please use Image from @comet/cms-site instead",
-                    },
-                ],
+import coreConfig from "./core.js";
+import react from "eslint-plugin-react";
+import globals from "globals";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const compat = new FlatCompat({
+    // import.meta.dirname is available after Node.js v20.11.0
+    baseDirectory: import.meta.dirname,
+});
+
+const nextCoreWebVitals = compat
+    .config({
+        extends: ["next/core-web-vitals"],
+    })
+    // We need to filter out configurations from nextCoreWebVitals which define plugin.import. It is conflicting
+    // because it gets redefined
+    .filter((config) => !config.plugins || !config.plugins.import);
+
+/** @type {import('eslint')} */
+const config = [
+    ...coreConfig,
+    // NextJJS does not support eslint v9 flat config yet - na opt-in to compatibility mode is required
+    ...nextCoreWebVitals,
+    {
+        rules: {
+            "@comet/no-private-sibling-import": ["error", ["gql", "sc", "gql.generated"]],
+            "no-restricted-imports": [
+                "error",
+                {
+                    paths: [
+                        {
+                            name: "react",
+                            importNames: ["default"],
+                        },
+                        {
+                            name: "next/image",
+                            importNames: ["default"],
+                            message: "Please use Image from @comet/cms-site instead",
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+            globals: {
+                ...globals.browser,
             },
-        ],
+        },
+        plugins: {
+            react: react,
+        },
+        rules: {
+            "react/display-name": "off",
+            "react/jsx-curly-brace-presence": "error",
+            "react/prop-types": "off",
+            "react/self-closing-comp": "error",
+            "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
+            "react/react-in-jsx-scope": "off",
+        },
     },
-};
+];
+
+export default config;
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -2,6 +2,8 @@
     "dependencies": {
         "@calm/eslint-plugin-react-intl": "^1.4.1",
         "@eslint/js": "^9.14.0",
+        "@next/eslint-plugin-next": "^15.1.5",
+        "eslint-config-next": "^15.1.5",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-formatjs": "^5.2.13",
         "eslint-plugin-jsonc": "^2.18.2",

diff --git a/packages/site/cms-site/.eslintrc.json b/packages/site/cms-site/.eslintrc.json
diff --git a/packages/site/cms-site/eslint.config.mjs b/packages/site/cms-site/eslint.config.mjs
@@ -0,0 +1,17 @@
+import cometConfig from "@comet/eslint-config/nextjs.js";
+
+/** @type {import('eslint')} */
+const config = [
+    {
+        ignores: ["src/*.generated.ts", "lib/**", "**/*.generated.ts"],
+    },
+    ...cometConfig,
+    {
+        rules: {
+            "@next/next/no-html-link-for-pages": "off", // disabled because lib has no pages dir
+            "@comet/no-other-module-relative-import": "off",
+        },
+    },
+];
+
+export default config;
diff --git a/packages/site/cms-site/package.json b/packages/site/cms-site/package.json
@@ -1,30 +1,4 @@
 {
-    "name": "@comet/cms-site",
-    "version": "7.11.0",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/vivid-planet/comet",
-        "directory": "packages/site/cms-site"
-    },
-    "license": "BSD-2-Clause",
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
-    "files": [
-        "lib/*"
-    ],
-    "scripts": {
-        "build": "$npm_execpath run clean && npm run generate-block-types && tsc --project tsconfig.build.json",
-        "clean": "rimraf lib 'src/**/*.generated.ts'",
-        "dev": "$npm_execpath generate-block-types && tsc --watch --preserveWatchOutput --project tsconfig.build.json",
-        "generate-block-types": "comet generate-block-types",
-        "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"$npm_execpath generate-block-types\"",
-        "lint": "$npm_execpath generate-block-types && run-p lint:prettier lint:eslint lint:tsc",
-        "lint:eslint": "eslint --max-warnings 0 --ext .ts,.tsx,.js,.jsx,.json,.md src/ package.json",
-        "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
-        "lint:tsc": "tsc --noEmit",
-        "test": "jest --verbose=true --passWithNoTests",
-        "test:watch": "jest --watch"
-    },
     "dependencies": {
         "jose": "^5.9.6",
         "rimraf": "^6.0.1",
@@ -53,6 +27,12 @@
         "ts-jest": "^29.2.5",
         "typescript": "^4.0.0"
     },
+    "files": [
+        "lib/*"
+    ],
+    "license": "BSD-2-Clause",
+    "main": "lib/index.js",
+    "name": "@comet/cms-site",
     "peerDependencies": {
         "next": "^14.2.0",
         "react": "^18.0.0",
@@ -62,5 +42,25 @@
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
-    }
+    },
+    "repository": {
+        "directory": "packages/site/cms-site",
+        "type": "git",
+        "url": "https://github.com/vivid-planet/comet"
+    },
+    "scripts": {
+        "build": "$npm_execpath run clean && npm run generate-block-types && tsc --project tsconfig.build.json",
+        "clean": "rimraf lib 'src/**/*.generated.ts'",
+        "dev": "$npm_execpath generate-block-types && tsc --watch --preserveWatchOutput --project tsconfig.build.json",
+        "generate-block-types": "comet generate-block-types",
+        "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"$npm_execpath generate-block-types\"",
+        "lint": "$npm_execpath generate-block-types && run-p lint:prettier lint:eslint lint:tsc",
+        "lint:eslint": "eslint --max-warnings 0 src/ package.json",
+        "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
+        "lint:tsc": "tsc --noEmit",
+        "test": "jest --verbose=true --passWithNoTests",
+        "test:watch": "jest --watch"
+    },
+    "types": "lib/index.d.ts",
+    "version": "7.11.0"
 }
diff --git a/packages/site/cms-site/src/graphQLFetch/fetchInMemoryCache.ts b/packages/site/cms-site/src/graphQLFetch/fetchInMemoryCache.ts
@@ -19,7 +19,7 @@ export function createFetchInMemoryCache(fetch: Fetch): Fetch {
                         //looks like a gql query, cache any method
                         cacheKey = `${input.toString()}#${init.body.toString()}`;
                     }
-                } catch (e) {
+                } catch {
                     //not a valid json
                 }
             }

diff --git a/packages/site/cms-site/src/graphQLFetch/graphQLFetch.ts b/packages/site/cms-site/src/graphQLFetch/graphQLFetch.ts
@@ -119,7 +119,7 @@ export function createGraphQLFetch(fetch: Fetch, url: string): GraphQLFetch {
                 if (errors) {
                     errorMessage += `\n\nGraphQL error(s):\n- ${errors.map((error: { message: string }) => error.message).join("\n- ")}`;
                 }
-            } catch (error) {
+            } catch {
                 errorMessage += `\n${body}`;
             }
 

diff --git a/packages/site/cms-site/src/iframebridge/IFrameBridge.tsx b/packages/site/cms-site/src/iframebridge/IFrameBridge.tsx
@@ -192,7 +192,7 @@ export const IFrameBridgeProvider = ({ children }: PropsWithChildren) => {
                 if (message.hasOwnProperty("cometType")) {
                     onReceiveMessage(message as AdminMessage);
                 }
-            } catch (e) {
+            } catch {
                 // empty
             }
         };

diff --git a/packages/site/cms-site/src/sitePreview/SitePreviewProvider.tsx b/packages/site/cms-site/src/sitePreview/SitePreviewProvider.tsx
@@ -20,7 +20,7 @@ const SitePreview = ({ children }: PropsWithChildren) => {
         }
         sendUpstreamMessage();
         window.addEventListener("load", sendUpstreamMessage);
-        () => {
+        return () => {
             window.removeEventListener("load", sendUpstreamMessage);
         };
     }, [pathname, searchParams]);