[DevTools] Remove renderer.js from extension build (#26234)
## Summary When looking into the compiled code of `installHook.js` of the extension build, I noticed that it actually includes the large `attach` function (from renderer.js). I don't think it was expected. This is because `hook.js` imports from `backend/console.js` which imports from `backend/renderer.js` for `getInternalReactConstants` A straightforward way is to extract function `getInternalReactConstants`. However, I think it's more simplified to just merge these two files and save the 361K renderer.js from the extension build since we have always been loading this code anyways. I changed the execution check from `__REACT_DEVTOOLS_ATTACH__ ` to the session storage. ## How did you test this change? Everything works normal in my local build.
Mengdi Chen committed
Mar 3, 2023 at 14:01 UTC
fcf2187919d2b509772b6a10f90e74331165ac78
9 files changed
+8
-54
packages/react-devtools-extensions/chrome/manifest.json
-1
@@ -31,7 +31,6 @@
31
"panel.html",
32
"build/react_devtools_backend.js",
33
"build/proxy.js",
34
- "build/renderer.js",
34
"build/installHook.js"
35
],
36
"matches": [
packages/react-devtools-extensions/edge/manifest.json
-1
@@ -31,7 +31,6 @@
31
"panel.html",
32
"build/react_devtools_backend.js",
33
"build/proxy.js",
34
- "build/renderer.js",
34
"build/installHook.js"
35
],
36
"matches": [
packages/react-devtools-extensions/firefox/manifest.json
-1
@@ -32,7 +32,6 @@
32
"panel.html",
33
"build/react_devtools_backend.js",
34
"build/proxy.js",
35
- "build/renderer.js",
35
"build/installHook.js"
36
],
37
"background": {
packages/react-devtools-extensions/src/background.js
-7
@@ -21,13 +21,6 @@ if (!IS_FIREFOX) {
21
runAt: 'document_start',
22
world: chrome.scripting.ExecutionWorld.MAIN,
23
},
24
- {
25
- id: 'renderer',
26
- matches: ['<all_urls>'],
27
- js: ['build/renderer.js'],
28
- runAt: 'document_start',
29
- world: chrome.scripting.ExecutionWorld.MAIN,
30
- },
24
],
25
function () {
26
// When the content scripts are already registered, an error will be thrown.
packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
-7
@@ -1,8 +1,6 @@
1
/* global chrome */
2
3
import nullthrows from 'nullthrows';
4
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
5
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
4
import {IS_FIREFOX} from '../utils';
5
6
function injectScriptSync(src) {
@@ -119,11 +117,6 @@ window.addEventListener('pageshow', function ({target}) {
117
// For Firefox, V3 is not ready, so sync injection is still the best approach.
118
const injectScript = IS_FIREFOX ? injectScriptSync : injectScriptAsync;
119
122
-// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
123
-if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
124
- injectScript(chrome.runtime.getURL('build/renderer.js'));
125
-}
126
-
120
// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
121
// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
122
// We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
packages/react-devtools-extensions/src/contentScripts/renderer.js
deleted
-33
@@ -1,33 +0,0 @@
1
-/**
2
- * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
3
- * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
4
- * So this entry point (one of the web_accessible_resources) provides a way to eagerly inject it.
5
- * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
6
- * The normal case (not a reload-and-profile) will not make use of this entry point though.
7
- *
8
- * @flow
9
- */
10
-
11
-import {attach} from 'react-devtools-shared/src/backend/renderer';
12
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
13
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
14
-
15
-if (
16
- sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true' &&
17
- !window.hasOwnProperty('__REACT_DEVTOOLS_ATTACH__')
18
-) {
19
- Object.defineProperty(
20
- window,
21
- '__REACT_DEVTOOLS_ATTACH__',
22
- ({
23
- enumerable: false,
24
- // This property needs to be configurable to allow third-party integrations
25
- // to attach their own renderer. Note that using third-party integrations
26
- // is not officially supported. Use at your own risk.
27
- configurable: true,
28
- get() {
29
- return attach;
30
- },
31
- }: Object),
32
- );
33
-}
packages/react-devtools-extensions/webpack.config.js
-1
@@ -55,7 +55,6 @@ module.exports = {
55
panel: './src/panel.js',
56
proxy: './src/contentScripts/proxy.js',
57
prepareInjection: './src/contentScripts/prepareInjection.js',
58
- renderer: './src/contentScripts/renderer.js',
58
installHook: './src/contentScripts/installHook.js',
59
},
60
output: {
packages/react-devtools-shared/src/backend/index.js
+2
-1
@@ -76,7 +76,8 @@ export function initBackend(
76
}
77
78
// Notify the DevTools frontend about new renderers.
79
- // This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).
79
+ // This includes any that were attached early
80
+ // (when SESSION_STORAGE_RELOAD_AND_PROFILE_KEY is set to true).
81
if (rendererInterface != null) {
82
hook.emit('renderer-attached', {
83
id,
packages/react-devtools-shared/src/hook.js
+6
-2
@@ -21,6 +21,9 @@ import {
21
patchConsoleUsingWindowValues,
22
registerRenderer as registerRendererWithConsole,
23
} from './backend/console';
24
+import {attach} from './backend/renderer';
25
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from './constants';
26
+import {sessionStorageGetItem} from './storage';
27
28
declare var window: any;
29
@@ -365,8 +368,9 @@ export function installHook(target: any): DevToolsHook | null {
368
369
// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
370
// Otherwise the renderer won't yet exist and we can skip this step.
368
- const attach = target.__REACT_DEVTOOLS_ATTACH__;
369
- if (typeof attach === 'function') {
371
+ if (
372
+ sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
373
+ ) {
374
const rendererInterface = attach(hook, id, renderer, target);
375
hook.rendererInterfaces.set(id, rendererInterface);
376
}