New NPM package react-devtools-inline (#363)

shells/dev/src/backend.js

@@ -1,37 +0,0 @@
-/** @flow */
-
-import Agent from 'src/backend/agent';
-import Bridge from 'src/bridge';
-import { initBackend } from 'src/backend';
-import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
-
-const bridge = new Bridge({
-  listen(fn) {
-    const listener = event => {
-      fn(event.data);
-    };
-    window.addEventListener('message', listener);
-    return () => {
-      window.removeEventListener('message', listener);
-    };
-  },
-  send(event: string, payload: any, transferable?: Array<any>) {
-    window.parent.postMessage({ event, payload }, '*', transferable);
-  },
-});
-
-const agent = new Agent(bridge);
-
-const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-initBackend(hook, agent, window.parent);
-
-// Setup React Native style editor if a renderer like react-native-web has injected it.
-if (!!hook.resolveRNStyle) {
-  setupNativeStyleEditor(
-    bridge,
-    agent,
-    hook.resolveRNStyle,
-    hook.nativeStyleEditorValidAttributes
-  );
-}

shells/dev/src/devtools.js

@@ -3,24 +3,21 @@
 import { createElement } from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
 import { unstable_createRoot as createRoot } from 'react-dom';
-import Bridge from 'src/bridge';
-import { installHook } from 'src/hook';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
 import { initDevTools } from 'src/devtools';
-import Store from 'src/devtools/store';
-import DevTools from 'src/devtools/views/DevTools';
-import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
 const { contentDocument, contentWindow } = iframe;
 
-// The renderer interface can't read saved component filters directly,
-// because they are stored in localStorage within the context of the extension.
-// Instead it relies on the extension to pass filters through.
-contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
-contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = getAppendComponentStack();
+// Helps with positioning Overlay UI.
+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
 
-installHook(contentWindow);
+initializeBackend(contentWindow);
 
 const container = ((document.getElementById('devtools'): any): HTMLElement);
 
@@ -48,46 +45,21 @@ mountButton.addEventListener('click', function() {
 inject('dist/app.js', () => {
   initDevTools({
     connect(cb) {
-      const bridge = new Bridge({
-        listen(fn) {
-          const listener = ({ data }) => {
-            fn(data);
-          };
-          // Preserve the reference to the window we subscribe to, so we can unsubscribe from it when required.
-          const contentWindowParent = contentWindow.parent;
-          contentWindowParent.addEventListener('message', listener);
-          return () => {
-            contentWindowParent.removeEventListener('message', listener);
-          };
-        },
-        send(event: string, payload: any, transferable?: Array<any>) {
-          contentWindow.postMessage({ event, payload }, '*', transferable);
-        },
-      });
+      const DevTools = initializeFrontend(contentWindow);
 
-      cb(bridge);
-
-      const store = new Store(bridge);
+      // Activate the backend only once the DevTools frontend Store has been initialized.
+      // Otherwise the Store may miss important initial tree op codes.
+      activateBackend(contentWindow);
 
       const root = createRoot(container);
-      const batch = root.createBatch();
-      batch.render(
+      root.render(
         createElement(DevTools, {
-          bridge,
           browserTheme: 'light',
           showTabBar: true,
           showWelcomeToTheNewDevToolsDialog: true,
-          store,
           warnIfLegacyBackendDetected: true,
         })
       );
-      batch.then(() => {
-        batch.commit();
-
-        // Initialize the backend only once the DevTools frontend Store has been initialized.
-        // Otherwise the Store may miss important initial tree op codes.
-        inject('dist/backend.js');
-      });
     },
 
     onReload(reloadFn) {