Fiber devtools fixes (#755)

* Fix a crash due to facebook/react#9013

Not sure if that one gets merged but it fixes other issues so it's likely.

* Fix editing host styles in RN

Also switch it to use the same `updater` code path both in Stack and Fiber.
This removes knowledge about internal data structure from the frontend.

* Fully fix editing RN styles

* We shouldn't rely on the assumption that we're operating on current Fiber
* The idea to unify updaters with setInProps() was a bad one because setNativeProps() signature is too different

* Flow fixes; I think the correct thing to do is to use Dom's newer code over Dan's older code for setupBackend.

Author: bvaughn

backend/getData.js

@@ -120,6 +120,15 @@ function getData(internalInstance: Object): DataType {
     }
   }
 
+  if (typeof internalInstance.setNativeProps === 'function') {
+    // For editing styles in RN
+    updater = {
+      setNativeProps(nativeProps) {
+        internalInstance.setNativeProps(nativeProps);
+      },
+    };
+  }
+
   return {
     nodeType,
     type,

backend/getDataFiber.js

@@ -80,7 +80,11 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
       break;
     case HostComponent:
       nodeType = 'Native';
-      name = fiber.type;
+      name = typeof fiber.type === 'string' ?
+        fiber.type :
+        // Necessary for React Native Fiber if host types are not strings.
+        // https://github.com/facebook/react/pull/9013
+        getDisplayName(fiber.type);
       publicInstance = fiber.stateNode;
       props = fiber.memoizedProps;
       if (
@@ -91,6 +95,14 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
       } else {
         children = [];
       }
+      if (typeof fiber.stateNode.setNativeProps === 'function') {
+        // For editing styles in RN
+        updater = {
+          setNativeProps(nativeProps) {
+            fiber.stateNode.setNativeProps(nativeProps);
+          },
+        };
+      }
       break;
     case HostText:
       nodeType = 'Text';
@@ -134,7 +146,14 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
 }
 
 function setInProps(fiber, path: Array<string | number>, value: any) {
-  fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
+  const inst = fiber.stateNode;
+  fiber.pendingProps = copyWithSet(inst.props, path, value);
+  if (fiber.alternate) {
+    // We don't know which fiber is the current one because DevTools may bail out of getDataFiber() call,
+    // and so the data object may refer to another version of the fiber. Therefore we update pendingProps
+    // on both. I hope that this is safe.
+    fiber.alternate.pendingProps = fiber.pendingProps;
+  }
   fiber.stateNode.forceUpdate();
 }
 

backend/types.js

@@ -10,6 +10,17 @@
  */
 'use strict';
 
+type CompositeUpdater = {
+  setInProps: ?(path: Array<string>, value: any) => void,
+  setInState: ?(path: Array<string>, value: any) => void,
+  setInContext: ?(path: Array<string>, value: any) => void,
+  forceUpdate: ?() => void,
+};
+
+type NativeUpdater = {
+  setNativeProps: ?(nativeProps: {[key: string]: any}) => void,
+};
+
 export type DataType = {
   nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Portal' | 'Empty',
   type: ?(string | AnyFn),
@@ -22,13 +33,7 @@ export type DataType = {
   context: ?Object,
   children: ?(string | Array<OpaqueNodeHandle>),
   text: ?string,
-  updater: ?{
-    setInProps: ?(path: Array<string>, value: any) => void,
-    setInState: ?(path: Array<string>, value: any) => void,
-    setInContext: ?(path: Array<string>, value: any) => void,
-    // setState: ?(newState: any) => void,
-    forceUpdate: ?() => void,
-  },
+  updater: ?(CompositeUpdater | NativeUpdater),
   publicInstance: ?Object,
 };