{"parents":["127917d45406be08d7faf81adeea6cdac1cba1a6","6abf025d4656abcc90e2ed71c66793377fbba233"],"commit":{"revision":"72d5b8f116e49c382e979f2064ee8d86c5d0b251","authoredAt":"2015-08-26T11:12:06-07:00","subject":"Merge pull request #4700 from spicyj\/frag-array","shortRevision":"72d5b8f116","authorName":"Ben Alpert","authorEmail":"ben@benalpert.com"},"files":[{"path":"src\/addons\/ReactFragment.js","status":"M"},{"path":"src\/addons\/__tests__\/ReactFragment-test.js","status":"M"},{"path":"src\/addons\/transitions\/ReactTransitionChildMapping.js","status":"M"},{"path":"src\/isomorphic\/children\/ReactChildren.js","status":"M"},{"path":"src\/isomorphic\/children\/__tests__\/ReactChildren-test.js","status":"M"},{"path":"src\/isomorphic\/children\/__tests__\/sliceChildren-test.js","status":"M"},{"path":"src\/isomorphic\/children\/sliceChildren.js","status":"M"},{"path":"src\/isomorphic\/classic\/element\/ReactElementValidator.js","status":"M"},{"path":"src\/isomorphic\/classic\/element\/__tests__\/ReactElementValidator-test.js","status":"M"},{"path":"src\/isomorphic\/classic\/types\/ReactPropTypes.js","status":"M"},{"path":"src\/isomorphic\/classic\/types\/__tests__\/ReactPropTypes-test.js","status":"M"},{"path":"src\/isomorphic\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js","status":"M"},{"path":"src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js","status":"M"},{"path":"src\/shared\/utils\/__tests__\/traverseAllChildren-test.js","status":"M"},{"path":"src\/shared\/utils\/traverseAllChildren.js","status":"M"}],"body":"Make createFragment return an array, disallow objects as children","patch":"diff --git a\/src\/addons\/ReactFragment.js b\/src\/addons\/ReactFragment.js\nindex cb32b43566..d5862dd972 100644\n--- a\/src\/addons\/ReactFragment.js\n+++ b\/src\/addons\/ReactFragment.js\n@@ -13,6 +13,8 @@\n \n var ReactElement = require('ReactElement');\n \n+var invariant = require('invariant');\n+var traverseAllChildren = require('traverseAllChildren');\n var warning = require('warning');\n \n \/**\n@@ -20,86 +22,26 @@ var warning = require('warning');\n * or nested sets. This allowed us a way to explicitly key a set a fragment of\n * components. This is now being replaced with an opaque data structure.\n * The upgrade path is to call React.addons.createFragment({ key: value }) to\n- * create a keyed fragment. The resulting data structure is opaque, for now.\n+ * create a keyed fragment. The resulting data structure is an array.\n *\/\n \n-var fragmentKey;\n-var didWarnKey;\n-var canWarnForReactFragment;\n+var numericPropertyRegex = \/^\\d+$\/;\n \n-if (__DEV__) {\n- fragmentKey = '_reactFragment';\n- didWarnKey = '_reactDidWarn';\n-\n- try {\n- \/\/ Feature test. Don't even try to issue this warning if we can't use\n- \/\/ enumerable: false.\n-\n- var dummy = function() {\n- return 1;\n- };\n-\n- Object.defineProperty(\n- {},\n- fragmentKey,\n- {enumerable: false, value: true}\n- );\n-\n- Object.defineProperty(\n- {},\n- 'key',\n- {enumerable: true, get: dummy}\n- );\n+var userProvidedKeyEscapeRegex = \/\\\/\/g;\n+function escapeUserProvidedKey(text) {\n+ return ('' + text).replace(userProvidedKeyEscapeRegex, '\/\/');\n+}\n \n- canWarnForReactFragment = true;\n- } catch (x) {\n- canWarnForReactFragment = false;\n+function processSingleChildWithContext(ctx, child, childKey) {\n+ if (ReactElement.isValidElement(child)) {\n+ child = ReactElement.cloneAndReplaceKey(child, ctx.prefix + childKey);\n }\n-\n- var proxyPropertyAccessWithWarning = function(obj, key) {\n- Object.defineProperty(obj, key, {\n- enumerable: true,\n- get: function() {\n- warning(\n- this[didWarnKey],\n- 'A ReactFragment is an opaque type. Accessing any of its ' +\n- 'properties is deprecated. Pass it to one of the React.Children ' +\n- 'helpers.'\n- );\n- this[didWarnKey] = true;\n- return this[fragmentKey][key];\n- },\n- set: function(value) {\n- warning(\n- this[didWarnKey],\n- 'A ReactFragment is an immutable opaque type. Mutating its ' +\n- 'properties is deprecated.'\n- );\n- this[didWarnKey] = true;\n- this[fragmentKey][key] = value;\n- },\n- });\n- };\n-\n- var issuedWarnings = {};\n-\n- var getFragmentKeyString = function(fragment) {\n- var fragmentCacheKey = '';\n- for (var key in fragment) {\n- fragmentCacheKey += key + ':' + (typeof fragment[key]) + ',';\n- }\n- return fragmentCacheKey;\n- };\n-\n- var didWarnForFragment = function(fragmentCacheKey) {\n- \/\/ We use the keys and the type of the value as a heuristic to dedupe the\n- \/\/ warning to avoid spamming too much.\n- var alreadyWarnedOnce = !!issuedWarnings[fragmentCacheKey];\n- issuedWarnings[fragmentCacheKey] = true;\n- return alreadyWarnedOnce;\n- };\n+ \/\/ For text components, leave unkeyed\n+ ctx.result.push(child);\n }\n \n+var warnedAboutNumeric = false;\n+\n var ReactFragment = {\n \/\/ Wrap a keyed object in an opaque proxy that warns you if you access any\n \/\/ of its properties.\n@@ -121,71 +63,35 @@ var ReactFragment = {\n );\n return object;\n }\n- if (canWarnForReactFragment) {\n- var proxy = {};\n- Object.defineProperty(proxy, fragmentKey, {\n- enumerable: false,\n- value: object,\n- });\n- Object.defineProperty(proxy, didWarnKey, {\n- writable: true,\n- enumerable: false,\n- value: false,\n- });\n- for (var key in object) {\n- proxyPropertyAccessWithWarning(proxy, key);\n- }\n- Object.preventExtensions(proxy);\n- return proxy;\n- }\n }\n- return object;\n- },\n- \/\/ Extract the original keyed object from the fragment opaque type. Warn if\n- \/\/ a plain object is passed here.\n- extract: function(fragment) {\n- if (__DEV__) {\n- if (canWarnForReactFragment) {\n- if (!fragment[fragmentKey]) {\n- var fragmentKeys = getFragmentKeyString(fragment);\n+ invariant(\n+ object.nodeType !== 1,\n+ 'React.addons.createFragment(...): Encountered an invalid child; DOM ' +\n+ 'elements are not valid children of React components.'\n+ );\n+\n+ var result = [];\n+ var context = {\n+ result: result,\n+ prefix: '',\n+ };\n+\n+ for (var key in object) {\n+ if (__DEV__) {\n+ if (!warnedAboutNumeric && numericPropertyRegex.test(key)) {\n warning(\n- didWarnForFragment(fragmentKeys),\n- 'Any use of a keyed object should be wrapped in ' +\n- 'React.addons.createFragment(object) before being passed as a ' +\n- 'child. {%s}',\n- fragmentKeys\n+ false,\n+ 'React.addons.createFragment(...): Child objects should have ' +\n+ 'non-numeric keys so ordering is preserved.'\n );\n- return fragment;\n- }\n- return fragment[fragmentKey];\n- }\n- }\n- return fragment;\n- },\n- \/\/ Check if this is a fragment and if so, extract the keyed object. If it\n- \/\/ is a fragment-like object, warn that it should be wrapped. Ignore if we\n- \/\/ can't determine what kind of object this is.\n- extractIfFragment: function(fragment) {\n- if (__DEV__) {\n- if (canWarnForReactFragment) {\n- \/\/ If it is the opaque type, return the keyed object.\n- if (fragment[fragmentKey]) {\n- return fragment[fragmentKey];\n- }\n- \/\/ Otherwise, check each property if it has an element, if it does\n- \/\/ it is probably meant as a fragment, so we can warn early. Defer,\n- \/\/ the warning to extract.\n- for (var key in fragment) {\n- if (fragment.hasOwnProperty(key) &&\n- ReactElement.isValidElement(fragment[key])) {\n- \/\/ This looks like a fragment object, we should provide an\n- \/\/ early warning.\n- return ReactFragment.extract(fragment);\n- }\n+ warnedAboutNumeric = true;\n }\n }\n+ context.prefix = escapeUserProvidedKey(key) + '\/';\n+ traverseAllChildren(object[key], processSingleChildWithContext, context);\n }\n- return fragment;\n+\n+ return result;\n },\n };\n \ndiff --git a\/src\/addons\/__tests__\/ReactFragment-test.js b\/src\/addons\/__tests__\/ReactFragment-test.js\nindex 25db57467e..5bb71bb264 100644\n--- a\/src\/addons\/__tests__\/ReactFragment-test.js\n+++ b\/src\/addons\/__tests__\/ReactFragment-test.js\n@@ -23,51 +23,23 @@ describe('ReactFragment', function() {\n ReactFragment = require('ReactFragment');\n });\n \n- it('should warn if a plain object is used as a child', function() {\n- spyOn(console, 'error');\n- var children = {\n- x: ,\n- y: ,\n- };\n- void

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

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

{[children]}<\/div>;\n- expect(console.error.calls.length).toBe(0);\n var container = document.createElement('div');\n- ReactDOM.render(element, container);\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.calls[0].args[0]).toContain(\n- 'Any use of a keyed object'\n- );\n- expect(console.error.calls[0].args[0]).toContain(\n- '{x:object,y:object,z:object,}'\n+ expect(() => ReactDOM.render(element, container)).toThrow(\n+ 'Invariant Violation: Objects are not valid as a React child (found ' +\n+ 'object with keys {x, y, z}). If you meant to render a collection of ' +\n+ 'children, use an array instead or wrap the object using ' +\n+ 'React.addons.createFragment(object).'\n );\n });\n \n- it('should warn if a plain object even if it is in an owner', function() {\n- spyOn(console, 'error');\n+ it('should throw if a plain object even if it is in an owner', function() {\n class Foo {\n render() {\n var children = {\n@@ -78,27 +50,23 @@ describe('ReactFragment', function() {\n return

{[children]}<\/div>;\n }\n }\n- expect(console.error.calls.length).toBe(0);\n var container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.calls[0].args[0]).toContain(\n- 'Any use of a keyed object'\n+ expect(() => ReactDOM.render(, container)).toThrow(\n+ 'Invariant Violation: Objects are not valid as a React child (found ' +\n+ 'object with keys {a, b, c}). If you meant to render a collection of ' +\n+ 'children, use an array instead or wrap the object using ' +\n+ 'React.addons.createFragment(object). Check the render method of `Foo`.'\n );\n });\n \n- it('should warn if accessing any property on a fragment', function() {\n+ it('warns for numeric keys on objects as children', function() {\n spyOn(console, 'error');\n- var children = {\n- x: ,\n- y: ,\n- };\n- var frag = ReactFragment.create(children);\n- void frag.x;\n- frag.y = 10;\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.calls[0].args[0]).toContain(\n- 'A ReactFragment is an opaque type'\n+\n+ ReactFragment.create({1: , 2: });\n+\n+ expect(console.error.argsForCall.length).toBe(1);\n+ expect(console.error.argsForCall[0][0]).toContain(\n+ 'Child objects should have non-numeric keys so ordering is preserved.'\n );\n });\n \ndiff --git a\/src\/addons\/transitions\/ReactTransitionChildMapping.js b\/src\/addons\/transitions\/ReactTransitionChildMapping.js\nindex 7bea6b55a2..f0b9e90177 100644\n--- a\/src\/addons\/transitions\/ReactTransitionChildMapping.js\n+++ b\/src\/addons\/transitions\/ReactTransitionChildMapping.js\n@@ -12,13 +12,12 @@\n \n 'use strict';\n \n-var ReactChildren = require('ReactChildren');\n-var ReactFragment = require('ReactFragment');\n+var flattenChildren = require('flattenChildren');\n \n var ReactTransitionChildMapping = {\n \/**\n * Given `this.props.children`, return an object mapping key to child. Just\n- * simple syntactic sugar around ReactChildren.map().\n+ * simple syntactic sugar around flattenChildren().\n *\n * @param {*} children `this.props.children`\n * @return {object} Mapping of key to child\n@@ -27,9 +26,7 @@ var ReactTransitionChildMapping = {\n if (!children) {\n return children;\n }\n- return ReactFragment.extract(ReactChildren.map(children, function(child) {\n- return child;\n- }));\n+ return flattenChildren(children);\n },\n \n \/**\ndiff --git a\/src\/isomorphic\/children\/ReactChildren.js b\/src\/isomorphic\/children\/ReactChildren.js\nindex c17d502a25..9abb0d966a 100644\n--- a\/src\/isomorphic\/children\/ReactChildren.js\n+++ b\/src\/isomorphic\/children\/ReactChildren.js\n@@ -146,7 +146,7 @@ function countChildren(children, context) {\n }\n \n \n-function pushSingleChildToArray(traverseContext, child, name, i) {\n+function pushSingleChildToArray(traverseContext, child, name) {\n if (child == null) {\n return;\n }\ndiff --git a\/src\/isomorphic\/children\/__tests__\/ReactChildren-test.js b\/src\/isomorphic\/children\/__tests__\/ReactChildren-test.js\nindex 3f6c1cf058..2c4abe8080 100644\n--- a\/src\/isomorphic\/children\/__tests__\/ReactChildren-test.js\n+++ b\/src\/isomorphic\/children\/__tests__\/ReactChildren-test.js\n@@ -22,20 +22,6 @@ describe('ReactChildren', function() {\n ReactFragment = require('ReactFragment');\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 return kid;\n@@ -52,7 +38,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n+ expect(mappedChildren[0]).toEqual();\n });\n \n it('should treat single arrayless child as being in array', function() {\n@@ -67,7 +53,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n+ expect(mappedChildren[0]).toEqual();\n });\n \n it('should treat single child in array as expected', function() {\n@@ -82,7 +68,7 @@ describe('ReactChildren', function() {\n callback.reset();\n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0);\n- expect(nthChild(mappedChildren, 0)).toBe(simpleKid);\n+ expect(mappedChildren[0]).toEqual();\n \n });\n \n@@ -97,9 +83,9 @@ describe('ReactChildren', function() {\n var mappedChildren = ReactChildren.map(instance.props.children, mapFn);\n \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+ expect(mappedChildren[0]).not.toBe(simpleKid);\n+ expect(mappedChildren[0].props.children).toBe(simpleKid);\n+ expect(mappedChildren[0].key).toBe('.$simple\/.0');\n });\n \n it('should invoke callback with the right context', function() {\n@@ -121,7 +107,7 @@ describe('ReactChildren', function() {\n ReactChildren.map(instance.props.children, callback, scopeTester);\n \n expect(ReactChildren.count(mappedChildren)).toBe(1);\n- expect(nthChild(mappedChildren, 0)).toBe(scopeTester);\n+ expect(mappedChildren[0]).toBe(scopeTester);\n });\n \n it('should be called for each child', function() {\n@@ -165,35 +151,30 @@ describe('ReactChildren', function() {\n var mappedChildren =\n ReactChildren.map(instance.props.children, callback);\n expect(callback.calls.length).toBe(5);\n- expect(ReactChildren.count(mappedChildren)).toBe(5);\n+ expect(ReactChildren.count(mappedChildren)).toBe(4);\n \/\/ Keys default to indices.\n expect([\n- keyOfNthChild(mappedChildren, 0),\n- keyOfNthChild(mappedChildren, 1),\n- keyOfNthChild(mappedChildren, 2),\n- keyOfNthChild(mappedChildren, 3),\n- keyOfNthChild(mappedChildren, 4),\n+ mappedChildren[0].key,\n+ mappedChildren[1].key,\n+ mappedChildren[2].key,\n+ mappedChildren[3].key,\n ]).toEqual(\n- ['.$keyZero', '.1', '.$keyTwo', '.3', '.$keyFour']\n+ ['.$keyZero\/.$giraffe', '.$keyTwo\/.0', '.3\/.0', '.$keyFour\/.$keyFour']\n );\n \n expect(callback).toHaveBeenCalledWith(zero, 0);\n- expect(nthChild(mappedChildren, 0)).toBe(zeroMapped);\n+ expect(mappedChildren[0]).toEqual(

);\n \n expect(callback).toHaveBeenCalledWith(one, 1);\n- expect(nthChild(mappedChildren, 1)).toBe(oneMapped);\n+ expect(mappedChildren[1]).toEqual(

);\n \n expect(callback).toHaveBeenCalledWith(two, 2);\n- expect(nthChild(mappedChildren, 2)).toBe(twoMapped);\n+ expect(mappedChildren[2]).toEqual();\n \n expect(callback).toHaveBeenCalledWith(three, 3);\n- expect(nthChild(mappedChildren, 3)).toBe(threeMapped);\n-\n- expect(callback).toHaveBeenCalledWith(four, 4);\n- expect(nthChild(mappedChildren, 4)).toBe(fourMapped);\n+ expect(mappedChildren[3]).toEqual(

);\n });\n \n-\n it('should be called for each child in nested structure', function() {\n var zero =

;\n var one = null;\n@@ -222,64 +203,54 @@ describe('ReactChildren', function() {\n index === 4 ? fourMapped : fiveMapped;\n });\n \n- var instance = (\n-

{\n- [\n- ReactFragment.create({\n- firstHalfKey: [zero, one, two],\n- secondHalfKey: [three, four],\n- keyFive: five,\n- }),\n- ]\n- }<\/div>\n- );\n+ var frag = ReactFragment.create({\n+ firstHalfKey: [zero, one, two],\n+ secondHalfKey: [three, four],\n+ keyFive: five,\n+ });\n+ var instance =

{[frag]}<\/div>;\n \n ReactChildren.forEach(instance.props.children, callback);\n- expect(callback).toHaveBeenCalledWith(zero, 0);\n- expect(callback).toHaveBeenCalledWith(one, 1);\n- expect(callback).toHaveBeenCalledWith(two, 2);\n- expect(callback).toHaveBeenCalledWith(three, 3);\n- expect(callback).toHaveBeenCalledWith(four, 4);\n- expect(callback).toHaveBeenCalledWith(five, 5);\n+ expect(callback).toHaveBeenCalledWith(frag[0], 0);\n+ expect(callback).toHaveBeenCalledWith(frag[1], 1);\n+ expect(callback).toHaveBeenCalledWith(frag[2], 2);\n+ expect(callback).toHaveBeenCalledWith(frag[3], 3);\n+ expect(callback).toHaveBeenCalledWith(frag[4], 4);\n+ expect(callback).toHaveBeenCalledWith(frag[5], 5);\n callback.reset();\n \n var mappedChildren = ReactChildren.map(instance.props.children, callback);\n expect(callback.calls.length).toBe(6);\n- expect(ReactChildren.count(mappedChildren)).toBe(6);\n+ expect(ReactChildren.count(mappedChildren)).toBe(5);\n \/\/ Keys default to indices.\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+ mappedChildren[0].key,\n+ mappedChildren[1].key,\n+ mappedChildren[2].key,\n+ mappedChildren[3].key,\n+ mappedChildren[4].key,\n ]).toEqual([\n- '.0:$firstHalfKey:0:$keyZero',\n- '.0:$firstHalfKey:0:1',\n- '.0:$firstHalfKey:0:$keyTwo',\n- '.0:$secondHalfKey:0:0',\n- '.0:$secondHalfKey:0:$keyFour',\n- '.0:$keyFive:$keyFiveInner',\n+ '.0:$firstHalfKey\/\/=1$keyZero\/.$giraffe',\n+ '.0:$firstHalfKey\/\/=1$keyTwo\/.0',\n+ '.0:3\/.0',\n+ '.0:$secondHalfKey\/\/=1$keyFour\/.$keyFour',\n+ '.0:$keyFive\/\/=1$keyFiveInner\/.0',\n ]);\n \n- expect(callback).toHaveBeenCalledWith(zero, 0);\n- expect(nthChild(mappedChildren, 0)).toBe(zeroMapped);\n+ expect(callback).toHaveBeenCalledWith(frag[0], 0);\n+ expect(mappedChildren[0]).toEqual(

);\n \n- expect(callback).toHaveBeenCalledWith(one, 1);\n- expect(nthChild(mappedChildren, 1)).toBe(oneMapped);\n+ expect(callback).toHaveBeenCalledWith(frag[1], 1);\n+ expect(mappedChildren[1]).toEqual(

);\n \n- expect(callback).toHaveBeenCalledWith(two, 2);\n- expect(nthChild(mappedChildren, 2)).toBe(twoMapped);\n-\n- expect(callback).toHaveBeenCalledWith(three, 3);\n- expect(nthChild(mappedChildren, 3)).toBe(threeMapped);\n+ expect(callback).toHaveBeenCalledWith(frag[2], 2);\n+ expect(mappedChildren[2]).toEqual();\n \n- expect(callback).toHaveBeenCalledWith(four, 4);\n- expect(nthChild(mappedChildren, 4)).toBe(fourMapped);\n+ expect(callback).toHaveBeenCalledWith(frag[3], 3);\n+ expect(mappedChildren[3]).toEqual(

);\n \n- expect(callback).toHaveBeenCalledWith(five, 5);\n- expect(nthChild(mappedChildren, 5)).toBe(fiveMapped);\n+ expect(callback).toHaveBeenCalledWith(frag[4], 4);\n+ expect(mappedChildren[4]).toEqual(

);\n });\n \n it('should retain key across two mappings', function() {\n@@ -302,20 +273,20 @@ describe('ReactChildren', function() {\n <\/div>\n );\n \n- var expectedForcedKeys = ['.$keyZero', '.$keyOne'];\n+ var expectedForcedKeys = ['.$keyZero\/.$giraffe', '.$keyOne\/.0'];\n var mappedChildrenForcedKeys =\n ReactChildren.map(forcedKeys.props.children, mapFn);\n- var mappedForcedKeys = Object.keys(mappedChildrenForcedKeys);\n+ var mappedForcedKeys = mappedChildrenForcedKeys.map((c) => c.key);\n expect(mappedForcedKeys).toEqual(expectedForcedKeys);\n \n var expectedRemappedForcedKeys = [\n- '.$=1$keyZero:$giraffe',\n- '.$=1$keyOne:0',\n+ '.$=1$keyZero\/\/=1$giraffe\/.$giraffe',\n+ '.$=1$keyOne\/\/=10\/.0',\n ];\n var remappedChildrenForcedKeys =\n ReactChildren.map(mappedChildrenForcedKeys, mapFn);\n expect(\n- Object.keys(remappedChildrenForcedKeys)\n+ remappedChildrenForcedKeys.map((c) => c.key)\n ).toEqual(expectedRemappedForcedKeys);\n \n });\n@@ -355,8 +326,7 @@ describe('ReactChildren', function() {\n var mapped = ReactChildren.map(instance.props.children, mapFn);\n \n expect(console.error.calls.length).toEqual(1);\n- expect(nthChild(mapped, 0)).toBe(zero);\n- expect(keyOfNthChild(mapped, 0)).toBe('.$something');\n+ expect(mapped[0]).toEqual(

);\n });\n \n it('should return 0 for null children', function() {\n@@ -424,40 +394,6 @@ describe('ReactChildren', function() {\n expect(numberOfChildren).toBe(6);\n });\n \n- it('should warn if a fragment is used without the wrapper', function() {\n- spyOn(console, 'error');\n- var child = React.createElement('span');\n- ReactChildren.forEach({a: child, b: child}, function(c) {\n- expect(c).toBe(child);\n- });\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.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, 'error');\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- void frag[key];\n- break;\n- }\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.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 key2 in frag2) {\n- frag2[key2] = 123;\n- break;\n- }\n- expect(console.error.calls.length).toBe(2);\n- expect(console.error.calls[1].args[0]).toContain('is an immutable opaque');\n- });\n-\n it('should flatten children to an array', function() {\n expect(ReactChildren.toArray(undefined)).toEqual([]);\n expect(ReactChildren.toArray(null)).toEqual([]);\ndiff --git a\/src\/isomorphic\/children\/__tests__\/sliceChildren-test.js b\/src\/isomorphic\/children\/__tests__\/sliceChildren-test.js\nindex 385e4ea142..0f9cbcff13 100644\n--- a\/src\/isomorphic\/children\/__tests__\/sliceChildren-test.js\n+++ b\/src\/isomorphic\/children\/__tests__\/sliceChildren-test.js\n@@ -14,22 +14,15 @@\n describe('sliceChildren', function() {\n \n var React;\n- var ReactFragment;\n \n var sliceChildren;\n \n beforeEach(function() {\n React = require('React');\n- ReactFragment = require('ReactFragment');\n \n sliceChildren = require('sliceChildren');\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@@ -37,11 +30,11 @@ describe('sliceChildren', function() {\n

,\n ];\n var children = sliceChildren(fullSet, 0);\n- testKeyValuePairs(children, {\n- '.$A': fullSet[0],\n- '.$B': fullSet[1],\n- '.$C': fullSet[2],\n- });\n+ expect(children).toEqual([\n+

,\n+

,\n+ ]);\n });\n \n it('should render the remaining set if no end index is supplied', function() {\n@@ -51,10 +44,10 @@ describe('sliceChildren', function() {\n

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

,\n+

,\n+ ]);\n });\n \n it('should exclude everything at or after the end index', function() {\n@@ -65,21 +58,36 @@ describe('sliceChildren', function() {\n

,\n ];\n var children = sliceChildren(fullSet, 1, 2);\n- testKeyValuePairs(children, {\n- '.$B': fullSet[1],\n- });\n+ expect(children).toEqual([\n+

,\n+ ]);\n });\n \n it('should allow static children to be sliced', function() {\n- var a =

;\n- var b =

;\n- var c =

;\n+ var a = ;\n+ var b = ;\n+ var c = ;\n \n var el = {a}{b}{c}<\/div>;\n var children = sliceChildren(el.props.children, 1, 2);\n- testKeyValuePairs(children, {\n- '.1': b,\n- });\n+ expect(children).toEqual([\n+ ,\n+ ]);\n+ });\n+\n+ it('should slice nested children', function() {\n+ var fullSet = [\n+ ,\n+ [\n+
,\n+
,\n+ ],\n+
,\n+ ];\n+ var children = sliceChildren(fullSet, 1, 2);\n+ expect(children).toEqual([\n+
,\n+ ]);\n });\n \n });\ndiff --git a\/src\/isomorphic\/children\/sliceChildren.js b\/src\/isomorphic\/children\/sliceChildren.js\nindex 22a01dea14..35a2af0bf0 100644\n--- a\/src\/isomorphic\/children\/sliceChildren.js\n+++ b\/src\/isomorphic\/children\/sliceChildren.js\n@@ -11,9 +11,7 @@\n \n 'use strict';\n \n-var ReactFragment = require('ReactFragment');\n-\n-var flattenChildren = require('flattenChildren');\n+var ReactChildren = require('ReactChildren');\n \n \/**\n * Slice children that are typically specified as `props.children`. This version\n@@ -29,23 +27,8 @@ function sliceChildren(children, start, end) {\n return children;\n }\n \n- var slicedChildren = {};\n- var flattenedMap = flattenChildren(children);\n- var ii = 0;\n- for (var key in flattenedMap) {\n- if (!flattenedMap.hasOwnProperty(key)) {\n- continue;\n- }\n- var child = flattenedMap[key];\n- if (ii >= start) {\n- slicedChildren[key] = child;\n- }\n- ii++;\n- if (end != null && ii >= end) {\n- break;\n- }\n- }\n- return ReactFragment.create(slicedChildren);\n+ var array = ReactChildren.toArray(children);\n+ return array.slice(start, end);\n }\n \n module.exports = sliceChildren;\ndiff --git a\/src\/isomorphic\/classic\/element\/ReactElementValidator.js b\/src\/isomorphic\/classic\/element\/ReactElementValidator.js\nindex 203bab1ee2..b3af56bb25 100644\n--- a\/src\/isomorphic\/classic\/element\/ReactElementValidator.js\n+++ b\/src\/isomorphic\/classic\/element\/ReactElementValidator.js\n@@ -19,7 +19,6 @@\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@@ -47,8 +46,6 @@ var ownerHasKeyUseWarning = {};\n \n var loggedTypeFailures = {};\n \n-var NUMERIC_PROPERTY_REGEX = \/^\\d+$\/;\n-\n \/**\n * Warn if the element doesn't have an explicit key assigned to it.\n * This element is in an array. The array could grow and shrink or be\n@@ -80,34 +77,6 @@ function validateExplicitKey(element, parentType) {\n );\n }\n \n-\/**\n- * Warn if the key is being defined as an object property but has an incorrect\n- * value.\n- *\n- * @internal\n- * @param {string} name Property name of the key.\n- * @param {ReactElement} element Component that requires a key.\n- * @param {*} parentType element's parent's type.\n- *\/\n-function validatePropertyKey(name, element, parentType) {\n- if (!NUMERIC_PROPERTY_REGEX.test(name)) {\n- return;\n- }\n- var addenda = getAddendaForKeyUse('numericKeys', element, parentType);\n- if (addenda === null) {\n- \/\/ we already showed the warning\n- return;\n- }\n- warning(\n- false,\n- 'Child objects should have non-numeric keys so ordering is preserved.' +\n- '%s%s%s',\n- addenda.parentOrOwner || '',\n- addenda.childOwner || '',\n- addenda.url || ''\n- );\n-}\n-\n \/**\n * Shared warning and monitoring code for the key warnings.\n *\n@@ -189,13 +158,6 @@ function validateChildKeys(node, parentType) {\n }\n }\n }\n- } else if (typeof node === 'object') {\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 }\n }\n }\ndiff --git a\/src\/isomorphic\/classic\/element\/__tests__\/ReactElementValidator-test.js b\/src\/isomorphic\/classic\/element\/__tests__\/ReactElementValidator-test.js\nindex 5710819882..b09b661b5d 100644\n--- a\/src\/isomorphic\/classic\/element\/__tests__\/ReactElementValidator-test.js\n+++ b\/src\/isomorphic\/classic\/element\/__tests__\/ReactElementValidator-test.js\n@@ -16,7 +16,6 @@\n \n var React;\n var ReactDOM;\n-var ReactFragment;\n var ReactTestUtils;\n \n describe('ReactElementValidator', function() {\n@@ -27,7 +26,6 @@ describe('ReactElementValidator', function() {\n \n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n ComponentClass = React.createClass({\n render: function() {\n@@ -36,10 +34,6 @@ describe('ReactElementValidator', 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 rest args', function() {\n spyOn(console, 'error');\n var Component = React.createFactory(ComponentClass);\n@@ -205,41 +199,6 @@ describe('ReactElementValidator', function() {\n expect(console.error.argsForCall.length).toBe(0);\n });\n \n- it('warns for numeric keys on objects in rest args', function() {\n- spyOn(console, 'error');\n- var Component = React.createFactory(ComponentClass);\n-\n- Component(null, frag({1: Component(), 2: Component()}));\n-\n- expect(console.error.argsForCall.length).toBe(1);\n- expect(console.error.argsForCall[0][0]).toContain(\n- 'Child objects should have non-numeric keys so ordering is preserved.'\n- );\n- });\n-\n- it('does not warn for numeric keys in entry iterables in rest args',\n- function() {\n- spyOn(console, 'error');\n- var Component = React.createFactory(ComponentClass);\n-\n- var iterable = {\n- '@@iterator': function() {\n- var i = 0;\n- return {\n- next: function() {\n- var done = ++i > 2;\n- return {value: done ? undefined : [i, Component()], done: done};\n- },\n- };\n- },\n- };\n- iterable.entries = iterable['@@iterator'];\n-\n- Component(null, iterable);\n-\n- expect(console.error.argsForCall.length).toBe(0);\n- });\n-\n it('does not warn when the element is directly in rest args', function() {\n spyOn(console, 'error');\n var Component = React.createFactory(ComponentClass);\n@@ -454,14 +413,6 @@ describe('ReactElementValidator', function() {\n );\n });\n \n- it('should warn if a fragment is used without the wrapper', function() {\n- spyOn(console, 'error');\n- var child = React.createElement('span');\n- React.createElement('div', null, {a: child, b: child});\n- expect(console.error.calls.length).toBe(1);\n- expect(console.error.calls[0].args[0]).toContain('use of a keyed object');\n- });\n-\n it('should warn when accessing .type on an element factory', function() {\n spyOn(console, 'error');\n var TestComponent = React.createClass({\ndiff --git a\/src\/isomorphic\/classic\/types\/ReactPropTypes.js b\/src\/isomorphic\/classic\/types\/ReactPropTypes.js\nindex 9400cd76fa..5e8b1d2391 100644\n--- a\/src\/isomorphic\/classic\/types\/ReactPropTypes.js\n+++ b\/src\/isomorphic\/classic\/types\/ReactPropTypes.js\n@@ -12,7 +12,6 @@\n 'use strict';\n \n var ReactElement = require('ReactElement');\n-var ReactFragment = require('ReactFragment');\n var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');\n \n var emptyFunction = require('emptyFunction');\n@@ -371,12 +370,7 @@ function isNode(propValue) {\n }\n }\n } else {\n- propValue = ReactFragment.extractIfFragment(propValue);\n- for (var k in propValue) {\n- if (!isNode(propValue[k])) {\n- return false;\n- }\n- }\n+ return false;\n }\n \n return true;\ndiff --git a\/src\/isomorphic\/classic\/types\/__tests__\/ReactPropTypes-test.js b\/src\/isomorphic\/classic\/types\/__tests__\/ReactPropTypes-test.js\nindex 95ca5cac45..aa23672d92 100644\n--- a\/src\/isomorphic\/classic\/types\/__tests__\/ReactPropTypes-test.js\n+++ b\/src\/isomorphic\/classic\/types\/__tests__\/ReactPropTypes-test.js\n@@ -368,6 +368,7 @@ describe('ReactPropTypes', function() {\n typeCheckFail(PropTypes.node, true, failMessage);\n typeCheckFail(PropTypes.node, function() {}, failMessage);\n typeCheckFail(PropTypes.node, {key: function() {}}, failMessage);\n+ typeCheckFail(PropTypes.node, {key:
}, failMessage);\n });\n \n it('should not warn for valid values', function() {\n@@ -377,7 +378,6 @@ describe('ReactPropTypes', function() {\n typeCheckPass(PropTypes.node, );\n typeCheckPass(PropTypes.node, 'Some string');\n typeCheckPass(PropTypes.node, []);\n- typeCheckPass(PropTypes.node, {});\n \n typeCheckPass(PropTypes.node, [\n 123,\n@@ -402,20 +402,6 @@ describe('ReactPropTypes', function() {\n k5: undefined,\n }));\n expect(console.error.calls).toEqual([]);\n-\n- \/\/ This should also pass, though it warns\n- typeCheckPass(PropTypes.node, {\n- k0: 123,\n- k1: 'Some string',\n- k2:
,\n- k3: {\n- k30: ,\n- k31: {k310: },\n- k32: 'Another string',\n- },\n- k4: null,\n- k5: undefined,\n- });\n });\n \n it('should not warn for iterables', function() {\ndiff --git a\/src\/isomorphic\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js b\/src\/isomorphic\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\nindex 2ad1ec5f77..97b86d4902 100644\n--- a\/src\/isomorphic\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\n+++ b\/src\/isomorphic\/modern\/element\/__tests__\/ReactJSXElementValidator-test.js\n@@ -15,7 +15,6 @@\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@@ -26,7 +25,6 @@ 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@@ -44,10 +42,6 @@ describe('ReactJSXElementValidator', function() {\n RequiredPropComponent.propTypes = {prop: React.PropTypes.string.isRequired};\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, 'error');\n \n@@ -142,17 +136,6 @@ describe('ReactJSXElementValidator', function() {\n expect(console.error.argsForCall.length).toBe(0);\n });\n \n- it('warns for numeric keys on objects as children', function() {\n- spyOn(console, 'error');\n-\n- void {frag({1: , 2: })}<\/Component>;\n-\n- expect(console.error.argsForCall.length).toBe(1);\n- expect(console.error.argsForCall[0][0]).toContain(\n- 'Child objects should have non-numeric keys so ordering is preserved.'\n- );\n- });\n-\n it('does not warn for numeric keys in entry iterable as a child', function() {\n spyOn(console, 'error');\n \ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\nindex 8609371307..4cabcd9c01 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\n@@ -53,8 +53,8 @@ describe('ReactIdentity', function() {\n instance = ReactDOM.render(instance, document.createElement('div'));\n var node = ReactDOM.findDOMNode(instance);\n expect(node.childNodes.length).toBe(2);\n- checkID(node.childNodes[0], '.0.$first:0');\n- checkID(node.childNodes[1], '.0.$second:0');\n+ checkID(node.childNodes[0], '.0.$first\/=10');\n+ checkID(node.childNodes[1], '.0.$second\/=10');\n });\n \n it('should allow key property to express identity', function() {\n@@ -125,9 +125,9 @@ describe('ReactIdentity', function() {\n expect(ReactDOM.findDOMNode(span2)).not.toBe(null);\n \n key = key.replace(\/=\/g, '=0');\n-\n checkID(ReactDOM.findDOMNode(span1), '.0.$' + key);\n- checkID(ReactDOM.findDOMNode(span2), '.0.1:$' + key + ':0');\n+ key = key.replace(\/\\\/\/g, '\/\/');\n+ checkID(ReactDOM.findDOMNode(span2), '.0.1:$' + key + '\/=10');\n }\n \n it('should allow any character as a key, in a detached parent', function() {\ndiff --git a\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js b\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\nindex 7c2f678f1a..26fb2e4580 100644\n--- a\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\n+++ b\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\n@@ -162,10 +162,10 @@ describe('traverseAllChildren', function() {\n traverseContext, div, '.$divNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n- traverseContext, span, '.1:0:$span:$spanNode'\n+ traverseContext, , '.1:0:$span\/=1$spanNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n- traverseContext, a, '.2:$a:$aNode'\n+ traverseContext, , '.2:$a\/=1$aNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext, 'string', '.3'\n@@ -224,35 +224,26 @@ describe('traverseAllChildren', function() {\n expect(traverseContext.length).toEqual(6);\n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n- zero,\n- '.0:$firstHalfKey:0:$keyZero'\n- );\n-\n- expect(traverseFn)\n- .toHaveBeenCalledWith(traverseContext, one, '.0:$firstHalfKey:0:1');\n-\n- expect(traverseFn).toHaveBeenCalledWith(\n- traverseContext,\n- two,\n- '.0:$firstHalfKey:0:$keyTwo'\n+
,\n+ '.0:$firstHalfKey\/=1$keyZero'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n- three,\n- '.0:$secondHalfKey:0:0'\n+
,\n+ '.0:$firstHalfKey\/=1$keyTwo'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n- four,\n- '.0:$secondHalfKey:0:$keyFour'\n+
,\n+ '.0:$secondHalfKey\/=1$keyFour'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n- five,\n- '.0:$keyFive:$keyFiveInner'\n+
,\n+ '.0:$keyFive\/=1$keyFiveInner'\n );\n });\n \ndiff --git a\/src\/shared\/utils\/traverseAllChildren.js b\/src\/shared\/utils\/traverseAllChildren.js\nindex b708ecb1aa..c9f19de131 100644\n--- a\/src\/shared\/utils\/traverseAllChildren.js\n+++ b\/src\/shared\/utils\/traverseAllChildren.js\n@@ -11,8 +11,8 @@\n \n 'use strict';\n \n+var ReactCurrentOwner = require('ReactCurrentOwner');\n var ReactElement = require('ReactElement');\n-var ReactFragment = require('ReactFragment');\n var ReactInstanceHandles = require('ReactInstanceHandles');\n \n var getIteratorFn = require('getIteratorFn');\n@@ -179,28 +179,24 @@ function traverseAllChildrenImpl(\n }\n }\n } else if (type === 'object') {\n- invariant(\n- children.nodeType !== 1,\n- 'traverseAllChildren(...): Encountered an invalid child; DOM ' +\n- 'elements are not valid children of React components.'\n- );\n- var fragment = ReactFragment.extract(children);\n- for (var key in fragment) {\n- if (fragment.hasOwnProperty(key)) {\n- child = fragment[key];\n- nextName = (\n- nextNamePrefix +\n- wrapUserProvidedKey(key) + SUBSEPARATOR +\n- getComponentKey(child, 0)\n- );\n- subtreeCount += traverseAllChildrenImpl(\n- child,\n- nextName,\n- callback,\n- traverseContext\n- );\n+ var addendum = '';\n+ if (__DEV__) {\n+ if (ReactCurrentOwner.current) {\n+ var name = ReactCurrentOwner.current.getName();\n+ if (name) {\n+ addendum = ' Check the render method of `' + name + '`.'\n+ }\n }\n }\n+ invariant(\n+ false,\n+ 'Objects are not valid as a React child (found object with keys ' +\n+ '{%s}). If you meant to render a collection of children, use an ' +\n+ 'array instead or wrap the object using ' +\n+ 'React.addons.createFragment(object).%s',\n+ Object.keys(children).join(', '),\n+ addendum\n+ );\n }\n }\n \n"}

dillon1000/react

Files changed