From ad283cda038b955c70a7bb2cd02fd939e1eb2d76 Mon Sep 17 00:00:00 2001 From: Sumei Date: Sat, 26 Mar 2016 11:07:24 +0800 Subject: [PATCH 1/3] move the warning about unknown property to the creatElement --- .../classic/element/ReactElement.js | 59 ++++++++++++++++++- src/renderers/dom/shared/ReactDOMDebugTool.js | 4 -- 2 files changed, 58 insertions(+), 5 deletions(-) diff --git a/src/isomorphic/classic/element/ReactElement.js b/src/isomorphic/classic/element/ReactElement.js index 6e371596d06..03938f41a82 100644 --- a/src/isomorphic/classic/element/ReactElement.js +++ b/src/isomorphic/classic/element/ReactElement.js @@ -12,7 +12,8 @@ 'use strict'; var ReactCurrentOwner = require('ReactCurrentOwner'); - +var DOMProperty = require('DOMProperty'); +var EventPluginRegistry = require('EventPluginRegistry'); var assign = require('Object.assign'); var warning = require('warning'); var canDefineProperty = require('canDefineProperty'); @@ -146,6 +147,62 @@ ReactElement.createElement = function(type, config, children) { } } + if (__DEV__) { + + var reactProps = { + children: true, + dangerouslySetInnerHTML: true, + key: true, + ref: true, + }; + + var warnedProperties = {}; + + for (propName in config) { + + var lowerCasedName = propName.toLowerCase(); + + if (!(DOMProperty.properties.hasOwnProperty(propName) || DOMProperty.isCustomAttribute(propName)) + && !(reactProps.hasOwnProperty(name) && reactProps[name] + || warnedProperties.hasOwnProperty(name) && warnedProperties[name]) + && EventPluginRegistry.possibleRegistrationNames[lowerCasedName] !== propName) { + + warnedProperties[name] = true; + + var standardName = ( + DOMProperty.isCustomAttribute(lowerCasedName) ? + lowerCasedName : + DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? + DOMProperty.getPossibleStandardName[lowerCasedName] : + null + ); + + // For now, only warn when we have a suggested correction. This prevents + // logging too much when using transferPropsTo. + warning( + standardName == null, + 'Unknown DOM property %s. Did you mean %s?', + propName, + standardName + ); + + var registrationName = ( + EventPluginRegistry.possibleRegistrationNames.hasOwnProperty( + lowerCasedName + ) ? + EventPluginRegistry.possibleRegistrationNames[lowerCasedName] : + null + ); + + warning( + registrationName == null, + 'Unknown event handler property %s. Did you mean `%s`?', + propName, + registrationName + ); + } + } + } // Children can be more than one argument, and those are transferred onto // the newly allocated props object. var childrenLength = arguments.length - 2; diff --git a/src/renderers/dom/shared/ReactDOMDebugTool.js b/src/renderers/dom/shared/ReactDOMDebugTool.js index 9fcc3763fad..640ae09e62d 100644 --- a/src/renderers/dom/shared/ReactDOMDebugTool.js +++ b/src/renderers/dom/shared/ReactDOMDebugTool.js @@ -11,8 +11,6 @@ 'use strict'; -var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool'); - var warning = require('warning'); var eventHandlers = []; @@ -61,6 +59,4 @@ var ReactDOMDebugTool = { }, }; -ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool); - module.exports = ReactDOMDebugTool; From cccaf5451a44581df32b98a470b0850166795cb5 Mon Sep 17 00:00:00 2001 From: Sumei Date: Sat, 26 Mar 2016 11:17:32 +0800 Subject: [PATCH 2/3] modify some indentation --- src/isomorphic/classic/element/ReactElement.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/isomorphic/classic/element/ReactElement.js b/src/isomorphic/classic/element/ReactElement.js index 03938f41a82..04db36aee86 100644 --- a/src/isomorphic/classic/element/ReactElement.js +++ b/src/isomorphic/classic/element/ReactElement.js @@ -159,13 +159,13 @@ ReactElement.createElement = function(type, config, children) { var warnedProperties = {}; for (propName in config) { - var lowerCasedName = propName.toLowerCase(); - if (!(DOMProperty.properties.hasOwnProperty(propName) || DOMProperty.isCustomAttribute(propName)) - && !(reactProps.hasOwnProperty(name) && reactProps[name] - || warnedProperties.hasOwnProperty(name) && warnedProperties[name]) - && EventPluginRegistry.possibleRegistrationNames[lowerCasedName] !== propName) { + if (!DOMProperty.properties.hasOwnProperty(propName) && + !DOMProperty.isCustomAttribute(propName) && + !(reactProps.hasOwnProperty(name) && reactProps[name] || + warnedProperties.hasOwnProperty(name) && warnedProperties[name]) && + EventPluginRegistry.possibleRegistrationNames[lowerCasedName] !== propName) { warnedProperties[name] = true; From d2686d841b094317a58f140dcc75f7c1248ed083 Mon Sep 17 00:00:00 2001 From: Sumei Date: Sun, 27 Mar 2016 21:47:30 +0800 Subject: [PATCH 3/3] ReactDOMUnknownPropertyDevtool called on element creation instead of during property operation --- .../classic/element/ReactElement.js | 60 ++----------------- .../dom/shared/DOMPropertyOperations.js | 10 ---- src/renderers/dom/shared/ReactDOMDebugTool.js | 14 ++--- .../ReactDOMUnknownPropertyDevtool.js | 15 +++-- 4 files changed, 17 insertions(+), 82 deletions(-) diff --git a/src/isomorphic/classic/element/ReactElement.js b/src/isomorphic/classic/element/ReactElement.js index 04db36aee86..285da571d2e 100644 --- a/src/isomorphic/classic/element/ReactElement.js +++ b/src/isomorphic/classic/element/ReactElement.js @@ -12,8 +12,7 @@ 'use strict'; var ReactCurrentOwner = require('ReactCurrentOwner'); -var DOMProperty = require('DOMProperty'); -var EventPluginRegistry = require('EventPluginRegistry'); +var ReactDOMInstrumentation = require('ReactDOMInstrumentation'); var assign = require('Object.assign'); var warning = require('warning'); var canDefineProperty = require('canDefineProperty'); @@ -147,61 +146,10 @@ ReactElement.createElement = function(type, config, children) { } } - if (__DEV__) { - - var reactProps = { - children: true, - dangerouslySetInnerHTML: true, - key: true, - ref: true, - }; - - var warnedProperties = {}; - + if(__DEV__) { for (propName in config) { - var lowerCasedName = propName.toLowerCase(); - - if (!DOMProperty.properties.hasOwnProperty(propName) && - !DOMProperty.isCustomAttribute(propName) && - !(reactProps.hasOwnProperty(name) && reactProps[name] || - warnedProperties.hasOwnProperty(name) && warnedProperties[name]) && - EventPluginRegistry.possibleRegistrationNames[lowerCasedName] !== propName) { - - warnedProperties[name] = true; - - var standardName = ( - DOMProperty.isCustomAttribute(lowerCasedName) ? - lowerCasedName : - DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? - DOMProperty.getPossibleStandardName[lowerCasedName] : - null - ); - - // For now, only warn when we have a suggested correction. This prevents - // logging too much when using transferPropsTo. - warning( - standardName == null, - 'Unknown DOM property %s. Did you mean %s?', - propName, - standardName - ); - - var registrationName = ( - EventPluginRegistry.possibleRegistrationNames.hasOwnProperty( - lowerCasedName - ) ? - EventPluginRegistry.possibleRegistrationNames[lowerCasedName] : - null - ); - - warning( - registrationName == null, - 'Unknown event handler property %s. Did you mean `%s`?', - propName, - registrationName - ); - } - } + ReactDOMInstrumentation.debugTool.onCreateElement(propName); + } } // Children can be more than one argument, and those are transferred onto // the newly allocated props object. diff --git a/src/renderers/dom/shared/DOMPropertyOperations.js b/src/renderers/dom/shared/DOMPropertyOperations.js index 1ce9e29b753..352866c6d13 100644 --- a/src/renderers/dom/shared/DOMPropertyOperations.js +++ b/src/renderers/dom/shared/DOMPropertyOperations.js @@ -12,7 +12,6 @@ 'use strict'; var DOMProperty = require('DOMProperty'); -var ReactDOMInstrumentation = require('ReactDOMInstrumentation'); var ReactPerf = require('ReactPerf'); var quoteAttributeValueForBrowser = require('quoteAttributeValueForBrowser'); @@ -88,9 +87,6 @@ var DOMPropertyOperations = { * @return {?string} Markup string, or null if the property was invalid. */ createMarkupForProperty: function(name, value) { - if (__DEV__) { - ReactDOMInstrumentation.debugTool.onCreateMarkupForProperty(name, value); - } var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; if (propertyInfo) { @@ -134,9 +130,6 @@ var DOMPropertyOperations = { * @param {*} value */ setValueForProperty: function(node, name, value) { - if (__DEV__) { - ReactDOMInstrumentation.debugTool.onSetValueForProperty(node, name, value); - } var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; if (propertyInfo) { @@ -192,9 +185,6 @@ var DOMPropertyOperations = { * @param {string} name */ deleteValueForProperty: function(node, name) { - if (__DEV__) { - ReactDOMInstrumentation.debugTool.onDeleteValueForProperty(node, name); - } var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; if (propertyInfo) { diff --git a/src/renderers/dom/shared/ReactDOMDebugTool.js b/src/renderers/dom/shared/ReactDOMDebugTool.js index 640ae09e62d..3ea91786d43 100644 --- a/src/renderers/dom/shared/ReactDOMDebugTool.js +++ b/src/renderers/dom/shared/ReactDOMDebugTool.js @@ -11,6 +11,8 @@ 'use strict'; +var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool'); + var warning = require('warning'); var eventHandlers = []; @@ -48,15 +50,11 @@ var ReactDOMDebugTool = { } } }, - onCreateMarkupForProperty(name, value) { - emitEvent('onCreateMarkupForProperty', name, value); - }, - onSetValueForProperty(node, name, value) { - emitEvent('onSetValueForProperty', node, name, value); - }, - onDeleteValueForProperty(node, name) { - emitEvent('onDeleteValueForProperty', node, name); + onCreateElement(name) { + emitEvent('onCreateElement', name); }, }; +ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool); + module.exports = ReactDOMDebugTool; diff --git a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js index 5adc359063e..3d34b9d34d5 100644 --- a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js +++ b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js @@ -34,9 +34,14 @@ if (__DEV__) { return; } - warnedProperties[name] = true; var lowerCasedName = name.toLowerCase(); + if(EventPluginRegistry.possibleRegistrationNames[lowerCasedName] == name) { + return; + } + + warnedProperties[name] = true; + // data-* attributes should be lowercase; suggest the lowercase version var standardName = ( DOMProperty.isCustomAttribute(lowerCasedName) ? @@ -73,13 +78,7 @@ if (__DEV__) { } var ReactDOMUnknownPropertyDevtool = { - onCreateMarkupForProperty(name, value) { - warnUnknownProperty(name); - }, - onSetValueForProperty(node, name, value) { - warnUnknownProperty(name); - }, - onDeleteValueForProperty(node, name) { + onCreateElement(name) { warnUnknownProperty(name); }, };