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) {

shells/dev/webpack.config.js

@@ -16,6 +16,8 @@ if (!TARGET) {
 
 const __DEV__ = NODE_ENV === 'development';
 
+const root = resolve(__dirname, '../..');
+
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
@@ -24,12 +26,15 @@ const config = {
   devtool: false,
   entry: {
     app: './app/index.js',
-    backend: './src/backend.js',
     devtools: './src/devtools.js',
   },
   resolve: {
     alias: {
-      src: resolve(__dirname, '../../src'),
+      'react-devtools-inline': resolve(
+        root,
+        'packages/react-devtools-inline/src/'
+      ),
+      src: resolve(root, 'src'),
     },
   },
   plugins: [
@@ -45,7 +50,7 @@ const config = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: require.resolve('../../babel.config.js'),
+          configFile: resolve(root, 'babel.config.js'),
         },
       },
       {