@samitouri / QOS-React-2 / commits / ac2e861fbe

Fixed a bunch of Lint issues

Brian Vaughn committed Aug 13, 2019 at 21:59 UTC ac2e861fbe05901b874e3ab49807abab820ef648
140 files changed +253 -305
.eslintignore
+7
@@ -12,3 +12,10 @@ scripts/bench/benchmarks/**/*.js
12
13 # React repository clone
14 scripts/bench/remote-repo/
15 +
16 +packages/react-devtools-core/dist
17 +packages/react-devtools-extensions/chrome/build
18 +packages/react-devtools-extensions/firefox/build
19 +packages/react-devtools-extensions/shared/build
20 +packages/react-devtools-inline/dist
21 +packages/react-devtools-shell/dist
\ No newline at end of file
.gitignore
+11
@@ -22,3 +22,14 @@ chrome-user-data
22 .vscode
23 *.swp
24 *.swo
25 +
26 +packages/react-devtools-core/dist
27 +packages/react-devtools-extensions/chrome/build
28 +packages/react-devtools-extensions/chrome/*.crx
29 +packages/react-devtools-extensions/chrome/*.pem
30 +packages/react-devtools-extensions/firefox/build
31 +packages/react-devtools-extensions/firefox/*.xpi
32 +packages/react-devtools-extensions/firefox/*.pem
33 +packages/react-devtools-extensions/shared/build
34 +packages/react-devtools-inline/dist
35 +packages/react-devtools-shell/dist
\ No newline at end of file
.prettierignore new
+6
@@ -0,0 +1,6 @@
1 +packages/react-devtools-core/dist
2 +packages/react-devtools-extensions/chrome/build
3 +packages/react-devtools-extensions/firefox/build
4 +packages/react-devtools-extensions/shared/build
5 +packages/react-devtools-inline/dist
6 +packages/react-devtools-shell/dist
\ No newline at end of file
packages/react-devtools-core/src/backend.js
+1 -1
@@ -253,7 +253,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
253 }
254 } catch (e) {
255 console.error(
256 - '[React DevTools] Failed to parse JSON: ' + String(event.data),
256 + '[React DevTools] Failed to parse JSON: ' + (event.data: any),
257 );
258 return;
259 }
packages/react-devtools-extensions/.eslintignore deleted
-13
@@ -1,13 +0,0 @@
1 -node_modules
2 -
3 -shells/browser/chrome/build
4 -shells/browser/firefox/build
5 -shells/browser/shared/build
6 -shells/dev/dist
7 -packages/react-devtools-core/dist
8 -packages/react-devtools-inline/dist
9 -vendor
10 -*.js.snap
11 -
12 -package-lock.json
13 -yarn.lock
packages/react-devtools-extensions/.eslintrc deleted
-19
@@ -1,19 +0,0 @@
1 -{
2 - "extends": ["react-app","plugin:prettier/recommended"],
3 - "plugins": ["react-hooks"],
4 - "rules": {
5 - "jsx-a11y/anchor-has-content": "off",
6 - "no-loop-func": "off",
7 - "react-hooks/exhaustive-deps": "error",
8 - "react-hooks/rules-of-hooks": "error"
9 - },
10 - "settings": {
11 - "version": "detect"
12 - },
13 - "globals": {
14 - "__DEV__": "readonly",
15 - "__TEST__": "readonly",
16 - "jasmine": "readonly",
17 - "spyOn": "readonly"
18 - }
19 -}
packages/react-devtools-extensions/.flowconfig deleted
-35
@@ -1,35 +0,0 @@
1 -[ignore]
2 -.*/react/node_modules/.*
3 -.*/electron/node_modules/.*
4 -.*node_modules/archiver-utils
5 -.*node_modules/babel.*
6 -.*node_modules/browserify-zlib/.*
7 -.*node_modules/gh-pages/.*
8 -.*node_modules/invariant/.*
9 -.*node_modules/json-loader.*
10 -.*node_modules/json5.*
11 -.*node_modules/node-libs-browser.*
12 -.*node_modules/webpack.*
13 -.*node_modules/fbjs/flow.*
14 -.*node_modules/web-ext.*
15 -shells/browser/chrome/build/*
16 -shells/browser/firefox/build/*
17 -shells/dev/build/*
18 -
19 -[include]
20 -
21 -[libs]
22 -/flow-typed/
23 -./flow.js
24 -
25 -[lints]
26 -
27 -[options]
28 -server.max_workers=4
29 -esproposal.class_instance_fields=enable
30 -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
31 -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
32 -suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
33 -module.name_mapper='^src' ->'<PROJECT_ROOT>/src'
34 -
35 -[strict]
packages/react-devtools-extensions/.gitignore deleted
-21
@@ -1,21 +0,0 @@
1 -/shells/browser/chrome/*.crx
2 -/shells/browser/chrome/*.pem
3 -/shells/browser/firefox/*.xpi
4 -/shells/browser/firefox/*.pem
5 -/shells/browser/shared/build
6 -/packages/react-devtools-core/dist
7 -/packages/react-devtools-inline/dist
8 -/shells/dev/dist
9 -build
10 -/node_modules
11 -/packages/react-devtools-core/node_modules
12 -/packages/react-devtools-inline/node_modules
13 -/packages/react-devtools/node_modules
14 -npm-debug.log
15 -yarn-error.log
16 -.DS_Store
17 -yarn-error.log
18 -.vscode
19 -.idea
20 -.watchmanconfig
21 -*.pem
\ No newline at end of file
packages/react-devtools-extensions/.prettierignore deleted
-9
@@ -1,9 +0,0 @@
1 -node_modules
2 -
3 -shells/browser/chrome/build
4 -shells/browser/firefox/build
5 -shells/dev/build
6 -vendor
7 -
8 -package-lock.json
9 -yarn.lock
\ No newline at end of file
packages/react-devtools-extensions/.prettierrc deleted
-4
@@ -1,4 +0,0 @@
1 -{
2 - "singleQuote": true,
3 - "trailingComma": "es5"
4 -}
packages/react-devtools-extensions/build.js renamed
+6 -4
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const archiver = require('archiver');
6 const {execSync} = require('child_process');
7 const {readFileSync, writeFileSync, createWriteStream} = require('fs');
@@ -28,7 +30,7 @@ const build = async (tempPath, manifestPath) => {
30 '..',
31 'node_modules',
32 '.bin',
31 - 'webpack'
33 + 'webpack',
34 );
35 execSync(
36 `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
@@ -36,7 +38,7 @@ const build = async (tempPath, manifestPath) => {
38 cwd: __dirname,
39 env: process.env,
40 stdio: 'inherit',
39 - }
41 + },
42 );
43 execSync(
44 `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
@@ -44,7 +46,7 @@ const build = async (tempPath, manifestPath) => {
46 cwd: __dirname,
47 env: process.env,
48 stdio: 'inherit',
47 - }
49 + },
50 );
51
52 // Make temp dir
@@ -56,7 +58,7 @@ const build = async (tempPath, manifestPath) => {
58 await copy(binPath, join(zipPath, 'build'));
59 await copy(manifestPath, copiedManifestPath);
60 await Promise.all(
59 - STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
61 + STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
62 );
63
64 const commit = getGitCommit();
packages/react-devtools-extensions/chrome/build.js
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const chalk = require('chalk');
6 const {execSync} = require('child_process');
7 const {existsSync} = require('fs');
packages/react-devtools-extensions/chrome/deploy.js
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const deploy = require('../shared/deploy');
6
7 const main = async () => await deploy('chrome');
packages/react-devtools-extensions/chrome/test.js
+3 -1
@@ -1,6 +1,8 @@
1 #!/usr/bin/env node
2
3 -const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies
3 +'use strict';
4 +
5 +const chromeLaunch = require('chrome-launch');
6 const {resolve} = require('path');
7
8 const EXTENSION_PATH = resolve('shells/browser/chrome/build/unpacked');
packages/react-devtools-extensions/deploy.chrome.html renamed
packages/react-devtools-extensions/deploy.firefox.html renamed
packages/react-devtools-extensions/deploy.html renamed
packages/react-devtools-extensions/deploy.js renamed
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const {exec, execSync} = require('child_process');
6 const {readFileSync, writeFileSync} = require('fs');
7 const {join} = require('path');
packages/react-devtools-extensions/firefox/build.js
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const chalk = require('chalk');
6 const build = require('../shared/build');
7
packages/react-devtools-extensions/firefox/deploy.js
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const deploy = require('../shared/deploy');
6
7 const main = async () => await deploy('firefox');
packages/react-devtools-extensions/firefox/test.js
+2
@@ -1,5 +1,7 @@
1 #!/usr/bin/env node
2
3 +'use strict';
4 +
5 const {exec} = require('child-process-promise');
6 const {Finder} = require('firefox-profile');
7 const {resolve} = require('path');
packages/react-devtools-extensions/flow-typed/chrome.js
+2
@@ -1,5 +1,7 @@
1 // @flow
2
3 +'use strict';
4 +
5 declare var chrome: {
6 devtools: {
7 network: {
packages/react-devtools-extensions/flow-typed/jest.js
+2
@@ -1,3 +1,5 @@
1 +'use strict';
2 +
3 type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
4 (...args: TArguments): TReturn,
5 /**
packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
+2
@@ -4,6 +4,8 @@
4 // Type definitions for react-test-renderer 16.x.x
5 // Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
6
7 +'use strict';
8 +
9 type ReactComponentInstance = React$Component<any>;
10
11 type ReactTestRendererJSON = {
packages/react-devtools-extensions/flow.js
-1
@@ -18,7 +18,6 @@ declare module 'node-events' {
18 }
19
20 declare var __DEV__: boolean;
21 -declare var __TEST__: boolean;
21
22 declare var jasmine: {|
23 getEnv: () => {|
packages/react-devtools-extensions/icons/128-deadcode.png renamed
packages/react-devtools-extensions/icons/128-development.png renamed
packages/react-devtools-extensions/icons/128-disabled.png renamed
packages/react-devtools-extensions/icons/128-outdated.png renamed
packages/react-devtools-extensions/icons/128-production.png renamed
packages/react-devtools-extensions/icons/128-unminified.png renamed
packages/react-devtools-extensions/icons/16-deadcode.png renamed
packages/react-devtools-extensions/icons/16-development.png renamed
packages/react-devtools-extensions/icons/16-disabled.png renamed
packages/react-devtools-extensions/icons/16-outdated.png renamed
packages/react-devtools-extensions/icons/16-production.png renamed
packages/react-devtools-extensions/icons/16-unminified.png renamed
packages/react-devtools-extensions/icons/32-deadcode.png renamed
packages/react-devtools-extensions/icons/32-development.png renamed
packages/react-devtools-extensions/icons/32-disabled.png renamed
packages/react-devtools-extensions/icons/32-outdated.png renamed
packages/react-devtools-extensions/icons/32-production.png renamed
packages/react-devtools-extensions/icons/32-unminified.png renamed
packages/react-devtools-extensions/icons/48-deadcode.png renamed
packages/react-devtools-extensions/icons/48-development.png renamed
packages/react-devtools-extensions/icons/48-disabled.png renamed
packages/react-devtools-extensions/icons/48-outdated.png renamed
packages/react-devtools-extensions/icons/48-production.png renamed
packages/react-devtools-extensions/icons/48-unminified.png renamed
packages/react-devtools-extensions/icons/deadcode.svg renamed
packages/react-devtools-extensions/icons/development.svg renamed
packages/react-devtools-extensions/icons/disabled.svg renamed
packages/react-devtools-extensions/icons/outdated.svg renamed
packages/react-devtools-extensions/icons/production.svg renamed
packages/react-devtools-extensions/main.html renamed
packages/react-devtools-extensions/panel.html renamed
packages/react-devtools-extensions/popups/deadcode.html renamed
packages/react-devtools-extensions/popups/development.html renamed
packages/react-devtools-extensions/popups/disabled.html renamed
packages/react-devtools-extensions/popups/outdated.html renamed
packages/react-devtools-extensions/popups/production.html renamed
packages/react-devtools-extensions/popups/shared.js renamed
+2
@@ -1,5 +1,7 @@
1 /* globals chrome */
2
3 +'use strict';
4 +
5 document.addEventListener('DOMContentLoaded', function() {
6 // Make links work
7 const links = document.getElementsByTagName('a');
packages/react-devtools-extensions/popups/unminified.html renamed
packages/react-devtools-extensions/src/backend.js renamed
+5 -3
@@ -4,6 +4,8 @@
4
5 /** @flow */
6
7 +'use strict';
8 +
9 function welcome(event) {
10 if (
11 event.source !== window ||
@@ -51,7 +53,7 @@ function setup(hook) {
53 payload: {event, payload},
54 },
55 '*',
54 - transferable
56 + transferable,
57 );
58 },
59 });
@@ -66,12 +68,12 @@ function setup(hook) {
68 initBackend(hook, agent, window);
69
70 // Setup React Native style editor if a renderer like react-native-web has injected it.
69 - if (!!hook.resolveRNStyle) {
71 + if (hook.resolveRNStyle) {
72 setupNativeStyleEditor(
73 bridge,
74 agent,
75 hook.resolveRNStyle,
74 - hook.nativeStyleEditorValidAttributes
76 + hook.nativeStyleEditorValidAttributes,
77 );
78 }
79 }
packages/react-devtools-extensions/src/background.js renamed
+3 -1
@@ -1,5 +1,7 @@
1 /* global chrome */
2
3 +'use strict';
4 +
5 const ports = {};
6
7 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
@@ -37,7 +39,7 @@ function installContentScript(tabId: number) {
39 chrome.tabs.executeScript(
40 tabId,
41 {file: '/build/contentScript.js'},
40 - function() {}
42 + function() {},
43 );
44 }
45
packages/react-devtools-extensions/src/contentScript.js renamed
+6 -4
@@ -1,5 +1,7 @@
1 /* global chrome */
2
3 +'use strict';
4 +
5 let backendDisconnected: boolean = false;
6 let backendInitialized: boolean = false;
7
@@ -9,7 +11,7 @@ function sayHelloToBackend() {
11 source: 'react-devtools-content-script',
12 hello: true,
13 },
12 - '*'
14 + '*',
15 );
16 }
17
@@ -19,7 +21,7 @@ function handleMessageFromDevtools(message) {
21 source: 'react-devtools-content-script',
22 payload: message,
23 },
22 - '*'
24 + '*',
25 );
26 }
27
@@ -48,12 +50,12 @@ function handleDisconnect() {
50 event: 'shutdown',
51 },
52 },
51 - '*'
53 + '*',
54 );
55 }
56
57 // proxy from main page to devtools (via the background page)
56 -var port = chrome.runtime.connect({
58 +const port = chrome.runtime.connect({
59 name: 'content-script',
60 });
61 port.onMessage.addListener(handleMessageFromDevtools);
packages/react-devtools-extensions/src/inject.js renamed
packages/react-devtools-extensions/src/injectGlobalHook.js renamed
+1 -1
@@ -85,5 +85,5 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
85 // Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the
86 // devtools are installed (and skip its suggestion to install the devtools).
87 injectCode(
88 - ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact
88 + ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact,
89 );
packages/react-devtools-extensions/src/main.js renamed
+20 -18
@@ -33,15 +33,15 @@ function syncSavedPreferences() {
33 const componentFilters = getSavedComponentFilters();
34 chrome.devtools.inspectedWindow.eval(
35 `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
36 - componentFilters
37 - )};`
36 + componentFilters,
37 + )};`,
38 );
39
40 const appendComponentStack = getAppendComponentStack();
41 chrome.devtools.inspectedWindow.eval(
42 `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
43 - appendComponentStack
44 - )};`
43 + appendComponentStack,
44 + )};`,
45 );
46 }
47
@@ -133,7 +133,7 @@ function createPanelIfReactLoaded() {
133
134 const viewElementSourceFunction = createViewElementSource(
135 bridge,
136 - store
136 + store,
137 );
138
139 root = createRoot(document.createElement('div'));
@@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
152 showWelcomeToTheNewDevToolsDialog: true,
153 store,
154 viewElementSourceFunction,
155 - })
155 + }),
156 );
157 };
158
@@ -161,9 +161,11 @@ function createPanelIfReactLoaded() {
161
162 cloneStyleTags = () => {
163 const linkTags = [];
164 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
165 for (let linkTag of document.getElementsByTagName('link')) {
166 if (linkTag.rel === 'stylesheet') {
167 const newLinkTag = document.createElement('link');
168 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
169 for (let attribute of linkTag.attributes) {
170 newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
171 }
@@ -191,11 +193,11 @@ function createPanelIfReactLoaded() {
193 '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
194 '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
195 'false',
194 - (didSelectionChange, error) => {
195 - if (error) {
196 - console.error(error);
196 + (didSelectionChange, evalError) => {
197 + if (evalError) {
198 + console.error(evalError);
199 }
198 - }
200 + },
201 );
202 }
203
@@ -206,14 +208,14 @@ function createPanelIfReactLoaded() {
208 '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
209 '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
210 'false',
209 - (didSelectionChange, error) => {
210 - if (error) {
211 - console.error(error);
211 + (didSelectionChange, evalError) => {
212 + if (evalError) {
213 + console.error(evalError);
214 } else if (didSelectionChange) {
215 // Remember to sync the selection next time we show Components tab.
216 needsToSyncElementSelection = true;
217 }
216 - }
218 + },
219 );
220 }
221
@@ -226,7 +228,7 @@ function createPanelIfReactLoaded() {
228 let needsToSyncElementSelection = false;
229
230 chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
229 - panel.onShown.addListener(panel => {
231 + panel.onShown.addListener(() => {
232 if (needsToSyncElementSelection) {
233 needsToSyncElementSelection = false;
234 bridge.send('syncSelectionFromNativeElementsPanel');
@@ -251,7 +253,7 @@ function createPanelIfReactLoaded() {
253 });
254
255 chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
254 - panel.onShown.addListener(panel => {
256 + panel.onShown.addListener(() => {
257 if (currentPanel === panel) {
258 return;
259 }
@@ -281,7 +283,7 @@ function createPanelIfReactLoaded() {
283 bridge.shutdown();
284
285 profilingData = store.profilerStore.profilingData;
284 - }
286 + },
287 );
288
289 // Re-initialize DevTools panel when a new page is loaded.
@@ -298,7 +300,7 @@ function createPanelIfReactLoaded() {
300 });
301 });
302 });
301 - }
303 + },
304 );
305 }
306
packages/react-devtools-extensions/src/panel.js renamed
+1
@@ -11,6 +11,7 @@ window.injectStyles = getLinkTags => {
11
12 const linkTags = getLinkTags();
13
14 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
15 for (let linkTag of linkTags) {
16 document.head.appendChild(linkTag);
17 }
packages/react-devtools-extensions/src/renderer.js renamed
+1 -1
@@ -22,5 +22,5 @@ Object.defineProperty(
22 get() {
23 return attach;
24 },
25 - }: Object)
25 + }: Object),
26 );
packages/react-devtools-extensions/src/utils.js renamed
packages/react-devtools-extensions/webpack.backend.js renamed
+2
@@ -1,3 +1,5 @@
1 +'use strict';
2 +
3 const {resolve} = require('path');
4 const {DefinePlugin} = require('webpack');
5 const {getGitHubURL, getVersionString} = require('../utils');
packages/react-devtools-extensions/webpack.config.js renamed
+2
@@ -1,3 +1,5 @@
1 +'use strict';
2 +
3 const {resolve} = require('path');
4 const {DefinePlugin} = require('webpack');
5 const {getGitHubURL, getVersionString} = require('../utils');
packages/react-devtools-inline/src/backend.js
+1 -1
@@ -77,7 +77,7 @@ function finishActivation(contentWindow: window) {
77 initBackend(hook, agent, contentWindow);
78
79 // Setup React Native style editor if a renderer like react-native-web has injected it.
80 - if (!!hook.resolveRNStyle) {
80 + if (hook.resolveRNStyle) {
81 setupNativeStyleEditor(
82 bridge,
83 agent,
packages/react-devtools-inline/src/frontend.js
+3 -3
@@ -19,7 +19,7 @@ import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
19 export function initialize(
20 contentWindow: window,
21 ): React.AbstractComponent<Props, mixed> {
22 - const onMessage = ({data, source}) => {
22 + const onGetSavedPreferencesMessage = ({data, source}) => {
23 if (source === 'react-devtools-content-script') {
24 // Ignore messages from the DevTools browser extension.
25 }
@@ -28,7 +28,7 @@ export function initialize(
28 case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
29 // This is the only message we're listening for,
30 // so it's safe to cleanup after we've received it.
31 - window.removeEventListener('message', onMessage);
31 + window.removeEventListener('message', onGetSavedPreferencesMessage);
32
33 // The renderer interface can't read saved preferences directly,
34 // because they are stored in localStorage within the context of the extension.
@@ -47,7 +47,7 @@ export function initialize(
47 }
48 };
49
50 - window.addEventListener('message', onMessage);
50 + window.addEventListener('message', onGetSavedPreferencesMessage);
51
52 const bridge: FrontendBridge = new Bridge({
53 listen(fn) {
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+1 -2
@@ -374,8 +374,7 @@ describe('ProfilingCache', () => {
374 };
375 const Async = () => {
376 Scheduler.unstable_advanceTime(3);
377 - const data = getData();
378 - return data;
377 + return getData();
378 };
379
380 utils.act(() => store.profilerStore.startProfiling());
packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+5 -7
@@ -103,7 +103,7 @@ describe('StoreStress (Sync Mode)', () => {
103 [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
104 [a, [[]], b, c, [d, [[]], e]],
105 [[[a, b, c, d], e]],
106 - [a, b, c, d, e]
106 + [a, b, c, d, e],
107 ];
108
109 // 5. Test fresh mount for each case.
@@ -214,7 +214,7 @@ describe('StoreStress (Sync Mode)', () => {
214 // 2. Verify that we can update from every step to every other step and back.
215 for (let i = 0; i < steps.length; i++) {
216 for (let j = 0; j < steps.length; j++) {
217 - let container = document.createElement('div');
217 + container = document.createElement('div');
218 act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
219 expect(print(store)).toMatch(snapshots[i]);
220 act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
@@ -229,7 +229,7 @@ describe('StoreStress (Sync Mode)', () => {
229 // 3. Same test as above, but this time we wrap children in a host component.
230 for (let i = 0; i < steps.length; i++) {
231 for (let j = 0; j < steps.length; j++) {
232 - let container = document.createElement('div');
232 + container = document.createElement('div');
233 act(() =>
234 ReactDOM.render(
235 <Root>
@@ -288,7 +288,7 @@ describe('StoreStress (Sync Mode)', () => {
288 [[a]],
289 null,
290 b,
291 - a
291 + a,
292 ];
293
294 const Never = () => {
@@ -578,7 +578,6 @@ describe('StoreStress (Sync Mode)', () => {
578 // Force fallback.
579 expect(print(store)).toEqual(snapshots[i]);
580 act(() => {
581 - const suspenseID = store.getElementIDAtIndex(2);
581 bridge.send('overrideSuspense', {
582 id: suspenseID,
583 rendererID: store.getRendererIDForElement(suspenseID),
@@ -682,7 +681,7 @@ describe('StoreStress (Sync Mode)', () => {
681 [[a]],
682 null,
683 b,
685 - a
684 + a,
685 ];
686
687 const Never = () => {
@@ -1014,7 +1013,6 @@ describe('StoreStress (Sync Mode)', () => {
1013 // Force fallback.
1014 expect(print(store)).toEqual(snapshots[i]);
1015 act(() => {
1017 - const suspenseID = store.getElementIDAtIndex(2);
1016 bridge.send('overrideSuspense', {
1017 id: suspenseID,
1018 rendererID: store.getRendererIDForElement(suspenseID),
packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+7 -9
@@ -105,7 +105,7 @@ describe('StoreStressConcurrent', () => {
105 [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
106 [a, [[]], b, c, [d, [[]], e]],
107 [[[a, b, c, d], e]],
108 - [a, b, c, d, e]
108 + [a, b, c, d, e],
109 ];
110
111 // 5. Test fresh mount for each case.
@@ -222,9 +222,9 @@ describe('StoreStressConcurrent', () => {
222 // 2. Verify that we can update from every step to every other step and back.
223 for (let i = 0; i < steps.length; i++) {
224 for (let j = 0; j < steps.length; j++) {
225 - let container = document.createElement('div');
225 + container = document.createElement('div');
226 // $FlowFixMe
227 - let root = ReactDOM.unstable_createRoot(container);
227 + root = ReactDOM.unstable_createRoot(container);
228 act(() => root.render(<Root>{steps[i]}</Root>));
229 expect(print(store)).toMatch(snapshots[i]);
230 act(() => root.render(<Root>{steps[j]}</Root>));
@@ -239,9 +239,9 @@ describe('StoreStressConcurrent', () => {
239 // 3. Same test as above, but this time we wrap children in a host component.
240 for (let i = 0; i < steps.length; i++) {
241 for (let j = 0; j < steps.length; j++) {
242 - let container = document.createElement('div');
242 + container = document.createElement('div');
243 // $FlowFixMe
244 - let root = ReactDOM.unstable_createRoot(container);
244 + root = ReactDOM.unstable_createRoot(container);
245 act(() =>
246 root.render(
247 <Root>
@@ -297,7 +297,7 @@ describe('StoreStressConcurrent', () => {
297 [[a]],
298 null,
299 b,
300 - a
300 + a,
301 ];
302
303 const Never = () => {
@@ -584,7 +584,6 @@ describe('StoreStressConcurrent', () => {
584 // Force fallback.
585 expect(print(store)).toEqual(snapshots[i]);
586 act(() => {
587 - const suspenseID = store.getElementIDAtIndex(2);
587 bridge.send('overrideSuspense', {
588 id: suspenseID,
589 rendererID: store.getRendererIDForElement(suspenseID),
@@ -686,7 +685,7 @@ describe('StoreStressConcurrent', () => {
685 [[a]],
686 null,
687 b,
689 - a
688 + a,
689 ];
690
691 const Never = () => {
@@ -1015,7 +1014,6 @@ describe('StoreStressConcurrent', () => {
1014 // Force fallback.
1015 expect(print(store)).toEqual(snapshots[i]);
1016 act(() => {
1018 - const suspenseID = store.getElementIDAtIndex(2);
1017 bridge.send('overrideSuspense', {
1018 id: suspenseID,
1019 rendererID: store.getRendererIDForElement(suspenseID),
packages/react-devtools-shared/src/__tests__/treeContext-test.js
+1 -1
@@ -98,7 +98,7 @@ describe('TreeListContext', () => {
98 const index = ((state.selectedElementIndex: any): number);
99 utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
100 utils.act(() => renderer.update(<Contexts />));
101 - expect(state).toMatchSnapshot(`3: select element after (${index})`);
101 + expect(state).toMatchSnapshot(`3: select element after (${index})`);
102 }
103
104 while (
packages/react-devtools-shared/src/__tests__/utils.js
+4 -5
@@ -78,7 +78,7 @@ export function createDisplayNameFilter(
78 const Types = require('react-devtools-shared/src/types');
79 let isValid = true;
80 try {
81 - new RegExp(source);
81 + new RegExp(source); // eslint-disable-line no-new
82 } catch (error) {
83 isValid = false;
84 }
@@ -118,7 +118,7 @@ export function createLocationFilter(
118 const Types = require('react-devtools-shared/src/types');
119 let isValid = true;
120 try {
121 - new RegExp(source);
121 + new RegExp(source); // eslint-disable-line no-new
122 } catch (error) {
123 isValid = false;
124 }
@@ -136,8 +136,8 @@ export function getRendererID(): number {
136 }
137 const ids = Object.keys(global.agent._rendererInterfaces);
138
139 - const id = ids.find(id => {
140 - const rendererInterface = global.agent._rendererInterfaces[id];
139 + const id = ids.find(innerID => {
140 + const rendererInterface = global.agent._rendererInterfaces[innerID];
141 return rendererInterface.renderer.rendererPackageName === 'react-dom';
142 });
143
@@ -162,7 +162,6 @@ export function requireTestRenderer(): ReactTestRenderer {
162 }
163
164 export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
165 - const {act} = require('./utils');
165 const {
166 prepareProfilingDataExport,
167 prepareProfilingDataFrontendFromExport,
packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
+1
@@ -24,6 +24,7 @@ export default function resolveBoxStyle(
24
25 const styleForAll = style[prefix];
26 if (styleForAll != null) {
27 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
28 for (const key of Object.keys(result)) {
29 result[key] = styleForAll;
30 }
packages/react-devtools-shared/src/backend/console.js
+1
@@ -92,6 +92,7 @@ export function patch(): void {
92 if (!alreadyHasComponentStack) {
93 // If there's a component stack for at least one of the injected renderers, append it.
94 // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
95 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
96 for (let {
97 getCurrentFiber,
98 getDisplayNameForFiber,
packages/react-devtools-shared/src/backend/legacy/renderer.js
+1 -1
@@ -44,7 +44,7 @@ function getData(internalInstance: InternalInstance) {
44 // != used deliberately here to catch undefined and null
45 if (internalInstance._currentElement != null) {
46 if (internalInstance._currentElement.key) {
47 - key = String(internalInstance._currentElement.key);
47 + key = '' + internalInstance._currentElement.key;
48 }
49
50 const elementType = internalInstance._currentElement.type;
packages/react-devtools-shared/src/backend/renderer.js
+7 -4
@@ -657,6 +657,7 @@ export function attach(
657 if (hideElementsWithDisplayNames.size > 0) {
658 const displayName = getDisplayNameForFiber(fiber);
659 if (displayName != null) {
660 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
661 for (let displayNameRegExp of hideElementsWithDisplayNames) {
662 if (displayNameRegExp.test(displayName)) {
663 return true;
@@ -667,6 +668,7 @@ export function attach(
668
669 if (_debugSource != null && hideElementsWithPaths.size > 0) {
670 const {fileName} = _debugSource;
671 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
672 for (let pathRegExp of hideElementsWithPaths) {
673 if (pathRegExp.test(fileName)) {
674 return true;
@@ -940,6 +942,7 @@ export function attach(
942
943 const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
944 const changedKeys = [];
945 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
946 for (let key of keys) {
947 if (prev[key] !== next[key]) {
948 changedKeys.push(key);
@@ -1316,7 +1319,7 @@ export function attach(
1319 const id = getFiberID(getPrimaryFiber(fiber));
1320 const {actualDuration, treeBaseDuration} = fiber;
1321
1319 - idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
1322 + idToTreeBaseDurationMap.set(id, treeBaseDuration || 0);
1323
1324 if (isProfiling) {
1325 const {alternate} = fiber;
@@ -1327,12 +1330,12 @@ export function attach(
1330 ) {
1331 // Tree base duration updates are included in the operations typed array.
1332 // So we have to convert them from milliseconds to microseconds so we can send them as ints.
1330 - const treeBaseDuration = Math.floor(
1331 - (fiber.treeBaseDuration || 0) * 1000,
1333 + const convertedTreeBaseDuration = Math.floor(
1334 + (treeBaseDuration || 0) * 1000,
1335 );
1336 pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
1337 pushOperation(id);
1335 - pushOperation(treeBaseDuration);
1338 + pushOperation(convertedTreeBaseDuration);
1339 }
1340
1341 if (alternate == null || didFiberRender(alternate, fiber)) {
packages/react-devtools-shared/src/constants.js
+1 -1
@@ -39,7 +39,7 @@ let COMPACT_LINE_HEIGHT;
39
40 try {
41 // $FlowFixMe
42 - const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax
42 + const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
43 .default;
44
45 const extractVar = varName => {
packages/react-devtools-shared/src/devtools/ProfilerStore.js
+3 -2
@@ -43,7 +43,7 @@ export default class ProfilerStore extends EventEmitter<{|
43
44 // Snapshot of the state of the main Store (including all roots) when profiling started.
45 // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
46 - // to reconstruct the state of each root for each commit.
46 + // to reconstruct the state of each root for each commit.
47 // It's okay to use a single root to store this information because node IDs are unique across all roots.
48 //
49 // 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<{|
52
53 // Map of root (id) to a list of tree mutation that occur during profiling.
54 // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
55 - // to reconstruct the state of each root for each commit.
55 + // to reconstruct the state of each root for each commit.
56 //
57 // This map is only updated while profiling is in progress;
58 // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
@@ -283,6 +283,7 @@ export default class ProfilerStore extends EventEmitter<{|
283 this._rendererQueue.clear();
284
285 // Record all renderer IDs initially too (in case of unmount)
286 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
287 for (let rendererID of this._store.rootIDToRendererID.values()) {
288 if (!this._initialRendererIDs.has(rendererID)) {
289 this._initialRendererIDs.add(rendererID);
packages/react-devtools-shared/src/devtools/cache.js
-2
@@ -143,7 +143,6 @@ export function createResource<Input, Key, Value>(
143
144 read(input: Input): Value {
145 // Prevent access outside of render.
146 - // eslint-disable-next-line react-hooks/rules-of-hooks
146 readContext(CacheContext);
147
148 const key = hashInput(input);
@@ -169,7 +168,6 @@ export function createResource<Input, Key, Value>(
168
169 preload(input: Input): void {
170 // Prevent access outside of render.
172 - // eslint-disable-next-line react-hooks/rules-of-hooks
171 readContext(CacheContext);
172
173 const key = hashInput(input);
packages/react-devtools-shared/src/devtools/store.js
+10 -10
@@ -484,9 +484,9 @@ export default class Store extends EventEmitter<{|
484 // (1) another node that's already in the tree, or (2) the root (owner)
485 // at which point, our depth is just the depth of that node plus one.
486 sortedIDs.forEach(id => {
487 - const element = this._idToElement.get(id);
488 - if (element != null) {
489 - let parentID = element.parentID;
487 + const innerElement = this._idToElement.get(id);
488 + if (innerElement != null) {
489 + let parentID = innerElement.parentID;
490
491 let depth = 0;
492 while (parentID > 0) {
@@ -506,7 +506,7 @@ export default class Store extends EventEmitter<{|
506 throw Error('Invalid owners list');
507 }
508
509 - list.push({...element, depth});
509 + list.push({...innerElement, depth});
510 }
511 });
512 }
@@ -717,7 +717,7 @@ export default class Store extends EventEmitter<{|
717 const id = ((operations[i + 1]: any): number);
718 const type = ((operations[i + 2]: any): ElementType);
719
720 - i = i + 3;
720 + i += 3;
721
722 if (this._idToElement.has(id)) {
723 throw Error(
@@ -829,7 +829,7 @@ export default class Store extends EventEmitter<{|
829 }
830 case TREE_OPERATION_REMOVE: {
831 const removeLength = ((operations[i + 1]: any): number);
832 - i = i + 2;
832 + i += 2;
833
834 for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
835 const id = ((operations[i]: any): number);
@@ -840,7 +840,7 @@ export default class Store extends EventEmitter<{|
840 );
841 }
842
843 - i = i + 1;
843 + i += 1;
844
845 const element = ((this._idToElement.get(id): any): Element);
846 const {children, ownerID, parentID, weight} = element;
@@ -891,7 +891,7 @@ export default class Store extends EventEmitter<{|
891 case TREE_OPERATION_REORDER_CHILDREN: {
892 const id = ((operations[i + 1]: any): number);
893 const numChildren = ((operations[i + 2]: any): number);
894 - i = i + 3;
894 + i += 3;
895
896 if (!this._idToElement.has(id)) {
897 throw Error(
@@ -920,7 +920,7 @@ export default class Store extends EventEmitter<{|
920 }
921 }
922 }
923 - i = i + numChildren;
923 + i += numChildren;
924
925 if (__DEBUG__) {
926 debug('Re-order', `Node ${id} children ${children.join(',')}`);
@@ -931,7 +931,7 @@ export default class Store extends EventEmitter<{|
931 // Base duration updates are only sent while profiling is in progress.
932 // We can ignore them at this point.
933 // The profiler UI uses them lazily in order to generate the tree.
934 - i = i + 3;
934 + i += 3;
935 break;
936 default:
937 throw Error(`Unsupported Bridge operation ${operation}`);
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+5 -2
@@ -211,7 +211,10 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
211 let overrideValueFn = null;
212 // TODO Maybe read editable value from debug hook?
213 if (canEditHooks && isStateEditable) {
214 - overrideValueFn = (absolutePath: Array<string | number>, value: any) => {
214 + overrideValueFn = (
215 + absolutePath: Array<string | number>,
216 + newValue: any,
217 + ) => {
218 const rendererID = store.getRendererIDForElement(id);
219 if (rendererID !== null) {
220 bridge.send('overrideHookState', {
@@ -223,7 +226,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
226 // so it's important that we remove that part of the path before sending the update.
227 path: absolutePath.slice(path.length + 1),
228 rendererID,
226 - value,
229 + value: newValue,
230 });
231 }
232 };
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
-2
@@ -20,7 +20,6 @@ import type {
20 InspectedElementPayload,
21 } from 'react-devtools-shared/src/backend/types';
22 import type {
23 - DehydratedData,
23 Element,
24 InspectedElement as InspectedElementFrontend,
25 } from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -280,7 +279,6 @@ function InspectedElementContextController({children}: Props) {
279 const value = useMemo(
280 () => ({getInspectedElement, getInspectedElementPath}),
281 // InspectedElement is used to invalidate the cache and schedule an update with React.
283 - // eslint-disable-next-line react-hooks/exhaustive-deps
282 [currentlyInspectedElement, getInspectedElement, getInspectedElementPath],
283 );
284
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+14 -12
@@ -154,18 +154,20 @@ export default function KeyValue({
154 } else {
155 const hasChildren = Object.entries(value).length > 0;
156
157 - children = Object.entries(value).map<Element<any>>(([name, value]) => (
158 - <KeyValue
159 - key={name}
160 - depth={depth + 1}
161 - inspectPath={inspectPath}
162 - hidden={hidden || !isOpen}
163 - name={name}
164 - overrideValueFn={overrideValueFn}
165 - path={path.concat(name)}
166 - value={value}
167 - />
168 - ));
157 + children = Object.entries(value).map<Element<any>>(
158 + ([innerName, innerValue]) => (
159 + <KeyValue
160 + key={innerName}
161 + depth={depth + 1}
162 + inspectPath={inspectPath}
163 + hidden={hidden || !isOpen}
164 + name={innerName}
165 + overrideValueFn={overrideValueFn}
166 + path={path.concat(innerName)}
167 + value={innerValue}
168 + />
169 + ),
170 + );
171 children.unshift(
172 <div
173 key={`${depth}-root`}
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+7 -7
@@ -162,27 +162,27 @@ function Row({
162 const [isAttributeValid, setIsAttributeValid] = useState(true);
163 const [isValueValid, setIsValueValid] = useState(true);
164
165 - const validateAndSetLocalAttribute = attribute => {
165 + const validateAndSetLocalAttribute = newAttribute => {
166 const isValid =
167 - attribute === '' ||
167 + newAttribute === '' ||
168 validAttributes === null ||
169 - validAttributes.indexOf(attribute) >= 0;
169 + validAttributes.indexOf(newAttribute) >= 0;
170
171 batchedUpdates(() => {
172 - setLocalAttribute(attribute);
172 + setLocalAttribute(newAttribute);
173 setIsAttributeValid(isValid);
174 });
175 };
176
177 - const validateAndSetLocalValue = value => {
177 + const validateAndSetLocalValue = newValue => {
178 let isValid = false;
179 try {
180 - JSON.parse(value);
180 + JSON.parse(newValue);
181 isValid = true;
182 } catch (error) {}
183
184 batchedUpdates(() => {
185 - setLocalValue(value);
185 + setLocalValue(newValue);
186 setIsValueValid(isValid);
187 });
188 };
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
-1
@@ -187,7 +187,6 @@ function NativeStyleContextController({children}: Props) {
187 const value = useMemo(
188 () => ({getStyleAndLayout}),
189 // NativeStyle is used to invalidate the cache and schedule an update with React.
190 - // eslint-disable-next-line react-hooks/exhaustive-deps
190 [currentStyleAndLayout, getStyleAndLayout],
191 );
192
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
-1
@@ -1,7 +1,6 @@
1 // @flow
2
3 import React, {Fragment, useContext, useMemo} from 'react';
4 -import Store from 'react-devtools-shared/src/devtools/store';
4 import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
5 import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
6 import {NativeStyleContext} from './context';
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+4 -7
@@ -130,18 +130,18 @@ export default function OwnerStack() {
130 return () => {};
131 }
132
133 - let elementsTotalWidth = 0;
133 + let totalWidth = 0;
134 for (let i = 0; i < owners.length; i++) {
135 const element = elementsBarRef.current.children[i];
136 const computedStyle = getComputedStyle(element);
137
138 - elementsTotalWidth +=
138 + totalWidth +=
139 element.offsetWidth +
140 parseInt(computedStyle.marginLeft, 10) +
141 parseInt(computedStyle.marginRight, 10);
142 }
143
144 - setElementsTotalWidth(elementsTotalWidth);
144 + setElementsTotalWidth(totalWidth);
145 },
146 [elementsBarRef, isOverflowing, owners.length],
147 );
@@ -164,7 +164,7 @@ export default function OwnerStack() {
164 {selectedOwner != null && (
165 <ElementView
166 owner={selectedOwner}
167 - isSelected
167 + isSelected={true}
168 selectOwner={selectOwner}
169 />
170 )}
@@ -290,9 +290,6 @@ function BackToOwnerButton({
290 }
291
292 const owner = owners[selectedIndex - 1];
293 - if (owner == null) {
294 - debugger;
295 - }
293 const isInStore = store.containsElement(owner.id);
294
295 return (
packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+1 -1
@@ -349,7 +349,7 @@ function InspectedElementView({
349 data={props}
350 inspectPath={inspectPropsPath}
351 overrideValueFn={overridePropsFn}
352 - showWhenEmpty
352 + showWhenEmpty={true}
353 />
354 {type === ElementTypeSuspense ? (
355 <InspectedElementTree
packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
-1
@@ -6,7 +6,6 @@ import {SettingsContext} from '../Settings/SettingsContext';
6 import TreeFocusedContext from './TreeFocusedContext';
7 import {StoreContext} from '../context';
8 import {useSubscription} from '../hooks';
9 -import Store from '../../store';
9
10 import styles from './SelectedTreeHighlight.css';
11
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+1
@@ -418,6 +418,7 @@ function updateIndentationSizeVar(
418
419 let maxIndentationSize: number = indentationSizeRef.current;
420
421 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
422 for (let child of innerDiv.children) {
423 const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
424
packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+5 -5
@@ -347,15 +347,15 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
347
348 let foundMatch = false;
349 for (let index = 0; index < searchResults.length; index++) {
350 - const id = searchResults[index];
350 + const resultID = searchResults[index];
351 if (
352 newElementIndex <
353 - ((store.getIndexOfElementID(id): any): number)
353 + ((store.getIndexOfElementID(resultID): any): number)
354 ) {
355 foundMatch = true;
356 searchResults = searchResults
357 .slice(0, index)
358 - .concat(id)
358 + .concat(resultID)
359 .concat(searchResults.slice(index));
360 break;
361 }
@@ -807,8 +807,8 @@ function getNearestResultIndex(
807 selectedElementIndex: number,
808 ): number {
809 const index = searchResults.findIndex(id => {
810 - const index = store.getIndexOfElementID(id);
811 - return index !== null && index >= selectedElementIndex;
810 + const innerIndex = store.getIndexOfElementID(id);
811 + return innerIndex !== null && innerIndex >= selectedElementIndex;
812 });
813
814 return index === -1 ? 0 : index;
packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+4 -1
@@ -139,7 +139,10 @@ function ModalDialogImpl(_: {||}) {
139 {content}
140 {canBeDismissed && (
141 <div className={styles.Buttons}>
142 - <Button autoFocus className={styles.Button} onClick={dismissModal}>
142 + <Button
143 + autoFocus={true}
144 + className={styles.Button}
145 + onClick={dismissModal}>
146 Okay
147 </Button>
148 </div>
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+5 -8
@@ -102,17 +102,14 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
102
103 const selectedChartNode = useMemo(
104 () => {
105 - let chartNode = null;
105 if (selectedFiberID !== null) {
107 - const foundChartNode = chartData.rows[selectedChartNodeIndex].find(
108 - chartNode => chartNode.id === selectedFiberID,
106 + return (
107 + chartData.rows[selectedChartNodeIndex].find(
108 + chartNode => chartNode.id === selectedFiberID,
109 + ) || null
110 );
110 -
111 - if (foundChartNode !== undefined) {
112 - chartNode = foundChartNode;
113 - }
111 }
115 - return chartNode;
112 + return null;
113 },
114 [chartData, selectedFiberID, selectedChartNodeIndex],
115 );
packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+9 -8
@@ -155,6 +155,7 @@ function updateTree(
155 };
156
157 let i = 2;
158 + let id: number = ((null: any): number);
159
160 // Reassemble the string table.
161 const stringTable = [
@@ -176,10 +177,10 @@ function updateTree(
177
178 switch (operation) {
179 case TREE_OPERATION_ADD:
179 - const id = ((operations[i + 1]: any): number);
180 + id = ((operations[i + 1]: any): number);
181 const type = ((operations[i + 2]: any): ElementType);
182
182 - i = i + 3;
183 + i += 3;
184
185 if (nodes.has(id)) {
186 throw new Error(
@@ -248,11 +249,11 @@ function updateTree(
249 break;
250 case TREE_OPERATION_REMOVE: {
251 const removeLength = ((operations[i + 1]: any): number);
251 - i = i + 2;
252 + i += 2;
253
254 for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
254 - const id = ((operations[i]: any): number);
255 - i = i + 1;
255 + id = ((operations[i]: any): number);
256 + i++;
257
258 if (!nodes.has(id)) {
259 throw new Error(
@@ -284,7 +285,7 @@ function updateTree(
285 break;
286 }
287 case TREE_OPERATION_REORDER_CHILDREN: {
287 - const id = ((operations[i + 1]: any): number);
288 + id = ((operations[i + 1]: any): number);
289 const numChildren = ((operations[i + 2]: any): number);
290 const children = ((operations.slice(
291 i + 3,
@@ -303,7 +304,7 @@ function updateTree(
304 break;
305 }
306 case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: {
306 - const id = operations[i + 1];
307 + id = operations[i + 1];
308
309 const node = getClonedNode(id);
310 node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
@@ -315,7 +316,7 @@ function updateTree(
316 );
317 }
318
318 - i = i + 3;
319 + i += 3;
320 break;
321 }
322 default:
packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+6 -6
@@ -47,9 +47,9 @@ export function getChartData({
47 const {fiberActualDurations, fiberSelfDurations} = commitDatum;
48 const {nodes} = commitTree;
49
50 - const key = `${rootID}-${commitIndex}`;
51 - if (cachedChartData.has(key)) {
52 - return ((cachedChartData.get(key): any): ChartData);
50 + const chartDataKey = `${rootID}-${commitIndex}`;
51 + if (cachedChartData.has(chartDataKey)) {
52 + return ((cachedChartData.get(chartDataKey): any): ChartData);
53 }
54
55 const idToDepthMap: Map<number, number> = new Map();
@@ -145,7 +145,7 @@ export function getChartData({
145 }
146
147 fiberActualDurations.forEach((duration, id) => {
148 - const node = nodes.get(id);
148 + let node = nodes.get(id);
149 if (node != null) {
150 let currentID = node.parentID;
151 while (currentID !== 0) {
@@ -156,7 +156,7 @@ export function getChartData({
156 renderPathNodes.add(currentID);
157 }
158
159 - const node = nodes.get(currentID);
159 + node = nodes.get(currentID);
160 currentID = node != null ? node.parentID : 0;
161 }
162 }
@@ -172,7 +172,7 @@ export function getChartData({
172 rows,
173 };
174
175 - cachedChartData.set(key, chartData);
175 + cachedChartData.set(chartDataKey, chartData);
176
177 return chartData;
178 }
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
-1
@@ -14,7 +14,6 @@ import {
14 TreeStateContext,
15 } from '../Components/TreeContext';
16 import {StoreContext} from '../context';
17 -import Store from '../../store';
17
18 import type {ProfilingDataFrontend} from './types';
19
packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
+4 -4
@@ -39,9 +39,9 @@ export function getChartData({
39 const {fiberActualDurations, fiberSelfDurations} = commitDatum;
40 const {nodes} = commitTree;
41
42 - const key = `${rootID}-${commitIndex}`;
43 - if (cachedChartData.has(key)) {
44 - return ((cachedChartData.get(key): any): ChartData);
42 + const chartDataKey = `${rootID}-${commitIndex}`;
43 + if (cachedChartData.has(chartDataKey)) {
44 + return ((cachedChartData.get(chartDataKey): any): ChartData);
45 }
46
47 let maxSelfDuration = 0;
@@ -89,7 +89,7 @@ export function getChartData({
89 nodes: chartNodes.sort((a, b) => b.value - a.value),
90 };
91
92 - cachedChartData.set(key, chartData);
92 + cachedChartData.set(chartDataKey, chartData);
93
94 return chartData;
95 }
packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
-1
@@ -5,7 +5,6 @@ import Button from '../Button';
5 import ButtonIcon from '../ButtonIcon';
6 import {BridgeContext, StoreContext} from '../context';
7 import {useSubscription} from '../hooks';
8 -import Store from 'react-devtools-shared/src/devtools/store';
8
9 type SubscriptionData = {|
10 recordChangeDescriptions: boolean,
packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+2 -2
@@ -10,9 +10,9 @@ export default function RootSelector(_: {||}) {
10
11 const options = [];
12 if (profilingData !== null) {
13 - profilingData.dataForRoots.forEach((dataForRoot, rootID) => {
13 + profilingData.dataForRoots.forEach((dataForRoot, id) => {
14 options.push(
15 - <option key={rootID} value={rootID}>
15 + <option key={id} value={id}>
16 {dataForRoot.displayName}
17 </option>,
18 );
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+1 -5
@@ -122,11 +122,7 @@ function List({
122 [filteredCommitIndices, width],
123 );
124 const maxDuration = useMemo(
125 - () =>
126 - commitDurations.reduce(
127 - (maxDuration, duration) => Math.max(maxDuration, duration),
128 - 0,
129 - ),
125 + () => commitDurations.reduce((max, duration) => Math.max(max, duration), 0),
126 [commitDurations],
127 );
128
packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+17 -18
@@ -10,7 +10,6 @@ import React, {
10 } from 'react';
11 import {useSubscription} from '../hooks';
12 import {StoreContext} from '../context';
13 -import Store from 'react-devtools-shared/src/devtools/store';
13 import Button from '../Button';
14 import ButtonIcon from '../ButtonIcon';
15 import Toggle from '../Toggle';
@@ -70,9 +69,9 @@ export default function ComponentsSettings(_: {||}) {
69 >(() => [...store.componentFilters]);
70
71 const addFilter = useCallback(() => {
73 - setComponentFilters(componentFilters => {
72 + setComponentFilters(prevComponentFilters => {
73 return [
75 - ...componentFilters,
74 + ...prevComponentFilters,
75 {
76 type: ComponentFilterElementType,
77 value: ElementTypeHostComponent,
@@ -84,9 +83,9 @@ export default function ComponentsSettings(_: {||}) {
83
84 const changeFilterType = useCallback(
85 (componentFilter: ComponentFilter, type: ComponentFilterType) => {
87 - setComponentFilters(componentFilters => {
88 - const cloned: Array<ComponentFilter> = [...componentFilters];
89 - const index = componentFilters.indexOf(componentFilter);
86 + setComponentFilters(prevComponentFilters => {
87 + const cloned: Array<ComponentFilter> = [...prevComponentFilters];
88 + const index = prevComponentFilters.indexOf(componentFilter);
89 if (index >= 0) {
90 if (type === ComponentFilterElementType) {
91 cloned[index] = {
@@ -128,10 +127,10 @@ export default function ComponentsSettings(_: {||}) {
127 throw Error('Invalid value for element type filter');
128 }
129
131 - setComponentFilters(componentFilters => {
132 - const cloned: Array<ComponentFilter> = [...componentFilters];
130 + setComponentFilters(prevComponentFilters => {
131 + const cloned: Array<ComponentFilter> = [...prevComponentFilters];
132 if (componentFilter.type === ComponentFilterElementType) {
134 - const index = componentFilters.indexOf(componentFilter);
133 + const index = prevComponentFilters.indexOf(componentFilter);
134 if (index >= 0) {
135 cloned[index] = {
136 ...componentFilter,
@@ -151,17 +150,17 @@ export default function ComponentsSettings(_: {||}) {
150 throw Error('Invalid value for element type filter');
151 }
152
154 - setComponentFilters(componentFilters => {
155 - const cloned: Array<ComponentFilter> = [...componentFilters];
153 + setComponentFilters(prevComponentFilters => {
154 + const cloned: Array<ComponentFilter> = [...prevComponentFilters];
155 if (
156 componentFilter.type === ComponentFilterDisplayName ||
157 componentFilter.type === ComponentFilterLocation
158 ) {
160 - const index = componentFilters.indexOf(componentFilter);
159 + const index = prevComponentFilters.indexOf(componentFilter);
160 if (index >= 0) {
161 let isValid = true;
162 try {
164 - new RegExp(value);
163 + new RegExp(value); // eslint-disable-line no-new
164 } catch (error) {
165 isValid = false;
166 }
@@ -179,8 +178,8 @@ export default function ComponentsSettings(_: {||}) {
178 );
179
180 const removeFilter = useCallback((index: number) => {
182 - setComponentFilters(componentFilters => {
183 - const cloned: Array<ComponentFilter> = [...componentFilters];
181 + setComponentFilters(prevComponentFilters => {
182 + const cloned: Array<ComponentFilter> = [...prevComponentFilters];
183 cloned.splice(index, 1);
184 return cloned;
185 });
@@ -188,9 +187,9 @@ export default function ComponentsSettings(_: {||}) {
187
188 const toggleFilterIsEnabled = useCallback(
189 (componentFilter: ComponentFilter, isEnabled: boolean) => {
191 - setComponentFilters(componentFilters => {
192 - const cloned: Array<ComponentFilter> = [...componentFilters];
193 - const index = componentFilters.indexOf(componentFilter);
190 + setComponentFilters(prevComponentFilters => {
191 + const cloned: Array<ComponentFilter> = [...prevComponentFilters];
192 + const index = prevComponentFilters.indexOf(componentFilter);
193 if (index >= 0) {
194 if (componentFilter.type === ComponentFilterElementType) {
195 cloned[index] = {
packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
-1
@@ -4,7 +4,6 @@ import React, {useCallback, useContext, useMemo, useRef} from 'react';
4 import {useSubscription} from '../hooks';
5 import {StoreContext} from '../context';
6 import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
7 -import Store from 'react-devtools-shared/src/devtools/store';
7
8 import styles from './SettingsShared.css';
9
packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
-1
@@ -8,7 +8,6 @@ import React, {
8 useRef,
9 } from 'react';
10 import {SettingsModalContext} from './SettingsModalContext';
11 -import Store from 'react-devtools-shared/src/devtools/store';
11 import Button from '../Button';
12 import ButtonIcon from '../ButtonIcon';
13 import TabBar from '../TabBar';
packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
-1
@@ -6,7 +6,6 @@ import Button from '../Button';
6 import ButtonIcon from '../ButtonIcon';
7 import {StoreContext} from '../context';
8 import {useSubscription} from '../hooks';
9 -import Store from 'react-devtools-shared/src/devtools/store';
9
10 export default function SettingsModalContextToggle() {
11 const {setIsModalShowing} = useContext(SettingsModalContext);
packages/react-devtools-shared/src/hook.js
+3 -1
@@ -17,7 +17,9 @@ import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
17 declare var window: any;
18
19 export function installHook(target: any): DevToolsHook | null {
20 - if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;
20 + if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
21 + return null;
22 + }
23
24 function detectReactBuildType(renderer) {
25 try {
packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js renamed
packages/react-devtools-shell/src/app/EditableProps/index.js renamed
+3 -3
@@ -36,7 +36,7 @@ function StatefulFunction({name}: StatefulFunctionProps) {
36 const [data, dispatch] = useReducer(reducer, initialData);
37 const handleUpdateReducerClick = useCallback(
38 () => dispatch({type: 'swap'}),
39 - []
39 + [],
40 );
41
42 return (
@@ -111,7 +111,7 @@ const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
111 </li>
112 </ul>
113 );
114 - }
114 + },
115 );
116
117 export default function EditableProps() {
@@ -154,7 +154,7 @@ function useDebounce(value, delay) {
154 clearTimeout(handler);
155 };
156 },
157 - [value, delay] // Only re-call effect if value or delay changes
157 + [value, delay], // Only re-call effect if value or delay changes
158 );
159
160 return debouncedValue;
packages/react-devtools-shell/src/app/ElementTypes/index.js renamed
+1 -1
@@ -35,7 +35,7 @@ const ForwardRefComponent = forwardRef((props, ref) => (
35 const LazyComponent = lazy(() =>
36 Promise.resolve({
37 default: FunctionComponent,
38 - })
38 + }),
39 );
40
41 export default function ElementTypes() {
packages/react-devtools-shell/src/app/Hydration/index.js renamed
packages/react-devtools-shell/src/app/Iframe/index.js renamed
packages/react-devtools-shell/src/app/InspectableElements/Contexts.js renamed
packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js renamed
+2 -2
@@ -71,7 +71,7 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
71 function onClick() {
72 updateCount(count + 1);
73 },
74 - [count]
74 + [count],
75 );
76
77 // Tests nested custom hooks
@@ -117,7 +117,7 @@ function useDebounce(value, delay) {
117 clearTimeout(handler);
118 };
119 },
120 - [value, delay] // Only re-call effect if value or delay changes
120 + [value, delay], // Only re-call effect if value or delay changes
121 );
122
123 return debouncedValue;
packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js renamed
packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js renamed
packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js renamed
packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js renamed
packages/react-devtools-shell/src/app/InspectableElements/index.js renamed
packages/react-devtools-shell/src/app/InteractionTracing/index.js renamed
+8 -8
@@ -18,11 +18,11 @@ export default function InteractionTracing() {
18 wrap(() => {
19 setCount(count + 1);
20 }),
21 - count * 100
21 + count * 100,
22 );
23 });
24 },
25 - [count]
25 + [count],
26 );
27
28 const handleCascadingUpdate = useCallback(
@@ -35,11 +35,11 @@ export default function InteractionTracing() {
35 setShouldCascade(true);
36 });
37 }),
38 - count * 100
38 + count * 100,
39 );
40 });
41 },
42 - [count]
42 + [count],
43 );
44
45 const handleMultiple = useCallback(
@@ -50,12 +50,12 @@ export default function InteractionTracing() {
50 wrap(() => {
51 setCount(count + 1);
52 }),
53 - count * 100
53 + count * 100,
54 );
55 });
56 });
57 },
58 - [count]
58 + [count],
59 );
60
61 useEffect(
@@ -65,11 +65,11 @@ export default function InteractionTracing() {
65 wrap(() => {
66 setShouldCascade(false);
67 }),
68 - count * 100
68 + count * 100,
69 );
70 }
71 },
72 - [count, shouldCascade]
72 + [count, shouldCascade],
73 );
74
75 return (
packages/react-devtools-shell/src/app/PriorityLevels/index.js renamed
packages/react-devtools-shell/src/app/ReactNativeWeb/index.js renamed
packages/react-devtools-shell/src/app/SuspenseTree/index.js renamed
packages/react-devtools-shell/src/app/ToDoList/List.css renamed
packages/react-devtools-shell/src/app/ToDoList/List.js renamed
+6 -6
@@ -36,7 +36,7 @@ export default function List(props: Props) {
36 setNewItemText('');
37 }
38 },
39 - [newItemText, items, uid]
39 + [newItemText, items, uid],
40 );
41
42 const handleKeyPress = useCallback(
@@ -45,19 +45,19 @@ export default function List(props: Props) {
45 handleClick();
46 }
47 },
48 - [handleClick]
48 + [handleClick],
49 );
50
51 const handleChange = useCallback(
52 event => {
53 setNewItemText(event.currentTarget.value);
54 },
55 - [setNewItemText]
55 + [setNewItemText],
56 );
57
58 const removeItem = useCallback(
59 itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
60 - [items]
60 + [items],
61 );
62
63 const toggleItem = useCallback(
@@ -71,10 +71,10 @@ export default function List(props: Props) {
71 ...itemToToggle,
72 isComplete: !itemToToggle.isComplete,
73 })
74 - .concat(items.slice(index + 1))
74 + .concat(items.slice(index + 1)),
75 );
76 },
77 - [items]
77 + [items],
78 );
79
80 return (
packages/react-devtools-shell/src/app/ToDoList/ListItem.css renamed
packages/react-devtools-shell/src/app/ToDoList/ListItem.js renamed
+2 -2
@@ -16,14 +16,14 @@ function ListItem({item, removeItem, toggleItem}: Props) {
16 () => {
17 removeItem(item);
18 },
19 - [item, removeItem]
19 + [item, removeItem],
20 );
21
22 const handleToggle = useCallback(
23 () => {
24 toggleItem(item);
25 },
26 - [item, toggleItem]
26 + [item, toggleItem],
27 );
28
29 return (
packages/react-devtools-shell/src/app/ToDoList/index.js renamed
packages/react-devtools-shell/src/app/Toggle/index.js renamed
packages/react-devtools-shell/src/app/console.js renamed
+1 -1
@@ -2,7 +2,7 @@
2
3 function ignoreStrings(
4 methodName: string,
5 - stringsToIgnore: Array<string>
5 + stringsToIgnore: Array<string>,
6 ): void {
7 const originalMethod = console[methodName];
8 console[methodName] = (...args) => {
packages/react-devtools-shell/src/app/index.js renamed
packages/react-devtools-shell/src/app/styles.css renamed
packages/react-devtools-shell/webpack.config.js
+1 -1
@@ -25,7 +25,7 @@ const config = {
25 mode: __DEV__ ? 'development' : 'production',
26 devtool: false,
27 entry: {
28 - app: './app/index.js',
28 + app: './src/app/index.js',
29 devtools: './src/devtools.js',
30 },
31 resolve: {