Inject react-art renderer into react-devtools

Author: yunchancho

packages/react-art/src/ReactART.js

@@ -6,12 +6,14 @@
  */
 
 import React from 'react';
+import ReactVersion from 'shared/ReactVersion';
 import * as ARTRenderer from 'react-reconciler/inline.art';
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
 import FastNoSideEffects from 'art/modes/fast-noSideEffects';
 
 import {TYPES, childrenAsString} from './ReactARTInternals';
+import * as ReactARTComponentTree from './ReactARTComponentTree';
 
 Mode.setCurrent(
   // Change to 'art/modes/dom' for easier debugging via SVG
@@ -131,6 +133,15 @@ class Text extends React.Component {
   }
 }
 
+ARTRenderer.injectIntoDevTools({
+  findFiberByHostInstance:
+    ReactARTComponentTree.getClosestInstanceFromNode,
+  bundleType: __DEV__ ? 1 : 0,
+  version: ReactVersion,
+  rendererPackageName: 'react-art-renderer',
+});
+
+
 /** API */
 
 export const ClippingRectangle = TYPES.CLIPPING_RECTANGLE;

packages/react-art/src/ReactARTComponentTree.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {HostComponent, HostText} from 'shared/ReactTypeOfWork';
+
+const randomKey = Math.random()
+  .toString(36)
+  .slice(2);
+const internalInstanceKey = '__reactInternalInstance$' + randomKey;
+
+export function precacheFiberNode(hostInst, node) {
+  node[internalInstanceKey] = hostInst;
+}
+
+export function getClosestInstanceFromNode(node) {
+  if (node[internalInstanceKey]) {
+    return node[internalInstanceKey];
+  }
+
+  while (!node[internalInstanceKey]) {
+    if (node.parentNode) {
+      node = node.parentNode;
+    } else {
+      // Top of the tree. This node must not be part of a React tree (or is
+      // unmounted, potentially).
+      return null;
+    }
+  }
+
+  let inst = node[internalInstanceKey];
+  if (inst.tag === HostComponent || inst.tag === HostText) {
+    // In Fiber, this will always be the deepest root.
+    return inst;
+  }
+
+  return null;
+}

packages/react-art/src/ReactARTHostConfig.js

@@ -6,12 +6,14 @@
  */
 
 import * as ReactScheduler from 'shared/ReactScheduler';
+import * as ReactARTComponentTree from './ReactARTComponentTree';
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
+const {precacheFiberNode} = ReactARTComponentTree;
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
@@ -281,6 +283,7 @@ export function createInstance(type, props, internalInstanceHandle) {
   invariant(instance, 'ReactART does not support the type "%s"', type);
 
   instance._applyProps(instance, props);
+  precacheFiberNode(internalInstanceHandle, instance);
 
   return instance;
 }