{children}<\/div>;\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain(\n+ 'Any use of a keyed object'\n+ );\n+ \/\/ Only warn once for the same set of children\n+ var sameChildren = {\n+ x: ,\n+ y: \n+ };\n+

{sameChildren}<\/div>;\n+ expect(console.warn.calls.length).toBe(1);\n+ });\n+\n+ it('should warn if a plain object even if it is deep', function() {\n+ spyOn(console, 'warn');\n+ var children = {\n+ x: ,\n+ y: ,\n+ z: \n+ };\n+ var element =

{[children]}<\/div>;\n+ expect(console.warn.calls.length).toBe(0);\n+ var container = document.createElement('div');\n+ React.render(element, container);\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain(\n+ 'Any use of a keyed object'\n+ );\n+ });\n+\n+ it('should warn if accessing any property on a fragment', function() {\n+ spyOn(console, 'warn');\n+ var children = {\n+ x: ,\n+ y: \n+ };\n+ var frag = ReactFragment.create(children);\n+ frag.x;\n+ frag.y = 10;\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain(\n+ 'A ReactFragment is an opaque type'\n+ );\n+ });\n+\n+});\ndiff --git a\/src\/addons\/transitions\/ReactTransitionChildMapping.js b\/src\/addons\/transitions\/ReactTransitionChildMapping.js\nindex c339196e4a..1daa1e1666 100644\n--- a\/src\/addons\/transitions\/ReactTransitionChildMapping.js\n+++ b\/src\/addons\/transitions\/ReactTransitionChildMapping.js\n@@ -13,6 +13,7 @@\n 'use strict';\n \n var ReactChildren = require('ReactChildren');\n+var ReactFragment = require('ReactFragment');\n \n var ReactTransitionChildMapping = {\n \/**\n@@ -23,9 +24,12 @@ var ReactTransitionChildMapping = {\n * @return {object} Mapping of key to child\n *\/\n getChildMapping: function(children) {\n- return ReactChildren.map(children, function(child) {\n+ if (!children) {\n+ return children;\n+ }\n+ return ReactFragment.extract(ReactChildren.map(children, function(child) {\n return child;\n- });\n+ }));\n },\n \n \/**\ndiff --git a\/src\/addons\/transitions\/ReactTransitionGroup.js b\/src\/addons\/transitions\/ReactTransitionGroup.js\nindex 448f2f3554..bb99b66284 100644\n--- a\/src\/addons\/transitions\/ReactTransitionGroup.js\n+++ b\/src\/addons\/transitions\/ReactTransitionGroup.js\n@@ -202,7 +202,7 @@ var ReactTransitionGroup = React.createClass({\n render: function() {\n \/\/ TODO: we could get rid of the need for the wrapper node\n \/\/ by cloning a single child\n- var childrenToRender = {};\n+ var childrenToRender = [];\n for (var key in this.state.children) {\n var child = this.state.children[key];\n if (child) {\n@@ -211,10 +211,10 @@ var ReactTransitionGroup = React.createClass({\n \/\/ already been removed. In case you need this behavior you can provide\n \/\/ a childFactory function to wrap every child, even the ones that are\n \/\/ leaving.\n- childrenToRender[key] = cloneWithProps(\n+ childrenToRender.push(cloneWithProps(\n this.props.childFactory(child),\n- {ref: key}\n- );\n+ {ref: key, key: key}\n+ ));\n }\n }\n return React.createElement(\ndiff --git a\/src\/browser\/ReactWithAddons.js b\/src\/browser\/ReactWithAddons.js\nindex 6a70b210e7..6dfe9da083 100644\n--- a\/src\/browser\/ReactWithAddons.js\n+++ b\/src\/browser\/ReactWithAddons.js\n@@ -23,6 +23,7 @@ var React = require('React');\n var ReactComponentWithPureRenderMixin =\n require('ReactComponentWithPureRenderMixin');\n var ReactCSSTransitionGroup = require('ReactCSSTransitionGroup');\n+var ReactFragment = require('ReactFragment');\n var ReactTransitionGroup = require('ReactTransitionGroup');\n var ReactUpdates = require('ReactUpdates');\n \n@@ -39,6 +40,7 @@ React.addons = {\n batchedUpdates: ReactUpdates.batchedUpdates,\n classSet: cx,\n cloneWithProps: cloneWithProps,\n+ createFragment: ReactFragment.create,\n update: update\n };\n \ndiff --git a\/src\/browser\/__tests__\/ReactDOM-test.js b\/src\/browser\/__tests__\/ReactDOM-test.js\nindex 31fc33a514..2feace23ad 100644\n--- a\/src\/browser\/__tests__\/ReactDOM-test.js\n+++ b\/src\/browser\/__tests__\/ReactDOM-test.js\n@@ -75,37 +75,37 @@ describe('ReactDOM', function() {\n *\/\n it(\"should purge the DOM cache when removing nodes\", function() {\n var myDiv = ReactTestUtils.renderIntoDocument(\n-

{{\n- theDog:

,\n- theBird:

\n- }}<\/div>\n+

\n+

,\n+

\n+ <\/div>\n );\n \/\/ Warm the cache with theDog\n myDiv.setProps({\n- children: {\n- theDog:

,\n- theBird:

\n- }\n+ children: [\n+

,\n+

\n+ ]\n });\n \/\/ Remove theDog - this should purge the cache\n myDiv.setProps({\n- children: {\n- theBird:

\n- }\n+ children: [\n+

\n+ ]\n });\n \/\/ Now, put theDog back. It's now a different DOM node.\n myDiv.setProps({\n- children: {\n- theDog:

,\n- theBird:

\n- }\n+ children: [\n+

,\n+

\n+ ]\n });\n \/\/ Change the className of theDog. It will use the same element\n myDiv.setProps({\n- children: {\n- theDog:

,\n- theBird:

\n- }\n+ children: [\n+

,\n+

\n+ ]\n });\n var root = myDiv.getDOMNode();\n var dog = root.childNodes[0];\ndiff --git a\/src\/classic\/element\/ReactElementValidator.js b\/src\/classic\/element\/ReactElementValidator.js\nindex 52d69d5e6e..c1c7e30607 100644\n--- a\/src\/classic\/element\/ReactElementValidator.js\n+++ b\/src\/classic\/element\/ReactElementValidator.js\n@@ -19,6 +19,7 @@\n 'use strict';\n \n var ReactElement = require('ReactElement');\n+var ReactFragment = require('ReactFragment');\n var ReactPropTypeLocations = require('ReactPropTypeLocations');\n var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');\n var ReactCurrentOwner = require('ReactCurrentOwner');\n@@ -175,21 +176,6 @@ function warnAndMonitorForKeyUse(warningID, message, element, parentType) {\n console.warn(message);\n }\n \n-\/**\n- * Log that we're using an object map. We're considering deprecating this\n- * feature and replace it with proper Map and ImmutableMap data structures.\n- *\n- * @internal\n- *\/\n-function monitorUseOfObjectMap() {\n- var currentName = getCurrentOwnerDisplayName() || '';\n- if (ownerHasMonitoredObjectMap.hasOwnProperty(currentName)) {\n- return;\n- }\n- ownerHasMonitoredObjectMap[currentName] = true;\n- monitorCodeUse('react_object_map_children');\n-}\n-\n \/**\n * Ensure that every element either is passed in a static location, in an\n * array with an explicit keys property defined, or in an object literal\n@@ -213,19 +199,21 @@ function validateChildKeys(node, parentType) {\n } else if (node) {\n var iteratorFn = getIteratorFn(node);\n \/\/ Entry iterators provide implicit keys.\n- if (iteratorFn && iteratorFn !== node.entries) {\n- var iterator = iteratorFn.call(node);\n- var step;\n- while (!(step = iterator.next()).done) {\n- if (ReactElement.isValidElement(step.value)) {\n- validateExplicitKey(step.value, parentType);\n+ if (iteratorFn) {\n+ if (iteratorFn !== node.entries) {\n+ var iterator = iteratorFn.call(node);\n+ var step;\n+ while (!(step = iterator.next()).done) {\n+ if (ReactElement.isValidElement(step.value)) {\n+ validateExplicitKey(step.value, parentType);\n+ }\n }\n }\n } else if (typeof node === 'object') {\n- monitorUseOfObjectMap();\n- for (var key in node) {\n- if (node.hasOwnProperty(key)) {\n- validatePropertyKey(key, node[key], parentType);\n+ var fragment = ReactFragment.extractIfFragment(node);\n+ for (var key in fragment) {\n+ if (fragment.hasOwnProperty(key)) {\n+ validatePropertyKey(key, fragment[key], parentType);\n }\n }\n }\ndiff --git a\/src\/classic\/element\/__tests__\/ReactElementValidator-test.js b\/src\/classic\/element\/__tests__\/ReactElementValidator-test.js\nindex 7bfc37ff35..a922ffbbbb 100644\n--- a\/src\/classic\/element\/__tests__\/ReactElementValidator-test.js\n+++ b\/src\/classic\/element\/__tests__\/ReactElementValidator-test.js\n@@ -15,6 +15,7 @@\n \/\/ classic JS without JSX.\n \n var React;\n+var ReactFragment;\n var ReactTestUtils;\n \n describe('ReactElementValidator', function() {\n@@ -24,12 +25,17 @@ describe('ReactElementValidator', function() {\n require('mock-modules').dumpCache();\n \n React = require('React');\n+ ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n ComponentClass = React.createClass({\n render: function() { return React.createElement('div'); }\n });\n });\n \n+ function frag(obj) {\n+ return ReactFragment.create(obj);\n+ }\n+\n it('warns for keys for arrays of elements in rest args', function() {\n spyOn(console, 'warn');\n var Component = React.createFactory(ComponentClass);\n@@ -135,7 +141,7 @@ describe('ReactElementValidator', function() {\n spyOn(console, 'warn');\n var Component = React.createFactory(ComponentClass);\n \n- Component(null, { 1: Component(), 2: Component() });\n+ Component(null, frag({ 1: Component(), 2: Component() }));\n \n expect(console.warn.argsForCall.length).toBe(1);\n expect(console.warn.argsForCall[0][0]).toContain(\n@@ -316,4 +322,12 @@ describe('ReactElementValidator', function() {\n expect(console.warn.calls.length).toBe(2);\n });\n \n+ it('should warn if a fragment is used without the wrapper', function () {\n+ spyOn(console, 'warn');\n+ var child = React.createElement('span');\n+ React.createElement('div', null, { a: child, b: child });\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain('use of a keyed object');\n+ });\n+\n });\ndiff --git a\/src\/core\/__tests__\/ReactIdentity-test.js b\/src\/core\/__tests__\/ReactIdentity-test.js\nindex 366920db19..c93ecdd450 100644\n--- a\/src\/core\/__tests__\/ReactIdentity-test.js\n+++ b\/src\/core\/__tests__\/ReactIdentity-test.js\n@@ -12,6 +12,7 @@\n 'use strict';\n \n var React;\n+var ReactFragment;\n var ReactTestUtils;\n var reactComponentExpect;\n var ReactMount;\n@@ -21,6 +22,7 @@ describe('ReactIdentity', function() {\n beforeEach(function() {\n require('mock-modules').dumpCache();\n React = require('React');\n+ ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n reactComponentExpect = require('reactComponentExpect');\n ReactMount = require('ReactMount');\n@@ -35,13 +37,17 @@ describe('ReactIdentity', function() {\n expect(actual[1]).toEqual(expected[1]);\n }\n \n+ function frag(obj) {\n+ return ReactFragment.create(obj);\n+ }\n+\n it('should allow keyed objects to express identity', function() {\n var instance =\n

\n- {{\n+ {frag({\n first:

,\n second:

\n- }}\n+ })}\n <\/div>;\n \n instance = React.render(instance, document.createElement('div'));\n@@ -106,7 +112,7 @@ describe('ReactIdentity', function() {\n \n var map = {};\n map[key] = span2;\n- return

{[span1, map]}<\/div>;\n+ return

{[span1, frag(map)]}<\/div>;\n }\n \n });\ndiff --git a\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js b\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\nindex 4948e8f39c..ebbe661d83 100644\n--- a\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\n+++ b\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\n@@ -39,7 +39,7 @@ var stripEmptyValues = function(obj) {\n * here. This relies on an implementation detail of the rendering system.\n *\/\n var getOriginalKey = function(childName) {\n- var match = childName.match(\/^\\.\\$([^.]+)\\:0$\/);\n+ var match = childName.match(\/^\\.\\$([^.]+)$\/);\n expect(match).not.toBeNull();\n return match[1];\n };\n@@ -107,13 +107,14 @@ var FriendsStatusDisplay = React.createClass({\n return res;\n },\n render: function() {\n- var children = null;\n+ var children = [];\n var key;\n for (key in this.props.usernameToStatus) {\n var status = this.props.usernameToStatus[key];\n- children = children || {};\n- children[key] = !status ? null :\n- ;\n+ children.push(\n+ !status ? null :\n+ \n+ );\n }\n return (\n

\ndiff --git a\/src\/core\/__tests__\/ReactMultiChildText-test.js b\/src\/core\/__tests__\/ReactMultiChildText-test.js\nindex 0efdc812fc..764dd1b746 100644\n--- a\/src\/core\/__tests__\/ReactMultiChildText-test.js\n+++ b\/src\/core\/__tests__\/ReactMultiChildText-test.js\n@@ -16,10 +16,13 @@\n require('mock-modules');\n \n var React = require('React');\n+var ReactFragment = require('ReactFragment');\n var ReactTestUtils = require('ReactTestUtils');\n \n var reactComponentExpect = require('reactComponentExpect');\n \n+var frag = ReactFragment.create;\n+\n \/\/ Helpers\n var testAllPermutations = function(testCases) {\n for (var i = 0; i < testCases.length; i += 2) {\n@@ -182,18 +185,18 @@ describe('ReactMultiChildText', function() {\n ['', 'foo', [true,

, 1.2, ''], 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n \n \/\/ values inside objects\n- [{a: true}, {a: true}], [],\n- [{a: 1.2}, {a: 1.2}], ['1.2', '1.2'],\n- [{a: ''}, {a: ''}], ['', ''],\n- [{a: 'foo'}, {a: 'foo'}], ['foo', 'foo'],\n- [{a:

}, {a:

}], [

],\n-\n- [{a: true, b: 1.2, c:

}, '', 'foo'], ['1.2',

, '', 'foo'],\n- [1.2, '', {a:

, b: 'foo', c: true}], ['1.2', '',

, 'foo'],\n- ['', {a: 'foo', b:

, c: true}, 1.2], ['', 'foo',

, '1.2'],\n-\n- [true, {a: 1.2, b: '', c:

, d: 'foo'}, true, 1.2], ['1.2', '',

, 'foo', '1.2'],\n- ['', 'foo', {a: true, b:

, c: 1.2, d: ''}, 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n+ [frag({a: true}), frag({a: true})], [],\n+ [frag({a: 1.2}), frag({a: 1.2})], ['1.2', '1.2'],\n+ [frag({a: ''}), frag({a: ''})], ['', ''],\n+ [frag({a: 'foo'}), frag({a: 'foo'})], ['foo', 'foo'],\n+ [frag({a:

}), frag({a:

})], [

],\n+\n+ [frag({a: true, b: 1.2, c:

}), '', 'foo'], ['1.2',

, '', 'foo'],\n+ [1.2, '', frag({a:

, b: 'foo', c: true})], ['1.2', '',

, 'foo'],\n+ ['', frag({a: 'foo', b:

, c: true}), 1.2], ['', 'foo',

, '1.2'],\n+\n+ [true, frag({a: 1.2, b: '', c:

, d: 'foo'}), true, 1.2], ['1.2', '',

, 'foo', '1.2'],\n+ ['', 'foo', frag({a: true, b:

, c: 1.2, d: ''}), 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n \n \/\/ values inside elements\n [

{true}{1.2}{

}<\/div>, '', 'foo'], [

, '', 'foo'],\ndiff --git a\/src\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js b\/src\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\nindex c1c05fb946..d664a24d27 100644\n--- a\/src\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\n+++ b\/src\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\n@@ -15,6 +15,7 @@\n \/\/ of dynamic errors when using JSX with Flow.\n \n var React;\n+var ReactFragment;\n var ReactTestUtils;\n \n describe('ReactJSXElementValidator', function() {\n@@ -24,6 +25,7 @@ describe('ReactJSXElementValidator', function() {\n require('mock-modules').dumpCache();\n \n React = require('React');\n+ ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n \n Component = class {\n@@ -31,6 +33,10 @@ describe('ReactJSXElementValidator', function() {\n };\n });\n \n+ function frag(obj) {\n+ return ReactFragment.create(obj);\n+ }\n+\n it('warns for keys for arrays of elements in children position', function() {\n spyOn(console, 'warn');\n \n@@ -128,7 +134,7 @@ describe('ReactJSXElementValidator', function() {\n it('warns for numeric keys on objects as children', function() {\n spyOn(console, 'warn');\n \n- {{ 1: , 2: }}<\/Component>;\n+ {frag({ 1: , 2: })}<\/Component>;\n \n expect(console.warn.argsForCall.length).toBe(1);\n expect(console.warn.argsForCall[0][0]).toContain(\ndiff --git a\/src\/utils\/ReactChildren.js b\/src\/utils\/ReactChildren.js\nindex 24edcd42e6..4109557dde 100644\n--- a\/src\/utils\/ReactChildren.js\n+++ b\/src\/utils\/ReactChildren.js\n@@ -12,6 +12,7 @@\n 'use strict';\n \n var PooledClass = require('PooledClass');\n+var ReactFragment = require('ReactFragment');\n \n var traverseAllChildren = require('traverseAllChildren');\n var warning = require('warning');\n@@ -121,7 +122,7 @@ function mapChildren(children, func, context) {\n var traverseContext = MapBookKeeping.getPooled(mapResult, func, context);\n traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);\n MapBookKeeping.release(traverseContext);\n- return mapResult;\n+ return ReactFragment.create(mapResult);\n }\n \n function forEachSingleChildDummy(traverseContext, child, name, i) {\ndiff --git a\/src\/utils\/__tests__\/ReactChildren-test.js b\/src\/utils\/__tests__\/ReactChildren-test.js\nindex 550af41eb7..8a271de6be 100644\n--- a\/src\/utils\/__tests__\/ReactChildren-test.js\n+++ b\/src\/utils\/__tests__\/ReactChildren-test.js\n@@ -14,12 +14,31 @@\n describe('ReactChildren', function() {\n var ReactChildren;\n var React;\n+ var ReactFragment;\n \n beforeEach(function() {\n ReactChildren = require('ReactChildren');\n React = require('React');\n+ ReactFragment = require('ReactFragment');\n });\n \n+ function frag(obj) {\n+ return ReactFragment.create(obj);\n+ }\n+\n+ function nthChild(mappedChildren, n) {\n+ var result = null;\n+ ReactChildren.forEach(mappedChildren, function(child, index) {\n+ if (index === n) {\n+ result = child;\n+ }\n+ });\n+ return result;\n+ }\n+\n+ function keyOfNthChild(mappedChildren, n) {\n+ return Object.keys(ReactFragment.extract(mappedChildren))[n];\n+ }\n \n it('should support identity for simple', function() {\n var callback = jasmine.createSpy().andCallFake(function(kid, index) {\n@@ -37,7 +56,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);\n+ expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n });\n \n it('should treat single arrayless child as being in array', function() {\n@@ -52,7 +71,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);\n+ expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n });\n \n it('should treat single child in array as expected', function() {\n@@ -67,7 +86,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);\n+ expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n });\n \n it('should pass key to returned component', function() {\n@@ -80,11 +99,10 @@ describe('ReactChildren', function() {\n var instance =

{simpleKid}<\/div>;\n var mappedChildren = ReactChildren.map(instance.props.children, mapFn);\n \n- var mappedKeys = Object.keys(mappedChildren);\n- expect(mappedKeys.length).toBe(1);\n- expect(mappedChildren[mappedKeys[0]]).not.toBe(simpleKid);\n- expect(mappedChildren[mappedKeys[0]].props.children).toBe(simpleKid);\n- expect(mappedKeys[0]).toBe('.$simple');\n+ expect(ReactChildren.count(mappedChildren)).toBe(1);\n+ expect(nthChild(mappedChildren, 0)).not.toBe(simpleKid);\n+ expect(nthChild(mappedChildren, 0).props.children).toBe(simpleKid);\n+ expect(keyOfNthChild(mappedChildren, 0)).toBe('.$simple');\n });\n \n it('should invoke callback with the right context', function() {\n@@ -94,7 +112,8 @@ describe('ReactChildren', function() {\n return this;\n };\n \n- var scopeTester = {};\n+ \/\/ TODO: Use an object to test, after non-object fragments has fully landed.\n+ var scopeTester = 'scope tester';\n \n var simpleKid = ;\n var instance =

{simpleKid}<\/div>;\n@@ -104,9 +123,8 @@ describe('ReactChildren', function() {\n var mappedChildren =\n ReactChildren.map(instance.props.children, callback, scopeTester);\n \n- var mappedKeys = Object.keys(mappedChildren);\n- expect(mappedKeys.length).toBe(1);\n- expect(mappedChildren[mappedKeys[0]]).toBe(scopeTester);\n+ expect(ReactChildren.count(mappedChildren)).toBe(1);\n+ expect(nthChild(mappedChildren, 0)).toBe(scopeTester);\n });\n \n it('should be called for each child', function() {\n@@ -149,28 +167,33 @@ describe('ReactChildren', function() {\n \n var mappedChildren =\n ReactChildren.map(instance.props.children, callback);\n- var mappedKeys = Object.keys(mappedChildren);\n expect(callback.calls.length).toBe(5);\n- expect(mappedKeys.length).toBe(5);\n+ expect(ReactChildren.count(mappedChildren)).toBe(5);\n \/\/ Keys default to indices.\n- expect(mappedKeys).toEqual(\n+ expect([\n+ keyOfNthChild(mappedChildren, 0),\n+ keyOfNthChild(mappedChildren, 1),\n+ keyOfNthChild(mappedChildren, 2),\n+ keyOfNthChild(mappedChildren, 3),\n+ keyOfNthChild(mappedChildren, 4)\n+ ]).toEqual(\n ['.$keyZero', '.1', '.$keyTwo', '.3', '.$keyFour']\n );\n \n expect(callback).toHaveBeenCalledWith(zero, 0);\n- expect(mappedChildren[mappedKeys[0]]).toBe(zeroMapped);\n+ expect(nthChild(mappedChildren, 0)).toBe(zeroMapped);\n \n expect(callback).toHaveBeenCalledWith(one, 1);\n- expect(mappedChildren[mappedKeys[1]]).toBe(oneMapped);\n+ expect(nthChild(mappedChildren, 1)).toBe(oneMapped);\n \n expect(callback).toHaveBeenCalledWith(two, 2);\n- expect(mappedChildren[mappedKeys[2]]).toBe(twoMapped);\n+ expect(nthChild(mappedChildren, 2)).toBe(twoMapped);\n \n expect(callback).toHaveBeenCalledWith(three, 3);\n- expect(mappedChildren[mappedKeys[3]]).toBe(threeMapped);\n+ expect(nthChild(mappedChildren, 3)).toBe(threeMapped);\n \n expect(callback).toHaveBeenCalledWith(four, 4);\n- expect(mappedChildren[mappedKeys[4]]).toBe(fourMapped);\n+ expect(nthChild(mappedChildren, 4)).toBe(fourMapped);\n });\n \n \n@@ -204,11 +227,11 @@ describe('ReactChildren', function() {\n \n var instance = (\n

{\n- [{\n+ [frag({\n firstHalfKey: [zero, one, two],\n secondHalfKey: [three, four],\n keyFive: five\n- }]\n+ })]\n }<\/div>\n );\n \n@@ -222,11 +245,17 @@ describe('ReactChildren', function() {\n callback.reset();\n \n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n- var mappedKeys = Object.keys(mappedChildren);\n expect(callback.calls.length).toBe(6);\n- expect(mappedKeys.length).toBe(6);\n+ expect(ReactChildren.count(mappedChildren)).toBe(6);\n \/\/ Keys default to indices.\n- expect(mappedKeys).toEqual([\n+ expect([\n+ keyOfNthChild(mappedChildren, 0),\n+ keyOfNthChild(mappedChildren, 1),\n+ keyOfNthChild(mappedChildren, 2),\n+ keyOfNthChild(mappedChildren, 3),\n+ keyOfNthChild(mappedChildren, 4),\n+ keyOfNthChild(mappedChildren, 5)\n+ ]).toEqual([\n '.0:$firstHalfKey:0:$keyZero',\n '.0:$firstHalfKey:0:1',\n '.0:$firstHalfKey:0:$keyTwo',\n@@ -236,22 +265,22 @@ describe('ReactChildren', function() {\n ]);\n \n expect(callback).toHaveBeenCalledWith(zero, 0);\n- expect(mappedChildren[mappedKeys[0]]).toBe(zeroMapped);\n+ expect(nthChild(mappedChildren, 0)).toBe(zeroMapped);\n \n expect(callback).toHaveBeenCalledWith(one, 1);\n- expect(mappedChildren[mappedKeys[1]]).toBe(oneMapped);\n+ expect(nthChild(mappedChildren, 1)).toBe(oneMapped);\n \n expect(callback).toHaveBeenCalledWith(two, 2);\n- expect(mappedChildren[mappedKeys[2]]).toBe(twoMapped);\n+ expect(nthChild(mappedChildren, 2)).toBe(twoMapped);\n \n expect(callback).toHaveBeenCalledWith(three, 3);\n- expect(mappedChildren[mappedKeys[3]]).toBe(threeMapped);\n+ expect(nthChild(mappedChildren, 3)).toBe(threeMapped);\n \n expect(callback).toHaveBeenCalledWith(four, 4);\n- expect(mappedChildren[mappedKeys[4]]).toBe(fourMapped);\n+ expect(nthChild(mappedChildren, 4)).toBe(fourMapped);\n \n expect(callback).toHaveBeenCalledWith(five, 5);\n- expect(mappedChildren[mappedKeys[5]]).toBe(fiveMapped);\n+ expect(nthChild(mappedChildren, 5)).toBe(fiveMapped);\n });\n \n it('should retain key across two mappings', function() {\n@@ -325,7 +354,8 @@ describe('ReactChildren', function() {\n var mapped = ReactChildren.map(instance.props.children, mapFn);\n \n expect(console.warn.calls.length).toEqual(1);\n- expect(mapped).toEqual({'.$something': zero});\n+ expect(nthChild(mapped, 0)).toBe(zero);\n+ expect(keyOfNthChild(mapped, 0)).toBe('.$something');\n });\n \n it('should return 0 for null children', function() {\n@@ -380,14 +410,49 @@ describe('ReactChildren', function() {\n \n var instance = (\n

{\n- [{\n+ [frag({\n firstHalfKey: [zero, one, two],\n secondHalfKey: [three, four],\n keyFive: five\n- }]\n+ })]\n }<\/div>\n );\n var numberOfChildren = ReactChildren.count(instance.props.children);\n expect(numberOfChildren).toBe(6);\n });\n+\n+ it('should warn if a fragment is used without the wrapper', function () {\n+ spyOn(console, 'warn');\n+ var child = React.createElement('span');\n+ ReactChildren.forEach({ a: child, b: child}, function(c) {\n+ expect(c).toBe(child);\n+ });\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain('use of a keyed object');\n+ });\n+\n+ it('should warn if a fragment is accessed', function () {\n+ spyOn(console, 'warn');\n+ var child = React.createElement('span');\n+ var frag = ReactChildren.map([ child, child ], function(c) {\n+ return c;\n+ });\n+ for (var key in frag) {\n+ frag[key];\n+ break;\n+ }\n+ expect(console.warn.calls.length).toBe(1);\n+ expect(console.warn.calls[0].args[0]).toContain('is an opaque type');\n+\n+ var frag2 = ReactChildren.map([ child, child ], function(c) {\n+ return c;\n+ });\n+ for (var key in frag2) {\n+ frag2[key] = 123;\n+ break;\n+ }\n+ expect(console.warn.calls.length).toBe(2);\n+ expect(console.warn.calls[1].args[0]).toContain('is an immutable opaque');\n+ });\n+\n });\ndiff --git a\/src\/utils\/__tests__\/onlyChild-test.js b\/src\/utils\/__tests__\/onlyChild-test.js\nindex 835bf794d9..29a7c77226 100644\n--- a\/src\/utils\/__tests__\/onlyChild-test.js\n+++ b\/src\/utils\/__tests__\/onlyChild-test.js\n@@ -14,11 +14,13 @@\n describe('onlyChild', function() {\n \n var React;\n+ var ReactFragment;\n var onlyChild;\n var WrapComponent;\n \n beforeEach(function() {\n React = require('React');\n+ ReactFragment = require('ReactFragment');\n onlyChild = require('onlyChild');\n WrapComponent = React.createClass({\n render: function() {\n@@ -64,7 +66,7 @@ describe('onlyChild', function() {\n expect(function() {\n var instance =\n \n- {{oneThing: }}\n+ {ReactFragment.create({oneThing: })}\n <\/WrapComponent>;\n onlyChild(instance.props.children);\n }).toThrow();\ndiff --git a\/src\/utils\/__tests__\/sliceChildren-test.js b\/src\/utils\/__tests__\/sliceChildren-test.js\nindex 47afb17d86..065da44697 100644\n--- a\/src\/utils\/__tests__\/sliceChildren-test.js\n+++ b\/src\/utils\/__tests__\/sliceChildren-test.js\n@@ -14,6 +14,7 @@\n describe('sliceChildren', function() {\n \n var React;\n+ var ReactFragment;\n var ReactTestUtils;\n \n var sliceChildren;\n@@ -23,6 +24,7 @@ describe('sliceChildren', function() {\n \n beforeEach(function() {\n React = require('React');\n+ ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n \n sliceChildren = require('sliceChildren');\n@@ -52,6 +54,11 @@ describe('sliceChildren', function() {\n return rendered.props.children;\n }\n \n+ function testKeyValuePairs(children, expectedPairs) {\n+ var obj = ReactFragment.extract(children);\n+ expect(obj).toEqual(expectedPairs);\n+ }\n+\n it('should render the whole set if start zero is supplied', function() {\n var fullSet = [\n

,\n@@ -59,7 +66,7 @@ describe('sliceChildren', function() {\n

\n ];\n var children = renderAndSlice(fullSet, 0);\n- expect(children).toEqual({\n+ testKeyValuePairs(children, {\n '.$A': fullSet[0],\n '.$B': fullSet[1],\n '.$C': fullSet[2]\n@@ -73,7 +80,7 @@ describe('sliceChildren', function() {\n

\n ];\n var children = renderAndSlice(fullSet, 1);\n- expect(children).toEqual({\n+ testKeyValuePairs(children, {\n '.$B': fullSet[1],\n '.$C': fullSet[2]\n });\n@@ -87,7 +94,7 @@ describe('sliceChildren', function() {\n

\n ];\n var children = renderAndSlice(fullSet, 1, 2);\n- expect(children).toEqual({\n+ testKeyValuePairs(children, {\n '.$B': fullSet[1]\n });\n });\n@@ -103,7 +110,7 @@ describe('sliceChildren', function() {\n .expectRenderedChild()\n .instance();\n \n- expect(rendered.props.children).toEqual({\n+ testKeyValuePairs(rendered.props.children, {\n '.1': b\n });\n });\ndiff --git a\/src\/utils\/__tests__\/traverseAllChildren-test.js b\/src\/utils\/__tests__\/traverseAllChildren-test.js\nindex c32e07c66d..91b51f0292 100644\n--- a\/src\/utils\/__tests__\/traverseAllChildren-test.js\n+++ b\/src\/utils\/__tests__\/traverseAllChildren-test.js\n@@ -14,11 +14,16 @@\n describe('traverseAllChildren', function() {\n var traverseAllChildren;\n var React;\n+ var ReactFragment;\n beforeEach(function() {\n traverseAllChildren = require('traverseAllChildren');\n React = require('React');\n+ ReactFragment = require('ReactFragment');\n });\n \n+ function frag(obj) {\n+ return ReactFragment.create(obj);\n+ }\n \n it('should support identity for simple', function() {\n var traverseContext = [];\n@@ -139,8 +144,8 @@ describe('traverseAllChildren', function() {\n var instance = (\n

\n {div}\n- {[{span}]}\n- {{a: a}}\n+ {[frag({span})]}\n+ {frag({a: a})}\n {'string'}\n {1234}\n {true}\n@@ -206,11 +211,11 @@ describe('traverseAllChildren', function() {\n \n var instance = (\n

{\n- [{\n+ [frag({\n firstHalfKey: [zero, one, two],\n secondHalfKey: [three, four],\n keyFive: five\n- }]\n+ })]\n }<\/div>\n );\n \ndiff --git a\/src\/utils\/sliceChildren.js b\/src\/utils\/sliceChildren.js\nindex fee13fc6c0..22a01dea14 100644\n--- a\/src\/utils\/sliceChildren.js\n+++ b\/src\/utils\/sliceChildren.js\n@@ -11,6 +11,8 @@\n \n 'use strict';\n \n+var ReactFragment = require('ReactFragment');\n+\n var flattenChildren = require('flattenChildren');\n \n \/**\n@@ -43,7 +45,7 @@ function sliceChildren(children, start, end) {\n break;\n }\n }\n- return slicedChildren;\n+ return ReactFragment.create(slicedChildren);\n }\n \n module.exports = sliceChildren;\ndiff --git a\/src\/utils\/traverseAllChildren.js b\/src\/utils\/traverseAllChildren.js\nindex d0a31fd489..da8fd53bb9 100644\n--- a\/src\/utils\/traverseAllChildren.js\n+++ b\/src\/utils\/traverseAllChildren.js\n@@ -12,6 +12,7 @@\n 'use strict';\n \n var ReactElement = require('ReactElement');\n+var ReactFragment = require('ReactFragment');\n var ReactInstanceHandles = require('ReactInstanceHandles');\n \n var getIteratorFn = require('getIteratorFn');\n@@ -184,9 +185,10 @@ function traverseAllChildrenImpl(\n 'traverseAllChildren(...): Encountered an invalid child; DOM ' +\n 'elements are not valid children of React components.'\n );\n- for (var key in children) {\n- if (children.hasOwnProperty(key)) {\n- child = children[key];\n+ var fragment = ReactFragment.extract(children);\n+ for (var key in fragment) {\n+ if (fragment.hasOwnProperty(key)) {\n+ child = fragment[key];\n nextName = (\n (nameSoFar !== '' ? nameSoFar + SUBSEPARATOR : SEPARATOR) +\n wrapUserProvidedKey(key) + SUBSEPARATOR +\n"}

dillon1000/react

Files changed