chore: eslint v9 compat

Author: dackmin

.eslintignore

@@ -0,0 +1,27 @@
+import tseslint from 'typescript-eslint';
+import pooolint from '@poool/eslint-config-react';
+import globals from 'globals';
+
+export default tseslint.config(
+  { ignores: [
+    'dist',
+    '**/dist',
+    'coverage',
+    '.yarn',
+    'node_modules',
+    'examples/next/.next/**',
+  ] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        globalThis: 'readonly',
+      },
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  ...pooolint.configs.recommended,
+);

.eslintrc.js

@@ -15,6 +15,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import {
+  type RestrictedContentRef,
   AccessContext,
   Paywall,
   Pixel,
@@ -24,7 +25,7 @@ import {
 } from '@poool/react-access';
 
 const Premium = () => {
-  const contentRef = useRef();
+  const contentRef = useRef<RestrictedContentRef>(null);
   const [identity, setIdentity] = useState(null);
   const [ready, setReady] = useState(null);
   const [mounted, setMounted] = useState(0);
@@ -33,7 +34,7 @@ const Premium = () => {
     <div className="app">
       <RestrictedContent ref={contentRef}>
         <div className="articleBody">
-          { /* eslint-disable max-len */ }
+          { /* eslint-disable @stylistic/js/max-len,@stylistic/js/indent */ }
           <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.
           </p>
@@ -79,7 +80,7 @@ const Premium = () => {
           <p>
           Ut condimentum justo nec sapien convallis dictum. Pellentesque tempus rhoncus justo quis feugiat. Curabitur in sagittis elit. Nunc justo ligula, mattis ac tortor ut, interdum hendrerit risus. Aenean purus urna, pretium eu purus sit amet, suscipit ornare velit. Phasellus ut euismod nulla, nec tincidunt ex. Aliquam mattis nulla neque, ac dapibus magna fermentum eget. Nulla facilisis viverra odio ac viverra. Mauris cursus velit ex, quis pulvinar elit porttitor non. Vivamus consectetur leo at enim luctus, at convallis mi dapibus. Ut mauris neque, efficitur eu ante ac, scelerisque cursus tortor. Sed sed dolor sit amet velit finibus sodales. Duis tempor felis a sollicitudin pretium. Vestibulum ante eros, egestas a dapibus sit amet, suscipit ut ipsum.
           </p>
-          { /* eslint-enable max-len */ }
+          { /* eslint-enable @stylistic/js/max-len,@stylistic/js/indent */ }
         </div>
       </RestrictedContent>
 
@@ -113,7 +114,7 @@ const Premium = () => {
 };
 
 const Consent = () => {
-  const contentRef = useRef();
+  const contentRef = useRef<RestrictedContentRef>(null);
   const { setEnabled } = useContext(AppContext);
   const [ready, setReady] = useState(null);
   const [mounted, setMounted] = useState(0);

eslint.config.mjs

@@ -1,17 +1,22 @@
 'use client';
 
 import { useRef } from 'react';
-import { Pixel, Paywall, RestrictedContent } from '@poool/react-access';
+import {
+  type RestrictedContentRef,
+  Pixel,
+  Paywall,
+  RestrictedContent,
+} from '@poool/react-access';
 import Link from 'next/link';
 
 const Premium = () => {
-  const contentRef = useRef();
+  const contentRef = useRef<RestrictedContentRef>(null);
 
   return (
     <div className="app">
       <RestrictedContent ref={contentRef}>
         <div className="articleBody">
-          { /* eslint-disable max-len */ }
+          { /* eslint-disable @stylistic/js/max-len,@stylistic/js/indent */ }
           <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.
           </p>
@@ -57,7 +62,7 @@ const Premium = () => {
           <p>
           Ut condimentum justo nec sapien convallis dictum. Pellentesque tempus rhoncus justo quis feugiat. Curabitur in sagittis elit. Nunc justo ligula, mattis ac tortor ut, interdum hendrerit risus. Aenean purus urna, pretium eu purus sit amet, suscipit ornare velit. Phasellus ut euismod nulla, nec tincidunt ex. Aliquam mattis nulla neque, ac dapibus magna fermentum eget. Nulla facilisis viverra odio ac viverra. Mauris cursus velit ex, quis pulvinar elit porttitor non. Vivamus consectetur leo at enim luctus, at convallis mi dapibus. Ut mauris neque, efficitur eu ante ac, scelerisque cursus tortor. Sed sed dolor sit amet velit finibus sodales. Duis tempor felis a sollicitudin pretium. Vestibulum ante eros, egestas a dapibus sit amet, suscipit ut ipsum.
           </p>
-          { /* eslint-enable max-len */ }
+          { /* eslint-enable @stylistic/js/max-len,@stylistic/js/indent */ }
         </div>
       </RestrictedContent>
 

examples/basic/index.tsx

@@ -2,4 +2,5 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript
+// for more information.

examples/next/app/premium/page.tsx

@@ -20,29 +20,30 @@
   ],
   "devDependencies": {
     "@babel/eslint-plugin": "7.25.9",
-    "@poool/eslint-config": "3.0.1",
-    "@poool/eslint-config-react": "3.0.1",
+    "@poool/eslint-config": "4.1.0",
+    "@poool/eslint-config-react": "4.1.1",
     "@poool/eslint-plugin": "3.0.0",
     "@swc/core": "1.12.14",
     "@swc/jest": "0.2.39",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.3.0",
     "@types/jest": "30.0.0",
-    "@types/node": "22.10.1",
+    "@types/node": "24.0.14",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/webpack": "5.28.5",
     "@types/webpack-dev-server": "4.7.2",
     "@typescript-eslint/eslint-plugin": "8.37.0",
     "@typescript-eslint/parser": "8.37.0",
     "commit-and-tag-version": "12.5.1",
-    "eslint": "8.57.1",
+    "eslint": "9.31.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-n": "17.21.0",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "html-webpack-plugin": "5.6.3",
     "jest": "30.0.4",
     "jest-dev-server": "11.0.0",
@@ -55,6 +56,7 @@
     "ts-node": "10.9.2",
     "tsup": "8.5.0",
     "typescript": "5.8.3",
+    "typescript-eslint": "^8.37.0",
     "webpack": "5.100.2",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2"
@@ -69,7 +71,7 @@
     "build:types": "tsc --project ./tsconfig.build.json",
     "prepack": "yarn build && yarn lint && yarn tsc && yarn test",
     "test": "NODE_ENV='test' jest",
-    "lint": "eslint --max-warnings=0 .",
+    "lint": "eslint --max-warnings=0 --cache .",
     "release": "commit-and-tag-version && git push --follow-tags",
     "example:basic": "yarn workspace poool-react-access-basic-example serve",
     "example:next": "yarn workspace poool-react-access-next-example dev"

examples/next/next-env.d.ts

@@ -56,12 +56,13 @@ const AccessContext = ({
 
   useEffect(() => {
     init();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const init = async () => {
     if (
-      (!globalThis.Access || !globalThis.Access.isPoool) &&
-      (!globalThis.PooolAccess || !globalThis.PooolAccess.isPoool)
+      (!globalThis.Access?.isPoool) &&
+      (!globalThis.PooolAccess?.isPoool)
     ) {
       await loadScript(scriptUrl, 'poool-react-access-lib', {
         timeout: scriptLoadTimeout,
@@ -134,6 +135,7 @@ const AccessContext = ({
     lib: state.lib,
     createFactory,
     destroyFactory,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [state.lib, config?.cookies_enabled]);
 
   const content = (

package.json

@@ -47,12 +47,13 @@ const AuditContext = ({
     return () => {
       deinit();
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config?.cookies_enabled]);
 
   const init = async () => {
     if (
-      (!globalThis.Audit || !globalThis.Audit.isPoool) &&
-      (!globalThis.PooolAudit || !globalThis.PooolAudit.isPoool)
+      (!globalThis.Audit?.isPoool) &&
+      (!globalThis.PooolAudit?.isPoool)
     ) {
       await loadScript(scriptUrl, 'poool-react-audit-lib', {
         timeout: scriptLoadTimeout,
@@ -125,6 +126,7 @@ const AuditContext = ({
     events,
     scriptUrl,
     lib: state.lib,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [state.lib, config?.cookies_enabled]);
 
   return (

src/AccessContext/index.tsx

@@ -4,8 +4,9 @@ import type { RefObject } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import devServer from 'jest-dev-server';
 
-import type { RestrictedContentRef } from '../RestrictedContent';
 import { withAccess, createBrowser, sleep } from '~/tests/utils';
+
+import type { RestrictedContentRef } from '../RestrictedContent';
 import Paywall from './index';
 
 jest.setTimeout(30000);