Fixed a bunch of Lint issues

.eslintignore

@@ -12,3 +12,10 @@ scripts/bench/benchmarks/**/*.js
 
 # React repository clone
 scripts/bench/remote-repo/
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist

.gitignore

@@ -22,3 +22,14 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist

.prettierignore

@@ -0,0 +1,6 @@
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist

packages/react-devtools-core/src/backend.js

@@ -253,7 +253,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
       }
     } catch (e) {
       console.error(
-        '[React DevTools] Failed to parse JSON: ' + String(event.data),
+        '[React DevTools] Failed to parse JSON: ' + (event.data: any),
       );
       return;
     }

packages/react-devtools-extensions/.eslintignore

@@ -1,13 +0,0 @@
-node_modules
-
-shells/browser/chrome/build
-shells/browser/firefox/build
-shells/browser/shared/build
-shells/dev/dist
-packages/react-devtools-core/dist
-packages/react-devtools-inline/dist
-vendor
-*.js.snap
-
-package-lock.json
-yarn.lock

packages/react-devtools-extensions/.eslintrc

@@ -1,19 +0,0 @@
-{
-  "extends": ["react-app","plugin:prettier/recommended"],
-  "plugins": ["react-hooks"],
-  "rules": {
-    "jsx-a11y/anchor-has-content": "off",
-    "no-loop-func": "off",
-    "react-hooks/exhaustive-deps": "error",
-    "react-hooks/rules-of-hooks": "error"
-  },
-  "settings": {
-    "version": "detect"
-  },
-  "globals": {
-    "__DEV__": "readonly",
-    "__TEST__": "readonly",
-    "jasmine": "readonly",
-    "spyOn": "readonly"
-  }
-}

packages/react-devtools-extensions/.flowconfig

@@ -1,35 +0,0 @@
-[ignore]
-.*/react/node_modules/.*
-.*/electron/node_modules/.*
-.*node_modules/archiver-utils
-.*node_modules/babel.*
-.*node_modules/browserify-zlib/.*
-.*node_modules/gh-pages/.*
-.*node_modules/invariant/.*
-.*node_modules/json-loader.*
-.*node_modules/json5.*
-.*node_modules/node-libs-browser.*
-.*node_modules/webpack.*
-.*node_modules/fbjs/flow.*
-.*node_modules/web-ext.*
-shells/browser/chrome/build/*
-shells/browser/firefox/build/*
-shells/dev/build/*
-
-[include]
-
-[libs]
-/flow-typed/
-./flow.js
-
-[lints]
-
-[options]
-server.max_workers=4
-esproposal.class_instance_fields=enable
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
-suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
-module.name_mapper='^src' ->'<PROJECT_ROOT>/src'
-
-[strict]

packages/react-devtools-extensions/.gitignore

@@ -1,21 +0,0 @@
-/shells/browser/chrome/*.crx
-/shells/browser/chrome/*.pem
-/shells/browser/firefox/*.xpi
-/shells/browser/firefox/*.pem
-/shells/browser/shared/build
-/packages/react-devtools-core/dist
-/packages/react-devtools-inline/dist
-/shells/dev/dist
-build
-/node_modules
-/packages/react-devtools-core/node_modules
-/packages/react-devtools-inline/node_modules
-/packages/react-devtools/node_modules
-npm-debug.log
-yarn-error.log
-.DS_Store
-yarn-error.log
-.vscode
-.idea
-.watchmanconfig
-*.pem

packages/react-devtools-extensions/.prettierignore

@@ -1,9 +0,0 @@
-node_modules
-
-shells/browser/chrome/build
-shells/browser/firefox/build
-shells/dev/build
-vendor
-
-package-lock.json
-yarn.lock

packages/react-devtools-extensions/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "es5"
-}

packages/react-devtools-extensions/build.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const archiver = require('archiver');
 const {execSync} = require('child_process');
 const {readFileSync, writeFileSync, createWriteStream} = require('fs');
@@ -28,7 +30,7 @@ const build = async (tempPath, manifestPath) => {
     '..',
     'node_modules',
     '.bin',
-    'webpack'
+    'webpack',
   );
   execSync(
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
@@ -36,7 +38,7 @@ const build = async (tempPath, manifestPath) => {
       cwd: __dirname,
       env: process.env,
       stdio: 'inherit',
-    }
+    },
   );
   execSync(
     `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
@@ -44,7 +46,7 @@ const build = async (tempPath, manifestPath) => {
       cwd: __dirname,
       env: process.env,
       stdio: 'inherit',
-    }
+    },
   );
 
   // Make temp dir
@@ -56,7 +58,7 @@ const build = async (tempPath, manifestPath) => {
   await copy(binPath, join(zipPath, 'build'));
   await copy(manifestPath, copiedManifestPath);
   await Promise.all(
-    STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
+    STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
   );
 
   const commit = getGitCommit();

packages/react-devtools-extensions/chrome/build.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const chalk = require('chalk');
 const {execSync} = require('child_process');
 const {existsSync} = require('fs');

packages/react-devtools-extensions/chrome/deploy.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const deploy = require('../shared/deploy');
 
 const main = async () => await deploy('chrome');

packages/react-devtools-extensions/chrome/test.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 
-const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies
+'use strict';
+
+const chromeLaunch = require('chrome-launch');
 const {resolve} = require('path');
 
 const EXTENSION_PATH = resolve('shells/browser/chrome/build/unpacked');

packages/react-devtools-extensions/deploy.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const {exec, execSync} = require('child_process');
 const {readFileSync, writeFileSync} = require('fs');
 const {join} = require('path');

packages/react-devtools-extensions/firefox/build.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const chalk = require('chalk');
 const build = require('../shared/build');
 

packages/react-devtools-extensions/firefox/deploy.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const deploy = require('../shared/deploy');
 
 const main = async () => await deploy('firefox');

packages/react-devtools-extensions/firefox/test.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+'use strict';
+
 const {exec} = require('child-process-promise');
 const {Finder} = require('firefox-profile');
 const {resolve} = require('path');

packages/react-devtools-extensions/flow-typed/chrome.js

@@ -1,5 +1,7 @@
 // @flow
 
+'use strict';
+
 declare var chrome: {
   devtools: {
     network: {

packages/react-devtools-extensions/flow-typed/jest.js

@@ -1,3 +1,5 @@
+'use strict';
+
 type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
   (...args: TArguments): TReturn,
   /**

packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -4,6 +4,8 @@
 // Type definitions for react-test-renderer 16.x.x
 // Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
 
+'use strict';
+
 type ReactComponentInstance = React$Component<any>;
 
 type ReactTestRendererJSON = {

packages/react-devtools-extensions/flow.js

@@ -18,7 +18,6 @@ declare module 'node-events' {
 }
 
 declare var __DEV__: boolean;
-declare var __TEST__: boolean;
 
 declare var jasmine: {|
   getEnv: () => {|

packages/react-devtools-extensions/popups/shared.js

@@ -1,5 +1,7 @@
 /* globals chrome */
 
+'use strict';
+
 document.addEventListener('DOMContentLoaded', function() {
   // Make links work
   const links = document.getElementsByTagName('a');

packages/react-devtools-extensions/src/backend.js

@@ -4,6 +4,8 @@
 
 /** @flow */
 
+'use strict';
+
 function welcome(event) {
   if (
     event.source !== window ||
@@ -51,7 +53,7 @@ function setup(hook) {
           payload: {event, payload},
         },
         '*',
-        transferable
+        transferable,
       );
     },
   });
@@ -66,12 +68,12 @@ function setup(hook) {
   initBackend(hook, agent, window);
 
   // Setup React Native style editor if a renderer like react-native-web has injected it.
-  if (!!hook.resolveRNStyle) {
+  if (hook.resolveRNStyle) {
     setupNativeStyleEditor(
       bridge,
       agent,
       hook.resolveRNStyle,
-      hook.nativeStyleEditorValidAttributes
+      hook.nativeStyleEditorValidAttributes,
     );
   }
 }

packages/react-devtools-extensions/src/background.js

@@ -1,5 +1,7 @@
 /* global chrome */
 
+'use strict';
+
 const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
@@ -37,7 +39,7 @@ function installContentScript(tabId: number) {
   chrome.tabs.executeScript(
     tabId,
     {file: '/build/contentScript.js'},
-    function() {}
+    function() {},
   );
 }
 

packages/react-devtools-extensions/src/contentScript.js

@@ -1,5 +1,7 @@
 /* global chrome */
 
+'use strict';
+
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -9,7 +11,7 @@ function sayHelloToBackend() {
       source: 'react-devtools-content-script',
       hello: true,
     },
-    '*'
+    '*',
   );
 }
 
@@ -19,7 +21,7 @@ function handleMessageFromDevtools(message) {
       source: 'react-devtools-content-script',
       payload: message,
     },
-    '*'
+    '*',
   );
 }
 
@@ -48,12 +50,12 @@ function handleDisconnect() {
         event: 'shutdown',
       },
     },
-    '*'
+    '*',
   );
 }
 
 // proxy from main page to devtools (via the background page)
-var port = chrome.runtime.connect({
+const port = chrome.runtime.connect({
   name: 'content-script',
 });
 port.onMessage.addListener(handleMessageFromDevtools);

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -85,5 +85,5 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 // Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the
 // devtools are installed (and skip its suggestion to install the devtools).
 injectCode(
-  ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact
+  ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact,
 );

packages/react-devtools-extensions/src/main.js

@@ -33,15 +33,15 @@ function syncSavedPreferences() {
   const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      componentFilters
-    )};`
+      componentFilters,
+    )};`,
   );
 
   const appendComponentStack = getAppendComponentStack();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-      appendComponentStack
-    )};`
+      appendComponentStack,
+    )};`,
   );
 }
 
@@ -133,7 +133,7 @@ function createPanelIfReactLoaded() {
 
         const viewElementSourceFunction = createViewElementSource(
           bridge,
-          store
+          store,
         );
 
         root = createRoot(document.createElement('div'));
@@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
               showWelcomeToTheNewDevToolsDialog: true,
               store,
               viewElementSourceFunction,
-            })
+            }),
           );
         };
 
@@ -161,9 +161,11 @@ function createPanelIfReactLoaded() {
 
       cloneStyleTags = () => {
         const linkTags = [];
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
         for (let linkTag of document.getElementsByTagName('link')) {
           if (linkTag.rel === 'stylesheet') {
             const newLinkTag = document.createElement('link');
+            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
             for (let attribute of linkTag.attributes) {
               newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
             }
@@ -191,11 +193,11 @@ function createPanelIfReactLoaded() {
           '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
             '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
             'false',
-          (didSelectionChange, error) => {
-            if (error) {
-              console.error(error);
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
             }
-          }
+          },
         );
       }
 
@@ -206,14 +208,14 @@ function createPanelIfReactLoaded() {
           '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
             '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
             'false',
-          (didSelectionChange, error) => {
-            if (error) {
-              console.error(error);
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
             } else if (didSelectionChange) {
               // Remember to sync the selection next time we show Components tab.
               needsToSyncElementSelection = true;
             }
-          }
+          },
         );
       }
 
@@ -226,7 +228,7 @@ function createPanelIfReactLoaded() {
       let needsToSyncElementSelection = false;
 
       chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
-        panel.onShown.addListener(panel => {
+        panel.onShown.addListener(() => {
           if (needsToSyncElementSelection) {
             needsToSyncElementSelection = false;
             bridge.send('syncSelectionFromNativeElementsPanel');
@@ -251,7 +253,7 @@ function createPanelIfReactLoaded() {
       });
 
       chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
-        panel.onShown.addListener(panel => {
+        panel.onShown.addListener(() => {
           if (currentPanel === panel) {
             return;
           }
@@ -281,7 +283,7 @@ function createPanelIfReactLoaded() {
           bridge.shutdown();
 
           profilingData = store.profilerStore.profilingData;
-        }
+        },
       );
 
       // Re-initialize DevTools panel when a new page is loaded.
@@ -298,7 +300,7 @@ function createPanelIfReactLoaded() {
           });
         });
       });
-    }
+    },
   );
 }
 

packages/react-devtools-extensions/src/panel.js

@@ -11,6 +11,7 @@ window.injectStyles = getLinkTags => {
 
     const linkTags = getLinkTags();
 
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let linkTag of linkTags) {
       document.head.appendChild(linkTag);
     }

packages/react-devtools-extensions/src/renderer.js

@@ -22,5 +22,5 @@ Object.defineProperty(
     get() {
       return attach;
     },
-  }: Object)
+  }: Object),
 );

packages/react-devtools-extensions/webpack.backend.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {getGitHubURL, getVersionString} = require('../utils');

packages/react-devtools-extensions/webpack.config.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {getGitHubURL, getVersionString} = require('../utils');

packages/react-devtools-inline/src/backend.js

@@ -77,7 +77,7 @@ function finishActivation(contentWindow: window) {
   initBackend(hook, agent, contentWindow);
 
   // Setup React Native style editor if a renderer like react-native-web has injected it.
-  if (!!hook.resolveRNStyle) {
+  if (hook.resolveRNStyle) {
     setupNativeStyleEditor(
       bridge,
       agent,

packages/react-devtools-inline/src/frontend.js

@@ -19,7 +19,7 @@ import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 export function initialize(
   contentWindow: window,
 ): React.AbstractComponent<Props, mixed> {
-  const onMessage = ({data, source}) => {
+  const onGetSavedPreferencesMessage = ({data, source}) => {
     if (source === 'react-devtools-content-script') {
       // Ignore messages from the DevTools browser extension.
     }
@@ -28,7 +28,7 @@ export function initialize(
       case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
         // This is the only message we're listening for,
         // so it's safe to cleanup after we've received it.
-        window.removeEventListener('message', onMessage);
+        window.removeEventListener('message', onGetSavedPreferencesMessage);
 
         // The renderer interface can't read saved preferences directly,
         // because they are stored in localStorage within the context of the extension.
@@ -47,7 +47,7 @@ export function initialize(
     }
   };
 
-  window.addEventListener('message', onMessage);
+  window.addEventListener('message', onGetSavedPreferencesMessage);
 
   const bridge: FrontendBridge = new Bridge({
     listen(fn) {

packages/react-devtools-shared/src/__tests__/profilingCache-test.js

@@ -374,8 +374,7 @@ describe('ProfilingCache', () => {
     };
     const Async = () => {
       Scheduler.unstable_advanceTime(3);
-      const data = getData();
-      return data;
+      return getData();
     };
 
     utils.act(() => store.profilerStore.startProfiling());

packages/react-devtools-shared/src/__tests__/storeStressSync-test.js

@@ -103,7 +103,7 @@ describe('StoreStress (Sync Mode)', () => {
       [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
       [a, [[]], b, c, [d, [[]], e]],
       [[[a, b, c, d], e]],
-      [a, b, c, d, e]
+      [a, b, c, d, e],
     ];
 
     // 5. Test fresh mount for each case.
@@ -214,7 +214,7 @@ describe('StoreStress (Sync Mode)', () => {
     // 2. Verify that we can update from every step to every other step and back.
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
+        container = document.createElement('div');
         act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
@@ -229,7 +229,7 @@ describe('StoreStress (Sync Mode)', () => {
     // 3. Same test as above, but this time we wrap children in a host component.
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
+        container = document.createElement('div');
         act(() =>
           ReactDOM.render(
             <Root>
@@ -288,7 +288,7 @@ describe('StoreStress (Sync Mode)', () => {
       [[a]],
       null,
       b,
-      a
+      a,
     ];
 
     const Never = () => {
@@ -578,7 +578,6 @@ describe('StoreStress (Sync Mode)', () => {
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
         act(() => {
-          const suspenseID = store.getElementIDAtIndex(2);
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -682,7 +681,7 @@ describe('StoreStress (Sync Mode)', () => {
       [[a]],
       null,
       b,
-      a
+      a,
     ];
 
     const Never = () => {
@@ -1014,7 +1013,6 @@ describe('StoreStress (Sync Mode)', () => {
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
         act(() => {
-          const suspenseID = store.getElementIDAtIndex(2);
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),

packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js

@@ -105,7 +105,7 @@ describe('StoreStressConcurrent', () => {
       [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
       [a, [[]], b, c, [d, [[]], e]],
       [[[a, b, c, d], e]],
-      [a, b, c, d, e]
+      [a, b, c, d, e],
     ];
 
     // 5. Test fresh mount for each case.
@@ -222,9 +222,9 @@ describe('StoreStressConcurrent', () => {
     // 2. Verify that we can update from every step to every other step and back.
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
+        container = document.createElement('div');
         // $FlowFixMe
-        let root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.unstable_createRoot(container);
         act(() => root.render(<Root>{steps[i]}</Root>));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.render(<Root>{steps[j]}</Root>));
@@ -239,9 +239,9 @@ describe('StoreStressConcurrent', () => {
     // 3. Same test as above, but this time we wrap children in a host component.
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
+        container = document.createElement('div');
         // $FlowFixMe
-        let root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.unstable_createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -297,7 +297,7 @@ describe('StoreStressConcurrent', () => {
       [[a]],
       null,
       b,
-      a
+      a,
     ];
 
     const Never = () => {
@@ -584,7 +584,6 @@ describe('StoreStressConcurrent', () => {
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
         act(() => {
-          const suspenseID = store.getElementIDAtIndex(2);
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -686,7 +685,7 @@ describe('StoreStressConcurrent', () => {
       [[a]],
       null,
       b,
-      a
+      a,
     ];
 
     const Never = () => {
@@ -1015,7 +1014,6 @@ describe('StoreStressConcurrent', () => {
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
         act(() => {
-          const suspenseID = store.getElementIDAtIndex(2);
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),

packages/react-devtools-shared/src/__tests__/treeContext-test.js

@@ -98,7 +98,7 @@ describe('TreeListContext', () => {
         const index = ((state.selectedElementIndex: any): number);
         utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
         utils.act(() => renderer.update(<Contexts />));
-        expect(state).toMatchSnapshot(`3: select element after (${index})`);
+        expect(state).toMatchSnapshot(`3: select element after (${index})`);
       }
 
       while (

packages/react-devtools-shared/src/__tests__/utils.js

@@ -78,7 +78,7 @@ export function createDisplayNameFilter(
   const Types = require('react-devtools-shared/src/types');
   let isValid = true;
   try {
-    new RegExp(source);
+    new RegExp(source); // eslint-disable-line no-new
   } catch (error) {
     isValid = false;
   }
@@ -118,7 +118,7 @@ export function createLocationFilter(
   const Types = require('react-devtools-shared/src/types');
   let isValid = true;
   try {
-    new RegExp(source);
+    new RegExp(source); // eslint-disable-line no-new
   } catch (error) {
     isValid = false;
   }
@@ -136,8 +136,8 @@ export function getRendererID(): number {
   }
   const ids = Object.keys(global.agent._rendererInterfaces);
 
-  const id = ids.find(id => {
-    const rendererInterface = global.agent._rendererInterfaces[id];
+  const id = ids.find(innerID => {
+    const rendererInterface = global.agent._rendererInterfaces[innerID];
     return rendererInterface.renderer.rendererPackageName === 'react-dom';
   });
 
@@ -162,7 +162,6 @@ export function requireTestRenderer(): ReactTestRenderer {
 }
 
 export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
-  const {act} = require('./utils');
   const {
     prepareProfilingDataExport,
     prepareProfilingDataFrontendFromExport,

packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js

@@ -24,6 +24,7 @@ export default function resolveBoxStyle(
 
   const styleForAll = style[prefix];
   if (styleForAll != null) {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (const key of Object.keys(result)) {
       result[key] = styleForAll;
     }

packages/react-devtools-shared/src/backend/console.js

@@ -92,6 +92,7 @@ export function patch(): void {
           if (!alreadyHasComponentStack) {
             // If there's a component stack for at least one of the injected renderers, append it.
             // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
             for (let {
               getCurrentFiber,
               getDisplayNameForFiber,

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -44,7 +44,7 @@ function getData(internalInstance: InternalInstance) {
   // != used deliberately here to catch undefined and null
   if (internalInstance._currentElement != null) {
     if (internalInstance._currentElement.key) {
-      key = String(internalInstance._currentElement.key);
+      key = '' + internalInstance._currentElement.key;
     }
 
     const elementType = internalInstance._currentElement.type;

packages/react-devtools-shared/src/backend/renderer.js

@@ -657,6 +657,7 @@ export function attach(
     if (hideElementsWithDisplayNames.size > 0) {
       const displayName = getDisplayNameForFiber(fiber);
       if (displayName != null) {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
         for (let displayNameRegExp of hideElementsWithDisplayNames) {
           if (displayNameRegExp.test(displayName)) {
             return true;
@@ -667,6 +668,7 @@ export function attach(
 
     if (_debugSource != null && hideElementsWithPaths.size > 0) {
       const {fileName} = _debugSource;
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
       for (let pathRegExp of hideElementsWithPaths) {
         if (pathRegExp.test(fileName)) {
           return true;
@@ -940,6 +942,7 @@ export function attach(
 
     const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
     const changedKeys = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let key of keys) {
       if (prev[key] !== next[key]) {
         changedKeys.push(key);
@@ -1316,7 +1319,7 @@ export function attach(
     const id = getFiberID(getPrimaryFiber(fiber));
     const {actualDuration, treeBaseDuration} = fiber;
 
-    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
+    idToTreeBaseDurationMap.set(id, treeBaseDuration || 0);
 
     if (isProfiling) {
       const {alternate} = fiber;
@@ -1327,12 +1330,12 @@ export function attach(
       ) {
         // Tree base duration updates are included in the operations typed array.
         // So we have to convert them from milliseconds to microseconds so we can send them as ints.
-        const treeBaseDuration = Math.floor(
-          (fiber.treeBaseDuration || 0) * 1000,
+        const convertedTreeBaseDuration = Math.floor(
+          (treeBaseDuration || 0) * 1000,
         );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
         pushOperation(id);
-        pushOperation(treeBaseDuration);
+        pushOperation(convertedTreeBaseDuration);
       }
 
       if (alternate == null || didFiberRender(alternate, fiber)) {

packages/react-devtools-shared/src/constants.js

@@ -39,7 +39,7 @@ let COMPACT_LINE_HEIGHT;
 
 try {
   // $FlowFixMe
-  const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax
+  const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
     .default;
 
   const extractVar = varName => {

packages/react-devtools-shared/src/devtools/ProfilerStore.js

@@ -43,7 +43,7 @@ export default class ProfilerStore extends EventEmitter<{|
 
   // Snapshot of the state of the main Store (including all roots) when profiling started.
   // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
-  // to reconstruct the state of each root for each commit.
+  // to reconstruct the state of each root for each commit.
   // It's okay to use a single root to store this information because node IDs are unique across all roots.
   //
   // This map is initialized when profiling starts and updated when a new root is added while profiling;
@@ -52,7 +52,7 @@ export default class ProfilerStore extends EventEmitter<{|
 
   // Map of root (id) to a list of tree mutation that occur during profiling.
   // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
-  // to reconstruct the state of each root for each commit.
+  // to reconstruct the state of each root for each commit.
   //
   // This map is only updated while profiling is in progress;
   // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
@@ -283,6 +283,7 @@ export default class ProfilerStore extends EventEmitter<{|
       this._rendererQueue.clear();
 
       // Record all renderer IDs initially too (in case of unmount)
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
       for (let rendererID of this._store.rootIDToRendererID.values()) {
         if (!this._initialRendererIDs.has(rendererID)) {
           this._initialRendererIDs.add(rendererID);

packages/react-devtools-shared/src/devtools/cache.js

@@ -143,7 +143,6 @@ export function createResource<Input, Key, Value>(
 
     read(input: Input): Value {
       // Prevent access outside of render.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       readContext(CacheContext);
 
       const key = hashInput(input);
@@ -169,7 +168,6 @@ export function createResource<Input, Key, Value>(
 
     preload(input: Input): void {
       // Prevent access outside of render.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       readContext(CacheContext);
 
       const key = hashInput(input);

packages/react-devtools-shared/src/devtools/store.js

@@ -484,9 +484,9 @@ export default class Store extends EventEmitter<{|
         // (1) another node that's already in the tree, or (2) the root (owner)
         // at which point, our depth is just the depth of that node plus one.
         sortedIDs.forEach(id => {
-          const element = this._idToElement.get(id);
-          if (element != null) {
-            let parentID = element.parentID;
+          const innerElement = this._idToElement.get(id);
+          if (innerElement != null) {
+            let parentID = innerElement.parentID;
 
             let depth = 0;
             while (parentID > 0) {
@@ -506,7 +506,7 @@ export default class Store extends EventEmitter<{|
               throw Error('Invalid owners list');
             }
 
-            list.push({...element, depth});
+            list.push({...innerElement, depth});
           }
         });
       }
@@ -717,7 +717,7 @@ export default class Store extends EventEmitter<{|
           const id = ((operations[i + 1]: any): number);
           const type = ((operations[i + 2]: any): ElementType);
 
-          i = i + 3;
+          i += 3;
 
           if (this._idToElement.has(id)) {
             throw Error(
@@ -829,7 +829,7 @@ export default class Store extends EventEmitter<{|
         }
         case TREE_OPERATION_REMOVE: {
           const removeLength = ((operations[i + 1]: any): number);
-          i = i + 2;
+          i += 2;
 
           for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
             const id = ((operations[i]: any): number);
@@ -840,7 +840,7 @@ export default class Store extends EventEmitter<{|
               );
             }
 
-            i = i + 1;
+            i += 1;
 
             const element = ((this._idToElement.get(id): any): Element);
             const {children, ownerID, parentID, weight} = element;
@@ -891,7 +891,7 @@ export default class Store extends EventEmitter<{|
         case TREE_OPERATION_REORDER_CHILDREN: {
           const id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);
-          i = i + 3;
+          i += 3;
 
           if (!this._idToElement.has(id)) {
             throw Error(
@@ -920,7 +920,7 @@ export default class Store extends EventEmitter<{|
               }
             }
           }
-          i = i + numChildren;
+          i += numChildren;
 
           if (__DEBUG__) {
             debug('Re-order', `Node ${id} children ${children.join(',')}`);
@@ -931,7 +931,7 @@ export default class Store extends EventEmitter<{|
           // Base duration updates are only sent while profiling is in progress.
           // We can ignore them at this point.
           // The profiler UI uses them lazily in order to generate the tree.
-          i = i + 3;
+          i += 3;
           break;
         default:
           throw Error(`Unsupported Bridge operation ${operation}`);

packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js

@@ -211,7 +211,10 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
     let overrideValueFn = null;
     // TODO Maybe read editable value from debug hook?
     if (canEditHooks && isStateEditable) {
-      overrideValueFn = (absolutePath: Array<string | number>, value: any) => {
+      overrideValueFn = (
+        absolutePath: Array<string | number>,
+        newValue: any,
+      ) => {
         const rendererID = store.getRendererIDForElement(id);
         if (rendererID !== null) {
           bridge.send('overrideHookState', {
@@ -223,7 +226,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
             // so it's important that we remove that part of the path before sending the update.
             path: absolutePath.slice(path.length + 1),
             rendererID,
-            value,
+            value: newValue,
           });
         }
       };

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -20,7 +20,6 @@ import type {
   InspectedElementPayload,
 } from 'react-devtools-shared/src/backend/types';
 import type {
-  DehydratedData,
   Element,
   InspectedElement as InspectedElementFrontend,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -280,7 +279,6 @@ function InspectedElementContextController({children}: Props) {
   const value = useMemo(
     () => ({getInspectedElement, getInspectedElementPath}),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentlyInspectedElement, getInspectedElement, getInspectedElementPath],
   );
 

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js

@@ -154,18 +154,20 @@ export default function KeyValue({
     } else {
       const hasChildren = Object.entries(value).length > 0;
 
-      children = Object.entries(value).map<Element<any>>(([name, value]) => (
-        <KeyValue
-          key={name}
-          depth={depth + 1}
-          inspectPath={inspectPath}
-          hidden={hidden || !isOpen}
-          name={name}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(name)}
-          value={value}
-        />
-      ));
+      children = Object.entries(value).map<Element<any>>(
+        ([innerName, innerValue]) => (
+          <KeyValue
+            key={innerName}
+            depth={depth + 1}
+            inspectPath={inspectPath}
+            hidden={hidden || !isOpen}
+            name={innerName}
+            overrideValueFn={overrideValueFn}
+            path={path.concat(innerName)}
+            value={innerValue}
+          />
+        ),
+      );
       children.unshift(
         <div
           key={`${depth}-root`}

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js

@@ -162,27 +162,27 @@ function Row({
   const [isAttributeValid, setIsAttributeValid] = useState(true);
   const [isValueValid, setIsValueValid] = useState(true);
 
-  const validateAndSetLocalAttribute = attribute => {
+  const validateAndSetLocalAttribute = newAttribute => {
     const isValid =
-      attribute === '' ||
+      newAttribute === '' ||
       validAttributes === null ||
-      validAttributes.indexOf(attribute) >= 0;
+      validAttributes.indexOf(newAttribute) >= 0;
 
     batchedUpdates(() => {
-      setLocalAttribute(attribute);
+      setLocalAttribute(newAttribute);
       setIsAttributeValid(isValid);
     });
   };
 
-  const validateAndSetLocalValue = value => {
+  const validateAndSetLocalValue = newValue => {
     let isValid = false;
     try {
-      JSON.parse(value);
+      JSON.parse(newValue);
       isValid = true;
     } catch (error) {}
 
     batchedUpdates(() => {
-      setLocalValue(value);
+      setLocalValue(newValue);
       setIsValueValid(isValid);
     });
   };

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js

@@ -187,7 +187,6 @@ function NativeStyleContextController({children}: Props) {
   const value = useMemo(
     () => ({getStyleAndLayout}),
     // NativeStyle is used to invalidate the cache and schedule an update with React.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentStyleAndLayout, getStyleAndLayout],
   );
 

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React, {Fragment, useContext, useMemo} from 'react';
-import Store from 'react-devtools-shared/src/devtools/store';
 import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
 import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
 import {NativeStyleContext} from './context';

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -130,18 +130,18 @@ export default function OwnerStack() {
         return () => {};
       }
 
-      let elementsTotalWidth = 0;
+      let totalWidth = 0;
       for (let i = 0; i < owners.length; i++) {
         const element = elementsBarRef.current.children[i];
         const computedStyle = getComputedStyle(element);
 
-        elementsTotalWidth +=
+        totalWidth +=
           element.offsetWidth +
           parseInt(computedStyle.marginLeft, 10) +
           parseInt(computedStyle.marginRight, 10);
       }
 
-      setElementsTotalWidth(elementsTotalWidth);
+      setElementsTotalWidth(totalWidth);
     },
     [elementsBarRef, isOverflowing, owners.length],
   );
@@ -164,7 +164,7 @@ export default function OwnerStack() {
             {selectedOwner != null && (
               <ElementView
                 owner={selectedOwner}
-                isSelected
+                isSelected={true}
                 selectOwner={selectOwner}
               />
             )}
@@ -290,9 +290,6 @@ function BackToOwnerButton({
   }
 
   const owner = owners[selectedIndex - 1];
-  if (owner == null) {
-    debugger;
-  }
   const isInStore = store.containsElement(owner.id);
 
   return (

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -349,7 +349,7 @@ function InspectedElementView({
         data={props}
         inspectPath={inspectPropsPath}
         overrideValueFn={overridePropsFn}
-        showWhenEmpty
+        showWhenEmpty={true}
       />
       {type === ElementTypeSuspense ? (
         <InspectedElementTree

packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js

@@ -6,7 +6,6 @@ import {SettingsContext} from '../Settings/SettingsContext';
 import TreeFocusedContext from './TreeFocusedContext';
 import {StoreContext} from '../context';
 import {useSubscription} from '../hooks';
-import Store from '../../store';
 
 import styles from './SelectedTreeHighlight.css';
 

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -418,6 +418,7 @@ function updateIndentationSizeVar(
 
   let maxIndentationSize: number = indentationSizeRef.current;
 
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
   for (let child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
 

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -347,15 +347,15 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 
                 let foundMatch = false;
                 for (let index = 0; index < searchResults.length; index++) {
-                  const id = searchResults[index];
+                  const resultID = searchResults[index];
                   if (
                     newElementIndex <
-                    ((store.getIndexOfElementID(id): any): number)
+                    ((store.getIndexOfElementID(resultID): any): number)
                   ) {
                     foundMatch = true;
                     searchResults = searchResults
                       .slice(0, index)
-                      .concat(id)
+                      .concat(resultID)
                       .concat(searchResults.slice(index));
                     break;
                   }
@@ -807,8 +807,8 @@ function getNearestResultIndex(
   selectedElementIndex: number,
 ): number {
   const index = searchResults.findIndex(id => {
-    const index = store.getIndexOfElementID(id);
-    return index !== null && index >= selectedElementIndex;
+    const innerIndex = store.getIndexOfElementID(id);
+    return innerIndex !== null && innerIndex >= selectedElementIndex;
   });
 
   return index === -1 ? 0 : index;