The library for web and native user interfaces.
Use ReactID.{get,set}ID instead of manipulating .id property directly.
Another step in the plan to centralize control of React-specific identifers.
CommitSyncScript committed
Jun 21, 2013 at 16:01 UTC
3373572e15c00b2dab9f005a85bb420fae107b2b
8 files changed
+99
-74
src/core/ReactInstanceHandles.js
+3
-2
@@ -285,9 +285,10 @@ var ReactInstanceHandles = {
285
findComponentRoot: function(ancestorNode, id) {
286
var child = ancestorNode.firstChild;
287
while (child) {
288
- if (id === child.id) {
288
+ var childId = ReactID.getID(child);
289
+ if (id === childId) {
290
return child;
290
- } else if (isAncestorIDOf(child.id, id)) {
291
+ } else if (isAncestorIDOf(childId, id)) {
292
return ReactInstanceHandles.findComponentRoot(child, id);
293
}
294
child = child.nextSibling;
src/core/ReactMount.js
+2
-1
@@ -21,6 +21,7 @@
21
var ReactEventEmitter = require('ReactEventEmitter');
22
var ReactInstanceHandles = require('ReactInstanceHandles');
23
var ReactEventTopLevelCallback = require('ReactEventTopLevelCallback');
24
+var ReactID = require('ReactID');
25
26
var $ = require('$');
27
@@ -44,7 +45,7 @@ function getReactRootElementInContainer(container) {
45
*/
46
function getReactRootID(container) {
47
var rootElement = getReactRootElementInContainer(container);
47
- return rootElement && rootElement.id;
48
+ return rootElement && ReactID.getID(rootElement);
49
}
50
51
/**
src/core/__tests__/ReactEventEmitter-test.js
+78
-63
@@ -22,6 +22,7 @@ require('mock-modules')
22
.dontMock('BrowserScroll')
23
.dontMock('CallbackRegistry')
24
.dontMock('EventPluginHub')
25
+ .dontMock('ReactID')
26
.dontMock('ReactEventEmitter')
27
.dontMock('ReactInstanceHandles')
28
.dontMock('EventPluginHub')
@@ -34,6 +35,9 @@ var keyOf = require('keyOf');
35
var mocks = require('mocks');
36
37
var EventPluginHub;
38
+var ReactID = require('ReactID');
39
+var getID = ReactID.getID;
40
+var setID = ReactID.setID;
41
var ReactEventEmitter;
42
var ReactEventTopLevelCallback;
43
var ReactTestUtils;
@@ -68,15 +72,15 @@ var ON_TOUCH_TAP_KEY = keyOf({onTouchTap: null});
72
var CHILD = document.createElement('div');
73
var PARENT = document.createElement('div');
74
var GRANDPARENT = document.createElement('div');
71
-CHILD.id = '.reactRoot.[0].[0].[0]';
72
-PARENT.id = '.reactRoot.[0].[0]';
73
-GRANDPARENT.id = '.reactRoot.[0]';
75
+setID(CHILD, '.reactRoot.[0].[0].[0]');
76
+setID(PARENT, '.reactRoot.[0].[0]');
77
+setID(GRANDPARENT, '.reactRoot.[0]');
78
79
function registerSimpleTestHandler() {
76
- ReactEventEmitter.putListener(CHILD.id, ON_CLICK_KEY, LISTENER);
77
- var listener = ReactEventEmitter.getListener(CHILD.id, ON_CLICK_KEY);
80
+ ReactEventEmitter.putListener(getID(CHILD), ON_CLICK_KEY, LISTENER);
81
+ var listener = ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
82
expect(listener).toEqual(LISTENER);
79
- return ReactEventEmitter.getListener(CHILD.id, ON_CLICK_KEY);
83
+ return ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
84
}
85
86
@@ -85,6 +89,9 @@ describe('ReactEventEmitter', function() {
89
require('mock-modules').dumpCache();
90
EventPluginHub = require('EventPluginHub');
91
TapEventPlugin = require('TapEventPlugin');
92
+ ReactID = require('ReactID');
93
+ getID = ReactID.getID;
94
+ setID = ReactID.setID;
95
ReactEventEmitter = require('ReactEventEmitter');
96
ReactTestUtils = require('ReactTestUtils');
97
ReactEventTopLevelCallback = require('ReactEventTopLevelCallback');
@@ -98,20 +105,20 @@ describe('ReactEventEmitter', function() {
105
106
it('should store a listener correctly', function() {
107
registerSimpleTestHandler();
101
- var listener = ReactEventEmitter.getListener(CHILD.id, ON_CLICK_KEY);
108
+ var listener = ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
109
expect(listener).toBe(LISTENER);
110
});
111
112
it('should retrieve a listener correctly', function() {
113
registerSimpleTestHandler();
107
- var listener = ReactEventEmitter.getListener(CHILD.id, ON_CLICK_KEY);
114
+ var listener = ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
115
expect(listener).toEqual(LISTENER);
116
});
117
118
it('should clear all handlers when asked to', function() {
119
registerSimpleTestHandler();
113
- ReactEventEmitter.deleteAllListeners(CHILD.id);
114
- var listener = ReactEventEmitter.getListener(CHILD.id, ON_CLICK_KEY);
120
+ ReactEventEmitter.deleteAllListeners(getID(CHILD));
121
+ var listener = ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
122
expect(listener).toBe(undefined);
123
});
124
@@ -133,89 +140,89 @@ describe('ReactEventEmitter', function() {
140
141
it('should bubble simply', function() {
142
ReactEventEmitter.putListener(
136
- CHILD.id,
143
+ getID(CHILD),
144
ON_CLICK_KEY,
138
- recordID.bind(null, CHILD.id)
145
+ recordID.bind(null, getID(CHILD))
146
);
147
ReactEventEmitter.putListener(
141
- PARENT.id,
148
+ getID(PARENT),
149
ON_CLICK_KEY,
143
- recordID.bind(null, PARENT.id)
150
+ recordID.bind(null, getID(PARENT))
151
);
152
ReactEventEmitter.putListener(
146
- GRANDPARENT.id,
153
+ getID(GRANDPARENT),
154
ON_CLICK_KEY,
148
- recordID.bind(null, GRANDPARENT.id)
155
+ recordID.bind(null, getID(GRANDPARENT))
156
);
157
ReactTestUtils.Simulate.click(CHILD);
158
expect(idCallOrder.length).toBe(3);
152
- expect(idCallOrder[0]).toBe(CHILD.id);
153
- expect(idCallOrder[1]).toBe(PARENT.id);
154
- expect(idCallOrder[2]).toBe(GRANDPARENT.id);
159
+ expect(idCallOrder[0]).toBe(getID(CHILD));
160
+ expect(idCallOrder[1]).toBe(getID(PARENT));
161
+ expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
162
});
163
164
it('should support stopPropagation()', function() {
165
ReactEventEmitter.putListener(
159
- CHILD.id,
166
+ getID(CHILD),
167
ON_CLICK_KEY,
161
- recordID.bind(null, CHILD.id)
168
+ recordID.bind(null, getID(CHILD))
169
);
170
ReactEventEmitter.putListener(
164
- PARENT.id,
171
+ getID(PARENT),
172
ON_CLICK_KEY,
166
- recordIDAndStopPropagation.bind(null, PARENT.id)
173
+ recordIDAndStopPropagation.bind(null, getID(PARENT))
174
);
175
ReactEventEmitter.putListener(
169
- GRANDPARENT.id,
176
+ getID(GRANDPARENT),
177
ON_CLICK_KEY,
171
- recordID.bind(null, GRANDPARENT.id)
178
+ recordID.bind(null, getID(GRANDPARENT))
179
);
180
ReactTestUtils.Simulate.click(CHILD);
181
expect(idCallOrder.length).toBe(2);
175
- expect(idCallOrder[0]).toBe(CHILD.id);
176
- expect(idCallOrder[1]).toBe(PARENT.id);
182
+ expect(idCallOrder[0]).toBe(getID(CHILD));
183
+ expect(idCallOrder[1]).toBe(getID(PARENT));
184
});
185
186
it('should stop after first dispatch if stopPropagation', function() {
187
ReactEventEmitter.putListener(
181
- CHILD.id,
188
+ getID(CHILD),
189
ON_CLICK_KEY,
183
- recordIDAndStopPropagation.bind(null, CHILD.id)
190
+ recordIDAndStopPropagation.bind(null, getID(CHILD))
191
);
192
ReactEventEmitter.putListener(
186
- PARENT.id,
193
+ getID(PARENT),
194
ON_CLICK_KEY,
188
- recordID.bind(null, PARENT.id)
195
+ recordID.bind(null, getID(PARENT))
196
);
197
ReactEventEmitter.putListener(
191
- GRANDPARENT.id,
198
+ getID(GRANDPARENT),
199
ON_CLICK_KEY,
193
- recordID.bind(null, GRANDPARENT.id)
200
+ recordID.bind(null, getID(GRANDPARENT))
201
);
202
ReactTestUtils.Simulate.click(CHILD);
203
expect(idCallOrder.length).toBe(1);
197
- expect(idCallOrder[0]).toBe(CHILD.id);
204
+ expect(idCallOrder[0]).toBe(getID(CHILD));
205
});
206
207
it('should stopPropagation if false is returned', function() {
208
ReactEventEmitter.putListener(
202
- CHILD.id,
209
+ getID(CHILD),
210
ON_CLICK_KEY,
204
- recordIDAndReturnFalse.bind(null, CHILD.id)
211
+ recordIDAndReturnFalse.bind(null, getID(CHILD))
212
);
213
ReactEventEmitter.putListener(
207
- PARENT.id,
214
+ getID(PARENT),
215
ON_CLICK_KEY,
209
- recordID.bind(null, PARENT.id)
216
+ recordID.bind(null, getID(PARENT))
217
);
218
ReactEventEmitter.putListener(
212
- GRANDPARENT.id,
219
+ getID(GRANDPARENT),
220
ON_CLICK_KEY,
214
- recordID.bind(null, GRANDPARENT.id)
221
+ recordID.bind(null, getID(GRANDPARENT))
222
);
223
ReactTestUtils.Simulate.click(CHILD);
224
expect(idCallOrder.length).toBe(1);
218
- expect(idCallOrder[0]).toBe(CHILD.id);
225
+ expect(idCallOrder[0]).toBe(getID(CHILD));
226
});
227
228
/**
@@ -230,10 +237,14 @@ describe('ReactEventEmitter', function() {
237
it('should invoke handlers that were removed while bubbling', function() {
238
var handleParentClick = mocks.getMockFunction();
239
var handleChildClick = function(event) {
233
- ReactEventEmitter.deleteAllListeners(PARENT.id);
240
+ ReactEventEmitter.deleteAllListeners(getID(PARENT));
241
};
235
- ReactEventEmitter.putListener(CHILD.id, ON_CLICK_KEY, handleChildClick);
236
- ReactEventEmitter.putListener(PARENT.id, ON_CLICK_KEY, handleParentClick);
242
+ ReactEventEmitter.putListener(getID(CHILD), ON_CLICK_KEY, handleChildClick);
243
+ ReactEventEmitter.putListener(
244
+ getID(PARENT),
245
+ ON_CLICK_KEY,
246
+ handleParentClick
247
+ );
248
ReactTestUtils.Simulate.click(CHILD);
249
expect(handleParentClick.mock.calls.length).toBe(1);
250
});
@@ -241,18 +252,22 @@ describe('ReactEventEmitter', function() {
252
it('should not invoke newly inserted handlers while bubbling', function() {
253
var handleParentClick = mocks.getMockFunction();
254
var handleChildClick = function(event) {
244
- ReactEventEmitter.putListener(PARENT.id, ON_CLICK_KEY, handleParentClick);
255
+ ReactEventEmitter.putListener(
256
+ getID(PARENT),
257
+ ON_CLICK_KEY,
258
+ handleParentClick
259
+ );
260
};
246
- ReactEventEmitter.putListener(CHILD.id, ON_CLICK_KEY, handleChildClick);
261
+ ReactEventEmitter.putListener(getID(CHILD), ON_CLICK_KEY, handleChildClick);
262
ReactTestUtils.Simulate.click(CHILD);
263
expect(handleParentClick.mock.calls.length).toBe(0);
264
});
265
266
it('should infer onTouchTap from a touchStart/End', function() {
267
ReactEventEmitter.putListener(
253
- CHILD.id,
268
+ getID(CHILD),
269
ON_TOUCH_TAP_KEY,
255
- recordID.bind(null, CHILD.id)
270
+ recordID.bind(null, getID(CHILD))
271
);
272
ReactTestUtils.Simulate.touchStart(
273
CHILD,
@@ -263,14 +278,14 @@ describe('ReactEventEmitter', function() {
278
ReactTestUtils.nativeTouchData(0, 0)
279
);
280
expect(idCallOrder.length).toBe(1);
266
- expect(idCallOrder[0]).toBe(CHILD.id);
281
+ expect(idCallOrder[0]).toBe(getID(CHILD));
282
});
283
284
it('should infer onTouchTap from when dragging below threshold', function() {
285
ReactEventEmitter.putListener(
271
- CHILD.id,
286
+ getID(CHILD),
287
ON_TOUCH_TAP_KEY,
273
- recordID.bind(null, CHILD.id)
288
+ recordID.bind(null, getID(CHILD))
289
);
290
ReactTestUtils.Simulate.touchStart(
291
CHILD,
@@ -281,14 +296,14 @@ describe('ReactEventEmitter', function() {
296
ReactTestUtils.nativeTouchData(0, tapMoveThreshold - 1)
297
);
298
expect(idCallOrder.length).toBe(1);
284
- expect(idCallOrder[0]).toBe(CHILD.id);
299
+ expect(idCallOrder[0]).toBe(getID(CHILD));
300
});
301
302
it('should not onTouchTap from when dragging beyond threshold', function() {
303
ReactEventEmitter.putListener(
289
- CHILD.id,
304
+ getID(CHILD),
305
ON_TOUCH_TAP_KEY,
291
- recordID.bind(null, CHILD.id)
306
+ recordID.bind(null, getID(CHILD))
307
);
308
ReactTestUtils.Simulate.touchStart(
309
CHILD,
@@ -304,19 +319,19 @@ describe('ReactEventEmitter', function() {
319
320
it('should bubble onTouchTap', function() {
321
ReactEventEmitter.putListener(
307
- CHILD.id,
322
+ getID(CHILD),
323
ON_TOUCH_TAP_KEY,
309
- recordID.bind(null, CHILD.id)
324
+ recordID.bind(null, getID(CHILD))
325
);
326
ReactEventEmitter.putListener(
312
- PARENT.id,
327
+ getID(PARENT),
328
ON_TOUCH_TAP_KEY,
314
- recordID.bind(null, PARENT.id)
329
+ recordID.bind(null, getID(PARENT))
330
);
331
ReactEventEmitter.putListener(
317
- GRANDPARENT.id,
332
+ getID(GRANDPARENT),
333
ON_TOUCH_TAP_KEY,
319
- recordID.bind(null, GRANDPARENT.id)
334
+ recordID.bind(null, getID(GRANDPARENT))
335
);
336
ReactTestUtils.Simulate.touchStart(
337
CHILD,
@@ -327,9 +342,9 @@ describe('ReactEventEmitter', function() {
342
ReactTestUtils.nativeTouchData(0, 0)
343
);
344
expect(idCallOrder.length).toBe(3);
330
- expect(idCallOrder[0]).toBe(CHILD.id);
331
- expect(idCallOrder[1]).toBe(PARENT.id);
332
- expect(idCallOrder[2]).toBe(GRANDPARENT.id);
345
+ expect(idCallOrder[0]).toBe(getID(CHILD));
346
+ expect(idCallOrder[1]).toBe(getID(PARENT));
347
+ expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
348
});
349
350
});
src/core/__tests__/ReactIdentity-test.js
+3
-1
@@ -22,6 +22,7 @@
22
var React;
23
var ReactTestUtils;
24
var reactComponentExpect;
25
+var ReactID;
26
27
describe('ReactIdentity', function() {
28
@@ -30,11 +31,12 @@ describe('ReactIdentity', function() {
31
React = require('React');
32
ReactTestUtils = require('ReactTestUtils');
33
reactComponentExpect = require('reactComponentExpect');
34
+ ReactID = require('ReactID');
35
});
36
37
var idExp = /^\.reactRoot\[\d+\](.*)$/;
38
function checkId(child, expectedId) {
37
- var actual = idExp.exec(child.id);
39
+ var actual = idExp.exec(ReactID.getID(child));
40
var expected = idExp.exec(expectedId);
41
expect(actual).toBeTruthy();
42
expect(expected).toBeTruthy();
src/core/__tests__/ReactInstanceHandles-test.js
+8
-4
@@ -21,6 +21,7 @@
21
22
var React = require('React');
23
var ReactTestUtils = require('ReactTestUtils');
24
+var ReactID = require('ReactID');
25
26
/**
27
* Ensure that all callbacks are invoked, passing this unique argument.
@@ -90,12 +91,15 @@ describe('ReactInstanceHandles', function() {
91
parentNode.appendChild(childNodeA);
92
parentNode.appendChild(childNodeB);
93
93
- parentNode.id = '.react[0]';
94
- childNodeA.id = '.react[0].0';
95
- childNodeB.id = '.react[0].0:1';
94
+ ReactID.setID(parentNode, '.react[0]');
95
+ ReactID.setID(childNodeA, '.react[0].0');
96
+ ReactID.setID(childNodeB, '.react[0].0:1');
97
98
expect(
98
- ReactInstanceHandles.findComponentRoot(parentNode, childNodeB.id)
99
+ ReactInstanceHandles.findComponentRoot(
100
+ parentNode,
101
+ ReactID.getID(childNodeB)
102
+ )
103
).toBe(childNodeB);
104
});
105
});
src/core/__tests__/ReactMultiChildReconcile-test.js
+2
-1
@@ -23,6 +23,7 @@ require('mock-modules');
23
24
var React = require('React');
25
var ReactTestUtils = require('ReactTestUtils');
26
+var ReactID = require('ReactID');
27
28
var objMapKeyVal = require('objMapKeyVal');
29
@@ -191,7 +192,7 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {
192
var i;
193
var orderedDomIds = [];
194
for (i=0; i < statusDisplayNodes.length; i++) {
194
- orderedDomIds.push(statusDisplayNodes[i].id);
195
+ orderedDomIds.push(ReactID.getID(statusDisplayNodes[i]));
196
}
197
198
var orderedLogicalIds = [];
src/core/__tests__/ReactNativeComponent-test.js
+2
-1
@@ -328,6 +328,7 @@ describe('ReactNativeComponent', function() {
328
it("should clean up listeners", function() {
329
var React = require('React');
330
var ReactEventEmitter = require('ReactEventEmitter');
331
+ var ReactID = require('ReactID');
332
333
var container = document.createElement('div');
334
document.documentElement.appendChild(container);
@@ -337,7 +338,7 @@ describe('ReactNativeComponent', function() {
338
React.renderComponent(instance, container);
339
340
var rootNode = instance.getDOMNode();
340
- var rootNodeID = rootNode.id;
341
+ var rootNodeID = ReactID.getID(rootNode);
342
expect(
343
ReactEventEmitter.getListener(rootNodeID, 'onClick')
344
).toBe(callback);
src/test/ReactTestUtils.js
+1
-1
@@ -225,7 +225,7 @@ var ReactTestUtils = {
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;
228
+ ReactID.setID(node, reactRootID);
229
virtualHandler(fakeNativeEvent);
230
},
231