From c1886c651365e1db415a9efd2d4e621eea20cf32 Mon Sep 17 00:00:00 2001
From: CommitSyncScript <jeffmo@fb.com>
Date: Mon, 24 Jun 2013 18:27:35 -0700
Subject: [PATCH] Use ReactID.ATTR_NAME as the React-specific ID attribute
 name.

Another step in the plan towards making `ReactID.ATTR_NAME` the central
source of truth regarding the React-specific ID attribute name.
---
 src/core/ReactID.js                           |  1 +
 src/core/ReactMount.js                        |  1 +
 src/core/ReactNativeComponent.js              |  3 ++-
 src/core/ReactTextComponent.js                |  3 ++-
 .../__tests__/ReactServerRendering-test.js    | 19 ++++++++++++++-----
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/core/ReactID.js b/src/core/ReactID.js
index 3ce1d42469..ea59e0b09b 100644
--- a/src/core/ReactID.js
+++ b/src/core/ReactID.js
@@ -120,6 +120,7 @@ function purgeEntireCache() {
   nodeCache = {};
 }
 
+exports.ATTR_NAME = ATTR_NAME;
 exports.getID = getID;
 exports.setID = setID;
 exports.getNode = getNode;
diff --git a/src/core/ReactMount.js b/src/core/ReactMount.js
index 2d9ddfcdb5..ae6f263f19 100644
--- a/src/core/ReactMount.js
+++ b/src/core/ReactMount.js
@@ -55,6 +55,7 @@ function getReactRootID(container) {
  *
  *   ReactMount.renderComponent(component, $('container'));
  *
+ *   TODO Update this comment when ReactID.ATTR_NAME changes.
  *   <div id="container">         <-- Supplied `container`.
  *     <div id=".reactRoot[3]">   <-- Rendered reactRoot of React component.
  *       // ...
diff --git a/src/core/ReactNativeComponent.js b/src/core/ReactNativeComponent.js
index 07371b2c8f..eddb27ec5f 100644
--- a/src/core/ReactNativeComponent.js
+++ b/src/core/ReactNativeComponent.js
@@ -24,6 +24,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var ReactComponent = require('ReactComponent');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactMultiChild = require('ReactMultiChild');
+var ReactID = require('ReactID');
 
 var escapeTextForBrowser = require('escapeTextForBrowser');
 var flattenChildren = require('flattenChildren');
@@ -138,7 +139,7 @@ ReactNativeComponent.Mixin = {
       }
     }
 
-    return ret + ' id="' + this._rootNodeID + '">';
+    return ret + ' ' + ReactID.ATTR_NAME + '="' + this._rootNodeID + '">';
   },
 
   /**
diff --git a/src/core/ReactTextComponent.js b/src/core/ReactTextComponent.js
index 4b7aa495ac..57e56bbce2 100644
--- a/src/core/ReactTextComponent.js
+++ b/src/core/ReactTextComponent.js
@@ -20,6 +20,7 @@
 "use strict";
 
 var ReactComponent = require('ReactComponent');
+var ReactID = require('ReactID');
 
 var escapeTextForBrowser = require('escapeTextForBrowser');
 var mixInto = require('mixInto');
@@ -57,7 +58,7 @@ mixInto(ReactTextComponent, {
   mountComponent: function(rootID) {
     ReactComponent.Mixin.mountComponent.call(this, rootID);
     return (
-      '<span id="' + rootID + '">' +
+      '<span ' + ReactID.ATTR_NAME + '="' + rootID + '">' +
         escapeTextForBrowser(this.props.text) +
       '</span>'
     );
diff --git a/src/environment/__tests__/ReactServerRendering-test.js b/src/environment/__tests__/ReactServerRendering-test.js
index ebbad6b4b0..c8cc58ebe5 100644
--- a/src/environment/__tests__/ReactServerRendering-test.js
+++ b/src/environment/__tests__/ReactServerRendering-test.js
@@ -24,10 +24,12 @@
 require('mock-modules')
   .dontMock('ExecutionEnvironment')
   .dontMock('React')
+  .dontMock('ReactID')
   .dontMock('ReactServerRendering')
   .dontMock('ReactTestUtils');
 
 var React;
+var ReactID;
 var ReactTestUtils;
 var ReactServerRendering;
 var ExecutionEnvironment;
@@ -36,6 +38,7 @@ describe('ReactServerRendering', function() {
   beforeEach(function() {
     require('mock-modules').dumpCache();
     React = require('React');
+    ReactID = require('ReactID');
     ReactTestUtils = require('ReactTestUtils');
     ExecutionEnvironment = require('ExecutionEnvironment');
     ExecutionEnvironment.canUseDOM = false;
@@ -51,7 +54,7 @@ describe('ReactServerRendering', function() {
       }
     );
     expect(response).toMatch(
-      '<span  id="[^"]+">hello world</span>'
+      '<span  ' + ReactID.ATTR_NAME + '="[^"]+">hello world</span>'
     );
   });
 
@@ -74,8 +77,12 @@ describe('ReactServerRendering', function() {
       }
     );
     expect(response).toMatch(
-      '<div  id="[^"]+"><span  id="[^"]+"><span id="[^"]+">My name is </span>' +
-        '<span id="[^"]+">child</span></span></div>'
+      '<div  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+        '<span  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+          '<span ' + ReactID.ATTR_NAME + '="[^"]+">My name is </span>' +
+          '<span ' + ReactID.ATTR_NAME + '="[^"]+">child</span>' +
+        '</span>' +
+      '</div>'
     );
   });
 
@@ -123,8 +130,10 @@ describe('ReactServerRendering', function() {
     );
 
     expect(response).toMatch(
-      '<span  id="[^"]+"><span id="[^"]+">Component name: </span>' +
-        '<span id="[^"]+">TestComponent</span></span>'
+      '<span  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+        '<span ' + ReactID.ATTR_NAME + '="[^"]+">Component name: </span>' +
+        '<span ' + ReactID.ATTR_NAME + '="[^"]+">TestComponent</span>' +
+      '</span>'
     );
     expect(lifecycle).toEqual(
       ['getInitialState', 'componentWillMount', 'render']