Skip to content

Commit

Permalink
Inject react-art renderer into react-devtools
Browse files Browse the repository at this point in the history
  • Loading branch information
yunchancho committed Jul 9, 2018
1 parent 5662595 commit a4b4b62
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 0 deletions.
9 changes: 9 additions & 0 deletions packages/react-art/src/ReactART.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -131,6 +133,13 @@ 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;
Expand Down
41 changes: 41 additions & 0 deletions packages/react-art/src/ReactARTComponentTree.js
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions packages/react-art/src/ReactARTHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit a4b4b62

Please sign in to comment.