From 928621bec4bc8eacc36311736152020b6c7e3c8a Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Fri, 13 Oct 2023 14:43:38 +0100 Subject: [PATCH] refactor[react-devtools-extensions]: use globals to eliminate dead code --- .eslintrc.js | 8 ++++++++ .../dynamicallyInjectContentScripts.js | 4 +--- .../src/background/executeScript.js | 4 +--- .../src/background/setExtensionIconAndPopup.js | 4 +--- .../src/background/tabsManager.js | 6 ++---- .../src/contentScripts/prepareInjection.js | 3 +-- .../react-devtools-extensions/src/main/index.js | 16 ++++++++-------- packages/react-devtools-extensions/src/utils.js | 6 +----- .../react-devtools-extensions/webpack.config.js | 11 +++++++---- 9 files changed, 30 insertions(+), 32 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3337fb94933c4..9d88915811935 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -441,6 +441,14 @@ module.exports = { TaskController: 'readonly', }, }, + { + files: ['packages/react-devtools-extensions/**/*.js'], + globals: { + __IS_CHROME__: 'readonly', + __IS_FIREFOX__: 'readonly', + __IS_EDGE__: 'readonly', + }, + }, ], env: { diff --git a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js index 45fe394974004..e19030457a89c 100644 --- a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js +++ b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js @@ -1,10 +1,8 @@ /* global chrome */ -import {IS_FIREFOX} from '../utils'; - // Firefox doesn't support ExecutionWorld.MAIN yet // equivalent logic for Firefox is in prepareInjection.js -const contentScriptsToInject = IS_FIREFOX +const contentScriptsToInject = __IS_FIREFOX__ ? [ { id: '@react-devtools/proxy', diff --git a/packages/react-devtools-extensions/src/background/executeScript.js b/packages/react-devtools-extensions/src/background/executeScript.js index af48726be028c..efe73229ecff5 100644 --- a/packages/react-devtools-extensions/src/background/executeScript.js +++ b/packages/react-devtools-extensions/src/background/executeScript.js @@ -1,7 +1,5 @@ /* global chrome */ -import {IS_FIREFOX} from '../utils'; - // Firefox doesn't support ExecutionWorld.MAIN yet // https://bugzilla.mozilla.org/show_bug.cgi?id=1736575 function executeScriptForFirefoxInMainWorld({target, files}) { @@ -46,7 +44,7 @@ export function executeScriptInIsolatedWorld({target, files}) { } export function executeScriptInMainWorld({target, files}) { - if (IS_FIREFOX) { + if (__IS_FIREFOX__) { return executeScriptForFirefoxInMainWorld({target, files}); } diff --git a/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js index 11caa35e2011b..5c6e011114014 100644 --- a/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js +++ b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js @@ -2,10 +2,8 @@ 'use strict'; -import {IS_FIREFOX} from 'react-devtools-extensions/src/utils'; - function setExtensionIconAndPopup(reactBuildType, tabId) { - const action = IS_FIREFOX ? chrome.browserAction : chrome.action; + const action = __IS_FIREFOX__ ? chrome.browserAction : chrome.action; action.setIcon({ tabId, diff --git a/packages/react-devtools-extensions/src/background/tabsManager.js b/packages/react-devtools-extensions/src/background/tabsManager.js index 15c78f090ac1f..23b566502a269 100644 --- a/packages/react-devtools-extensions/src/background/tabsManager.js +++ b/packages/react-devtools-extensions/src/background/tabsManager.js @@ -2,8 +2,6 @@ 'use strict'; -import {IS_FIREFOX} from 'react-devtools-extensions/src/utils'; - import setExtensionIconAndPopup from './setExtensionIconAndPopup'; function isRestrictedBrowserPage(url) { @@ -20,7 +18,7 @@ function checkAndHandleRestrictedPageIfSo(tab) { // we can't update for any other types (prod,dev,outdated etc) // as the content script needs to be injected at document_start itself for those kinds of detection // TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed -if (!IS_FIREFOX) { +if (__IS_CHROME__ || __IS_EDGE__) { chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo)); chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => checkAndHandleRestrictedPageIfSo(tab), @@ -29,7 +27,7 @@ if (!IS_FIREFOX) { // Listen to URL changes on the active tab and update the DevTools icon. chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { - if (IS_FIREFOX) { + if (__IS_FIREFOX__) { // We don't properly detect protected URLs in Firefox at the moment. // However, we can reset the DevTools icon to its loading state when the URL changes. // It will be updated to the correct icon by the onMessage callback below. diff --git a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js index 8f7b6405cb0a8..d67ea7c405a1e 100644 --- a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js +++ b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js @@ -1,7 +1,6 @@ /* global chrome */ import nullthrows from 'nullthrows'; -import {IS_FIREFOX} from '../utils'; // We run scripts on the page via the service worker (background/index.js) for // Manifest V3 extensions (Chrome & Edge). @@ -62,7 +61,7 @@ window.addEventListener('pageshow', function ({target}) { chrome.runtime.sendMessage(lastSentDevToolsHookMessage); }); -if (IS_FIREFOX) { +if (__IS_FIREFOX__) { injectScriptSync(chrome.runtime.getURL('build/renderer.js')); // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with. diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js index 555d35fe5d372..c93edc4adfb04 100644 --- a/packages/react-devtools-extensions/src/main/index.js +++ b/packages/react-devtools-extensions/src/main/index.js @@ -5,7 +5,7 @@ import {flushSync} from 'react-dom'; import {createRoot} from 'react-dom/client'; import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; -import {IS_CHROME, IS_EDGE, getBrowserTheme, IS_FIREFOX} from '../utils'; +import {getBrowserTheme} from '../utils'; import { localStorageGetItem, localStorageSetItem, @@ -93,10 +93,10 @@ function createBridgeAndStore() { store = new Store(bridge, { isProfiling, - supportsReloadAndProfile: IS_CHROME || IS_EDGE, + supportsReloadAndProfile: __IS_CHROME__ || __IS_EDGE__, supportsProfiling, // At this time, the timeline can only parse Chrome performance profiles. - supportsTimeline: IS_CHROME, + supportsTimeline: __IS_CHROME__, supportsTraceUpdates: true, }); @@ -218,8 +218,8 @@ function createComponentsPanel() { } chrome.devtools.panels.create( - IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components', - IS_EDGE ? 'icons/production.svg' : '', + __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components', + __IS_EDGE__ ? 'icons/production.svg' : '', 'panel.html', createdPanel => { componentsPanel = createdPanel; @@ -257,8 +257,8 @@ function createProfilerPanel() { } chrome.devtools.panels.create( - IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler', - IS_EDGE ? 'icons/production.svg' : '', + __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler', + __IS_EDGE__ ? 'icons/production.svg' : '', 'panel.html', createdPanel => { profilerPanel = createdPanel; @@ -444,7 +444,7 @@ const debouncedOnNavigatedListener = debounce(() => { chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener); // Should be emitted when browser DevTools are closed -if (IS_FIREFOX) { +if (__IS_FIREFOX__) { // For some reason Firefox doesn't emit onBeforeUnload event window.addEventListener('unload', performFullCleanup); } else { diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js index 91311dcc766bb..3219b58ebc9c1 100644 --- a/packages/react-devtools-extensions/src/utils.js +++ b/packages/react-devtools-extensions/src/utils.js @@ -2,12 +2,8 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; -export const IS_EDGE: boolean = process.env.IS_EDGE; -export const IS_FIREFOX: boolean = process.env.IS_FIREFOX; -export const IS_CHROME: boolean = process.env.IS_CHROME; - export function getBrowserTheme(): BrowserTheme { - if (IS_CHROME) { + if (__IS_CHROME__) { // chrome.devtools.panels added in Chrome 18. // chrome.devtools.panels.themeName added in Chrome 54. return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light'; diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index e6c3ca931bb51..6d3e7de2a1031 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -90,7 +90,10 @@ module.exports = { minimizer: [ new TerserPlugin({ terserOptions: { - compress: false, + compress: { + unused: true, + dead_code: true, + }, mangle: { keep_fnames: true, }, @@ -113,6 +116,9 @@ module.exports = { __EXTENSION__: true, __PROFILE__: false, __TEST__: NODE_ENV === 'test', + __IS_CHROME__: IS_CHROME, + __IS_FIREFOX__: IS_FIREFOX, + __IS_EDGE__: IS_EDGE, 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null, @@ -125,9 +131,6 @@ module.exports = { 'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`, 'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`, 'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`, - 'process.env.IS_CHROME': IS_CHROME, - 'process.env.IS_FIREFOX': IS_FIREFOX, - 'process.env.IS_EDGE': IS_EDGE, }), ], module: {