Support editable props, state, and context values

Author: Brian Vaughn

shells/dev/app/EditableProps/EditableProps.css

@@ -0,0 +1,13 @@
+.App {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.Header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}

shells/dev/app/EditableProps/EditableProps.js

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { createContext, Component, Fragment } from 'react';
+import styles from './EditableProps.css';
+
+type StatefulFunctionProps = {| count: number |};
+
+function StatefulFunction({ count }: StatefulFunctionProps) {
+  return <li>Count: {count}</li>;
+}
+
+const BoolContext = createContext(true);
+// $FlowFixMe Flow does not yet know about Context.displayName
+BoolContext.displayName = 'BoolContext';
+
+type Props = {| name: string, toggle: boolean |};
+type State = {| cities: Array<string>, state: string |};
+
+class StatefulClass extends Component<Props, State> {
+  static contextType = BoolContext;
+
+  state: State = {
+    cities: ['San Francisco', 'San Jose'],
+    state: 'California',
+  };
+
+  handleChange = ({ target }) =>
+    this.setState({
+      state: target.value,
+    });
+
+  render() {
+    return (
+      <Fragment>
+        <li>Name: {this.props.name}</li>
+        <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
+        <li>
+          State: <input value={this.state.state} onChange={this.handleChange} />
+        </li>
+        <li>Cities: {this.state.cities.join(', ')}</li>
+        <li>Context: {this.context ? 'true' : 'false'}</li>
+      </Fragment>
+    );
+  }
+}
+
+export default function EditableProps() {
+  return (
+    <div className={styles.App}>
+      <div className={styles.Header}>Editable props</div>
+      <ul>
+        <StatefulClass name="Brian" toggle={true} />
+        <StatefulFunction count={1} />
+      </ul>
+    </div>
+  );
+}

shells/dev/app/EditableProps/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+import EditableProps from './EditableProps';
+
+export default EditableProps;

shells/dev/app/index.js

@@ -4,6 +4,7 @@
 
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import ToDoList from './ToDoList';
@@ -24,6 +25,7 @@ function mountTestApp() {
   mountHelper(ToDoList);
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
+  mountHelper(EditableProps);
 }
 
 function unmountTestApp() {

src/backend/agent.js

@@ -18,6 +18,18 @@ const debug = (methodName, ...args) => {
   }
 };
 
+type InspectSelectParams = {|
+  id: number,
+  rendererID: number,
+|};
+
+type SetInParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
@@ -27,6 +39,9 @@ export default class Agent extends EventEmitter {
 
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideProps', this.overrideProps);
+    bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
@@ -80,7 +95,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  inspectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+  inspectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -89,7 +104,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  selectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+  selectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -98,6 +113,33 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  overrideContext = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInContext(id, path, value);
+    }
+  };
+
+  overrideProps = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInProps(id, path, value);
+    }
+  };
+
+  overrideState = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInState(id, path, value);
+    }
+  };
+
   setRendererInterface(
     rendererID: RendererID,
     rendererInterface: RendererInterface

src/backend/renderer.js

@@ -2,7 +2,8 @@
 
 import { gte } from 'semver';
 import {
-  ElementTypeClassOrFunction,
+  ElementTypeClass,
+  ElementTypeFunction,
   ElementTypeContext,
   ElementTypeForwardRef,
   ElementTypeMemo,
@@ -12,7 +13,7 @@ import {
   ElementTypeSuspense,
 } from 'src/devtools/types';
 import { getDisplayName, utfEncodeString } from '../utils';
-import { cleanForBridge } from './utils';
+import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
@@ -193,6 +194,8 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
+  const { overrideProps } = renderer;
+
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
       const fiberData = getDataForFiber(fiber);
@@ -295,13 +298,19 @@ export function attach(
 
     switch (tag) {
       case ClassComponent:
-      case FunctionComponent:
       case IncompleteClassComponent:
+        fiberData = {
+          displayName: getDisplayName(resolvedType),
+          key,
+          type: ElementTypeClass,
+        };
+        break;
+      case FunctionComponent:
       case IndeterminateComponent:
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
-          type: ElementTypeClassOrFunction,
+          type: ElementTypeFunction,
         };
         break;
       case ForwardRef:
@@ -1072,7 +1081,7 @@ export function attach(
       tag === IncompleteClassComponent ||
       tag === IndeterminateComponent
     ) {
-      if (stateNode && Object.keys(stateNode.context).length > 0) {
+      if (stateNode && stateNode.context != null) {
         context = stateNode.context;
       }
     } else if (
@@ -1135,7 +1144,7 @@ export function attach(
       id,
 
       // Does the current renderer support editable props/state/hooks?
-      canEditValues: false, // TODO
+      canEditFunctionProps: typeof overrideProps === 'function',
 
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
@@ -1156,6 +1165,49 @@ export function attach(
     };
   }
 
+  function setInProps(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (instance === null) {
+        if (typeof overrideProps === 'function') {
+          overrideProps(fiber, path, value);
+        }
+      } else {
+        fiber.pendingProps = copyWithSet(instance.props, path, value);
+        instance.forceUpdate();
+      }
+    }
+  }
+
+  function setInState(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      setInObject(instance.state, path, value);
+      instance.forceUpdate();
+    }
+  }
+
+  function setInContext(id: number, path: Array<string | number>, value: any) {
+    // To simplify hydration and display of primative context values (e.g. number, string)
+    // the inspectElement() method wraps context in a {value: ...} object.
+    // We need to remove the first part of the path (the "value") before continuing.
+    path = path.slice(1);
+
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (path.length === 0) {
+        // Simple context value
+        instance.context = value;
+      } else {
+        setInObject(instance.context, path, value);
+      }
+      instance.forceUpdate();
+    }
+  }
+
   return {
     getFiberIDFromNative,
     getNativeFromReactElement,
@@ -1164,7 +1216,10 @@ export function attach(
     inspectElement,
     selectElement,
     cleanup,
-    walkTree,
     renderer,
+    setInContext,
+    setInProps,
+    setInState,
+    walkTree,
   };
 }

src/backend/types.js

@@ -55,6 +55,9 @@ export type RendererInterface = {
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
+  setInProps: (id: number, path: Array<string | number>, value: any) => void,
+  setInState: (id: number, path: Array<string | number>, value: any) => void,
+  setInContext: (id: number, path: Array<string | number>, value: any) => void,
   walkTree: () => void,
 };
 

src/backend/utils.js

@@ -16,3 +16,37 @@ export function cleanForBridge(data: Object | null): DehydratedData | null {
     return null;
   }
 }
+
+export function copyWithSet(
+  obj: Object | Array<any>,
+  path: Array<string | number>,
+  value: any,
+  index: number = 0
+): Object | Array<any> {
+  if (index >= path.length) {
+    return value;
+  }
+  const key = path[index];
+  const updated = Array.isArray(obj) ? obj.slice() : { ...obj };
+  // $FlowFixMe number or string is fine here
+  updated[key] = copyWithSet(obj[key], path, value, index + 1);
+  return updated;
+}
+
+export function setInObject(
+  object: Object,
+  path: Array<string | number>,
+  value: any
+) {
+  const last = path.pop();
+  if (object != null) {
+    const parent: Object = path.reduce(
+      // $FlowFixMe
+      (reduced, attribute) => reduced[attribute],
+      object
+    );
+    if (parent) {
+      parent[last] = value;
+    }
+  }
+}

src/devtools/types.js

@@ -1,18 +1,19 @@
 // @flow
 
-export const ElementTypeClassOrFunction = 1;
-export const ElementTypeContext = 2;
-export const ElementTypeForwardRef = 3;
-export const ElementTypeMemo = 4;
-export const ElementTypeOtherOrUnknown = 5;
-export const ElementTypeProfiler = 6;
-export const ElementTypeRoot = 7;
-export const ElementTypeSuspense = 8;
+export const ElementTypeClass = 1;
+export const ElementTypeFunction = 2;
+export const ElementTypeContext = 3;
+export const ElementTypeForwardRef = 4;
+export const ElementTypeMemo = 5;
+export const ElementTypeOtherOrUnknown = 6;
+export const ElementTypeProfiler = 7;
+export const ElementTypeRoot = 8;
+export const ElementTypeSuspense = 9;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
@@ -47,8 +48,8 @@ export type Owner = {|
 export type InspectedElement = {|
   id: number,
 
-  // Does the current renderer support editable props/state/hooks?
-  canEditValues: boolean,
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
 
   // Inspectable properties.
   context: Object | null,