From fe750c9d5daaea8f71a776b80040afc0f088bdb6 Mon Sep 17 00:00:00 2001 From: Tom Occhino Date: Thu, 11 May 2017 14:43:35 -0700 Subject: [PATCH] =?UTF-8?q?Move=20assertValidProps=20into=20shared/utils?= =?UTF-8?q?=20since=20it=20will=20be=20used=20by=20the=20=E2=80=A6=20(#966?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Move assertValidProps into shared/utils since it will be used by the server renderer * Extract getCurrentOwnerName from assertValidProps and pass it in --- .../dom/fiber/ReactDOMFiberComponent.js | 76 +-------------- .../dom/shared/utils/assertValidProps.js | 93 +++++++++++++++++++ 2 files changed, 96 insertions(+), 73 deletions(-) create mode 100644 src/renderers/dom/shared/utils/assertValidProps.js diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index b2d5a5a1f4..6b10507c3f 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -25,13 +25,12 @@ var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea'); var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber'); var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType'); +var assertValidProps = require('assertValidProps'); var emptyFunction = require('fbjs/lib/emptyFunction'); var inputValueTracking = require('inputValueTracking'); -var invariant = require('fbjs/lib/invariant'); var isCustomComponent = require('isCustomComponent'); var setInnerHTML = require('setInnerHTML'); var setTextContent = require('setTextContent'); -var voidElementTags = require('voidElementTags'); var warning = require('fbjs/lib/warning'); if (__DEV__) { @@ -64,75 +63,6 @@ var { mathml: MATH_NAMESPACE, } = DOMNamespaces; -function getDeclarationErrorAddendum() { - if (__DEV__) { - var ownerName = getCurrentFiberOwnerName(); - if (ownerName) { - // TODO: also report the stack. - return '\n\nThis DOM node was rendered by `' + ownerName + '`.'; - } - } - return ''; -} - -function assertValidProps(tag: string, props: ?Object) { - if (!props) { - return; - } - // Note the use of `==` which checks for null or undefined. - if (voidElementTags[tag]) { - invariant( - props.children == null && props.dangerouslySetInnerHTML == null, - '%s is a void element tag and must neither have `children` nor ' + - 'use `dangerouslySetInnerHTML`.%s', - tag, - getDeclarationErrorAddendum(), - ); - } - if (props.dangerouslySetInnerHTML != null) { - invariant( - props.children == null, - 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.', - ); - invariant( - typeof props.dangerouslySetInnerHTML === 'object' && - HTML in props.dangerouslySetInnerHTML, - '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + - 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' + - 'for more information.', - ); - } - if (__DEV__) { - warning( - props.innerHTML == null, - 'Directly setting property `innerHTML` is not permitted. ' + - 'For more information, lookup documentation on `dangerouslySetInnerHTML`.', - ); - warning( - props.suppressContentEditableWarning || - !props.contentEditable || - props.children == null, - 'A component is `contentEditable` and contains `children` managed by ' + - 'React. It is now your responsibility to guarantee that none of ' + - 'those nodes are unexpectedly modified or duplicated. This is ' + - 'probably not intentional.', - ); - warning( - props.onFocusIn == null && props.onFocusOut == null, - 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + - 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + - 'are not needed/supported by React.', - ); - } - invariant( - props.style == null || typeof props.style === 'object', - 'The `style` prop expects a mapping from style properties to values, ' + - "not a string. For example, style={{marginRight: spacing + 'em'}} when " + - 'using JSX.%s', - getDeclarationErrorAddendum(), - ); -} - if (__DEV__) { var validatePropertiesInDevelopment = function(type, props) { validateARIAProperties(type, props); @@ -502,7 +432,7 @@ var ReactDOMFiberComponent = { props = rawProps; } - assertValidProps(tag, props); + assertValidProps(tag, props, getCurrentFiberOwnerName); setInitialDOMProperties( domElement, @@ -592,7 +522,7 @@ var ReactDOMFiberComponent = { break; } - assertValidProps(tag, nextProps); + assertValidProps(tag, nextProps, getCurrentFiberOwnerName); var propKey; var styleName; diff --git a/src/renderers/dom/shared/utils/assertValidProps.js b/src/renderers/dom/shared/utils/assertValidProps.js new file mode 100644 index 0000000000..63bd694a55 --- /dev/null +++ b/src/renderers/dom/shared/utils/assertValidProps.js @@ -0,0 +1,93 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule assertValidProps + */ + +'use strict'; + +var invariant = require('fbjs/lib/invariant'); +var voidElementTags = require('voidElementTags'); +var warning = require('fbjs/lib/warning'); + +var HTML = '__html'; + +function getDeclarationErrorAddendum(getCurrentOwnerName) { + if (__DEV__) { + var ownerName = getCurrentOwnerName(); + if (ownerName) { + // TODO: also report the stack. + return '\n\nThis DOM node was rendered by `' + ownerName + '`.'; + } + } + return ''; +} + +function assertValidProps( + tag: string, + props: ?Object, + getCurrentOwnerName: () => ?string, +) { + if (!props) { + return; + } + // Note the use of `==` which checks for null or undefined. + if (voidElementTags[tag]) { + invariant( + props.children == null && props.dangerouslySetInnerHTML == null, + '%s is a void element tag and must neither have `children` nor ' + + 'use `dangerouslySetInnerHTML`.%s', + tag, + getDeclarationErrorAddendum(getCurrentOwnerName), + ); + } + if (props.dangerouslySetInnerHTML != null) { + invariant( + props.children == null, + 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.', + ); + invariant( + typeof props.dangerouslySetInnerHTML === 'object' && + HTML in props.dangerouslySetInnerHTML, + '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + + 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' + + 'for more information.', + ); + } + if (__DEV__) { + warning( + props.innerHTML == null, + 'Directly setting property `innerHTML` is not permitted. ' + + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.', + ); + warning( + props.suppressContentEditableWarning || + !props.contentEditable || + props.children == null, + 'A component is `contentEditable` and contains `children` managed by ' + + 'React. It is now your responsibility to guarantee that none of ' + + 'those nodes are unexpectedly modified or duplicated. This is ' + + 'probably not intentional.', + ); + warning( + props.onFocusIn == null && props.onFocusOut == null, + 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + + 'are not needed/supported by React.', + ); + } + invariant( + props.style == null || typeof props.style === 'object', + 'The `style` prop expects a mapping from style properties to values, ' + + "not a string. For example, style={{marginRight: spacing + 'em'}} when " + + 'using JSX.%s', + getDeclarationErrorAddendum(getCurrentOwnerName), + ); +} + +module.exports = assertValidProps;