Move assertValidProps into shared/utils since it will be used by the … (#9669)
* Move assertValidProps into shared/utils since it will be used by the server renderer * Extract getCurrentOwnerName from assertValidProps and pass it in
Tom Occhino committed
May 11, 2017 at 14:43 UTC
fe750c9d5daaea8f71a776b80040afc0f088bdb6
2 files changed
+96
-73
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+3
-73
@@ -25,13 +25,12 @@ var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea');
25
var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber');
26
var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType');
27
28
+var assertValidProps = require('assertValidProps');
29
var emptyFunction = require('fbjs/lib/emptyFunction');
30
var inputValueTracking = require('inputValueTracking');
30
-var invariant = require('fbjs/lib/invariant');
31
var isCustomComponent = require('isCustomComponent');
32
var setInnerHTML = require('setInnerHTML');
33
var setTextContent = require('setTextContent');
34
-var voidElementTags = require('voidElementTags');
34
var warning = require('fbjs/lib/warning');
35
36
if (__DEV__) {
@@ -64,75 +63,6 @@ var {
63
mathml: MATH_NAMESPACE,
64
} = DOMNamespaces;
65
67
-function getDeclarationErrorAddendum() {
68
- if (__DEV__) {
69
- var ownerName = getCurrentFiberOwnerName();
70
- if (ownerName) {
71
- // TODO: also report the stack.
72
- return '\n\nThis DOM node was rendered by `' + ownerName + '`.';
73
- }
74
- }
75
- return '';
76
-}
77
-
78
-function assertValidProps(tag: string, props: ?Object) {
79
- if (!props) {
80
- return;
81
- }
82
- // Note the use of `==` which checks for null or undefined.
83
- if (voidElementTags[tag]) {
84
- invariant(
85
- props.children == null && props.dangerouslySetInnerHTML == null,
86
- '%s is a void element tag and must neither have `children` nor ' +
87
- 'use `dangerouslySetInnerHTML`.%s',
88
- tag,
89
- getDeclarationErrorAddendum(),
90
- );
91
- }
92
- if (props.dangerouslySetInnerHTML != null) {
93
- invariant(
94
- props.children == null,
95
- 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
96
- );
97
- invariant(
98
- typeof props.dangerouslySetInnerHTML === 'object' &&
99
- HTML in props.dangerouslySetInnerHTML,
100
- '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
101
- 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +
102
- 'for more information.',
103
- );
104
- }
105
- if (__DEV__) {
106
- warning(
107
- props.innerHTML == null,
108
- 'Directly setting property `innerHTML` is not permitted. ' +
109
- 'For more information, lookup documentation on `dangerouslySetInnerHTML`.',
110
- );
111
- warning(
112
- props.suppressContentEditableWarning ||
113
- !props.contentEditable ||
114
- props.children == null,
115
- 'A component is `contentEditable` and contains `children` managed by ' +
116
- 'React. It is now your responsibility to guarantee that none of ' +
117
- 'those nodes are unexpectedly modified or duplicated. This is ' +
118
- 'probably not intentional.',
119
- );
120
- warning(
121
- props.onFocusIn == null && props.onFocusOut == null,
122
- 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' +
123
- 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' +
124
- 'are not needed/supported by React.',
125
- );
126
- }
127
- invariant(
128
- props.style == null || typeof props.style === 'object',
129
- 'The `style` prop expects a mapping from style properties to values, ' +
130
- "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
131
- 'using JSX.%s',
132
- getDeclarationErrorAddendum(),
133
- );
134
-}
135
-
66
if (__DEV__) {
67
var validatePropertiesInDevelopment = function(type, props) {
68
validateARIAProperties(type, props);
@@ -502,7 +432,7 @@ var ReactDOMFiberComponent = {
432
props = rawProps;
433
}
434
505
- assertValidProps(tag, props);
435
+ assertValidProps(tag, props, getCurrentFiberOwnerName);
436
437
setInitialDOMProperties(
438
domElement,
@@ -592,7 +522,7 @@ var ReactDOMFiberComponent = {
522
break;
523
}
524
595
- assertValidProps(tag, nextProps);
525
+ assertValidProps(tag, nextProps, getCurrentFiberOwnerName);
526
527
var propKey;
528
var styleName;
src/renderers/dom/shared/utils/assertValidProps.js
new
+93
@@ -0,0 +1,93 @@
1
+/**
2
+ * Copyright 2013-present, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @providesModule assertValidProps
10
+ */
11
+
12
+'use strict';
13
+
14
+var invariant = require('fbjs/lib/invariant');
15
+var voidElementTags = require('voidElementTags');
16
+var warning = require('fbjs/lib/warning');
17
+
18
+var HTML = '__html';
19
+
20
+function getDeclarationErrorAddendum(getCurrentOwnerName) {
21
+ if (__DEV__) {
22
+ var ownerName = getCurrentOwnerName();
23
+ if (ownerName) {
24
+ // TODO: also report the stack.
25
+ return '\n\nThis DOM node was rendered by `' + ownerName + '`.';
26
+ }
27
+ }
28
+ return '';
29
+}
30
+
31
+function assertValidProps(
32
+ tag: string,
33
+ props: ?Object,
34
+ getCurrentOwnerName: () => ?string,
35
+) {
36
+ if (!props) {
37
+ return;
38
+ }
39
+ // Note the use of `==` which checks for null or undefined.
40
+ if (voidElementTags[tag]) {
41
+ invariant(
42
+ props.children == null && props.dangerouslySetInnerHTML == null,
43
+ '%s is a void element tag and must neither have `children` nor ' +
44
+ 'use `dangerouslySetInnerHTML`.%s',
45
+ tag,
46
+ getDeclarationErrorAddendum(getCurrentOwnerName),
47
+ );
48
+ }
49
+ if (props.dangerouslySetInnerHTML != null) {
50
+ invariant(
51
+ props.children == null,
52
+ 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
53
+ );
54
+ invariant(
55
+ typeof props.dangerouslySetInnerHTML === 'object' &&
56
+ HTML in props.dangerouslySetInnerHTML,
57
+ '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
58
+ 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +
59
+ 'for more information.',
60
+ );
61
+ }
62
+ if (__DEV__) {
63
+ warning(
64
+ props.innerHTML == null,
65
+ 'Directly setting property `innerHTML` is not permitted. ' +
66
+ 'For more information, lookup documentation on `dangerouslySetInnerHTML`.',
67
+ );
68
+ warning(
69
+ props.suppressContentEditableWarning ||
70
+ !props.contentEditable ||
71
+ props.children == null,
72
+ 'A component is `contentEditable` and contains `children` managed by ' +
73
+ 'React. It is now your responsibility to guarantee that none of ' +
74
+ 'those nodes are unexpectedly modified or duplicated. This is ' +
75
+ 'probably not intentional.',
76
+ );
77
+ warning(
78
+ props.onFocusIn == null && props.onFocusOut == null,
79
+ 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' +
80
+ 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' +
81
+ 'are not needed/supported by React.',
82
+ );
83
+ }
84
+ invariant(
85
+ props.style == null || typeof props.style === 'object',
86
+ 'The `style` prop expects a mapping from style properties to values, ' +
87
+ "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
88
+ 'using JSX.%s',
89
+ getDeclarationErrorAddendum(getCurrentOwnerName),
90
+ );
91
+}
92
+
93
+module.exports = assertValidProps;