{"commit":{"authorName":"Paul O’Shannessy","shortRevision":"770b579aa2","authorEmail":"paul@oshannessy.com","authoredAt":"2014-10-13T22:35:59-07:00","subject":"Update PropTypes for ReactElement & ReactNode","revision":"770b579aa2f517f2a323234ccaa1445a0b7ca9cb"},"patch":"diff --git a\/src\/core\/ReactPropTypes.js b\/src\/core\/ReactPropTypes.js\nindex 42fbdb0ef5..6388ea5d95 100644\n--- a\/src\/core\/ReactPropTypes.js\n+++ b\/src\/core\/ReactPropTypes.js\n@@ -14,6 +14,7 @@\n var ReactElement = require('ReactElement');\n var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');\n \n+var deprecated = require('deprecated');\n var emptyFunction = require('emptyFunction');\n \n \/**\n@@ -65,6 +66,9 @@ var emptyFunction = require('emptyFunction');\n \n var ANONYMOUS = '<>';\n \n+var elementTypeChecker = createElementTypeChecker();\n+var nodeTypeChecker = createNodeChecker();\n+\n var ReactPropTypes = {\n array: createPrimitiveTypeChecker('array'),\n bool: createPrimitiveTypeChecker('boolean'),\n@@ -75,13 +79,28 @@ var ReactPropTypes = {\n \n any: createAnyTypeChecker(),\n arrayOf: createArrayOfTypeChecker,\n- component: createComponentTypeChecker(),\n+ element: elementTypeChecker,\n instanceOf: createInstanceTypeChecker,\n+ node: nodeTypeChecker,\n objectOf: createObjectOfTypeChecker,\n oneOf: createEnumTypeChecker,\n oneOfType: createUnionTypeChecker,\n- renderable: createRenderableTypeChecker(),\n- shape: createShapeTypeChecker\n+ shape: createShapeTypeChecker,\n+\n+ component: deprecated(\n+ 'React.PropTypes',\n+ 'component',\n+ 'element',\n+ this,\n+ elementTypeChecker\n+ ),\n+ renderable: deprecated(\n+ 'React.PropTypes',\n+ 'renderable',\n+ 'node',\n+ this,\n+ nodeTypeChecker\n+ )\n };\n \n function createChainableTypeChecker(validate) {\n@@ -151,13 +170,13 @@ function createArrayOfTypeChecker(typeChecker) {\n return createChainableTypeChecker(validate);\n }\n \n-function createComponentTypeChecker() {\n+function createElementTypeChecker() {\n function validate(props, propName, componentName, location) {\n if (!ReactElement.isValidElement(props[propName])) {\n var locationName = ReactPropTypeLocationNames[location];\n return new Error(\n `Invalid ${locationName} \\`${propName}\\` supplied to ` +\n- `\\`${componentName}\\`, expected a React component.`\n+ `\\`${componentName}\\`, expected a ReactElement.`\n );\n }\n }\n@@ -238,13 +257,13 @@ function createUnionTypeChecker(arrayOfTypeCheckers) {\n return createChainableTypeChecker(validate);\n }\n \n-function createRenderableTypeChecker() {\n+function createNodeChecker() {\n function validate(props, propName, componentName, location) {\n- if (!isRenderable(props[propName])) {\n+ if (!isNode(props[propName])) {\n var locationName = ReactPropTypeLocationNames[location];\n return new Error(\n `Invalid ${locationName} \\`${propName}\\` supplied to ` +\n- `\\`${componentName}\\`, expected a renderable prop.`\n+ `\\`${componentName}\\`, expected a ReactNode.`\n );\n }\n }\n@@ -276,11 +295,8 @@ function createShapeTypeChecker(shapeTypes) {\n return createChainableTypeChecker(validate, 'expected `object`');\n }\n \n-function isRenderable(propValue) {\n+function isNode(propValue) {\n switch(typeof propValue) {\n- \/\/ TODO: this was probably written with the assumption that we're not\n- \/\/ returning `this.props.component` directly from `render`. This is\n- \/\/ currently not supported but we should, to make it consistent.\n case 'number':\n case 'string':\n return true;\n@@ -288,13 +304,13 @@ function isRenderable(propValue) {\n return !propValue;\n case 'object':\n if (Array.isArray(propValue)) {\n- return propValue.every(isRenderable);\n+ return propValue.every(isNode);\n }\n if (ReactElement.isValidElement(propValue)) {\n return true;\n }\n for (var k in propValue) {\n- if (!isRenderable(propValue[k])) {\n+ if (!isNode(propValue[k])) {\n return false;\n }\n }\ndiff --git a\/src\/core\/__tests__\/ReactPropTypes-test.js b\/src\/core\/__tests__\/ReactPropTypes-test.js\nindex 21df8b33dc..1753d6ec32 100644\n--- a\/src\/core\/__tests__\/ReactPropTypes-test.js\n+++ b\/src\/core\/__tests__\/ReactPropTypes-test.js\n@@ -224,7 +224,7 @@ describe('ReactPropTypes', function() {\n beforeEach(function() {\n Component = React.createClass({\n propTypes: {\n- label: PropTypes.component.isRequired\n+ label: PropTypes.element.isRequired\n },\n \n render: function() {\n@@ -235,16 +235,16 @@ describe('ReactPropTypes', function() {\n });\n \n it('should support components', () => {\n- typeCheckPass(PropTypes.component,

);\n+ typeCheckPass(PropTypes.element,

);\n });\n \n it('should not support multiple components or scalar values', () => {\n var message = 'Invalid prop `testProp` supplied to `testComponent`, ' +\n- 'expected a React component.';\n- typeCheckFail(PropTypes.component, [

], message);\n- typeCheckFail(PropTypes.component, 123, message);\n- typeCheckFail(PropTypes.component, 'foo', message);\n- typeCheckFail(PropTypes.component, false, message);\n+ 'expected a ReactElement.';\n+ typeCheckFail(PropTypes.element, [

], message);\n+ typeCheckFail(PropTypes.element, 123, message);\n+ typeCheckFail(PropTypes.element, 'foo', message);\n+ typeCheckFail(PropTypes.element, false, message);\n });\n \n it('should be able to define a single child as label', () => {\n@@ -262,13 +262,13 @@ describe('ReactPropTypes', function() {\n });\n \n it(\"should be implicitly optional and not warn without values\", function() {\n- typeCheckPass(PropTypes.component, null);\n- typeCheckPass(PropTypes.component, undefined);\n+ typeCheckPass(PropTypes.element, null);\n+ typeCheckPass(PropTypes.element, undefined);\n });\n \n it(\"should warn for missing required values\", function() {\n- typeCheckFail(PropTypes.component.isRequired, null, requiredMessage);\n- typeCheckFail(PropTypes.component.isRequired, undefined, requiredMessage);\n+ typeCheckFail(PropTypes.element.isRequired, null, requiredMessage);\n+ typeCheckFail(PropTypes.element.isRequired, undefined, requiredMessage);\n });\n });\n \n@@ -349,20 +349,21 @@ describe('ReactPropTypes', function() {\n \n it('should warn for invalid values', function() {\n var failMessage = 'Invalid prop `testProp` supplied to ' +\n- '`testComponent`, expected a renderable prop.';\n- typeCheckFail(PropTypes.renderable, true, failMessage);\n- typeCheckFail(PropTypes.renderable, function() {}, failMessage);\n- typeCheckFail(PropTypes.renderable, {key: function() {}}, failMessage);\n+ '`testComponent`, expected a ReactNode.';\n+ typeCheckFail(PropTypes.node, true, failMessage);\n+ typeCheckFail(PropTypes.node, function() {}, failMessage);\n+ typeCheckFail(PropTypes.node, {key: function() {}}, failMessage);\n });\n \n it('should not warn for valid values', function() {\n- typeCheckPass(PropTypes.renderable,

);\n- typeCheckPass(PropTypes.renderable, false);\n- typeCheckPass(PropTypes.renderable, );\n- typeCheckPass(PropTypes.renderable, 'Some string');\n- typeCheckPass(PropTypes.renderable, []);\n- typeCheckPass(PropTypes.renderable, {});\n- typeCheckPass(PropTypes.renderable, [\n+ typeCheckPass(PropTypes.node,

);\n+ typeCheckPass(PropTypes.node, false);\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 'Some string',\n

,\n@@ -371,7 +372,7 @@ describe('ReactPropTypes', function() {\n ]);\n \n \/\/ Object of rendereable things\n- typeCheckPass(PropTypes.renderable, {\n+ typeCheckPass(PropTypes.node, {\n k0: 123,\n k1: 'Some string',\n k2:

,\n@@ -384,26 +385,30 @@ describe('ReactPropTypes', function() {\n });\n \n it('should not warn for null\/undefined if not required', function() {\n- typeCheckPass(PropTypes.renderable, null);\n- typeCheckPass(PropTypes.renderable, undefined);\n+ typeCheckPass(PropTypes.node, null);\n+ typeCheckPass(PropTypes.node, undefined);\n });\n \n it('should warn for missing required values', function() {\n typeCheckFail(\n- PropTypes.renderable.isRequired,\n+ PropTypes.node.isRequired,\n null,\n 'Required prop `testProp` was not specified in `testComponent`.'\n );\n typeCheckFail(\n- PropTypes.renderable.isRequired,\n+ PropTypes.node.isRequired,\n undefined,\n 'Required prop `testProp` was not specified in `testComponent`.'\n );\n });\n \n- it('should accept empty array & object for required props', function() {\n+ it('should accept empty array for required props', function() {\n+ typeCheckPass(PropTypes.node.isRequired, []);\n+ });\n+\n+ it('should still work for deprecated typechecks', function() {\n+ typeCheckPass(PropTypes.renderable, []);\n typeCheckPass(PropTypes.renderable.isRequired, []);\n- typeCheckPass(PropTypes.renderable.isRequired, {});\n });\n });\n \ndiff --git a\/src\/utils\/deprecated.js b\/src\/utils\/deprecated.js\nindex d5fd87c7be..fe696e050c 100644\n--- a\/src\/utils\/deprecated.js\n+++ b\/src\/utils\/deprecated.js\n@@ -35,7 +35,9 @@ function deprecated(namespace, oldName, newName, ctx, fn) {\n return fn.apply(ctx, arguments);\n };\n newFn.displayName = `${namespace}_${oldName}`;\n- return newFn;\n+ \/\/ We need to make sure all properties of the original fn are copied over.\n+ \/\/ In particular, this is needed to support PropTypes\n+ return Object.assign(newFn, fn);\n }\n \n return fn;\n","body":"","parents":["2b225446c03192b58e176f8885e60055cf5ea436"],"files":[{"status":"M","path":"src\/core\/ReactPropTypes.js"},{"status":"M","path":"src\/core\/__tests__\/ReactPropTypes-test.js"},{"status":"M","path":"src\/utils\/deprecated.js"}]}

dillon1000/react

Files changed