[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.
facebook · Mar 3, 2023 · fcf2187 · fcf2187
1 parent b72ed69
commit fcf2187
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 54 deletions.
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
@@ -31,7 +31,6 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
-        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
@@ -31,7 +31,6 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
-        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
@@ -32,7 +32,6 @@
     "panel.html",
     "build/react_devtools_backend.js",
     "build/proxy.js",
-    "build/renderer.js",
     "build/installHook.js"
   ],
   "background": {

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
@@ -21,13 +21,6 @@ if (!IS_FIREFOX) {
         runAt: 'document_start',
         world: chrome.scripting.ExecutionWorld.MAIN,
       },
-      {
-        id: 'renderer',
-        matches: ['<all_urls>'],
-        js: ['build/renderer.js'],
-        runAt: 'document_start',
-        world: chrome.scripting.ExecutionWorld.MAIN,
-      },
     ],
     function () {
       // When the content scripts are already registered, an error will be thrown.

diff --git a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
@@ -1,8 +1,6 @@
 /* global chrome */
 
 import nullthrows from 'nullthrows';
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 import {IS_FIREFOX} from '../utils';
 
 function injectScriptSync(src) {
@@ -119,11 +117,6 @@ window.addEventListener('pageshow', function ({target}) {
 // For Firefox, V3 is not ready, so sync injection is still the best approach.
 const injectScript = IS_FIREFOX ? injectScriptSync : injectScriptAsync;
 
-// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
-if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
-  injectScript(chrome.runtime.getURL('build/renderer.js'));
-}
-
 // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
 // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
 // We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access

diff --git a/packages/react-devtools-extensions/src/contentScripts/renderer.js b/packages/react-devtools-extensions/src/contentScripts/renderer.js
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
@@ -55,7 +55,6 @@ module.exports = {
     panel: './src/panel.js',
     proxy: './src/contentScripts/proxy.js',
     prepareInjection: './src/contentScripts/prepareInjection.js',
-    renderer: './src/contentScripts/renderer.js',
     installHook: './src/contentScripts/installHook.js',
   },
   output: {

diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
@@ -76,7 +76,8 @@ export function initBackend(
     }
 
     // Notify the DevTools frontend about new renderers.
-    // This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).
+    // This includes any that were attached early
+    // (when SESSION_STORAGE_RELOAD_AND_PROFILE_KEY is set to true).
     if (rendererInterface != null) {
       hook.emit('renderer-attached', {
         id,

diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
@@ -21,6 +21,9 @@ import {
   patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
+import {attach} from './backend/renderer';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from './constants';
+import {sessionStorageGetItem} from './storage';
 
 declare var window: any;
 
@@ -365,8 +368,9 @@ export function installHook(target: any): DevToolsHook | null {
 
     // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
     // Otherwise the renderer won't yet exist and we can skip this step.
-    const attach = target.__REACT_DEVTOOLS_ATTACH__;
-    if (typeof attach === 'function') {
+    if (
+      sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+    ) {
       const rendererInterface = attach(hook, id, renderer, target);
       hook.rendererInterfaces.set(id, rendererInterface);
     }