{"files":[{"path":"src\/renderers\/dom\/client\/ReactDOMComponentTree.js","status":"M"},{"path":"src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js","status":"M"},{"path":"src\/renderers\/dom\/client\/utils\/DOMChildrenOperations.js","status":"M"},{"path":"src\/renderers\/dom\/client\/validateDOMNesting.js","status":"M"},{"path":"src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/ReactDOMTextComponent.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js","status":"M"},{"path":"src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildText-test.js","status":"M"},{"path":"src\/test\/ReactDefaultPerf.js","status":"M"},{"path":"src\/test\/ReactDefaultPerfAnalysis.js","status":"M"}],"commit":{"revision":"684ef3e32071fc88de5b05ea5ce1723743768322","authorEmail":"ben@benalpert.com","shortRevision":"684ef3e320","authorName":"Ben Alpert","authoredAt":"2016-02-18T12:02:17-08:00","subject":"Merge pull request #5753 from mwiencek\/no-text-span-2"},"parents":["f818fa38b4047c94705e5b7c0438b7568a8ec1f5","203850013a42f1cde6fba1dea3c26c4b40e6cc90"],"patch":"diff --git a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\nindex be0320cae3..ec95b26c63 100644\n--- a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n+++ b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n@@ -87,10 +87,12 @@ function precacheChildNodes(inst, node) {\n }\n \/\/ We assume the child nodes are in the same order as the child instances.\n for (; childNode !== null; childNode = childNode.nextSibling) {\n- if (childNode.nodeType === 1 &&\n- childNode.getAttribute(ATTR_NAME) === String(childID) ||\n- childNode.nodeType === 8 &&\n- childNode.nodeValue === ' react-empty: ' + childID + ' ') {\n+ if ((childNode.nodeType === 1 &&\n+ childNode.getAttribute(ATTR_NAME) === String(childID)) ||\n+ (childNode.nodeType === 8 &&\n+ childNode.nodeValue === ' react-text: ' + childID + ' ') ||\n+ (childNode.nodeType === 8 &&\n+ childNode.nodeValue === ' react-empty: ' + childID + ' ')) {\n precacheNode(childInst, childNode);\n continue outer;\n }\ndiff --git a\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js b\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\nindex d3f5df1179..89ec35d58e 100644\n--- a\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\n+++ b\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\n@@ -100,7 +100,9 @@ describe('ReactDOMComponentTree', function() {\n expect(renderAndGetInstance('main')._currentElement.type).toBe('main');\n \n \/\/ This one's a text component!\n- expect(renderAndGetInstance('span')._stringText).toBe('goodbye.');\n+ var root = renderAndQuery(null);\n+ var inst = ReactDOMComponentTree.getInstanceFromNode(root.children[0].childNodes[2]);\n+ expect(inst._stringText).toBe('goodbye.');\n \n expect(renderAndGetClosest('b')._currentElement.type).toBe('main');\n expect(renderAndGetClosest('img')._currentElement.type).toBe('main');\ndiff --git a\/src\/renderers\/dom\/client\/utils\/DOMChildrenOperations.js b\/src\/renderers\/dom\/client\/utils\/DOMChildrenOperations.js\nindex ce266352d7..40bf13e490 100644\n--- a\/src\/renderers\/dom\/client\/utils\/DOMChildrenOperations.js\n+++ b\/src\/renderers\/dom\/client\/utils\/DOMChildrenOperations.js\n@@ -21,6 +21,11 @@ var setInnerHTML = require('setInnerHTML');\n var setTextContent = require('setTextContent');\n \n function getNodeAfter(parentNode, node) {\n+ \/\/ Special case for text components, which return [open, close] comments\n+ \/\/ from getNativeNode.\n+ if (Array.isArray(node)) {\n+ node = node[1];\n+ }\n return node ? node.nextSibling : parentNode.firstChild;\n }\n \n@@ -45,6 +50,78 @@ function insertLazyTreeChildAt(parentNode, childTree, referenceNode) {\n DOMLazyTree.insertTreeBefore(parentNode, childTree, referenceNode);\n }\n \n+function moveChild(parentNode, childNode, referenceNode) {\n+ if (Array.isArray(childNode)) {\n+ moveDelimitedText(parentNode, childNode[0], childNode[1], referenceNode);\n+ } else {\n+ insertChildAt(parentNode, childNode, referenceNode);\n+ }\n+}\n+\n+function removeChild(parentNode, childNode) {\n+ if (Array.isArray(childNode)) {\n+ var closingComment = childNode[1];\n+ childNode = childNode[0];\n+ removeDelimitedText(parentNode, childNode, closingComment);\n+ parentNode.removeChild(closingComment);\n+ }\n+ parentNode.removeChild(childNode);\n+}\n+\n+function moveDelimitedText(\n+ parentNode,\n+ openingComment,\n+ closingComment,\n+ referenceNode\n+) {\n+ var node = openingComment;\n+ while (true) {\n+ var nextNode = node.nextSibling;\n+ insertChildAt(parentNode, node, referenceNode);\n+ if (node === closingComment) {\n+ break;\n+ }\n+ node = nextNode;\n+ }\n+}\n+\n+function removeDelimitedText(parentNode, startNode, closingComment) {\n+ while (true) {\n+ var node = startNode.nextSibling;\n+ if (node === closingComment) {\n+ \/\/ The closing comment is removed by ReactMultiChild.\n+ break;\n+ } else {\n+ parentNode.removeChild(node);\n+ }\n+ }\n+}\n+\n+function replaceDelimitedText(openingComment, closingComment, stringText) {\n+ var parentNode = openingComment.parentNode;\n+ var nodeAfterComment = openingComment.nextSibling;\n+ if (nodeAfterComment === closingComment) {\n+ \/\/ There are no text nodes between the opening and closing comments; insert\n+ \/\/ a new one if stringText isn't empty.\n+ if (stringText) {\n+ insertChildAt(\n+ parentNode,\n+ document.createTextNode(stringText),\n+ nodeAfterComment\n+ );\n+ }\n+ } else {\n+ if (stringText) {\n+ \/\/ Set the text content of the first node after the opening comment, and\n+ \/\/ remove all following nodes up until the closing comment.\n+ setTextContent(nodeAfterComment, stringText);\n+ removeDelimitedText(parentNode, nodeAfterComment, closingComment);\n+ } else {\n+ removeDelimitedText(parentNode, openingComment, closingComment);\n+ }\n+ }\n+}\n+\n \/**\n * Operations for updating with DOM children.\n *\/\n@@ -54,6 +131,8 @@ var DOMChildrenOperations = {\n \n updateTextContent: setTextContent,\n \n+ replaceDelimitedText: replaceDelimitedText,\n+\n \/**\n * Updates a component's children by processing a series of updates. The\n * update configurations are each expected to have a `parentNode` property.\n@@ -73,7 +152,7 @@ var DOMChildrenOperations = {\n );\n break;\n case ReactMultiChildUpdateTypes.MOVE_EXISTING:\n- insertChildAt(\n+ moveChild(\n parentNode,\n update.fromNode,\n getNodeAfter(parentNode, update.afterNode)\n@@ -92,7 +171,7 @@ var DOMChildrenOperations = {\n );\n break;\n case ReactMultiChildUpdateTypes.REMOVE_NODE:\n- parentNode.removeChild(update.fromNode);\n+ removeChild(parentNode, update.fromNode);\n break;\n }\n }\n@@ -102,6 +181,7 @@ var DOMChildrenOperations = {\n \n ReactPerf.measureMethods(DOMChildrenOperations, 'DOMChildrenOperations', {\n updateTextContent: 'updateTextContent',\n+ replaceDelimitedText: 'replaceDelimitedText',\n });\n \n module.exports = DOMChildrenOperations;\ndiff --git a\/src\/renderers\/dom\/client\/validateDOMNesting.js b\/src\/renderers\/dom\/client\/validateDOMNesting.js\nindex 22cfbd18cd..d479ea9af9 100644\n--- a\/src\/renderers\/dom\/client\/validateDOMNesting.js\n+++ b\/src\/renderers\/dom\/client\/validateDOMNesting.js\n@@ -384,6 +384,11 @@ if (__DEV__) {\n }\n didWarn[warnKey] = true;\n \n+ var tagDisplayName = childTag;\n+ if (childTag !== '#text') {\n+ tagDisplayName = '<' + childTag + '>';\n+ }\n+\n if (invalidParent) {\n var info = '';\n if (ancestorTag === 'table' && childTag === 'tr') {\n@@ -393,9 +398,9 @@ if (__DEV__) {\n }\n warning(\n false,\n- 'validateDOMNesting(...): <%s> cannot appear as a child of <%s>. ' +\n+ 'validateDOMNesting(...): %s cannot appear as a child of <%s>. ' +\n 'See %s.%s',\n- childTag,\n+ tagDisplayName,\n ancestorTag,\n ownerInfo,\n info\n@@ -403,9 +408,9 @@ if (__DEV__) {\n } else {\n warning(\n false,\n- 'validateDOMNesting(...): <%s> cannot appear as a descendant of ' +\n+ 'validateDOMNesting(...): %s cannot appear as a descendant of ' +\n '<%s>. See %s.',\n- childTag,\n+ tagDisplayName,\n ancestorTag,\n ownerInfo\n );\ndiff --git a\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js b\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\nindex 10c683d423..a32ba08c08 100644\n--- a\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\n+++ b\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\n@@ -103,8 +103,8 @@ describe('ReactServerRendering', function() {\n ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\">' +\n '' +\n- 'My name is <\/span>' +\n- 'child<\/span>' +\n+ 'My name is ' +\n+ 'child' +\n '<\/span>' +\n '<\/div>'\n );\n@@ -153,8 +153,8 @@ describe('ReactServerRendering', function() {\n '' +\n- 'Component name: <\/span>' +\n- 'TestComponent<\/span>' +\n+ 'Component name: ' +\n+ 'TestComponent' +\n '<\/span>'\n );\n expect(lifecycle).toEqual(\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js b\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\nindex b145ede10e..60f3f7a04d 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\n@@ -13,7 +13,6 @@\n \n var DOMChildrenOperations = require('DOMChildrenOperations');\n var DOMLazyTree = require('DOMLazyTree');\n-var DOMPropertyOperations = require('DOMPropertyOperations');\n var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactPerf = require('ReactPerf');\n \n@@ -21,16 +20,14 @@ var assign = require('Object.assign');\n var escapeTextContentForBrowser = require('escapeTextContentForBrowser');\n var validateDOMNesting = require('validateDOMNesting');\n \n-var getNode = ReactDOMComponentTree.getNodeFromInstance;\n-\n \/**\n * Text nodes violate a couple assumptions that React makes about components:\n *\n * - When mounting text into the DOM, adjacent text nodes are merged.\n * - Text nodes cannot be assigned a React root ID.\n *\n- * This component is used to wrap strings in elements so that they can undergo\n- * the same reconciliation that is applied to elements.\n+ * This component is used to wrap strings between comment nodes so that they\n+ * can undergo the same reconciliation that is applied to elements.\n *\n * TODO: Investigate representing React components in the DOM with text nodes.\n *\n@@ -49,6 +46,8 @@ var ReactDOMTextComponent = function(text) {\n \/\/ Properties\n this._domID = null;\n this._mountIndex = 0;\n+ this._openingComment = null;\n+ this._commentNodes = null;\n };\n \n assign(ReactDOMTextComponent.prototype, {\n@@ -77,34 +76,44 @@ assign(ReactDOMTextComponent.prototype, {\n if (parentInfo) {\n \/\/ parentInfo should always be present except for the top-level\n \/\/ component when server rendering\n- validateDOMNesting('span', this, parentInfo);\n+ validateDOMNesting('#text', this, parentInfo);\n }\n }\n \n var domID = nativeContainerInfo._idCounter++;\n+ var openingValue = ' react-text: ' + domID + ' ';\n+ var closingValue = ' \/react-text ';\n this._domID = domID;\n this._nativeParent = nativeParent;\n if (transaction.useCreateElement) {\n var ownerDocument = nativeContainerInfo._ownerDocument;\n- var el = ownerDocument.createElement('span');\n- ReactDOMComponentTree.precacheNode(this, el);\n- var lazyTree = DOMLazyTree(el);\n- DOMLazyTree.queueText(lazyTree, this._stringText);\n+ var openingComment = ownerDocument.createComment(openingValue);\n+ var closingComment = ownerDocument.createComment(closingValue);\n+ var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());\n+ DOMLazyTree.queueChild(lazyTree, DOMLazyTree(openingComment));\n+ if (this._stringText) {\n+ DOMLazyTree.queueChild(\n+ lazyTree,\n+ DOMLazyTree(ownerDocument.createTextNode(this._stringText))\n+ );\n+ }\n+ DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));\n+ this._openingComment = openingComment;\n+ ReactDOMComponentTree.precacheNode(this, closingComment);\n return lazyTree;\n } else {\n var escapedText = escapeTextContentForBrowser(this._stringText);\n \n if (transaction.renderToStaticMarkup) {\n- \/\/ Normally we'd wrap this in a `span` for the reasons stated above, but\n- \/\/ since this is a situation where React won't take over (static pages),\n- \/\/ we can simply return the text as it is.\n+ \/\/ Normally we'd wrap this between comment nodes for the reasons stated\n+ \/\/ above, but since this is a situation where React won't take over\n+ \/\/ (static pages), we can simply return the text as it is.\n return escapedText;\n }\n \n return (\n- '' +\n- escapedText +\n- '<\/span>'\n+ '' + escapedText +\n+ ''\n );\n }\n },\n@@ -125,16 +134,29 @@ assign(ReactDOMTextComponent.prototype, {\n \/\/ and\/or updateComponent to do the actual update for consistency with\n \/\/ other component types?\n this._stringText = nextStringText;\n- DOMChildrenOperations.updateTextContent(getNode(this), nextStringText);\n+ var commentNodes = this.getNativeNode();\n+ DOMChildrenOperations.replaceDelimitedText(\n+ commentNodes[0],\n+ commentNodes[1],\n+ nextStringText\n+ );\n }\n }\n },\n \n getNativeNode: function() {\n- return getNode(this);\n+ var nativeNode = this._commentNodes;\n+ if (nativeNode) {\n+ return nativeNode;\n+ }\n+ nativeNode = [this._openingComment, this._nativeNode];\n+ this._commentNodes = nativeNode;\n+ return nativeNode;\n },\n \n unmountComponent: function() {\n+ this._openingComment = null;\n+ this._commentNodes = null;\n ReactDOMComponentTree.uncacheNode(this);\n },\n \ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\nindex 8a48544397..96e586b06f 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n@@ -1260,8 +1260,8 @@ describe('ReactDOMComponent', function() {\n 'match the DOM tree generated by the browser.'\n );\n expect(console.error.argsForCall[1][0]).toBe(\n- 'Warning: validateDOMNesting(...): cannot appear as a child ' +\n- 'of . See Foo > table > span.'\n+ 'Warning: validateDOMNesting(...): #text cannot appear as a child ' +\n+ 'of

. See Foo > table > #text.'\n );\n });\n \ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\nindex c15b5174d1..5c3e9a2e62 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\n@@ -13,26 +13,96 @@\n \n var React;\n var ReactDOM;\n+var ReactDOMServer;\n \n describe('ReactDOMTextComponent', function() {\n beforeEach(function() {\n React = require('React');\n ReactDOM = require('ReactDOM');\n+ ReactDOMServer = require('ReactDOMServer');\n });\n \n it('updates a mounted text component in place', function() {\n var el = document.createElement('div');\n- var inst = ReactDOM.render(

{'foo'}{'bar'}<\/div>, el);\n-\n- var foo = ReactDOM.findDOMNode(inst).children[0];\n- var bar = ReactDOM.findDOMNode(inst).children[1];\n- expect(foo.tagName).toBe('SPAN');\n- expect(bar.tagName).toBe('SPAN');\n-\n- inst = ReactDOM.render(

{'baz'}{'qux'}<\/div>, el);\n- \/\/ After the update, the spans should have stayed in place (as opposed to\n- \/\/ getting unmounted and remounted)\n- expect(ReactDOM.findDOMNode(inst).children[0]).toBe(foo);\n- expect(ReactDOM.findDOMNode(inst).children[1]).toBe(bar);\n+ var inst = ReactDOM.render(

{'foo'}{'bar'}<\/div>, el);\n+\n+ var foo = ReactDOM.findDOMNode(inst).childNodes[2];\n+ var bar = ReactDOM.findDOMNode(inst).childNodes[5];\n+ expect(foo.data).toBe('foo');\n+ expect(bar.data).toBe('bar');\n+\n+ inst = ReactDOM.render(

{'baz'}{'qux'}<\/div>, el);\n+ \/\/ After the update, the text nodes should have stayed in place (as opposed\n+ \/\/ to getting unmounted and remounted)\n+ expect(ReactDOM.findDOMNode(inst).childNodes[2]).toBe(foo);\n+ expect(ReactDOM.findDOMNode(inst).childNodes[5]).toBe(bar);\n+ expect(foo.data).toBe('baz');\n+ expect(bar.data).toBe('qux');\n+ });\n+\n+ it('can be toggled in and out of the markup', function() {\n+ var el = document.createElement('div');\n+ var inst = ReactDOM.render(

{'foo'}

{'bar'}<\/div>, el);\n+\n+ var container = ReactDOM.findDOMNode(inst);\n+ var childDiv = container.childNodes[3];\n+ var childNodes;\n+\n+ inst = ReactDOM.render(

{null}

{null}<\/div>, el);\n+ container = ReactDOM.findDOMNode(inst);\n+ childNodes = container.childNodes;\n+ expect(childNodes.length).toBe(1);\n+ expect(childNodes[0]).toBe(childDiv);\n+\n+ inst = ReactDOM.render(

{'foo'}

{'bar'}<\/div>, el);\n+ container = ReactDOM.findDOMNode(inst);\n+ childNodes = container.childNodes;\n+ expect(childNodes.length).toBe(7);\n+ expect(childNodes[1].data).toBe('foo');\n+ expect(childNodes[3]).toBe(childDiv);\n+ expect(childNodes[5].data).toBe('bar');\n+ });\n+\n+ it('can reconcile text merged by Node.normalize()', function() {\n+ var el = document.createElement('div');\n+ var inst = ReactDOM.render(

{'foo'}{'bar'}{'baz'}<\/div>, el);\n+\n+ var container = ReactDOM.findDOMNode(inst);\n+ container.normalize();\n+\n+ inst = ReactDOM.render(

{'bar'}{'baz'}{'qux'}<\/div>, el);\n+ container = ReactDOM.findDOMNode(inst);\n+ expect(container.textContent).toBe('barbazqux');\n+ });\n+\n+ it('can reconcile text from pre-rendered markup', function() {\n+ var el = document.createElement('div');\n+ var reactEl =

{'foo'}{'bar'}{'baz'}<\/div>;\n+ el.innerHTML = ReactDOMServer.renderToString(reactEl);\n+\n+ ReactDOM.render(reactEl, el);\n+ expect(el.textContent).toBe('foobarbaz');\n+\n+ reactEl =

{''}{''}{''}<\/div>;\n+ el.innerHTML = ReactDOMServer.renderToString(reactEl);\n+\n+ ReactDOM.render(reactEl, el);\n+ expect(el.textContent).toBe('');\n+ });\n+\n+ it('can reconcile text arbitrarily split into multiple nodes', function() {\n+ var el = document.createElement('div');\n+ var inst = ReactDOM.render(

{'foobarbaz'}<\/div>, el);\n+\n+ var container = ReactDOM.findDOMNode(inst);\n+ var childNodes = container.childNodes;\n+ var textNode = childNodes[2];\n+ textNode.textContent = 'foo';\n+ container.insertBefore(document.createTextNode('bar'), childNodes[3]);\n+ container.insertBefore(document.createTextNode('baz'), childNodes[3]);\n+\n+ inst = ReactDOM.render(

{'barbazqux'}<\/div>, el);\n+ container = ReactDOM.findDOMNode(inst);\n+ expect(container.textContent).toBe('barbazqux');\n });\n });\ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildText-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildText-test.js\nindex f5129ff417..bb409c30ab 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildText-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildText-test.js\n@@ -49,24 +49,40 @@ var expectChildren = function(d, children) {\n expect(textNode.data).toBe('' + children);\n }\n } else {\n- expect(outerNode.childNodes.length).toBe(children.length);\n+ var openingCommentNode;\n+ var closingCommentNode;\n+ var mountIndex = 0;\n \n for (var i = 0; i < children.length; i++) {\n var child = children[i];\n \n if (typeof child === 'string') {\n- textNode = outerNode.childNodes[i].firstChild;\n+ openingCommentNode = outerNode.childNodes[mountIndex];\n+\n+ expect(openingCommentNode.nodeType).toBe(8);\n+ expect(openingCommentNode.nodeValue).toMatch(' react-text: [0-9]+ ');\n \n if (child === '') {\n- expect(textNode).toBe(null);\n+ textNode = null;\n+ closingCommentNode = openingCommentNode.nextSibling;\n+ mountIndex += 2;\n } else {\n- expect(textNode).not.toBe(null);\n+ textNode = openingCommentNode.nextSibling;\n+ closingCommentNode = textNode.nextSibling;\n+ mountIndex += 3;\n+ }\n+\n+ if (textNode) {\n expect(textNode.nodeType).toBe(3);\n expect(textNode.data).toBe('' + child);\n }\n+\n+ expect(closingCommentNode.nodeType).toBe(8);\n+ expect(closingCommentNode.nodeValue).toBe(' \/react-text ');\n } else {\n- var elementDOMNode = outerNode.childNodes[i];\n+ var elementDOMNode = outerNode.childNodes[mountIndex];\n expect(elementDOMNode.tagName).toBe('DIV');\n+ mountIndex++;\n }\n }\n }\n@@ -194,4 +210,38 @@ describe('ReactMultiChildText', function() {\n ReactTestUtils.renderIntoDocument(

{['A', 'B']}<\/h1><\/div>);\n }).not.toThrow();\n });\n+\n+ it('should reorder keyed text nodes', function() {\n+ spyOn(console, 'error');\n+\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+
{new Map([['a', 'alpha'], ['b', 'beta']])}<\/div>,\n+ container\n+ );\n+\n+ var childNodes = container.firstChild.childNodes;\n+ var alpha1 = childNodes[0];\n+ var alpha2 = childNodes[1];\n+ var alpha3 = childNodes[2];\n+ var beta1 = childNodes[3];\n+ var beta2 = childNodes[4];\n+ var beta3 = childNodes[5];\n+\n+ ReactDOM.render(\n+
{new Map([['b', 'beta'], ['a', 'alpha']])}<\/div>,\n+ container\n+ );\n+\n+ childNodes = container.firstChild.childNodes;\n+ expect(childNodes[0]).toBe(beta1);\n+ expect(childNodes[1]).toBe(beta2);\n+ expect(childNodes[2]).toBe(beta3);\n+ expect(childNodes[3]).toBe(alpha1);\n+ expect(childNodes[4]).toBe(alpha2);\n+ expect(childNodes[5]).toBe(alpha3);\n+\n+ \/\/ Using Maps as children gives a single warning\n+ expect(console.error.calls.length).toBe(1);\n+ });\n });\ndiff --git a\/src\/test\/ReactDefaultPerf.js b\/src\/test\/ReactDefaultPerf.js\nindex 185541172d..9671e3d4f4 100644\n--- a\/src\/test\/ReactDefaultPerf.js\n+++ b\/src\/test\/ReactDefaultPerf.js\n@@ -27,7 +27,7 @@ function addValue(obj, key, val) {\n obj[key] = (obj[key] || 0) + val;\n }\n \n-\/\/ Composites don't have any built-in ID: we have to make our own\n+\/\/ Composite\/text components don't have any built-in ID: we have to make our own\n var compositeIDMap;\n var compositeIDCounter = 17000;\n function getIDOfComposite(inst) {\n@@ -43,6 +43,14 @@ function getIDOfComposite(inst) {\n }\n }\n \n+function getID(inst) {\n+ if (inst.hasOwnProperty('_rootNodeID')) {\n+ return inst._rootNodeID;\n+ } else {\n+ return getIDOfComposite(inst);\n+ }\n+}\n+\n var ReactDefaultPerf = {\n _allMeasurements: [], \/\/ last item in the list is the current one\n _mountStack: [0],\n@@ -224,8 +232,10 @@ var ReactDefaultPerf = {\n } else if (fnName === 'replaceNodeWithMarkup') {\n \/\/ Old node is already unmounted; can't get its instance\n id = ReactDOMComponentTree.getInstanceFromNode(args[1].node)._rootNodeID;\n+ } else if (fnName === 'replaceDelimitedText') {\n+ id = getID(ReactDOMComponentTree.getInstanceFromNode(args[1]));\n } else if (typeof id === 'object') {\n- id = ReactDOMComponentTree.getInstanceFromNode(args[0])._rootNodeID;\n+ id = getID(ReactDOMComponentTree.getInstanceFromNode(args[0]));\n }\n ReactDefaultPerf._recordWrite(\n id,\n@@ -291,7 +301,7 @@ var ReactDefaultPerf = {\n fnName === 'receiveComponent')) {\n \n rv = func.apply(this, args);\n- entry.hierarchy[this._rootNodeID] =\n+ entry.hierarchy[getID(this)] =\n ReactDefaultPerf._compositeStack.slice();\n return rv;\n } else {\ndiff --git a\/src\/test\/ReactDefaultPerfAnalysis.js b\/src\/test\/ReactDefaultPerfAnalysis.js\nindex ab707e298a..80452c4ddf 100644\n--- a\/src\/test\/ReactDefaultPerfAnalysis.js\n+++ b\/src\/test\/ReactDefaultPerfAnalysis.js\n@@ -27,6 +27,7 @@ var DOM_OPERATION_TYPES = {\n 'deleteValueForProperty': 'remove attribute',\n 'setValueForStyles': 'update styles',\n 'replaceNodeWithMarkup': 'replace',\n+ 'replaceDelimitedText': 'replace',\n 'updateTextContent': 'set textContent',\n };\n \n","body":"Don't wrap text in elements"}

dillon1000/react

Files changed