Add Agent support for older backends

Add message forwarding for older backend methods: overrideContext, overrideHookState, overrideProps, and overrideState

These events forward to the new overrideValueAtPath method.

We do this because React Native embeds the React DevTools backend, but cannot control which version of the frontend users use.

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/editing-test.js

@@ -162,6 +162,39 @@ describe('editable props and state', () => {
       });
     });
 
+    it('should still support overriding props values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideProps(id, path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideProps', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        jest.runOnlyPendingTimers();
+      }
+
+      overrideProps(classID, ['object', 'nested'], 'updated');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'initial',
+      });
+
+      overrideProps(functionID, ['shallow'], 'updated');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+    });
+
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -424,6 +457,28 @@ describe('editable props and state', () => {
       });
     });
 
+    it('should still support overriding state values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideState', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        jest.runOnlyPendingTimers();
+      }
+
+      overrideState(['array', 1], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {nested: 'initial'},
+        shallow: 'initial',
+      });
+    });
+
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -623,6 +678,31 @@ describe('editable props and state', () => {
       });
     });
 
+    it('should still support overriding hooks values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideHookState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideHookState', {
+          hookID,
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        jest.runOnlyPendingTimers();
+      }
+
+      overrideHookState(['shallow'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+    });
+
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -858,6 +938,35 @@ describe('editable props and state', () => {
       });
     });
 
+    it('should still support overriding context values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        path = ['value', ...path];
+
+        bridge.send('overrideContext', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        jest.runOnlyPendingTimers();
+      }
+
+      overrideContext(['object', 'nested'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'initial',
+      });
+    });
+
     it('should have editable paths', async () => {
       await mountTestApp();
 

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

@@ -74,6 +74,21 @@ type InspectElementParams = {|
   rendererID: number,
 |};
 
+type OverrideHookParams = {|
+  id: number,
+  hookID: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
+type SetInParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
 type DeletePathParams = {|
@@ -180,6 +195,14 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('viewAttributeSource', this.viewAttributeSource);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
+    // Temporarily support newer standalone front-end to send commands to older backend.
+    // We do this because React Native embeds the React DevTools backend,
+    // but cannot control which version of the frontend users use.
+    bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideHookState', this.overrideHookState);
+    bridge.addListener('overrideProps', this.overrideProps);
+    bridge.addListener('overrideState', this.overrideState);
+
     if (this._isProfiling) {
       bridge.send('profilingStatus', true);
     }
@@ -338,6 +361,56 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  // Temporarily support newer standalone front-end to send commands to older backend.
+  overrideContext = ({id, path, rendererID, value}: SetInParams) => {
+    this.overrideValueAtPath({
+      id,
+      path,
+      rendererID,
+      type: 'context',
+      value,
+    });
+  };
+
+  // Temporarily support newer standalone front-end to send commands to older backend.
+  overrideHookState = ({
+    id,
+    hookID,
+    path,
+    rendererID,
+    value,
+  }: OverrideHookParams) => {
+    this.overrideValueAtPath({
+      id,
+      path,
+      rendererID,
+      type: 'hooks',
+      value,
+    });
+  };
+
+  // Temporarily support newer standalone front-end to send commands to older backend.
+  overrideProps = ({id, path, rendererID, value}: SetInParams) => {
+    this.overrideValueAtPath({
+      id,
+      path,
+      rendererID,
+      type: 'props',
+      value,
+    });
+  };
+
+  // Temporarily support newer standalone front-end to send commands to older backend.
+  overrideState = ({id, path, rendererID, value}: SetInParams) => {
+    this.overrideValueAtPath({
+      id,
+      path,
+      rendererID,
+      type: 'state',
+      value,
+    });
+  };
+
   reloadAndProfile = (recordChangeDescriptions: boolean) => {
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
     sessionStorageSetItem(

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

@@ -35,6 +35,17 @@ type HighlightElementInDOM = {|
   scrollIntoView: boolean,
 |};
 
+type OverrideValue = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+  value: any,
+|};
+
+type OverrideHookState = {|
+  ...OverrideValue,
+  hookID: number,
+|};
+
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
 type DeletePath = {|
@@ -160,6 +171,14 @@ type FrontendEvents = {|
   NativeStyleEditor_measure: [ElementAndRendererID],
   NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],
   NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],
+
+  // Temporarily support newer standalone front-end to send commands to older backend.
+  // We do this because React Native embeds the React DevTools backend,
+  // but cannot control which version of the frontend users use.
+  overrideContext: [OverrideValue],
+  overrideHookState: [OverrideHookState],
+  overrideProps: [OverrideValue],
+  overrideState: [OverrideValue],
 |};
 
 class Bridge<