refactor[react-devtools-extensions]: use globals to eliminate dead code (#27516)
Small change to eliminate dead code in builds for different browsers. Tested by inspecting production sources.
Ruslan Lesiutin committed
Oct 16, 2023 at 14:54 UTC
18a9dd1c60fdb711982f32ce5d91acfe8f158fe1
9 files changed
+30
-32
.eslintrc.js
+8
@@ -441,6 +441,14 @@ module.exports = {
441
TaskController: 'readonly',
442
},
443
},
444
+ {
445
+ files: ['packages/react-devtools-extensions/**/*.js'],
446
+ globals: {
447
+ __IS_CHROME__: 'readonly',
448
+ __IS_FIREFOX__: 'readonly',
449
+ __IS_EDGE__: 'readonly',
450
+ },
451
+ },
452
],
453
454
env: {
packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js
+1
-3
@@ -1,10 +1,8 @@
1
/* global chrome */
2
3
-import {IS_FIREFOX} from '../utils';
4
-
3
// Firefox doesn't support ExecutionWorld.MAIN yet
4
// equivalent logic for Firefox is in prepareInjection.js
7
-const contentScriptsToInject = IS_FIREFOX
5
+const contentScriptsToInject = __IS_FIREFOX__
6
? [
7
{
8
id: '@react-devtools/proxy',
packages/react-devtools-extensions/src/background/executeScript.js
+1
-3
@@ -1,7 +1,5 @@
1
/* global chrome */
2
3
-import {IS_FIREFOX} from '../utils';
4
-
3
// Firefox doesn't support ExecutionWorld.MAIN yet
4
// https://bugzilla.mozilla.org/show_bug.cgi?id=1736575
5
function executeScriptForFirefoxInMainWorld({target, files}) {
@@ -46,7 +44,7 @@ export function executeScriptInIsolatedWorld({target, files}) {
44
}
45
46
export function executeScriptInMainWorld({target, files}) {
49
- if (IS_FIREFOX) {
47
+ if (__IS_FIREFOX__) {
48
return executeScriptForFirefoxInMainWorld({target, files});
49
}
50
packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js
+1
-3
@@ -2,10 +2,8 @@
2
3
'use strict';
4
5
-import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
6
-
5
function setExtensionIconAndPopup(reactBuildType, tabId) {
8
- const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
6
+ const action = __IS_FIREFOX__ ? chrome.browserAction : chrome.action;
7
8
action.setIcon({
9
tabId,
packages/react-devtools-extensions/src/background/tabsManager.js
+2
-4
@@ -2,8 +2,6 @@
2
3
'use strict';
4
5
-import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
6
-
5
import setExtensionIconAndPopup from './setExtensionIconAndPopup';
6
7
function isRestrictedBrowserPage(url) {
@@ -20,7 +18,7 @@ function checkAndHandleRestrictedPageIfSo(tab) {
18
// we can't update for any other types (prod,dev,outdated etc)
19
// as the content script needs to be injected at document_start itself for those kinds of detection
20
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
23
-if (!IS_FIREFOX) {
21
+if (__IS_CHROME__ || __IS_EDGE__) {
22
chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
23
chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
24
checkAndHandleRestrictedPageIfSo(tab),
@@ -29,7 +27,7 @@ if (!IS_FIREFOX) {
27
28
// Listen to URL changes on the active tab and update the DevTools icon.
29
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
32
- if (IS_FIREFOX) {
30
+ if (__IS_FIREFOX__) {
31
// We don't properly detect protected URLs in Firefox at the moment.
32
// However, we can reset the DevTools icon to its loading state when the URL changes.
33
// It will be updated to the correct icon by the onMessage callback below.
packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
+1
-2
@@ -1,7 +1,6 @@
1
/* global chrome */
2
3
import nullthrows from 'nullthrows';
4
-import {IS_FIREFOX} from '../utils';
4
5
// We run scripts on the page via the service worker (background/index.js) for
6
// Manifest V3 extensions (Chrome & Edge).
@@ -62,7 +61,7 @@ window.addEventListener('pageshow', function ({target}) {
61
chrome.runtime.sendMessage(lastSentDevToolsHookMessage);
62
});
63
65
-if (IS_FIREFOX) {
64
+if (__IS_FIREFOX__) {
65
injectScriptSync(chrome.runtime.getURL('build/renderer.js'));
66
67
// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
packages/react-devtools-extensions/src/main/index.js
+8
-8
@@ -5,7 +5,7 @@ import {flushSync} from 'react-dom';
5
import {createRoot} from 'react-dom/client';
6
import Bridge from 'react-devtools-shared/src/bridge';
7
import Store from 'react-devtools-shared/src/devtools/store';
8
-import {IS_CHROME, IS_EDGE, getBrowserTheme, IS_FIREFOX} from '../utils';
8
+import {getBrowserTheme} from '../utils';
9
import {
10
localStorageGetItem,
11
localStorageSetItem,
@@ -93,10 +93,10 @@ function createBridgeAndStore() {
93
94
store = new Store(bridge, {
95
isProfiling,
96
- supportsReloadAndProfile: IS_CHROME || IS_EDGE,
96
+ supportsReloadAndProfile: __IS_CHROME__ || __IS_EDGE__,
97
supportsProfiling,
98
// At this time, the timeline can only parse Chrome performance profiles.
99
- supportsTimeline: IS_CHROME,
99
+ supportsTimeline: __IS_CHROME__,
100
supportsTraceUpdates: true,
101
});
102
@@ -218,8 +218,8 @@ function createComponentsPanel() {
218
}
219
220
chrome.devtools.panels.create(
221
- IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components',
222
- IS_EDGE ? 'icons/production.svg' : '',
221
+ __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components',
222
+ __IS_EDGE__ ? 'icons/production.svg' : '',
223
'panel.html',
224
createdPanel => {
225
componentsPanel = createdPanel;
@@ -257,8 +257,8 @@ function createProfilerPanel() {
257
}
258
259
chrome.devtools.panels.create(
260
- IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler',
261
- IS_EDGE ? 'icons/production.svg' : '',
260
+ __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler',
261
+ __IS_EDGE__ ? 'icons/production.svg' : '',
262
'panel.html',
263
createdPanel => {
264
profilerPanel = createdPanel;
@@ -444,7 +444,7 @@ const debouncedOnNavigatedListener = debounce(() => {
444
chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener);
445
446
// Should be emitted when browser DevTools are closed
447
-if (IS_FIREFOX) {
447
+if (__IS_FIREFOX__) {
448
// For some reason Firefox doesn't emit onBeforeUnload event
449
window.addEventListener('unload', performFullCleanup);
450
} else {
packages/react-devtools-extensions/src/utils.js
+1
-5
@@ -2,12 +2,8 @@
2
3
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
4
5
-export const IS_EDGE: boolean = process.env.IS_EDGE;
6
-export const IS_FIREFOX: boolean = process.env.IS_FIREFOX;
7
-export const IS_CHROME: boolean = process.env.IS_CHROME;
8
-
5
export function getBrowserTheme(): BrowserTheme {
10
- if (IS_CHROME) {
6
+ if (__IS_CHROME__) {
7
// chrome.devtools.panels added in Chrome 18.
8
// chrome.devtools.panels.themeName added in Chrome 54.
9
return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
packages/react-devtools-extensions/webpack.config.js
+7
-4
@@ -90,7 +90,10 @@ module.exports = {
90
minimizer: [
91
new TerserPlugin({
92
terserOptions: {
93
- compress: false,
93
+ compress: {
94
+ unused: true,
95
+ dead_code: true,
96
+ },
97
mangle: {
98
keep_fnames: true,
99
},
@@ -113,6 +116,9 @@ module.exports = {
116
__EXTENSION__: true,
117
__PROFILE__: false,
118
__TEST__: NODE_ENV === 'test',
119
+ __IS_CHROME__: IS_CHROME,
120
+ __IS_FIREFOX__: IS_FIREFOX,
121
+ __IS_EDGE__: IS_EDGE,
122
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
123
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
124
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
@@ -125,9 +131,6 @@ module.exports = {
131
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
132
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
133
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
128
- 'process.env.IS_CHROME': IS_CHROME,
129
- 'process.env.IS_FIREFOX': IS_FIREFOX,
130
- 'process.env.IS_EDGE': IS_EDGE,
134
}),
135
],
136
module: {