The library for web and native user interfaces.
Replace uses of ReactDOMNodeCache and getDOMNodeID with ReactID.
Also removed some unnecessary calls to `document.getElementById`, which will eventually cease to work for React-specific IDs. This clears the way for the deprecation of `ReactDOMNodeCache` and `getDOMNodeID`.
CommitSyncScript committed
Jun 21, 2013 at 16:01 UTC
1839bcf109a598a45ba45214cde02d25c33f2938
10 files changed
+40
-33
src/core/ReactComponent.js
+3
-3
@@ -22,7 +22,7 @@
22
23
var ReactCurrentOwner = require('ReactCurrentOwner');
24
var ReactDOMIDOperations = require('ReactDOMIDOperations');
25
-var ReactDOMNodeCache = require('ReactDOMNodeCache');
25
+var ReactID = require('ReactID');
26
var ReactMount = require('ReactMount');
27
var ReactOwner = require('ReactOwner');
28
var ReactReconcileTransaction = require('ReactReconcileTransaction');
@@ -285,7 +285,7 @@ var ReactComponent = {
285
this.isMounted(),
286
'getDOMNode(): A component must be mounted to have a DOM node.'
287
);
288
- return ReactDOMNodeCache.getNodeByID(this._rootNodeID);
288
+ return ReactID.getNode(this._rootNodeID);
289
},
290
291
/**
@@ -440,7 +440,7 @@ var ReactComponent = {
440
if (props.ref != null) {
441
ReactOwner.removeComponentAsRefFrom(this, props.ref, props[OWNER]);
442
}
443
- ReactDOMNodeCache.purgeID(this._rootNodeID);
443
+ ReactID.purgeID(this._rootNodeID);
444
this._rootNodeID = null;
445
this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
446
},
src/core/ReactDOMIDOperations.js
+11
-11
@@ -24,7 +24,7 @@
24
var CSSPropertyOperations = require('CSSPropertyOperations');
25
var DOMChildrenOperations = require('DOMChildrenOperations');
26
var DOMPropertyOperations = require('DOMPropertyOperations');
27
-var ReactDOMNodeCache = require('ReactDOMNodeCache');
27
+var ReactID = require('ReactID');
28
29
var getTextContentAccessor = require('getTextContentAccessor');
30
var invariant = require('invariant');
@@ -66,7 +66,7 @@ var ReactDOMIDOperations = {
66
* @internal
67
*/
68
updatePropertyByID: function(id, name, value) {
69
- var node = ReactDOMNodeCache.getNodeByID(id);
69
+ var node = ReactID.getNode(id);
70
invariant(
71
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
72
'updatePropertyByID(...): %s',
@@ -84,7 +84,7 @@ var ReactDOMIDOperations = {
84
* @internal
85
*/
86
deletePropertyByID: function(id, name, value) {
87
- var node = ReactDOMNodeCache.getNodeByID(id);
87
+ var node = ReactID.getNode(id);
88
invariant(
89
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
90
'updatePropertyByID(...): %s',
@@ -121,7 +121,7 @@ var ReactDOMIDOperations = {
121
* @internal
122
*/
123
updateStylesByID: function(id, styles) {
124
- var node = ReactDOMNodeCache.getNodeByID(id);
124
+ var node = ReactID.getNode(id);
125
CSSPropertyOperations.setValueForStyles(node, styles);
126
},
127
@@ -133,7 +133,7 @@ var ReactDOMIDOperations = {
133
* @internal
134
*/
135
updateInnerHTMLByID: function(id, html) {
136
- var node = ReactDOMNodeCache.getNodeByID(id);
136
+ var node = ReactID.getNode(id);
137
// HACK: IE8- normalize whitespace in innerHTML, removing leading spaces.
138
// @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
139
node.innerHTML = (html && html.__html || '').replace(/^ /g, ' ');
@@ -147,7 +147,7 @@ var ReactDOMIDOperations = {
147
* @internal
148
*/
149
updateTextContentByID: function(id, content) {
150
- var node = ReactDOMNodeCache.getNodeByID(id);
150
+ var node = ReactID.getNode(id);
151
node[textContentAccessor] = content;
152
},
153
@@ -160,9 +160,9 @@ var ReactDOMIDOperations = {
160
* @see {Danger.dangerouslyReplaceNodeWithMarkup}
161
*/
162
dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
163
- var node = ReactDOMNodeCache.getNodeByID(id);
163
+ var node = ReactID.getNode(id);
164
DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
165
- ReactDOMNodeCache.purgeEntireCache();
165
+ ReactID.purgeEntireCache();
166
},
167
168
/**
@@ -170,13 +170,13 @@ var ReactDOMIDOperations = {
170
* Detect if any elements were removed instead of blindly purging.
171
*/
172
manageChildrenByParentID: function(parentID, domOperations) {
173
- var parent = ReactDOMNodeCache.getNodeByID(parentID);
173
+ var parent = ReactID.getNode(parentID);
174
DOMChildrenOperations.manageChildren(parent, domOperations);
175
- ReactDOMNodeCache.purgeEntireCache();
175
+ ReactID.purgeEntireCache();
176
},
177
178
setTextNodeValueAtIndexByParentID: function(parentID, index, value) {
179
- var parent = ReactDOMNodeCache.getNodeByID(parentID);
179
+ var parent = ReactID.getNode(parentID);
180
DOMChildrenOperations.setTextNodeValueAtIndex(parent, index, value);
181
}
182
src/core/ReactEventTopLevelCallback.js
+2
-2
@@ -23,7 +23,7 @@ var ExecutionEnvironment = require('ExecutionEnvironment');
23
var ReactEventEmitter = require('ReactEventEmitter');
24
var ReactInstanceHandles = require('ReactInstanceHandles');
25
26
-var getDOMNodeID = require('getDOMNodeID');
26
+var ReactID = require('ReactID');
27
var getEventTarget = require('getEventTarget');
28
29
/**
@@ -76,7 +76,7 @@ var ReactEventTopLevelCallback = {
76
var topLevelTarget = ReactInstanceHandles.getFirstReactDOM(
77
getEventTarget(nativeEvent)
78
) || ExecutionEnvironment.global;
79
- var topLevelTargetID = getDOMNodeID(topLevelTarget) || '';
79
+ var topLevelTargetID = ReactID.getID(topLevelTarget) || '';
80
ReactEventEmitter.handleTopLevel(
81
topLevelType,
82
topLevelTarget,
src/core/ReactInputSelection.js
+5
-1
@@ -27,6 +27,10 @@ function getActiveElement() {
27
}
28
}
29
30
+function isInDocument(node) {
31
+ return document.documentElement.contains(node);
32
+}
33
+
34
/**
35
* @ReactInputSelection: React input selection module. Based on Selection.js,
36
* but modified to be suitable for react and has a couple of bug fixes (doesn't
@@ -64,7 +68,7 @@ var ReactInputSelection = {
68
var priorFocusedElem = priorSelectionInformation.focusedElem;
69
var priorSelectionRange = priorSelectionInformation.selectionRange;
70
if (curFocusedElem !== priorFocusedElem &&
67
- document.getElementById(priorFocusedElem.id)) {
71
+ isInDocument(priorFocusedElem)) {
72
if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {
73
ReactInputSelection.setSelection(
74
priorFocusedElem,
src/core/ReactInstanceHandles.js
+2
-2
@@ -19,7 +19,7 @@
19
20
"use strict";
21
22
-var getDOMNodeID = require('getDOMNodeID');
22
+var ReactID = require('ReactID');
23
var invariant = require('invariant');
24
25
var SEPARATOR = '.';
@@ -250,7 +250,7 @@ var ReactInstanceHandles = {
250
// Not a DOMElement, therefore not a React component
251
return false;
252
}
253
- var id = getDOMNodeID(node);
253
+ var id = ReactID.getID(node);
254
return id ? id.charAt(0) === SEPARATOR : false;
255
},
256
src/core/__tests__/ReactCompositeComponent-test.js
+3
-1
@@ -26,6 +26,7 @@ var React;
26
var ReactCurrentOwner;
27
var ReactProps;
28
var ReactTestUtils;
29
+var ReactID;
30
31
var cx;
32
var reactComponentExpect;
@@ -39,6 +40,7 @@ describe('ReactCompositeComponent', function() {
40
ReactCurrentOwner = require('ReactCurrentOwner');
41
ReactProps = require('ReactProps');
42
ReactTestUtils = require('ReactTestUtils');
43
+ ReactID = require('ReactID');
44
45
MorphingComponent = React.createClass({
46
getInitialState: function() {
@@ -160,7 +162,7 @@ describe('ReactCompositeComponent', function() {
162
// rerender
163
instance.setProps({renderAnchor: true, anchorClassOn: false});
164
var anchorID = instance.getAnchorID();
163
- var actualDOMAnchorNode = document.getElementById(anchorID);
165
+ var actualDOMAnchorNode = ReactID.getNode(anchorID);
166
expect(actualDOMAnchorNode.className).toBe('');
167
});
168
src/core/__tests__/ReactDOM-test.js
+4
-3
@@ -25,6 +25,7 @@ var React = require('React');
25
var ReactDOM = require('ReactDOM');
26
var ReactTestUtils = require('ReactTestUtils');
27
var React = require('React');
28
+var ReactID = require('ReactID');
29
30
describe('ref swapping', function() {
31
// TODO: uncomment this test once we can run in phantom, which
@@ -60,7 +61,7 @@ describe('ref swapping', function() {
61
var argDiv = ReactTestUtils.renderIntoDocument(
62
ReactDOM.div(null, 'child')
63
);
63
- var argNode = document.getElementById(argDiv._rootNodeID);
64
+ var argNode = ReactID.getNode(argDiv._rootNodeID);
65
expect(argNode.innerHTML).toBe('child');
66
});
67
@@ -68,7 +69,7 @@ describe('ref swapping', function() {
69
var conflictDiv = ReactTestUtils.renderIntoDocument(
70
ReactDOM.div({children: 'fakechild'}, 'child')
71
);
71
- var conflictNode = document.getElementById(conflictDiv._rootNodeID);
72
+ var conflictNode = ReactID.getNode(conflictDiv._rootNodeID);
73
expect(conflictNode.innerHTML).toBe('child');
74
});
75
@@ -110,7 +111,7 @@ describe('ref swapping', function() {
111
theBird: <div class="bird" />
112
}
113
});
113
- var root = document.getElementById(myDiv._rootNodeID);
114
+ var root = ReactID.getNode(myDiv._rootNodeID);
115
var dog = root.childNodes[0];
116
expect(dog.className).toBe('bigdog');
117
});
src/core/__tests__/ReactDOMIDOperations-test.js
+5
-5
@@ -23,11 +23,11 @@
23
describe('ReactDOMIDOperations', function() {
24
var DOMPropertyOperations = require('DOMPropertyOperations');
25
var ReactDOMIDOperations = require('ReactDOMIDOperations');
26
- var ReactDOMNodeCache = require('ReactDOMNodeCache');
26
+ var ReactID = require('ReactID');
27
var keyOf = require('keyOf');
28
29
it('should disallow updating special properties', function() {
30
- spyOn(ReactDOMNodeCache, "getNodeByID");
30
+ spyOn(ReactID, "getNode");
31
spyOn(DOMPropertyOperations, "setValueForProperty");
32
33
expect(function() {
@@ -39,7 +39,7 @@ describe('ReactDOMIDOperations', function() {
39
}).toThrow();
40
41
expect(
42
- ReactDOMNodeCache.getNodeByID.argsForCall[0][0]
42
+ ReactID.getNode.argsForCall[0][0]
43
).toBe('testID');
44
45
expect(
@@ -49,7 +49,7 @@ describe('ReactDOMIDOperations', function() {
49
50
it('should update innerHTML and special-case whitespace', function() {
51
var stubNode = document.createElement('div');
52
- spyOn(ReactDOMNodeCache, "getNodeByID").andReturn(stubNode);
52
+ spyOn(ReactID, "getNode").andReturn(stubNode);
53
54
ReactDOMIDOperations.updateInnerHTMLByID(
55
'testID',
@@ -57,7 +57,7 @@ describe('ReactDOMIDOperations', function() {
57
);
58
59
expect(
60
- ReactDOMNodeCache.getNodeByID.argsForCall[0][0]
60
+ ReactID.getNode.argsForCall[0][0]
61
).toBe('testID');
62
63
expect(stubNode.innerHTML).toBe(' testContent');
src/eventPlugins/EnterLeaveEventPlugin.js
+3
-3
@@ -25,7 +25,7 @@ var ExecutionEnvironment = require('ExecutionEnvironment');
25
var ReactInstanceHandles = require('ReactInstanceHandles');
26
var SyntheticMouseEvent = require('SyntheticMouseEvent');
27
28
-var getDOMNodeID = require('getDOMNodeID');
28
+var ReactID = require('ReactID');
29
var keyOf = require('keyOf');
30
31
var topLevelTypes = EventConstants.topLevelTypes;
@@ -85,8 +85,8 @@ var EnterLeaveEventPlugin = {
85
return null;
86
}
87
88
- var fromID = from ? getDOMNodeID(from) : '';
89
- var toID = to ? getDOMNodeID(to) : '';
88
+ var fromID = from ? ReactID.getID(from) : '';
89
+ var toID = to ? ReactID.getID(to) : '';
90
91
var leave = SyntheticMouseEvent.getPooled(
92
eventTypes.mouseLeave,
src/test/ReactTestUtils.js
+2
-2
@@ -21,8 +21,8 @@ var React = require('React');
21
var ReactComponent = require('ReactComponent');
22
var ReactEventEmitter = require('ReactEventEmitter');
23
var ReactTextComponent = require('ReactTextComponent');
24
+var ReactID = require('ReactID');
25
25
-var ge = require('ge');
26
var mergeInto = require('mergeInto');
27
28
var topLevelTypes = EventConstants.topLevelTypes;
@@ -222,7 +222,7 @@ var ReactTestUtils = {
222
ReactEventEmitter.TopLevelCallbackCreator.createTopLevelCallback(
223
topLevelType
224
);
225
- var node = ge(reactRootID);
225
+ var node = ReactID.getNode(reactRootID);
226
fakeNativeEvent.target = node;
227
/* jsdom is returning nodes without id's - fixing that issue here. */
228
node.id = reactRootID;