Skip to content

Commit 1132ed9

Browse files
committed
[WIP][Not for merge] Support Inspector in Fiber
1 parent ae57b25 commit 1132ed9

File tree

3 files changed

+45
-33
lines changed

3 files changed

+45
-33
lines changed

Libraries/Inspector/ElementProperties.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,15 @@ class ElementProperties extends React.Component {
111111
}
112112

113113
function getInstanceName(instance) {
114+
if (typeof instance.tag === 'number') {
115+
if (typeof instance.type === 'string') {
116+
return instance.type;
117+
}
118+
if (typeof instance.type === 'function') {
119+
return instance.type.displayName || instance.type.name || 'Unknown';
120+
}
121+
return 'Unknown';
122+
}
114123
if (instance.getName) {
115124
return instance.getName();
116125
}

Libraries/Inspector/Inspector.js

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,6 @@ const Touchable = require('Touchable');
2525
const UIManager = require('UIManager');
2626
const View = require('View');
2727

28-
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
29-
// required for devtools to be able to edit react native styles
30-
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.resolveRNStyle = require('flattenStyle');
31-
}
32-
3328
class Inspector extends React.Component {
3429
props: {
3530
inspectedViewTag: ?number,
@@ -67,23 +62,18 @@ class Inspector extends React.Component {
6762
}
6863

6964
componentDidMount() {
70-
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
71-
(this : any).attachToDevtools = this.attachToDevtools.bind(this);
72-
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', this.attachToDevtools);
73-
// if devtools is already started
74-
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
75-
this.attachToDevtools(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent);
76-
}
65+
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', this.attachToDevtools);
66+
// if devtools is already started
67+
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
68+
this.attachToDevtools(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent);
7769
}
7870
}
7971

8072
componentWillUnmount() {
8173
if (this._subs) {
8274
this._subs.map(fn => fn());
8375
}
84-
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
85-
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.off('react-devtools', this.attachToDevtools);
86-
}
76+
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.off('react-devtools', this.attachToDevtools);
8777
}
8878

8979
componentWillReceiveProps(newProps: Object) {
@@ -128,15 +118,25 @@ class Inspector extends React.Component {
128118

129119
setSelection(i: number) {
130120
const instance = this.state.hierarchy[i];
131-
// if we inspect a stateless component we can't use the getPublicInstance method
132-
// therefore we use the internal _instance property directly.
133-
const publicInstance = instance['_instance'] || {};
134-
const source = instance['_currentElement'] && instance['_currentElement']['_source'];
135-
UIManager.measure(instance.getHostNode(), (x, y, width, height, left, top) => {
121+
const props = typeof instance.tag === 'number' ?
122+
// Fiber
123+
instance.memoizedProps || {} :
124+
// Stack
125+
(instance['_instance'] || {}).props || {};
126+
const source = typeof instance.tag === 'number' ?
127+
// Fiber
128+
instance._debugSource :
129+
// Stack
130+
instance['_currentElement'] && instance['_currentElement']['_source'];
131+
const hostNode = typeof instance.tag === 'number' ?
132+
instance.stateNode :
133+
instance.getHostNode();
134+
135+
UIManager.measure(hostNode, (x, y, width, height, left, top) => {
136136
this.setState({
137137
inspected: {
138138
frame: {left, top, width, height},
139-
style: publicInstance.props ? publicInstance.props.style : {},
139+
style: props ? props.style : {},
140140
source,
141141
},
142142
selection: i,
@@ -155,11 +155,17 @@ class Inspector extends React.Component {
155155
this.state.devtoolsAgent.selectFromReactInstance(instance, true);
156156
}
157157

158-
// if we inspect a stateless component we can't use the getPublicInstance method
159-
// therefore we use the internal _instance property directly.
160-
const publicInstance = instance['_instance'] || {};
161-
const props = publicInstance.props || {};
162-
const source = instance['_currentElement'] && instance['_currentElement']['_source'];
158+
const props = typeof instance.tag === 'number' ?
159+
// Fiber
160+
instance.memoizedProps || {} :
161+
// Stack
162+
(instance['_instance'] || {}).props || {};
163+
const source = typeof instance.tag === 'number' ?
164+
// Fiber
165+
instance._debugSource :
166+
// Stack
167+
instance['_currentElement'] && instance['_currentElement']['_source'];
168+
163169
this.setState({
164170
panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
165171
selection: hierarchy.indexOf(instance),

Libraries/Inspector/InspectorUtils.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,14 @@ var ReactNativeComponentTree = require('ReactNativeComponentTree');
1515
function traverseOwnerTreeUp(hierarchy, instance) {
1616
if (instance) {
1717
hierarchy.unshift(instance);
18-
traverseOwnerTreeUp(hierarchy, instance._currentElement._owner);
18+
const owner = typeof instance.tag === 'number' ? instance._debugOwner : instance._currentElement._owner;
19+
traverseOwnerTreeUp(hierarchy, owner);
1920
}
2021
}
2122

2223
function findInstanceByNativeTag(nativeTag) {
23-
var instance = ReactNativeComponentTree.getInstanceFromNode(nativeTag);
24-
if (typeof instance.tag === 'number') {
25-
// TODO(sema): We've disabled the inspector when using Fiber. Fix #15953531
26-
return null;
27-
}
28-
return instance;
24+
// TODO: this is breaking encapsulation
25+
return ReactNativeComponentTree.getInstanceFromNode(nativeTag);
2926
}
3027

3128
function getOwnerHierarchy(instance) {

0 commit comments

Comments
 (0)