Revert "[DevTools] Remove renderer.js from extension build (#26234)"

This reverts commit fcf2187.

packages/react-devtools-extensions/chrome/manifest.json

@@ -31,6 +31,7 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
+        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

packages/react-devtools-extensions/edge/manifest.json

@@ -31,6 +31,7 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
+        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

packages/react-devtools-extensions/firefox/manifest.json

@@ -32,6 +32,7 @@
     "panel.html",
     "build/react_devtools_backend.js",
     "build/proxy.js",
+    "build/renderer.js",
     "build/installHook.js"
   ],
   "background": {

packages/react-devtools-extensions/src/background.js

@@ -22,6 +22,13 @@ 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.

packages/react-devtools-extensions/src/contentScripts/prepareInjection.js

@@ -1,6 +1,8 @@
 /* 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';
 
 // We run scripts on the page via the service worker (backgroud.js) for
@@ -109,9 +111,13 @@ window.addEventListener('pageshow', function ({target}) {
   chrome.runtime.sendMessage(lastDetectionResult);
 });
 
-// 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.
 if (IS_FIREFOX) {
+  // 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') {
+    injectScriptSync(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.
   switch (document.contentType) {
     case 'text/html':
     case 'application/xhtml+xml': {

packages/react-devtools-extensions/src/contentScripts/renderer.js

@@ -0,0 +1,33 @@
+/**
+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
+ * So this entry point (one of the web_accessible_resources) provides a way to eagerly inject it.
+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
+ * The normal case (not a reload-and-profile) will not make use of this entry point though.
+ *
+ * @flow
+ */
+
+import {attach} from 'react-devtools-shared/src/backend/renderer';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+
+if (
+  sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true' &&
+  !window.hasOwnProperty('__REACT_DEVTOOLS_ATTACH__')
+) {
+  Object.defineProperty(
+    window,
+    '__REACT_DEVTOOLS_ATTACH__',
+    ({
+      enumerable: false,
+      // This property needs to be configurable to allow third-party integrations
+      // to attach their own renderer. Note that using third-party integrations
+      // is not officially supported. Use at your own risk.
+      configurable: true,
+      get() {
+        return attach;
+      },
+    }: Object),
+  );
+}

packages/react-devtools-extensions/webpack.config.js

@@ -55,6 +55,7 @@ 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: {

packages/react-devtools-shared/src/backend/index.js

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

packages/react-devtools-shared/src/hook.js

@@ -21,9 +21,6 @@ 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;
 
@@ -368,9 +365,8 @@ 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.
-    if (
-      sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
-    ) {
+    const attach = target.__REACT_DEVTOOLS_ATTACH__;
+    if (typeof attach === 'function') {
       const rendererInterface = attach(hook, id, renderer, target);
       hook.rendererInterfaces.set(id, rendererInterface);
     }