Modernize ESLint configuration

.eslintrc.json

@@ -0,0 +1,62 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": { "jsx": true },
+    "ecmaVersion": 2015,
+    "project": true,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "import", "react"],
+  "rules": {
+    "valid-jsdoc": [2]
+  },
+  "settings": {
+    "import/ignore": ["react-native"],
+    "import/resolver": { "node": { "extensions": [".js", ".ts", ".tsx"] } },
+    "react": { "version": "detect" }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.{ts,tsx,cts}"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:import/recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "rules": {
+        "@typescript-eslint/ban-ts-comment": [0],
+        "@typescript-eslint/no-redeclare": [2],
+        "@typescript-eslint/no-explicit-any": [0],
+        "@typescript-eslint/no-unused-vars": [0],
+        "@typescript-eslint/ban-types": [0],
+        "react/display-name": [0],
+        "react/jsx-no-undef": [2],
+        "react/jsx-uses-react": [1],
+        "react/jsx-wrap-multilines": [2],
+        "react/no-string-refs": [0],
+        "@typescript-eslint/consistent-type-imports": [
+          2,
+          { "fixStyle": "separate-type-imports" }
+        ],
+        "@typescript-eslint/consistent-type-exports": [2],
+        "valid-jsdoc": [2]
+      }
+    },
+    {
+      "files": ["**/test/**/*.{ts,tsx}"],
+      "parserOptions": { "project": "./test/tsconfig.test.json" }
+    }
+  ]
+}

package.json

@@ -40,7 +40,8 @@
     "clean": "rimraf lib dist es coverage",
     "api-types": "api-extractor run --local",
     "format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
-    "lint": "eslint src --ext ts,tsx,js test/utils test/components test/hooks",
+    "lint": "eslint src test",
+    "lint:fix": "eslint src test --fix",
     "prepare": "yarn clean && yarn build",
     "pretest": "yarn lint",
     "test": "jest",
@@ -89,22 +90,22 @@
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "18.2.25",
     "@types/react-native": "^0.67.4",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29",
     "codecov": "^3.8.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.12.0",
-    "eslint-config-prettier": "^6.14.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-react": "^7.33.2",
     "glob": "^7.1.6",
     "jest": "^29",
     "jest-environment-jsdom": "^29.5.0",
     "metro-react-native-babel-preset": "^0.76.6",
-    "prettier": "^2.1.2",
+    "prettier": "^3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "^0.71.11",

src/components/Context.ts

@@ -35,7 +35,7 @@ function getContext(): Context<ReactReduxContextValue | null> {
   let realContext = contextMap.get(React.createContext)
   if (!realContext) {
     realContext = React.createContext<ReactReduxContextValue | null>(
-      null as any
+      null as any,
     )
     if (process.env.NODE_ENV !== 'production') {
       realContext.displayName = 'ReactRedux'

src/components/connect.tsx

@@ -70,7 +70,7 @@ type EffectFunc = (...args: any[]) => void | ReturnType<React.EffectCallback>
 function useIsomorphicLayoutEffectWithArgs(
   effectFunc: EffectFunc,
   effectArgs: any[],
-  dependencies?: React.DependencyList
+  dependencies?: React.DependencyList,
 ) {
   useIsomorphicLayoutEffect(() => effectFunc(...effectArgs), dependencies)
 }
@@ -83,7 +83,7 @@ function captureWrapperProps(
   wrapperProps: unknown,
   // actualChildProps: unknown,
   childPropsFromStoreUpdate: React.MutableRefObject<unknown>,
-  notifyNestedSubs: () => void
+  notifyNestedSubs: () => void,
 ) {
   // We want to capture the wrapper props and child props we used for later comparisons
   lastWrapperProps.current = wrapperProps
@@ -110,7 +110,7 @@ function subscribeUpdates(
   childPropsFromStoreUpdate: React.MutableRefObject<unknown>,
   notifyNestedSubs: () => void,
   // forceComponentUpdateDispatch: React.Dispatch<any>,
-  additionalSubscribeListener: () => void
+  additionalSubscribeListener: () => void,
 ) {
   // If we're not subscribed to the store, nothing to do here
   if (!shouldHandleStateChanges) return () => {}
@@ -136,7 +136,7 @@ function subscribeUpdates(
       // to determine what the child props should be
       newChildProps = childPropsSelector(
         latestStoreState,
-        lastWrapperProps.current
+        lastWrapperProps.current,
       )
     } catch (e) {
       error = e
@@ -466,13 +466,13 @@ function connect<
 
     // the context consumer to use
     context = ReactReduxContext,
-  }: ConnectOptions<unknown, unknown, unknown, unknown> = {}
+  }: ConnectOptions<unknown, unknown, unknown, unknown> = {},
 ): unknown {
   if (process.env.NODE_ENV !== 'production') {
     if (pure !== undefined && !hasWarnedAboutDeprecatedPureOption) {
       hasWarnedAboutDeprecatedPureOption = true
       warning(
-        'The `pure` option has been removed. `connect` is now always a "pure/memoized" component'
+        'The `pure` option has been removed. `connect` is now always a "pure/memoized" component',
       )
     }
   }
@@ -486,7 +486,7 @@ function connect<
   const shouldHandleStateChanges = Boolean(mapStateToProps)
 
   const wrapWithConnect = <TProps,>(
-    WrappedComponent: ComponentType<TProps>
+    WrappedComponent: ComponentType<TProps>,
   ) => {
     type WrappedComponentProps = TProps &
       ConnectPropsMaybeWithoutContext<TProps>
@@ -496,8 +496,8 @@ function connect<
       if (!isValid)
         throw new Error(
           `You must pass a component to the function returned by connect. Instead received ${stringifyComponent(
-            WrappedComponent
-          )}`
+            WrappedComponent,
+          )}`,
         )
     }
 
@@ -529,7 +529,7 @@ function connect<
     }
 
     function ConnectFunction<TOwnProps>(
-      props: InternalConnectProps & TOwnProps
+      props: InternalConnectProps & TOwnProps,
     ) {
       const [propsContext, reactReduxForwardedRef, wrapperProps] =
         React.useMemo(() => {
@@ -548,11 +548,11 @@ function connect<
           if (process.env.NODE_ENV !== 'production') {
             const isValid = /*#__PURE__*/ isContextConsumer(
               // @ts-ignore
-              <propsContext.Consumer />
+              <propsContext.Consumer />,
             )
             if (!isValid) {
               throw new Error(
-                'You must pass a valid React context consumer as `props.context`'
+                'You must pass a valid React context consumer as `props.context`',
               )
             }
             ResultContext = propsContext
@@ -583,7 +583,7 @@ function connect<
           `Could not find "store" in the context of ` +
             `"${displayName}". Either wrap the root component in a <Provider>, ` +
             `or pass a custom React context provider to <Provider> and the corresponding ` +
-            `React context consumer to ${displayName} in connect options.`
+            `React context consumer to ${displayName} in connect options.`,
         )
       }
 
@@ -609,7 +609,7 @@ function connect<
         // connected to the store via props shouldn't use subscription from context, or vice versa.
         const subscription = createSubscription(
           store,
-          didStoreComeFromProps ? undefined : contextValue!.subscription
+          didStoreComeFromProps ? undefined : contextValue!.subscription,
         )
 
         // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
@@ -703,7 +703,7 @@ function connect<
             isMounted,
             childPropsFromStoreUpdate,
             notifyNestedSubs,
-            reactListener
+            reactListener,
           )
         }
 
@@ -730,10 +730,11 @@ function connect<
           actualChildPropsSelector,
           getServerState
             ? () => childPropsSelector(getServerState(), wrapperProps)
-            : actualChildPropsSelector
+            : actualChildPropsSelector,
         )
       } catch (err) {
         if (latestSubscriptionCallbackError.current) {
+          // eslint-disable-next-line no-extra-semi
           ;(
             err as Error
           ).message += `\nThe error may be correlated with this previous error:\n${latestSubscriptionCallbackError.current.stack}\n\n`
@@ -797,7 +798,7 @@ function connect<
     if (forwardRef) {
       const _forwarded = React.forwardRef(function forwardConnectRef(
         props,
-        ref
+        ref,
       ) {
         // @ts-ignore
         return <Connect {...props} reactReduxForwardedRef={ref} />

src/connect/invalidArgFactory.ts

@@ -3,12 +3,12 @@ import type { Action, Dispatch } from 'redux'
 export function createInvalidArgFactory(arg: unknown, name: string) {
   return (
     dispatch: Dispatch<Action<string>>,
-    options: { readonly wrappedComponentName: string }
+    options: { readonly wrappedComponentName: string },
   ) => {
     throw new Error(
       `Invalid value of type ${typeof arg} for ${name} argument when connecting component ${
         options.wrappedComponentName
-      }.`
+      }.`,
     )
   }
 }

src/connect/mapDispatchToProps.ts

@@ -7,12 +7,12 @@ import type { MapDispatchToPropsParam } from './selectorFactory'
 export function mapDispatchToPropsFactory<TDispatchProps, TOwnProps>(
   mapDispatchToProps:
     | MapDispatchToPropsParam<TDispatchProps, TOwnProps>
-    | undefined
+    | undefined,
 ) {
   return mapDispatchToProps && typeof mapDispatchToProps === 'object'
     ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) =>
         // @ts-ignore
-        bindActionCreators(mapDispatchToProps, dispatch)
+        bindActionCreators(mapDispatchToProps, dispatch),
       )
     : !mapDispatchToProps
     ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) => ({

src/connect/mapStateToProps.ts

@@ -3,7 +3,7 @@ import { createInvalidArgFactory } from './invalidArgFactory'
 import type { MapStateToPropsParam } from './selectorFactory'
 
 export function mapStateToPropsFactory<TStateProps, TOwnProps, State>(
-  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
 ) {
   return !mapStateToProps
     ? wrapMapToPropsConstant(() => ({}))