Add `createMarkupForID`
This is a follow-up the to previous commit and does two things: - Moves `ReactMount.ATTR_NAME` to `DOMProperty.ID_ATTRIBUTE_NAME`. - Adds `DOMPropertyOperations.createMarkupForID` and uses it.
Tim Yung committed
Dec 20, 2013 at 18:05 UTC
3431e3f847b148bd1aa527f375337c86b1029c58
7 files changed
+32
-22
src/core/React.js
+2
@@ -18,6 +18,7 @@
18
19
"use strict";
20
21
+var DOMPropertyOperations = require('DOMPropertyOperations');
22
var ReactComponent = require('ReactComponent');
23
var ReactCompositeComponent = require('ReactCompositeComponent');
24
var ReactContext = require('ReactContext');
@@ -58,6 +59,7 @@ var React = {
59
Component: ReactComponent,
60
CurrentOwner: ReactCurrentOwner,
61
DOMComponent: ReactDOMComponent,
62
+ DOMPropertyOperations: DOMPropertyOperations,
63
InstanceHandles: ReactInstanceHandles,
64
Mount: ReactMount,
65
MultiChild: ReactMultiChild,
src/core/ReactDOMComponent.js
+1
-5
@@ -25,7 +25,6 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
25
var ReactComponent = require('ReactComponent');
26
var ReactEventEmitter = require('ReactEventEmitter');
27
var ReactMultiChild = require('ReactMultiChild');
28
-var ReactMount = require('ReactMount');
28
var ReactPerf = require('ReactPerf');
29
30
var escapeTextForBrowser = require('escapeTextForBrowser');
@@ -144,10 +143,7 @@ ReactDOMComponent.Mixin = {
143
}
144
}
145
147
- var idMarkup = DOMPropertyOperations.createMarkupForProperty(
148
- ReactMount.ATTR_NAME,
149
- this._rootNodeID
150
- );
146
+ var idMarkup = DOMPropertyOperations.createMarkupForID(this._rootNodeID);
147
return ret + ' ' + idMarkup + '>';
148
},
149
src/core/ReactMount.js
+2
-3
@@ -18,6 +18,7 @@
18
19
"use strict";
20
21
+var DOMProperty = require('DOMProperty');
22
var ReactEventEmitter = require('ReactEventEmitter');
23
var ReactInstanceHandles = require('ReactInstanceHandles');
24
@@ -29,7 +30,7 @@ var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
30
31
var SEPARATOR = ReactInstanceHandles.SEPARATOR;
32
32
-var ATTR_NAME = 'data-reactid';
33
+var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
34
var nodeCache = {};
35
36
var ELEMENT_NODE_TYPE = 1;
@@ -596,8 +597,6 @@ var ReactMount = {
597
* React ID utilities.
598
*/
599
599
- ATTR_NAME: ATTR_NAME,
600
-
600
getReactRootID: getReactRootID,
601
602
getID: getID,
src/core/ReactTextComponent.js
+1
-6
@@ -21,7 +21,6 @@
21
22
var DOMPropertyOperations = require('DOMPropertyOperations');
23
var ReactComponent = require('ReactComponent');
24
-var ReactMount = require('ReactMount');
24
25
var escapeTextForBrowser = require('escapeTextForBrowser');
26
var mixInto = require('mixInto');
@@ -65,12 +64,8 @@ mixInto(ReactTextComponent, {
64
transaction,
65
mountDepth
66
);
68
- var idMarkup = DOMPropertyOperations.createMarkupForProperty(
69
- ReactMount.ATTR_NAME,
70
- rootID
71
- );
67
return (
73
- '<span ' + idMarkup + '>' +
68
+ '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
69
escapeTextForBrowser(this.props.text) +
70
'</span>'
71
);
src/dom/DOMProperty.js
+2
@@ -151,6 +151,8 @@ var defaultValueCache = {};
151
*/
152
var DOMProperty = {
153
154
+ ID_ATTRIBUTE_NAME: 'data-reactid',
155
+
156
/**
157
* Checks whether a property name is a standard property.
158
* @type {Object}
src/dom/DOMPropertyOperations.js
+11
@@ -71,6 +71,17 @@ if (__DEV__) {
71
*/
72
var DOMPropertyOperations = {
73
74
+ /**
75
+ * Creates markup for the ID property.
76
+ *
77
+ * @param {string} id Unescaped ID.
78
+ * @return {string} Markup string.
79
+ */
80
+ createMarkupForID: function(id) {
81
+ return processAttributeNameAndPrefix(DOMProperty.ID_ATTRIBUTE_NAME) +
82
+ escapeTextForBrowser(id) + '"';
83
+ },
84
+
85
/**
86
* Creates markup for a property.
87
*
src/environment/__tests__/ReactServerRendering-test.js
+13
-8
@@ -38,6 +38,8 @@ var ReactServerRendering;
38
var ReactMarkupChecksum;
39
var ExecutionEnvironment;
40
41
+var ID_ATTRIBUTE_NAME;
42
+
43
describe('ReactServerRendering', function() {
44
beforeEach(function() {
45
require('mock-modules').dumpCache();
@@ -48,6 +50,9 @@ describe('ReactServerRendering', function() {
50
ExecutionEnvironment.canUseDOM = false;
51
ReactServerRendering = require('ReactServerRendering');
52
ReactMarkupChecksum = require('ReactMarkupChecksum');
53
+
54
+ var DOMProperty = require('DOMProperty');
55
+ ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
56
});
57
58
it('should generate simple markup', function() {
@@ -59,7 +64,7 @@ describe('ReactServerRendering', function() {
64
}
65
);
66
expect(response).toMatch(
62
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+" ' +
67
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
68
ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">hello world</span>'
69
);
70
});
@@ -83,11 +88,11 @@ describe('ReactServerRendering', function() {
88
}
89
);
90
expect(response).toMatch(
86
- '<div ' + ReactMount.ATTR_NAME + '="[^"]+" ' +
91
+ '<div ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
92
ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
88
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+">' +
89
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+">My name is </span>' +
90
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+">child</span>' +
93
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">' +
94
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">My name is </span>' +
95
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">child</span>' +
96
'</span>' +
97
'</div>'
98
);
@@ -137,10 +142,10 @@ describe('ReactServerRendering', function() {
142
);
143
144
expect(response).toMatch(
140
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+" ' +
145
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
146
ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
142
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+">Component name: </span>' +
143
- '<span ' + ReactMount.ATTR_NAME + '="[^"]+">TestComponent</span>' +
147
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">Component name: </span>' +
148
+ '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">TestComponent</span>' +
149
'</span>'
150
);
151
expect(lifecycle).toEqual(