Enable linting for extension (#1769)

* Enable linting for extension

* Update lock file

eslint.js.react.jest.config.base.mjs

@@ -0,0 +1,43 @@
+import eslint from '@eslint/js';
+import react from 'eslint-plugin-react';
+import { fixupPluginRules } from '@eslint/compat';
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
+import jest from 'eslint-plugin-jest';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default [
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...eslint.configs.recommended,
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...react.configs.flat.recommended,
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    plugins: {
+      'react-hooks': fixupPluginRules(eslintPluginReactHooks),
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...jest.configs['flat/recommended'],
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...jest.configs['jest/style'],
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...eslintConfigPrettier,
+  },
+];

extension/eslint.config.mjs

@@ -0,0 +1,38 @@
+import globals from 'globals';
+import eslintJs from '../eslint.js.config.base.mjs';
+import eslintTsReact from '../eslint.ts.react.config.base.mjs';
+import eslintJsReactJest from '../eslint.js.react.jest.config.base.mjs';
+
+export default [
+  ...eslintJs,
+  ...eslintTsReact(import.meta.dirname),
+  ...eslintJsReactJest,
+  {
+    ignores: [
+      'chrome',
+      'dist',
+      'edge',
+      'examples',
+      'firefox',
+      'test/electron/fixture/dist',
+    ],
+  },
+  {
+    files: ['build.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.nodeBuiltin,
+      },
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        EUI: true,
+      },
+    },
+  },
+];

extension/jest.config.js → extension/jest.config.cjs

@@ -3,7 +3,7 @@ module.exports = {
   testPathIgnorePatterns: ['<rootDir>/examples'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js',
   },
   transformIgnorePatterns: [
     'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)',

extension/package.json

@@ -17,9 +17,10 @@
     "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
+    "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
     "test:electron": "pnpm run build:test:electron:fixture && jest test/electron",
     "test": "pnpm run test:app && pnpm run test:chrome && pnpm run test:electron",
-    "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
+    "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -64,12 +65,7 @@
     "cross-env": "^7.0.3",
     "electron": "^31.6.0",
     "esbuild": "^0.23.1",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.9.0",
     "immutable": "^4.3.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

extension/src/app/Actions.tsx

@@ -31,19 +31,19 @@ type Props = StateProps & DispatchProps & OwnProps;
 
 const isElectron = navigator.userAgent.includes('Electron');
 
-function sendMessage(message: SingleMessage) {
-  chrome.runtime.sendMessage(message);
+async function sendMessage(message: SingleMessage) {
+  await chrome.runtime.sendMessage(message);
 }
 
 class Actions extends Component<Props> {
-  openWindow = (position: Position) => {
-    sendMessage({ type: 'OPEN', position });
+  openWindow = async (position: Position) => {
+    await sendMessage({ type: 'OPEN', position });
   };
-  openOptionsPage = () => {
-    if (navigator.userAgent.indexOf('Firefox') !== -1) {
-      sendMessage({ type: 'OPEN_OPTIONS' });
+  openOptionsPage = async () => {
+    if (navigator.userAgent.includes('Firefox')) {
+      await sendMessage({ type: 'OPEN_OPTIONS' });
     } else {
-      chrome.runtime.openOptionsPage();
+      await chrome.runtime.openOptionsPage();
     }
   };
 
@@ -85,7 +85,7 @@ class Actions extends Component<Props> {
           {features.import && <ImportButton />}
           {position &&
             (position !== '#popup' ||
-              navigator.userAgent.indexOf('Firefox') !== -1) && <PrintButton />}
+              navigator.userAgent.includes('Firefox')) && <PrintButton />}
           <Divider />
           <MonitorSelector />
           <Divider />
@@ -96,17 +96,17 @@ class Actions extends Component<Props> {
           <Divider />
           {!isElectron && (
             <Button
-              onClick={() => {
-                this.openWindow('window');
+              onClick={async () => {
+                await this.openWindow('window');
               }}
             >
               <MdOutlineWindow />
             </Button>
           )}
           {!isElectron && (
             <Button
-              onClick={() => {
-                this.openWindow('remote');
+              onClick={async () => {
+                await this.openWindow('remote');
               }}
             >
               <GoBroadcast />

extension/src/app/App.tsx

@@ -27,6 +27,7 @@ class App extends Component<Props> {
           <a
             href="https://github.com/zalmoxisus/redux-devtools-extension#usage"
             target="_blank"
+            rel="noreferrer"
           >
             the instructions
           </a>

extension/src/background/contextMenus.ts

@@ -6,7 +6,7 @@ export function createMenu() {
     { id: 'devtools-remote', title: 'Open Remote DevTools' },
   ];
 
-  let shortcuts: { [commandName: string]: string | undefined } = {};
+  const shortcuts: { [commandName: string]: string | undefined } = {};
   chrome.commands.getAll((commands) => {
     for (const { name, shortcut } of commands) {
       shortcuts[name!] = shortcut;

extension/src/background/index.ts

@@ -15,7 +15,7 @@ chrome.commands.onCommand.addListener((shortcut) => {
 
 // Disable the action by default and create the context menu when installed
 chrome.runtime.onInstalled.addListener(() => {
-  chrome.action.disable();
+  void chrome.action.disable();
 
   getOptions((option) => {
     if (option.showContextMenus) createMenu();
@@ -32,6 +32,7 @@ chrome.storage.onChanged.addListener((changes) => {
 
 // https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously
 setInterval(
-  () => chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
+  () =>
+    void chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
   20000,
 );

extension/src/background/openWindow.ts

@@ -1,12 +1,12 @@
 export type DevToolsPosition = 'devtools-window' | 'devtools-remote';
 
-let windows: { [K in DevToolsPosition]?: number } = {};
+const windows: { [K in DevToolsPosition]?: number } = {};
 
 export default function openDevToolsWindow(position: DevToolsPosition) {
   if (!windows[position]) {
     createWindow(position);
   } else {
-    chrome.windows.update(windows[position]!, { focused: true }, () => {
+    chrome.windows.update(windows[position], { focused: true }, () => {
       if (chrome.runtime.lastError) createWindow(position);
     });
   }
@@ -16,8 +16,8 @@ function createWindow(position: DevToolsPosition) {
   const url = chrome.runtime.getURL(getPath(position));
   chrome.windows.create({ type: 'popup', url }, (win) => {
     windows[position] = win!.id;
-    if (navigator.userAgent.indexOf('Firefox') !== -1) {
-      chrome.windows.update(win!.id!, { focused: true });
+    if (navigator.userAgent.includes('Firefox')) {
+      void chrome.windows.update(win!.id!, { focused: true });
     }
   });
 }
@@ -29,6 +29,6 @@ function getPath(position: DevToolsPosition) {
     case 'devtools-remote':
       return 'remote.html';
     default:
-      throw new Error(`Unrecognized position: ${position}`);
+      throw new Error('Unrecognized position');
   }
 }

extension/src/background/store/apiMiddleware.ts

@@ -324,14 +324,8 @@ function toContentScript(messageBody: ToContentScriptMessage) {
     connections.tab[id!].postMessage({
       type: message,
       action,
-      state: nonReduxDispatch(
-        store,
-        message,
-        instanceId,
-        action as AppDispatchAction,
-        state,
-      ),
-      id: instanceId.toString().replace(/^[^\/]+\//, ''),
+      state: nonReduxDispatch(store, message, instanceId, action, state),
+      id: instanceId.toString().replace(/^[^/]+\//, ''),
     });
   } else if (messageBody.message === 'IMPORT') {
     const { message, action, id, instanceId, state } = messageBody;
@@ -345,7 +339,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         action as unknown as AppDispatchAction,
         state,
       ),
-      id: instanceId.toString().replace(/^[^\/]+\//, ''),
+      id: instanceId.toString().replace(/^[^/]+\//, ''),
     });
   } else if (messageBody.message === 'ACTION') {
     const { message, action, id, instanceId, state } = messageBody;
@@ -359,7 +353,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         action as unknown as AppDispatchAction,
         state,
       ),
-      id: instanceId.toString().replace(/^[^\/]+\//, ''),
+      id: instanceId.toString().replace(/^[^/]+\//, ''),
     });
   } else if (messageBody.message === 'EXPORT') {
     const { message, action, id, instanceId, state } = messageBody;
@@ -373,11 +367,11 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         action as unknown as AppDispatchAction,
         state,
       ),
-      id: instanceId.toString().replace(/^[^\/]+\//, ''),
+      id: instanceId.toString().replace(/^[^/]+\//, ''),
     });
   } else {
     const { message, action, id, instanceId, state } = messageBody;
-    connections.tab[id!].postMessage({
+    connections.tab[id].postMessage({
       type: message,
       action,
       state: nonReduxDispatch(
@@ -387,7 +381,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         action as AppDispatchAction,
         state,
       ),
-      id: (instanceId as number).toString().replace(/^[^\/]+\//, ''),
+      id: (instanceId as number).toString().replace(/^[^/]+\//, ''),
     });
   }
 }
@@ -452,7 +446,7 @@ function messaging<S, A extends Action<string>>(
     return;
   }
   if (request.type === 'OPEN_OPTIONS') {
-    chrome.runtime.openOptionsPage();
+    void chrome.runtime.openOptionsPage();
     return;
   }
   if (request.type === 'OPTIONS') {
@@ -557,8 +551,8 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
       console.log(`Message from tab ${id}: ${msg.name}`);
       if (msg.name === 'INIT_INSTANCE') {
         if (typeof id === 'number') {
-          chrome.action.enable(id);
-          chrome.action.setIcon({ tabId: id, path: 'img/logo/38x38.png' });
+          void chrome.action.enable(id);
+          void chrome.action.setIcon({ tabId: id, path: 'img/logo/38x38.png' });
         }
         if (monitors > 0) port.postMessage({ type: 'START' });
 
@@ -611,6 +605,7 @@ chrome.notifications.onClicked.addListener((id) => {
   openDevToolsWindow('devtools-window');
 });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 const api: Middleware<{}, BackgroundState, Dispatch<BackgroundAction>> =
   (store) => (next) => (untypedAction) => {
     const action = untypedAction as BackgroundAction;