diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js index 7ee384707f12e..ea0f83d7609d6 100644 --- a/packages/react-art/src/ReactART.js +++ b/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; diff --git a/packages/react-art/src/ReactARTComponentTree.js b/packages/react-art/src/ReactARTComponentTree.js new file mode 100644 index 0000000000000..7dfb5e66c3a6f --- /dev/null +++ b/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; +} diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js index e6ce862766fb0..0cdce64de6dc0 100644 --- a/packages/react-art/src/ReactARTHostConfig.js +++ b/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; }