Rename host-y things to be "host" not "native" (#6754)

For clarity.

I left "native event" as-is because there's a lot of it, it's not particularly ambiguous, and SimulateNative/nativeTouchData are public API in ReactTestUtils.
(cherry picked from commit ba9b985406)
This commit is contained in:
Ben Alpert
2016-05-11 23:22:59 -07:00
committed by Paul O’Shannessy
parent 69208fc62a
commit 5d3920f5ab
47 changed files with 354 additions and 354 deletions
+6 -6
View File
@@ -50,7 +50,7 @@ var currentTimerType = null;
function clearHistory() {
ReactComponentTreeDevtool.purgeUnmountedComponents();
ReactNativeOperationHistoryDevtool.clearHistory();
ReactHostOperationHistoryDevtool.clearHistory();
}
function getTreeSnapshot(registeredIDs) {
@@ -74,7 +74,7 @@ function resetMeasurements() {
if (__DEV__) {
var previousStartTime = currentFlushStartTime;
var previousMeasurements = currentFlushMeasurements || [];
var previousOperations = ReactNativeOperationHistoryDevtool.getHistory();
var previousOperations = ReactHostOperationHistoryDevtool.getHistory();
if (!isProfiling || currentFlushNesting === 0) {
currentFlushStartTime = null;
@@ -214,9 +214,9 @@ var ReactDebugTool = {
onEndProcessingChildContext() {
emitEvent('onEndProcessingChildContext');
},
onNativeOperation(debugID, type, payload) {
onHostOperation(debugID, type, payload) {
checkDebugID(debugID);
emitEvent('onNativeOperation', debugID, type, payload);
emitEvent('onHostOperation', debugID, type, payload);
},
onSetState() {
emitEvent('onSetState');
@@ -260,11 +260,11 @@ var ReactDebugTool = {
if (__DEV__) {
var ReactInvalidSetStateWarningDevTool = require('ReactInvalidSetStateWarningDevTool');
var ReactNativeOperationHistoryDevtool = require('ReactNativeOperationHistoryDevtool');
var ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
ReactDebugTool.addDevtool(ReactInvalidSetStateWarningDevTool);
ReactDebugTool.addDevtool(ReactComponentTreeDevtool);
ReactDebugTool.addDevtool(ReactNativeOperationHistoryDevtool);
ReactDebugTool.addDevtool(ReactHostOperationHistoryDevtool);
var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
if ((/[?&]react_perf\b/).test(url)) {
ReactDebugTool.beginProfiling();
+1 -1
View File
@@ -167,7 +167,7 @@ function getWasted(flushHistory = getFlushHistory()) {
var {measurements, treeSnapshot, operations} = flush;
var isDefinitelyNotWastedByID = {};
// Find native components associated with an operation in this batch.
// Find host components associated with an operation in this batch.
// Mark all components in their parent tree as definitely not wasted.
operations.forEach(operation => {
var {instanceID} = operation;
+1 -1
View File
@@ -55,7 +55,7 @@ var injectedMixins = [];
/**
* Composite components are higher-level components that compose other composite
* or native components.
* or host components.
*
* To create a new type of `ReactClass`, pass a specification of
* your new class to `React.createClass`. The only requirement of your class
@@ -6,15 +6,15 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactNativeOperationHistoryDevtool
* @providesModule ReactHostOperationHistoryDevtool
*/
'use strict';
var history = [];
var ReactNativeOperationHistoryDevtool = {
onNativeOperation(debugID, type, payload) {
var ReactHostOperationHistoryDevtool = {
onHostOperation(debugID, type, payload) {
history.push({
instanceID: debugID,
type,
@@ -23,7 +23,7 @@ var ReactNativeOperationHistoryDevtool = {
},
clearHistory() {
if (ReactNativeOperationHistoryDevtool._preventClearing) {
if (ReactHostOperationHistoryDevtool._preventClearing) {
// Should only be used for tests.
return;
}
@@ -36,4 +36,4 @@ var ReactNativeOperationHistoryDevtool = {
},
};
module.exports = ReactNativeOperationHistoryDevtool;
module.exports = ReactHostOperationHistoryDevtool;
@@ -289,7 +289,7 @@ describe('ReactComponentTreeDevtool', () => {
assertTreeMatches([element, tree]);
});
it('reports a native tree correctly', () => {
it('reports a host tree correctly', () => {
var element = (
<div>
<p>
@@ -532,7 +532,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('update', () => {
describe('native component', () => {
describe('host component', () => {
it('updates text of a single text child', () => {
var elementBefore = <div>Hi.</div>;
var treeBefore = {
@@ -869,7 +869,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates native nodes when reordering with keys', () => {
it('updates host nodes when reordering with keys', () => {
var elementBefore = (
<div>
<div key="a">Hi.</div>
@@ -922,7 +922,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates native nodes when reordering without keys', () => {
it('updates host nodes when reordering without keys', () => {
var elementBefore = (
<div>
<div>Hi.</div>
@@ -1172,7 +1172,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('functional component', () => {
it('updates with a native child', () => {
it('updates with a host child', () => {
function Foo({ children }) {
return children;
}
@@ -1201,7 +1201,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from null to a native child', () => {
it('updates from null to a host child', () => {
function Foo({ children }) {
return children;
}
@@ -1227,7 +1227,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to null', () => {
it('updates from a host child to null', () => {
function Foo({ children }) {
return children;
}
@@ -1253,7 +1253,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to a composite child', () => {
it('updates from a host child to a composite child', () => {
function Bar() {
return null;
}
@@ -1286,7 +1286,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a composite child to a native child', () => {
it('updates from a composite child to a host child', () => {
function Bar() {
return null;
}
@@ -1381,7 +1381,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('class component', () => {
it('updates with a native child', () => {
it('updates with a host child', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1412,7 +1412,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from null to a native child', () => {
it('updates from null to a host child', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1440,7 +1440,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to null', () => {
it('updates from a host child to null', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1468,7 +1468,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to a composite child', () => {
it('updates from a host child to a composite child', () => {
var Bar = React.createClass({
render() {
return null;
@@ -1505,7 +1505,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a composite child to a native child', () => {
it('updates from a composite child to a host child', () => {
var Bar = React.createClass({
render() {
return null;
@@ -300,7 +300,7 @@ describe('ReactComponentTreeDevtool', () => {
assertTreeMatches([element, tree]);
});
it('reports a native tree correctly', () => {
it('reports a host tree correctly', () => {
var element = (
<View>
<View>
@@ -540,7 +540,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('update', () => {
describe('native component', () => {
describe('host component', () => {
it('updates text of a single text child', () => {
var elementBefore = <Text>Hi.</Text>;
var treeBefore = {
@@ -792,7 +792,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates native nodes when reordering with keys', () => {
it('updates host nodes when reordering with keys', () => {
var elementBefore = (
<View>
<Text key="a">Hi.</Text>
@@ -857,7 +857,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates native nodes when reordering with keys', () => {
it('updates host nodes when reordering with keys', () => {
var elementBefore = (
<View>
<Text>Hi.</Text>
@@ -1137,7 +1137,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('functional component', () => {
it('updates with a native child', () => {
it('updates with a host child', () => {
function Foo({ children }) {
return children;
}
@@ -1166,7 +1166,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from null to a native child', () => {
it('updates from null to a host child', () => {
function Foo({ children }) {
return children;
}
@@ -1192,7 +1192,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to null', () => {
it('updates from a host child to null', () => {
function Foo({ children }) {
return children;
}
@@ -1218,7 +1218,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to a composite child', () => {
it('updates from a host child to a composite child', () => {
function Bar() {
return null;
}
@@ -1251,7 +1251,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a composite child to a native child', () => {
it('updates from a composite child to a host child', () => {
function Bar() {
return null;
}
@@ -1346,7 +1346,7 @@ describe('ReactComponentTreeDevtool', () => {
});
describe('class component', () => {
it('updates with a native child', () => {
it('updates with a host child', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1377,7 +1377,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from null to a native child', () => {
it('updates from null to a host child', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1405,7 +1405,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to null', () => {
it('updates from a host child to null', () => {
var Foo = React.createClass({
render() {
return this.props.children;
@@ -1433,7 +1433,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a native child to a composite child', () => {
it('updates from a host child to a composite child', () => {
var Bar = React.createClass({
render() {
return null;
@@ -1470,7 +1470,7 @@ describe('ReactComponentTreeDevtool', () => {
]);
});
it('updates from a composite child to a native child', () => {
it('updates from a composite child to a host child', () => {
var Bar = React.createClass({
render() {
return null;
@@ -11,12 +11,12 @@
'use strict';
describe('ReactNativeOperationHistoryDevtool', () => {
describe('ReactHostOperationHistoryDevtool', () => {
var React;
var ReactDOM;
var ReactDOMComponentTree;
var ReactDOMFeatureFlags;
var ReactNativeOperationHistoryDevtool;
var ReactHostOperationHistoryDevtool;
beforeEach(() => {
jest.resetModuleRegistry();
@@ -25,18 +25,18 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM = require('ReactDOM');
ReactDOMComponentTree = require('ReactDOMComponentTree');
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactNativeOperationHistoryDevtool = require('ReactNativeOperationHistoryDevtool');
ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
});
function assertHistoryMatches(expectedHistory) {
var actualHistory = ReactNativeOperationHistoryDevtool.getHistory();
var actualHistory = ReactHostOperationHistoryDevtool.getHistory();
expect(actualHistory).toEqual(expectedHistory);
}
describe('mount', () => {
it('gets recorded for native roots', () => {
it('gets recorded for host roots', () => {
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div><p>Hi.</p></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -55,7 +55,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
}
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<Foo />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -75,7 +75,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
}
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<Foo />, node);
// Empty DOM components should be invisible to devtools.
@@ -88,7 +88,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
return element;
}
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
var node = document.createElement('div');
element = null;
@@ -112,7 +112,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div style={{
color: 'red',
backgroundColor: 'yellow',
@@ -147,7 +147,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div style={{ color: 'red' }} />, node);
ReactDOM.render(<div style={{
color: 'blue',
@@ -180,7 +180,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div style={{
color: 'red',
backgroundColor: 'yellow',
@@ -206,7 +206,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div className="rad" tabIndex={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -239,7 +239,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div className="rad" />, node);
ReactDOM.render(<div className="mad" tabIndex={42} />, node);
ReactDOM.render(<div tabIndex={43} />, node);
@@ -274,7 +274,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div disabled={true} />, node);
ReactDOM.render(<div disabled={false} />, node);
@@ -294,7 +294,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div data-x="rad" data-y={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -327,7 +327,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div data-x="rad" />, node);
ReactDOM.render(<div data-x="mad" data-y={42} />, node);
ReactDOM.render(<div data-y={43} />, node);
@@ -360,7 +360,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<my-component className="rad" tabIndex={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -393,7 +393,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<my-component />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<my-component className="rad" />, node);
ReactDOM.render(<my-component className="mad" tabIndex={42} />, node);
ReactDOM.render(<my-component tabIndex={43} />, node);
@@ -430,7 +430,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div>Hi.</div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -445,7 +445,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -460,7 +460,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /><p /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -482,7 +482,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
var node = document.createElement('div');
ReactDOM.render(<div>Hi.</div>, node);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>Hi.</div>, node);
assertHistoryMatches([]);
@@ -496,7 +496,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
var inst1 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[0]);
var inst2 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[3]);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>{'Bye.'}{43}</div>, node);
assertHistoryMatches([{
@@ -514,7 +514,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
var node = document.createElement('div');
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
assertHistoryMatches([]);
@@ -536,7 +536,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
element = <span />;
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([{
@@ -559,7 +559,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
element = null;
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([{
@@ -581,7 +581,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
element = <div />;
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([]);
@@ -594,7 +594,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div>Hi.</div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
node
@@ -615,7 +615,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
node
@@ -633,7 +633,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /><p /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
node
@@ -661,7 +661,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
node
);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
node
@@ -677,7 +677,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div><span /><p /></div>, node);
assertHistoryMatches([{
@@ -694,7 +694,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div><p key="b" /><span key="a" /></div>, node);
assertHistoryMatches([{
@@ -711,7 +711,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactNativeOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactDOM.render(<div><span key="a" /></div>, node);
assertHistoryMatches([{
+2 -2
View File
@@ -21,7 +21,7 @@ var ReactUpdates = require('ReactUpdates');
var ReactVersion = require('ReactVersion');
var findDOMNode = require('findDOMNode');
var getNativeComponentFromComposite = require('getNativeComponentFromComposite');
var getHostComponentFromComposite = require('getHostComponentFromComposite');
var renderSubtreeIntoContainer = require('renderSubtreeIntoContainer');
var warning = require('warning');
@@ -51,7 +51,7 @@ if (
getNodeFromInstance: function(inst) {
// inst is an internal instance (but could be a composite)
if (inst._renderedComponent) {
inst = getNativeComponentFromComposite(inst);
inst = getHostComponentFromComposite(inst);
}
if (inst) {
return ReactDOMComponentTree.getNodeFromInstance(inst);
@@ -23,13 +23,13 @@ var internalInstanceKey =
'__reactInternalInstance$' + Math.random().toString(36).slice(2);
/**
* Drill down (through composites and empty components) until we get a native or
* native text component.
* Drill down (through composites and empty components) until we get a host or
* host text component.
*
* This is pretty polymorphic but unavoidable with the current structure we have
* for `_renderedChildren`.
*/
function getRenderedNativeOrTextFromComponent(component) {
function getRenderedHostOrTextFromComponent(component) {
var rendered;
while ((rendered = component._renderedComponent)) {
component = rendered;
@@ -38,25 +38,25 @@ function getRenderedNativeOrTextFromComponent(component) {
}
/**
* Populate `_nativeNode` on the rendered native/text component with the given
* Populate `_hostNode` on the rendered host/text component with the given
* DOM node. The passed `inst` can be a composite.
*/
function precacheNode(inst, node) {
var nativeInst = getRenderedNativeOrTextFromComponent(inst);
nativeInst._nativeNode = node;
node[internalInstanceKey] = nativeInst;
var hostInst = getRenderedHostOrTextFromComponent(inst);
hostInst._hostNode = node;
node[internalInstanceKey] = hostInst;
}
function uncacheNode(inst) {
var node = inst._nativeNode;
var node = inst._hostNode;
if (node) {
delete node[internalInstanceKey];
inst._nativeNode = null;
inst._hostNode = null;
}
}
/**
* Populate `_nativeNode` on each child of `inst`, assuming that the children
* Populate `_hostNode` on each child of `inst`, assuming that the children
* match up with the DOM (element) children of `node`.
*
* We cache entire levels at once to avoid an n^2 problem where we access the
@@ -80,7 +80,7 @@ function precacheChildNodes(inst, node) {
continue;
}
var childInst = children[name];
var childID = getRenderedNativeOrTextFromComponent(childInst)._domID;
var childID = getRenderedHostOrTextFromComponent(childInst)._domID;
if (childID == null) {
// We're currently unmounting this child in ReactMultiChild; skip it.
continue;
@@ -143,7 +143,7 @@ function getClosestInstanceFromNode(node) {
*/
function getInstanceFromNode(node) {
var inst = getClosestInstanceFromNode(node);
if (inst != null && inst._nativeNode === node) {
if (inst != null && inst._hostNode === node) {
return inst;
} else {
return null;
@@ -158,32 +158,32 @@ function getNodeFromInstance(inst) {
// Without this first invariant, passing a non-DOM-component triggers the next
// invariant for a missing parent, which is super confusing.
invariant(
inst._nativeNode !== undefined,
inst._hostNode !== undefined,
'getNodeFromInstance: Invalid argument.'
);
if (inst._nativeNode) {
return inst._nativeNode;
if (inst._hostNode) {
return inst._hostNode;
}
// Walk up the tree until we find an ancestor whose DOM node we have cached.
var parents = [];
while (!inst._nativeNode) {
while (!inst._hostNode) {
parents.push(inst);
invariant(
inst._nativeParent,
inst._hostParent,
'React DOM tree root should always have a node reference.'
);
inst = inst._nativeParent;
inst = inst._hostParent;
}
// Now parents contains each ancestor that does *not* have a cached native
// node, and `inst` is the deepest ancestor that does.
for (; parents.length; inst = parents.pop()) {
precacheChildNodes(inst, inst._nativeNode);
precacheChildNodes(inst, inst._hostNode);
}
return inst._nativeNode;
return inst._hostNode;
}
var ReactDOMComponentTree = {
@@ -18,27 +18,27 @@ var invariant = require('invariant');
* different trees.
*/
function getLowestCommonAncestor(instA, instB) {
invariant('_nativeNode' in instA, 'getNodeFromInstance: Invalid argument.');
invariant('_nativeNode' in instB, 'getNodeFromInstance: Invalid argument.');
invariant('_hostNode' in instA, 'getNodeFromInstance: Invalid argument.');
invariant('_hostNode' in instB, 'getNodeFromInstance: Invalid argument.');
var depthA = 0;
for (var tempA = instA; tempA; tempA = tempA._nativeParent) {
for (var tempA = instA; tempA; tempA = tempA._hostParent) {
depthA++;
}
var depthB = 0;
for (var tempB = instB; tempB; tempB = tempB._nativeParent) {
for (var tempB = instB; tempB; tempB = tempB._hostParent) {
depthB++;
}
// If A is deeper, crawl up.
while (depthA - depthB > 0) {
instA = instA._nativeParent;
instA = instA._hostParent;
depthA--;
}
// If B is deeper, crawl up.
while (depthB - depthA > 0) {
instB = instB._nativeParent;
instB = instB._hostParent;
depthB--;
}
@@ -48,8 +48,8 @@ function getLowestCommonAncestor(instA, instB) {
if (instA === instB) {
return instA;
}
instA = instA._nativeParent;
instB = instB._nativeParent;
instA = instA._hostParent;
instB = instB._hostParent;
}
return null;
}
@@ -58,14 +58,14 @@ function getLowestCommonAncestor(instA, instB) {
* Return if A is an ancestor of B.
*/
function isAncestor(instA, instB) {
invariant('_nativeNode' in instA, 'isAncestor: Invalid argument.');
invariant('_nativeNode' in instB, 'isAncestor: Invalid argument.');
invariant('_hostNode' in instA, 'isAncestor: Invalid argument.');
invariant('_hostNode' in instB, 'isAncestor: Invalid argument.');
while (instB) {
if (instB === instA) {
return true;
}
instB = instB._nativeParent;
instB = instB._hostParent;
}
return false;
}
@@ -74,9 +74,9 @@ function isAncestor(instA, instB) {
* Return the parent instance of the passed-in instance.
*/
function getParentInstance(inst) {
invariant('_nativeNode' in inst, 'getParentInstance: Invalid argument.');
invariant('_hostNode' in inst, 'getParentInstance: Invalid argument.');
return inst._nativeParent;
return inst._hostParent;
}
/**
@@ -86,7 +86,7 @@ function traverseTwoPhase(inst, fn, arg) {
var path = [];
while (inst) {
path.push(inst);
inst = inst._nativeParent;
inst = inst._hostParent;
}
var i;
for (i = path.length; i-- > 0;) {
@@ -109,12 +109,12 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
var pathFrom = [];
while (from && from !== common) {
pathFrom.push(from);
from = from._nativeParent;
from = from._hostParent;
}
var pathTo = [];
while (to && to !== common) {
pathTo.push(to);
to = to._nativeParent;
to = to._hostParent;
}
var i;
for (i = 0; i < pathFrom.length; i++) {
@@ -29,8 +29,8 @@ function findParent(inst) {
// TODO: It may be a good idea to cache this to prevent unnecessary DOM
// traversal, but caching is difficult to do correctly without using a
// mutation observer to listen for all DOM changes.
while (inst._nativeParent) {
inst = inst._nativeParent;
while (inst._hostParent) {
inst = inst._hostParent;
}
var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
var container = rootNode.parentNode;
+11 -11
View File
@@ -195,23 +195,23 @@ function hasNonRootReactChild(container) {
var rootEl = getReactRootElementInContainer(container);
if (rootEl) {
var inst = ReactDOMComponentTree.getInstanceFromNode(rootEl);
return !!(inst && inst._nativeParent);
return !!(inst && inst._hostParent);
}
}
function getNativeRootInstanceInContainer(container) {
function getHostRootInstanceInContainer(container) {
var rootEl = getReactRootElementInContainer(container);
var prevNativeInstance =
var prevHostInstance =
rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl);
return (
prevNativeInstance && !prevNativeInstance._nativeParent ?
prevNativeInstance : null
prevHostInstance && !prevHostInstance._hostParent ?
prevHostInstance : null
);
}
function getTopLevelWrapperInContainer(container) {
var root = getNativeRootInstanceInContainer(container);
return root ? root._nativeContainerInfo._topLevelWrapper : null;
var root = getHostRootInstanceInContainer(container);
return root ? root._hostContainerInfo._topLevelWrapper : null;
}
/**
@@ -701,10 +701,10 @@ var ReactMount = {
}
if (__DEV__) {
var nativeNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
if (nativeNode._debugID !== 0) {
ReactInstrumentation.debugTool.onNativeOperation(
nativeNode._debugID,
var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
if (hostNode._debugID !== 0) {
ReactInstrumentation.debugTool.onHostOperation(
hostNode._debugID,
'mount',
markup.toString()
);
+2 -2
View File
@@ -15,7 +15,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner');
var ReactDOMComponentTree = require('ReactDOMComponentTree');
var ReactInstanceMap = require('ReactInstanceMap');
var getNativeComponentFromComposite = require('getNativeComponentFromComposite');
var getHostComponentFromComposite = require('getHostComponentFromComposite');
var invariant = require('invariant');
var warning = require('warning');
@@ -52,7 +52,7 @@ function findDOMNode(componentOrElement) {
var inst = ReactInstanceMap.get(componentOrElement);
if (inst) {
inst = getNativeComponentFromComposite(inst);
inst = getHostComponentFromComposite(inst);
return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
}
@@ -23,7 +23,7 @@ var setTextContent = require('setTextContent');
function getNodeAfter(parentNode, node) {
// Special case for text components, which return [open, close] comments
// from getNativeNode.
// from getHostNode.
if (Array.isArray(node)) {
node = node[1];
}
@@ -123,7 +123,7 @@ function replaceDelimitedText(openingComment, closingComment, stringText) {
}
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
'replace text',
stringText
@@ -136,7 +136,7 @@ if (__DEV__) {
dangerouslyReplaceNodeWithMarkup = function(oldChild, markup, prevInstance) {
Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
if (prevInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
prevInstance._debugID,
'replace with',
markup.toString()
@@ -144,7 +144,7 @@ if (__DEV__) {
} else {
var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node);
if (nextInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
nextInstance._debugID,
'mount',
markup.toString()
@@ -186,7 +186,7 @@ var DOMChildrenOperations = {
getNodeAfter(parentNode, update.afterNode)
);
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'insert child',
{toIndex: update.toIndex, content: update.content.toString()}
@@ -200,7 +200,7 @@ var DOMChildrenOperations = {
getNodeAfter(parentNode, update.afterNode)
);
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'move child',
{fromIndex: update.fromIndex, toIndex: update.toIndex}
@@ -213,7 +213,7 @@ var DOMChildrenOperations = {
update.content
);
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'replace children',
update.content.toString()
@@ -226,7 +226,7 @@ var DOMChildrenOperations = {
update.content
);
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'replace text',
update.content.toString()
@@ -236,7 +236,7 @@ var DOMChildrenOperations = {
case ReactMultiChildUpdateTypes.REMOVE_NODE:
removeChild(parentNode, update.fromNode);
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'remove child',
{fromIndex: update.fromIndex}
@@ -26,24 +26,24 @@ var disableableMouseListenerNames = {
};
/**
* Implements a native component that does not receive mouse events
* Implements a host component that does not receive mouse events
* when `disabled` is set.
*/
var DisabledInputUtils = {
getNativeProps: function(inst, props) {
getHostProps: function(inst, props) {
if (!props.disabled) {
return props;
}
// Copy the props, except the mouse listeners
var nativeProps = {};
var hostProps = {};
for (var key in props) {
if (!disableableMouseListenerNames[key] && props.hasOwnProperty(key)) {
nativeProps[key] = props[key];
hostProps[key] = props[key];
}
}
return nativeProps;
return hostProps;
},
};
@@ -14,11 +14,11 @@
var DisabledInputUtils = require('DisabledInputUtils');
/**
* Implements a <button> native component that does not receive mouse events
* Implements a <button> host component that does not receive mouse events
* when `disabled` is set.
*/
var ReactDOMButton = {
getNativeProps: DisabledInputUtils.getNativeProps,
getHostProps: DisabledInputUtils.getHostProps,
};
module.exports = ReactDOMButton;
@@ -49,7 +49,7 @@ function warnIfValueIsNull(props) {
}
/**
* Implements an <input> native component that allows setting these optional
* Implements an <input> host component that allows setting these optional
* props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
*
* If `checked` or `value` are not supplied (or null/undefined), user actions
@@ -65,15 +65,15 @@ function warnIfValueIsNull(props) {
* @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
*/
var ReactDOMInput = {
getNativeProps: function(inst, props) {
getHostProps: function(inst, props) {
var value = LinkedValueUtils.getValue(props);
var checked = LinkedValueUtils.getChecked(props);
var nativeProps = Object.assign({
var hostProps = Object.assign({
// Make sure we set .type before any other properties (setting .value
// before .type means .value is lost in IE11 and below)
type: undefined,
}, DisabledInputUtils.getNativeProps(inst, props), {
}, DisabledInputUtils.getHostProps(inst, props), {
defaultChecked: undefined,
defaultValue: undefined,
value: value != null ? value : inst._wrapperState.initialValue,
@@ -81,7 +81,7 @@ var ReactDOMInput = {
onChange: inst._wrapperState.onChange,
});
return nativeProps;
return hostProps;
},
mountWrapper: function(inst, props) {
@@ -37,15 +37,15 @@ function flattenChildren(children) {
);
}
});
return content;
}
/**
* Implements an <option> native component that warns when `selected` is set.
* Implements an <option> host component that warns when `selected` is set.
*/
var ReactDOMOption = {
mountWrapper: function(inst, props, nativeParent) {
mountWrapper: function(inst, props, hostParent) {
// TODO (yungsters): Remove support for `selected` in <option>.
if (__DEV__) {
warning(
@@ -57,11 +57,11 @@ var ReactDOMOption = {
// Look up whether this option is 'selected'
var selectValue = null;
if (nativeParent != null) {
var selectParent = nativeParent;
if (hostParent != null) {
var selectParent = hostParent;
if (selectParent._tag === 'optgroup') {
selectParent = selectParent._nativeParent;
selectParent = selectParent._hostParent;
}
if (selectParent != null && selectParent._tag === 'select') {
@@ -105,22 +105,22 @@ var ReactDOMOption = {
}
},
getNativeProps: function(inst, props) {
var nativeProps = Object.assign({selected: undefined, children: undefined}, props);
getHostProps: function(inst, props) {
var hostProps = Object.assign({selected: undefined, children: undefined}, props);
// Read state only from initial mount because <select> updates value
// manually; we need the initial state only for server rendering
if (inst._wrapperState.selected != null) {
nativeProps.selected = inst._wrapperState.selected;
hostProps.selected = inst._wrapperState.selected;
}
var content = flattenChildren(props.children);
if (content) {
nativeProps.children = content;
hostProps.children = content;
}
return nativeProps;
return hostProps;
},
};
@@ -143,7 +143,7 @@ function updateOptions(inst, multiple, propValue) {
}
/**
* Implements a <select> native component that allows optionally setting the
* Implements a <select> host component that allows optionally setting the
* props `value` and `defaultValue`. If `multiple` is false, the prop must be a
* stringable. If `multiple` is true, the prop must be an array of stringables.
*
@@ -158,8 +158,8 @@ function updateOptions(inst, multiple, propValue) {
* selected.
*/
var ReactDOMSelect = {
getNativeProps: function(inst, props) {
return Object.assign({}, DisabledInputUtils.getNativeProps(inst, props), {
getHostProps: function(inst, props) {
return Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
onChange: inst._wrapperState.onChange,
value: undefined,
});
@@ -45,7 +45,7 @@ function warnIfValueIsNull(props) {
}
/**
* Implements a <textarea> native component that allows setting `value`, and
* Implements a <textarea> host component that allows setting `value`, and
* `defaultValue`. This differs from the traditional DOM API because value is
* usually set as PCDATA children.
*
@@ -60,7 +60,7 @@ function warnIfValueIsNull(props) {
* `defaultValue` if specified, or the children content (deprecated).
*/
var ReactDOMTextarea = {
getNativeProps: function(inst, props) {
getHostProps: function(inst, props) {
invariant(
props.dangerouslySetInnerHTML == null,
'`dangerouslySetInnerHTML` does not make sense on <textarea>.'
@@ -68,14 +68,14 @@ var ReactDOMTextarea = {
// Always set children to the same thing. In IE9, the selection range will
// get reset if `textContent` is mutated.
var nativeProps = Object.assign({}, DisabledInputUtils.getNativeProps(inst, props), {
var hostProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
defaultValue: undefined,
value: undefined,
children: inst._wrapperState.initialValue,
onChange: inst._wrapperState.onChange,
});
return nativeProps;
return hostProps;
},
mountWrapper: function(inst, props) {
@@ -193,7 +193,7 @@ var CSSPropertyOperations = {
*/
setValueForStyles: function(node, styles, component) {
if (__DEV__) {
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
component._debugID,
'update styles',
styles
@@ -177,7 +177,7 @@ var DOMPropertyOperations = {
ReactDOMInstrumentation.debugTool.onSetValueForProperty(node, name, value);
var payload = {};
payload[name] = value;
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'update attribute',
payload
@@ -198,7 +198,7 @@ var DOMPropertyOperations = {
if (__DEV__) {
var payload = {};
payload[name] = value;
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'update attribute',
payload
@@ -239,7 +239,7 @@ var DOMPropertyOperations = {
if (__DEV__) {
ReactDOMInstrumentation.debugTool.onDeleteValueForProperty(node, name);
ReactInstrumentation.debugTool.onNativeOperation(
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'remove attribute',
name
+44 -44
View File
@@ -221,7 +221,7 @@ function enqueuePutListener(inst, registrationName, listener, transaction) {
'This browser doesn\'t support the `onScroll` event'
);
}
var containerInfo = inst._nativeContainerInfo;
var containerInfo = inst._hostContainerInfo;
var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
listenTo(registrationName, doc);
@@ -452,11 +452,11 @@ function ReactDOMComponent(element) {
this._renderedChildren = null;
this._previousStyle = null;
this._previousStyleCopy = null;
this._nativeNode = null;
this._nativeParent = null;
this._hostNode = null;
this._hostParent = null;
this._rootNodeID = null;
this._domID = null;
this._nativeContainerInfo = null;
this._hostContainerInfo = null;
this._wrapperState = null;
this._topLevelWrapper = null;
this._flags = 0;
@@ -477,20 +477,20 @@ ReactDOMComponent.Mixin = {
* @internal
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @param {?ReactDOMComponent} the containing DOM component instance
* @param {?object} info about the native container
* @param {?object} info about the host container
* @param {object} context
* @return {string} The computed markup.
*/
mountComponent: function(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
this._rootNodeID = globalIdCounter++;
this._domID = nativeContainerInfo._idCounter++;
this._nativeParent = nativeParent;
this._nativeContainerInfo = nativeContainerInfo;
this._domID = hostContainerInfo._idCounter++;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
var props = this._currentElement.props;
@@ -507,25 +507,25 @@ ReactDOMComponent.Mixin = {
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
break;
case 'button':
props = ReactDOMButton.getNativeProps(this, props, nativeParent);
props = ReactDOMButton.getHostProps(this, props, hostParent);
break;
case 'input':
ReactDOMInput.mountWrapper(this, props, nativeParent);
props = ReactDOMInput.getNativeProps(this, props);
ReactDOMInput.mountWrapper(this, props, hostParent);
props = ReactDOMInput.getHostProps(this, props);
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
break;
case 'option':
ReactDOMOption.mountWrapper(this, props, nativeParent);
props = ReactDOMOption.getNativeProps(this, props);
ReactDOMOption.mountWrapper(this, props, hostParent);
props = ReactDOMOption.getHostProps(this, props);
break;
case 'select':
ReactDOMSelect.mountWrapper(this, props, nativeParent);
props = ReactDOMSelect.getNativeProps(this, props);
ReactDOMSelect.mountWrapper(this, props, hostParent);
props = ReactDOMSelect.getHostProps(this, props);
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
break;
case 'textarea':
ReactDOMTextarea.mountWrapper(this, props, nativeParent);
props = ReactDOMTextarea.getNativeProps(this, props);
ReactDOMTextarea.mountWrapper(this, props, hostParent);
props = ReactDOMTextarea.getHostProps(this, props);
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
break;
}
@@ -536,12 +536,12 @@ ReactDOMComponent.Mixin = {
// tags get no namespace.
var namespaceURI;
var parentTag;
if (nativeParent != null) {
namespaceURI = nativeParent._namespaceURI;
parentTag = nativeParent._tag;
} else if (nativeContainerInfo._tag) {
namespaceURI = nativeContainerInfo._namespaceURI;
parentTag = nativeContainerInfo._tag;
if (hostParent != null) {
namespaceURI = hostParent._namespaceURI;
parentTag = hostParent._tag;
} else if (hostContainerInfo._tag) {
namespaceURI = hostContainerInfo._namespaceURI;
parentTag = hostContainerInfo._tag;
}
if (namespaceURI == null ||
namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') {
@@ -558,10 +558,10 @@ ReactDOMComponent.Mixin = {
if (__DEV__) {
var parentInfo;
if (nativeParent != null) {
parentInfo = nativeParent._ancestorInfo;
} else if (nativeContainerInfo._tag) {
parentInfo = nativeContainerInfo._ancestorInfo;
if (hostParent != null) {
parentInfo = hostParent._ancestorInfo;
} else if (hostContainerInfo._tag) {
parentInfo = hostContainerInfo._ancestorInfo;
}
if (parentInfo) {
// parentInfo should always be present except for the top-level
@@ -578,7 +578,7 @@ ReactDOMComponent.Mixin = {
var mountImage;
if (transaction.useCreateElement) {
var ownerDocument = nativeContainerInfo._ownerDocument;
var ownerDocument = hostContainerInfo._ownerDocument;
var el;
if (namespaceURI === DOMNamespaces.html) {
if (this._tag === 'script') {
@@ -599,7 +599,7 @@ ReactDOMComponent.Mixin = {
}
ReactDOMComponentTree.precacheNode(this, el);
this._flags |= Flags.hasCachedChildNodes;
if (!this._nativeParent) {
if (!this._hostParent) {
DOMPropertyOperations.setAttributeForRoot(el);
}
this._updateDOMProperties(null, props, transaction);
@@ -698,7 +698,7 @@ ReactDOMComponent.Mixin = {
return ret;
}
if (!this._nativeParent) {
if (!this._hostParent) {
ret += ' ' + DOMPropertyOperations.createMarkupForRoot();
}
ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);
@@ -804,7 +804,7 @@ ReactDOMComponent.Mixin = {
},
/**
* Updates a native DOM component after it has already been allocated and
* Updates a DOM component after it has already been allocated and
* attached to the DOM. Reconciles the root DOM node, then recurses.
*
* @param {ReactReconcileTransaction} transaction
@@ -819,26 +819,26 @@ ReactDOMComponent.Mixin = {
switch (this._tag) {
case 'button':
lastProps = ReactDOMButton.getNativeProps(this, lastProps);
nextProps = ReactDOMButton.getNativeProps(this, nextProps);
lastProps = ReactDOMButton.getHostProps(this, lastProps);
nextProps = ReactDOMButton.getHostProps(this, nextProps);
break;
case 'input':
ReactDOMInput.updateWrapper(this);
lastProps = ReactDOMInput.getNativeProps(this, lastProps);
nextProps = ReactDOMInput.getNativeProps(this, nextProps);
lastProps = ReactDOMInput.getHostProps(this, lastProps);
nextProps = ReactDOMInput.getHostProps(this, nextProps);
break;
case 'option':
lastProps = ReactDOMOption.getNativeProps(this, lastProps);
nextProps = ReactDOMOption.getNativeProps(this, nextProps);
lastProps = ReactDOMOption.getHostProps(this, lastProps);
nextProps = ReactDOMOption.getHostProps(this, nextProps);
break;
case 'select':
lastProps = ReactDOMSelect.getNativeProps(this, lastProps);
nextProps = ReactDOMSelect.getNativeProps(this, nextProps);
lastProps = ReactDOMSelect.getHostProps(this, lastProps);
nextProps = ReactDOMSelect.getHostProps(this, nextProps);
break;
case 'textarea':
ReactDOMTextarea.updateWrapper(this);
lastProps = ReactDOMTextarea.getNativeProps(this, lastProps);
nextProps = ReactDOMTextarea.getNativeProps(this, nextProps);
lastProps = ReactDOMTextarea.getHostProps(this, lastProps);
nextProps = ReactDOMTextarea.getHostProps(this, nextProps);
break;
}
@@ -1058,7 +1058,7 @@ ReactDOMComponent.Mixin = {
}
},
getNativeNode: function() {
getHostNode: function() {
return getNode(this);
},
@@ -19,26 +19,26 @@ var ReactDOMEmptyComponent = function(instantiate) {
// ReactCompositeComponent uses this:
this._currentElement = null;
// ReactDOMComponentTree uses these:
this._nativeNode = null;
this._nativeParent = null;
this._nativeContainerInfo = null;
this._hostNode = null;
this._hostParent = null;
this._hostContainerInfo = null;
this._domID = null;
};
Object.assign(ReactDOMEmptyComponent.prototype, {
mountComponent: function(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
var domID = nativeContainerInfo._idCounter++;
var domID = hostContainerInfo._idCounter++;
this._domID = domID;
this._nativeParent = nativeParent;
this._nativeContainerInfo = nativeContainerInfo;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
var nodeValue = ' react-empty: ' + this._domID + ' ';
if (transaction.useCreateElement) {
var ownerDocument = nativeContainerInfo._ownerDocument;
var ownerDocument = hostContainerInfo._ownerDocument;
var node = ownerDocument.createComment(nodeValue);
ReactDOMComponentTree.precacheNode(this, node);
return DOMLazyTree(node);
@@ -54,7 +54,7 @@ Object.assign(ReactDOMEmptyComponent.prototype, {
},
receiveComponent: function() {
},
getNativeNode: function() {
getHostNode: function() {
return ReactDOMComponentTree.getNodeFromInstance(this);
},
unmountComponent: function() {
@@ -40,8 +40,8 @@ var ReactDOMTextComponent = function(text) {
this._currentElement = text;
this._stringText = '' + text;
// ReactDOMComponentTree uses these:
this._nativeNode = null;
this._nativeParent = null;
this._hostNode = null;
this._hostParent = null;
// Properties
this._domID = null;
@@ -62,18 +62,18 @@ Object.assign(ReactDOMTextComponent.prototype, {
*/
mountComponent: function(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
if (__DEV__) {
ReactInstrumentation.debugTool.onSetText(this._debugID, this._stringText);
var parentInfo;
if (nativeParent != null) {
parentInfo = nativeParent._ancestorInfo;
} else if (nativeContainerInfo != null) {
parentInfo = nativeContainerInfo._ancestorInfo;
if (hostParent != null) {
parentInfo = hostParent._ancestorInfo;
} else if (hostContainerInfo != null) {
parentInfo = hostContainerInfo._ancestorInfo;
}
if (parentInfo) {
// parentInfo should always be present except for the top-level
@@ -82,13 +82,13 @@ Object.assign(ReactDOMTextComponent.prototype, {
}
}
var domID = nativeContainerInfo._idCounter++;
var domID = hostContainerInfo._idCounter++;
var openingValue = ' react-text: ' + domID + ' ';
var closingValue = ' /react-text ';
this._domID = domID;
this._nativeParent = nativeParent;
this._hostParent = hostParent;
if (transaction.useCreateElement) {
var ownerDocument = nativeContainerInfo._ownerDocument;
var ownerDocument = hostContainerInfo._ownerDocument;
var openingComment = ownerDocument.createComment(openingValue);
var closingComment = ownerDocument.createComment(closingValue);
var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
@@ -136,7 +136,7 @@ Object.assign(ReactDOMTextComponent.prototype, {
// and/or updateComponent to do the actual update for consistency with
// other component types?
this._stringText = nextStringText;
var commentNodes = this.getNativeNode();
var commentNodes = this.getHostNode();
DOMChildrenOperations.replaceDelimitedText(
commentNodes[0],
commentNodes[1],
@@ -153,10 +153,10 @@ Object.assign(ReactDOMTextComponent.prototype, {
}
},
getNativeNode: function() {
var nativeNode = this._commentNodes;
if (nativeNode) {
return nativeNode;
getHostNode: function() {
var hostNode = this._commentNodes;
if (hostNode) {
return hostNode;
}
if (!this._closingComment) {
var openingComment = ReactDOMComponentTree.getNodeFromInstance(this);
@@ -174,9 +174,9 @@ Object.assign(ReactDOMTextComponent.prototype, {
node = node.nextSibling;
}
}
nativeNode = [this._nativeNode, this._closingComment];
this._commentNodes = nativeNode;
return nativeNode;
hostNode = [this._hostNode, this._closingComment];
this._commentNodes = hostNode;
return hostNode;
},
unmountComponent: function() {
@@ -65,11 +65,11 @@ function inject() {
BeforeInputEventPlugin: BeforeInputEventPlugin,
});
ReactInjection.NativeComponent.injectGenericComponentClass(
ReactInjection.HostComponent.injectGenericComponentClass(
ReactDOMComponent
);
ReactInjection.NativeComponent.injectTextComponentClass(
ReactInjection.HostComponent.injectTextComponentClass(
ReactDOMTextComponent
);
+2 -2
View File
@@ -18,7 +18,7 @@ var ReactComponentEnvironment = require('ReactComponentEnvironment');
var ReactClass = require('ReactClass');
var ReactEmptyComponent = require('ReactEmptyComponent');
var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
var ReactNativeComponent = require('ReactNativeComponent');
var ReactHostComponent = require('ReactHostComponent');
var ReactUpdates = require('ReactUpdates');
var ReactInjection = {
@@ -29,7 +29,7 @@ var ReactInjection = {
EventPluginHub: EventPluginHub.injection,
EventPluginUtils: EventPluginUtils.injection,
EventEmitter: ReactBrowserEventEmitter.injection,
NativeComponent: ReactNativeComponent.injection,
HostComponent: ReactHostComponent.injection,
Updates: ReactUpdates.injection,
};
@@ -166,7 +166,7 @@ ReactNativeBaseComponent.Mixin = {
*
* @return {null} Null.
*/
getNativeNode: function() {
getHostNode: function() {
return this._rootNodeID;
},
@@ -175,12 +175,12 @@ ReactNativeBaseComponent.Mixin = {
* @param {Transaction} transaction For creating/updating.
* @return {string} Unique iOS view tag.
*/
mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
mountComponent: function(transaction, hostParent, hostContainerInfo, context) {
var tag = ReactNativeTagHandles.allocateTag();
this._rootNodeID = tag;
this._nativeParent = nativeParent;
this._nativeContainerInfo = nativeContainerInfo;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
if (__DEV__) {
for (var key in this.viewConfig.validAttributes) {
@@ -195,7 +195,7 @@ ReactNativeBaseComponent.Mixin = {
this.viewConfig.validAttributes
);
var nativeTopRootTag = nativeContainerInfo._tag;
var nativeTopRootTag = hostContainerInfo._tag;
UIManager.createView(
tag,
this.viewConfig.uiViewClassName,
@@ -16,13 +16,13 @@ var invariant = require('invariant');
var instanceCache = {};
/**
* Drill down (through composites and empty components) until we get a native or
* native text component.
* Drill down (through composites and empty components) until we get a host or
* host text component.
*
* This is pretty polymorphic but unavoidable with the current structure we have
* for `_renderedChildren`.
*/
function getRenderedNativeOrTextFromComponent(component) {
function getRenderedHostOrTextFromComponent(component) {
var rendered;
while ((rendered = component._renderedComponent)) {
component = rendered;
@@ -31,11 +31,11 @@ function getRenderedNativeOrTextFromComponent(component) {
}
/**
* Populate `_nativeNode` on the rendered native/text component with the given
* Populate `_hostNode` on the rendered host/text component with the given
* DOM node. The passed `inst` can be a composite.
*/
function precacheNode(inst, tag) {
var nativeInst = getRenderedNativeOrTextFromComponent(inst);
var nativeInst = getRenderedHostOrTextFromComponent(inst);
instanceCache[tag] = nativeInst;
}
@@ -27,7 +27,7 @@ var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
var ReactElement = require('ReactElement');
var ReactEmptyComponent = require('ReactEmptyComponent');
var ReactNativeBridgeEventPlugin = require('ReactNativeBridgeEventPlugin');
var ReactNativeComponent = require('ReactNativeComponent');
var ReactHostComponent = require('ReactHostComponent');
var ReactNativeComponentEnvironment = require('ReactNativeComponentEnvironment');
var ReactNativeComponentTree = require('ReactNativeComponentTree');
var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
@@ -93,10 +93,10 @@ function inject() {
ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);
ReactNativeComponent.injection.injectTextComponentClass(
ReactHostComponent.injection.injectTextComponentClass(
ReactNativeTextComponent
);
ReactNativeComponent.injection.injectGenericComponentClass(function(tag) {
ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
// Show a nicer error message for non-function tags
var info = '';
if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
@@ -22,27 +22,27 @@ var ReactNativeTextComponent = function(text) {
// This is really a ReactText (ReactNode), not a ReactElement
this._currentElement = text;
this._stringText = '' + text;
this._nativeParent = null;
this._hostParent = null;
this._rootNodeID = null;
};
Object.assign(ReactNativeTextComponent.prototype, {
mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
mountComponent: function(transaction, hostParent, hostContainerInfo, context) {
if (__DEV__) {
ReactInstrumentation.debugTool.onSetText(this._debugID, this._stringText);
}
// TODO: nativeParent should have this context already. Stop abusing context.
// TODO: hostParent should have this context already. Stop abusing context.
invariant(
context.isInAParentText,
'RawText "%s" must be wrapped in an explicit <Text> component.',
this._stringText
);
this._nativeParent = nativeParent;
this._hostParent = hostParent;
var tag = ReactNativeTagHandles.allocateTag();
this._rootNodeID = tag;
var nativeTopRootTag = nativeContainerInfo._tag;
var nativeTopRootTag = hostContainerInfo._tag;
UIManager.createView(
tag,
'RCTRawText',
@@ -55,7 +55,7 @@ Object.assign(ReactNativeTextComponent.prototype, {
return tag;
},
getNativeNode: function() {
getHostNode: function() {
return this._rootNodeID;
},
@@ -19,23 +19,23 @@
*/
function getLowestCommonAncestor(instA, instB) {
var depthA = 0;
for (var tempA = instA; tempA; tempA = tempA._nativeParent) {
for (var tempA = instA; tempA; tempA = tempA._hostParent) {
depthA++;
}
var depthB = 0;
for (var tempB = instB; tempB; tempB = tempB._nativeParent) {
for (var tempB = instB; tempB; tempB = tempB._hostParent) {
depthB++;
}
// If A is deeper, crawl up.
while (depthA - depthB > 0) {
instA = instA._nativeParent;
instA = instA._hostParent;
depthA--;
}
// If B is deeper, crawl up.
while (depthB - depthA > 0) {
instB = instB._nativeParent;
instB = instB._hostParent;
depthB--;
}
@@ -45,8 +45,8 @@ function getLowestCommonAncestor(instA, instB) {
if (instA === instB) {
return instA;
}
instA = instA._nativeParent;
instB = instB._nativeParent;
instA = instA._hostParent;
instB = instB._hostParent;
}
return null;
}
@@ -59,7 +59,7 @@ function isAncestor(instA, instB) {
if (instB === instA) {
return true;
}
instB = instB._nativeParent;
instB = instB._hostParent;
}
return false;
}
@@ -68,7 +68,7 @@ function isAncestor(instA, instB) {
* Return the parent instance of the passed-in instance.
*/
function getParentInstance(inst) {
return inst._nativeParent;
return inst._hostParent;
}
/**
@@ -78,7 +78,7 @@ function traverseTwoPhase(inst, fn, arg) {
var path = [];
while (inst) {
path.push(inst);
inst = inst._nativeParent;
inst = inst._hostParent;
}
var i;
for (i = path.length; i-- > 0;) {
@@ -101,12 +101,12 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
var pathFrom = [];
while (from && from !== common) {
pathFrom.push(from);
from = from._nativeParent;
from = from._hostParent;
}
var pathTo = [];
while (to && to !== common) {
pathTo.push(to);
to = to._nativeParent;
to = to._hostParent;
}
var i;
for (i = 0; i < pathFrom.length; i++) {
@@ -31,8 +31,8 @@ var createReactNativeComponentClass = function(
var Constructor = function(element) {
this._currentElement = element;
this._topLevelWrapper = null;
this._nativeParent = null;
this._nativeContainerInfo = null;
this._hostParent = null;
this._hostContainerInfo = null;
this._rootNodeID = null;
this._renderedChildren = null;
};
+1 -1
View File
@@ -78,7 +78,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
// ReactInstanceMap.get here will always succeed for mounted components
var internalInstance = ReactInstanceMap.get(component);
if (internalInstance) {
return internalInstance.getNativeNode();
return internalInstance.getHostNode();
} else {
var rootNodeID = component._rootNodeID;
if (rootNodeID) {
@@ -19,7 +19,7 @@ var ReactTypesOfWork = require('ReactTypesOfWork');
var {
FunctionalComponent,
ClassComponent,
NativeComponent,
HostComponent,
} = ReactTypesOfWork;
type ReactHostElement<T, P> = {
@@ -60,7 +60,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {
return ReactFiberFunctionalComponent.performWork(unit);
case ClassComponent:
break;
case NativeComponent:
case HostComponent:
break;
}
return null;
@@ -15,7 +15,7 @@
var TypesOfWork = {
FunctionalComponent: 1,
ClassComponent: 2,
NativeComponent: 3,
HostComponent: 3,
};
module.exports = TypesOfWork;
@@ -46,14 +46,14 @@ var trackedTouchCount = 0;
*/
var previousActiveTouches = 0;
var changeResponder = function(nextResponderInst, blockNativeResponder) {
var changeResponder = function(nextResponderInst, blockHostResponder) {
var oldResponderInst = responderInst;
responderInst = nextResponderInst;
if (ResponderEventPlugin.GlobalResponderHandler !== null) {
ResponderEventPlugin.GlobalResponderHandler.onChange(
oldResponderInst,
nextResponderInst,
blockNativeResponder
blockHostResponder
);
}
};
@@ -371,7 +371,7 @@ function setResponderAndExtractTransfer(
grantEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
EventPropagators.accumulateDirectDispatches(grantEvent);
var blockNativeResponder = executeDirectDispatch(grantEvent) === true;
var blockHostResponder = executeDirectDispatch(grantEvent) === true;
if (responderInst) {
var terminationRequestEvent = ResponderSyntheticEvent.getPooled(
@@ -398,7 +398,7 @@ function setResponderAndExtractTransfer(
terminateEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
EventPropagators.accumulateDirectDispatches(terminateEvent);
extracted = accumulate(extracted, [grantEvent, terminateEvent]);
changeResponder(wantsResponderInst, blockNativeResponder);
changeResponder(wantsResponderInst, blockHostResponder);
} else {
var rejectEvent = ResponderSyntheticEvent.getPooled(
eventTypes.responderReject,
@@ -412,7 +412,7 @@ function setResponderAndExtractTransfer(
}
} else {
extracted = accumulate(extracted, grantEvent);
changeResponder(wantsResponderInst, blockNativeResponder);
changeResponder(wantsResponderInst, blockHostResponder);
}
return extracted;
}
@@ -100,7 +100,7 @@ var ReactChildReconciler = {
nextChildren[name] = prevChild;
} else {
if (prevChild) {
removedNodes[name] = ReactReconciler.getNativeNode(prevChild);
removedNodes[name] = ReactReconciler.getHostNode(prevChild);
ReactReconciler.unmountComponent(prevChild, false);
}
// The child must be instantiated before it's mounted.
@@ -113,7 +113,7 @@ var ReactChildReconciler = {
if (prevChildren.hasOwnProperty(name) &&
!(nextChildren && nextChildren.hasOwnProperty(name))) {
prevChild = prevChildren[name];
removedNodes[name] = ReactReconciler.getNativeNode(prevChild);
removedNodes[name] = ReactReconciler.getHostNode(prevChild);
ReactReconciler.unmountComponent(prevChild, false);
}
}
@@ -148,8 +148,8 @@ var ReactCompositeComponentMixin = {
this._currentElement = element;
this._rootNodeID = null;
this._instance = null;
this._nativeParent = null;
this._nativeContainerInfo = null;
this._hostParent = null;
this._hostContainerInfo = null;
// See ReactUpdateQueue
this._updateBatchNumber = null;
@@ -179,8 +179,8 @@ var ReactCompositeComponentMixin = {
* Initializes the component, renders markup, and registers event listeners.
*
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @param {?object} nativeParent
* @param {?object} nativeContainerInfo
* @param {?object} hostParent
* @param {?object} hostContainerInfo
* @param {?object} context
* @return {?string} Rendered markup to be inserted into the DOM.
* @final
@@ -188,14 +188,14 @@ var ReactCompositeComponentMixin = {
*/
mountComponent: function(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
this._context = context;
this._mountOrder = nextMountID++;
this._nativeParent = nativeParent;
this._nativeContainerInfo = nativeContainerInfo;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
var publicProps = this._processProps(this._currentElement.props);
var publicContext = this._processContext(context);
@@ -330,13 +330,13 @@ var ReactCompositeComponentMixin = {
if (inst.unstable_handleError) {
markup = this.performInitialMountWithErrorHandling(
renderedElement,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
transaction,
context
);
} else {
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
}
if (inst.componentDidMount) {
@@ -410,15 +410,15 @@ var ReactCompositeComponentMixin = {
performInitialMountWithErrorHandling: function(
renderedElement,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
transaction,
context
) {
var markup;
var checkpoint = transaction.checkpoint();
try {
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
} catch (e) {
// Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint
transaction.rollback(checkpoint);
@@ -433,12 +433,12 @@ var ReactCompositeComponentMixin = {
// Try again - we've informed the component about the error, so they can render an error message this time.
// If this throws again, the error will bubble up (and can be caught by a higher error boundary).
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
}
return markup;
},
performInitialMount: function(renderedElement, nativeParent, nativeContainerInfo, transaction, context) {
performInitialMount: function(renderedElement, hostParent, hostContainerInfo, transaction, context) {
var inst = this._instance;
if (inst.componentWillMount) {
if (__DEV__) {
@@ -478,8 +478,8 @@ var ReactCompositeComponentMixin = {
var markup = ReactReconciler.mountComponent(
this._renderedComponent,
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
this._processChildContext(context)
);
@@ -497,8 +497,8 @@ var ReactCompositeComponentMixin = {
return markup;
},
getNativeNode: function() {
return ReactReconciler.getNativeNode(this._renderedComponent);
getHostNode: function() {
return ReactReconciler.getHostNode(this._renderedComponent);
},
/**
@@ -1027,7 +1027,7 @@ var ReactCompositeComponentMixin = {
this._processChildContext(context)
);
} else {
var oldNativeNode = ReactReconciler.getNativeNode(prevComponentInstance);
var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);
ReactReconciler.unmountComponent(prevComponentInstance, false);
this._renderedNodeType = ReactNodeTypes.getType(nextRenderedElement);
@@ -1038,8 +1038,8 @@ var ReactCompositeComponentMixin = {
var nextMarkup = ReactReconciler.mountComponent(
this._renderedComponent,
transaction,
this._nativeParent,
this._nativeContainerInfo,
this._hostParent,
this._hostContainerInfo,
this._processChildContext(context)
);
@@ -1055,7 +1055,7 @@ var ReactCompositeComponentMixin = {
}
this._replaceNodeWithMarkup(
oldNativeNode,
oldHostNode,
nextMarkup,
prevComponentInstance
);
@@ -1067,9 +1067,9 @@ var ReactCompositeComponentMixin = {
*
* @protected
*/
_replaceNodeWithMarkup: function(oldNativeNode, nextMarkup, prevInstance) {
_replaceNodeWithMarkup: function(oldHostNode, nextMarkup, prevInstance) {
ReactComponentEnvironment.replaceNodeWithMarkup(
oldNativeNode,
oldHostNode,
nextMarkup,
prevInstance
);
@@ -6,7 +6,7 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactNativeComponent
* @providesModule ReactHostComponent
*/
'use strict';
@@ -15,11 +15,11 @@ var invariant = require('invariant');
var autoGenerateWrapperClass = null;
var genericComponentClass = null;
// This registry keeps track of wrapper classes around native tags.
// This registry keeps track of wrapper classes around host tags.
var tagToComponentClass = {};
var textComponentClass = null;
var ReactNativeComponentInjection = {
var ReactHostComponentInjection = {
// This accepts a class that receives the tag string. This is a catch all
// that can render any kind of tag.
injectGenericComponentClass: function(componentClass) {
@@ -56,7 +56,7 @@ function getComponentClassForElement(element) {
}
/**
* Get a native internal component class for a specific tag.
* Get a host internal component class for a specific tag.
*
* @param {ReactElement} element The element to create.
* @return {function} The internal class constructor function.
@@ -86,12 +86,12 @@ function isTextComponent(component) {
return component instanceof textComponentClass;
}
var ReactNativeComponent = {
var ReactHostComponent = {
getComponentClassForElement: getComponentClassForElement,
createInternalComponent: createInternalComponent,
createInstanceForText: createInstanceForText,
isTextComponent: isTextComponent,
injection: ReactNativeComponentInjection,
injection: ReactHostComponentInjection,
};
module.exports = ReactNativeComponent;
module.exports = ReactHostComponent;
@@ -55,7 +55,7 @@ function makeMove(child, afterNode, toIndex) {
type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
content: null,
fromIndex: child._mountIndex,
fromNode: ReactReconciler.getNativeNode(child),
fromNode: ReactReconciler.getHostNode(child),
toIndex: toIndex,
afterNode: afterNode,
};
@@ -236,7 +236,7 @@ var ReactMultiChild = {
child,
transaction,
this,
this._nativeContainerInfo,
this._hostContainerInfo,
context
);
child._mountIndex = index++;
@@ -360,7 +360,7 @@ var ReactMultiChild = {
);
}
nextIndex++;
lastPlacedNode = ReactReconciler.getNativeNode(nextChild);
lastPlacedNode = ReactReconciler.getHostNode(nextChild);
}
// Remove children that are no longer present.
for (name in removedNodes) {
@@ -453,7 +453,7 @@ var ReactMultiChild = {
child,
transaction,
this,
this._nativeContainerInfo,
this._hostContainerInfo,
context
);
child._mountIndex = index;
@@ -31,8 +31,8 @@ var ReactReconciler = {
*
* @param {ReactComponent} internalInstance
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @param {?object} the containing native component instance
* @param {?object} info about the native container
* @param {?object} the containing host component instance
* @param {?object} info about the host container
* @return {?string} Rendered markup to be inserted into the DOM.
* @final
* @internal
@@ -40,8 +40,8 @@ var ReactReconciler = {
mountComponent: function(
internalInstance,
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
if (__DEV__) {
@@ -54,8 +54,8 @@ var ReactReconciler = {
}
var markup = internalInstance.mountComponent(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
);
if (internalInstance._currentElement &&
@@ -80,8 +80,8 @@ var ReactReconciler = {
* Returns a value that can be passed to
* ReactComponentEnvironment.replaceNodeWithMarkup.
*/
getNativeNode: function(internalInstance) {
return internalInstance.getNativeNode();
getHostNode: function(internalInstance) {
return internalInstance.getHostNode();
},
/**
@@ -21,22 +21,22 @@ var ReactSimpleEmptyComponent = function(placeholderElement, instantiate) {
Object.assign(ReactSimpleEmptyComponent.prototype, {
mountComponent: function(
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
) {
return ReactReconciler.mountComponent(
this._renderedComponent,
transaction,
nativeParent,
nativeContainerInfo,
hostParent,
hostContainerInfo,
context
);
},
receiveComponent: function() {
},
getNativeNode: function() {
return ReactReconciler.getNativeNode(this._renderedComponent);
getHostNode: function() {
return ReactReconciler.getHostNode(this._renderedComponent);
},
unmountComponent: function() {
ReactReconciler.unmountComponent(this._renderedComponent);
@@ -13,7 +13,7 @@
var ReactCompositeComponent = require('ReactCompositeComponent');
var ReactEmptyComponent = require('ReactEmptyComponent');
var ReactNativeComponent = require('ReactNativeComponent');
var ReactHostComponent = require('ReactHostComponent');
var ReactInstrumentation = require('ReactInstrumentation');
var invariant = require('invariant');
@@ -100,7 +100,7 @@ function instantiateReactComponent(node) {
// Special case string values
if (typeof element.type === 'string') {
instance = ReactNativeComponent.createInternalComponent(element);
instance = ReactHostComponent.createInternalComponent(element);
} else if (isInternalComponentType(element.type)) {
// This is temporarily available for custom components that are not string
// representations. I.e. ART. Once those are updated to use the string
@@ -110,7 +110,7 @@ function instantiateReactComponent(node) {
instance = new ReactCompositeComponentWrapper(element);
}
} else if (typeof node === 'string' || typeof node === 'number') {
instance = ReactNativeComponent.createInstanceForText(node);
instance = ReactHostComponent.createInstanceForText(node);
} else {
invariant(
false,
@@ -123,7 +123,7 @@ function instantiateReactComponent(node) {
warning(
typeof instance.mountComponent === 'function' &&
typeof instance.receiveComponent === 'function' &&
typeof instance.getNativeNode === 'function' &&
typeof instance.getHostNode === 'function' &&
typeof instance.unmountComponent === 'function',
'Only React Components can be mounted.'
);
+2 -2
View File
@@ -16,7 +16,7 @@ var ReactElement = require('ReactElement');
var invariant = require('invariant');
var ReactNodeTypes = {
NATIVE: 0,
HOST: 0,
COMPOSITE: 1,
EMPTY: 2,
@@ -27,7 +27,7 @@ var ReactNodeTypes = {
if (typeof node.type === 'function') {
return ReactNodeTypes.COMPOSITE;
} else {
return ReactNodeTypes.NATIVE;
return ReactNodeTypes.HOST;
}
}
invariant(false, 'Unexpected node: %s', node);
@@ -6,25 +6,25 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule getNativeComponentFromComposite
* @providesModule getHostComponentFromComposite
*/
'use strict';
var ReactNodeTypes = require('ReactNodeTypes');
function getNativeComponentFromComposite(inst) {
function getHostComponentFromComposite(inst) {
var type;
while ((type = inst._renderedNodeType) === ReactNodeTypes.COMPOSITE) {
inst = inst._renderedComponent;
}
if (type === ReactNodeTypes.NATIVE) {
if (type === ReactNodeTypes.HOST) {
return inst._renderedComponent;
} else if (type === ReactNodeTypes.EMPTY) {
return null;
}
}
module.exports = getNativeComponentFromComposite;
module.exports = getHostComponentFromComposite;
+1 -1
View File
@@ -394,7 +394,7 @@ NoopInternalComponent.prototype = {
this._currentElement = element;
},
getNativeNode: function() {
getHostNode: function() {
return undefined;
},