Skip to content

Commit d5e5a65

Browse files
sebmarkbagesebmarkbage
committed
Inline property name string constants
This helps typos but it's unneccessarily clever.
1 parent 6e6676d commit d5e5a65

File tree

1 file changed

+40
-48
lines changed

1 file changed

+40
-48
lines changed

‎packages/react-dom-bindings/src/client/ReactDOMComponent.js

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,6 @@ import {
8282
let didWarnInvalidHydration = false;
8383
let didWarnScriptTags = false;
8484

85-
const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
86-
const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
87-
const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
88-
const AUTOFOCUS = 'autoFocus';
89-
const CHILDREN = 'children';
90-
const STYLE = 'style';
91-
const HTML = '__html';
92-
9385
let warnedUnknownTags: {
9486
[key: string]: boolean,
9587
};
@@ -296,7 +288,7 @@ function setInitialDOMProperties(
296288
}
297289
const nextProp = nextProps[propKey];
298290
switch (propKey) {
299-
case STYLE: {
291+
case 'style': {
300292
if (__DEV__) {
301293
if (nextProp) {
302294
// Freeze the next style object so that we can assume it won't be
@@ -308,8 +300,8 @@ function setInitialDOMProperties(
308300
setValueForStyles(domElement, nextProp);
309301
break;
310302
}
311-
case DANGEROUSLY_SET_INNER_HTML: {
312-
const nextHtml = nextProp ? nextProp[HTML] : undefined;
303+
case 'dangerouslySetInnerHTML': {
304+
const nextHtml = nextProp ? nextProp.__html : undefined;
313305
if (nextHtml != null) {
314306
if (disableIEWorkarounds) {
315307
domElement.innerHTML = nextHtml;
@@ -319,7 +311,7 @@ function setInitialDOMProperties(
319311
}
320312
break;
321313
}
322-
case CHILDREN: {
314+
case 'children': {
323315
if (typeof nextProp === 'string') {
324316
// Avoid setting initial textContent when the text is empty. In IE11 setting
325317
// textContent on a <textarea> will cause the placeholder to not
@@ -348,15 +340,15 @@ function setInitialDOMProperties(
348340
}
349341
break;
350342
}
351-
case SUPPRESS_CONTENT_EDITABLE_WARNING:
352-
case SUPPRESS_HYDRATION_WARNING:
343+
case 'suppressContentEditableWarning':
344+
case 'suppressHydrationWarning':
353345
case 'defaultValue': // Reserved
354346
case 'defaultChecked':
355347
case 'innerHTML': {
356348
// Noop
357349
break;
358350
}
359-
case AUTOFOCUS: {
351+
case 'autoFocus': {
360352
// We polyfill it separately on the client during commit.
361353
// We could have excluded it in the property list instead of
362354
// adding a special case here, but then it wouldn't be emitted
@@ -728,7 +720,7 @@ export function diffProperties(
728720
continue;
729721
}
730722
switch (propKey) {
731-
case STYLE: {
723+
case 'style': {
732724
const lastStyle = lastProps[propKey];
733725
for (styleName in lastStyle) {
734726
if (lastStyle.hasOwnProperty(styleName)) {
@@ -740,20 +732,20 @@ export function diffProperties(
740732
}
741733
break;
742734
}
743-
case DANGEROUSLY_SET_INNER_HTML:
744-
case CHILDREN: {
735+
case 'dangerouslySetInnerHTML':
736+
case 'children': {
745737
// Noop. This is handled by the clear text mechanism.
746738
break;
747739
}
748-
case SUPPRESS_CONTENT_EDITABLE_WARNING:
749-
case SUPPRESS_HYDRATION_WARNING:
740+
case 'suppressContentEditableWarning':
741+
case 'suppressHydrationWarning':
750742
case 'defaultValue': // Reserved
751743
case 'defaultChecked':
752744
case 'innerHTML': {
753745
// Noop
754746
break;
755747
}
756-
case AUTOFOCUS: {
748+
case 'autoFocus': {
757749
// Noop. It doesn't work on updates anyway.
758750
break;
759751
}
@@ -790,7 +782,7 @@ export function diffProperties(
790782
continue;
791783
}
792784
switch (propKey) {
793-
case STYLE: {
785+
case 'style': {
794786
if (__DEV__) {
795787
if (nextProp) {
796788
// Freeze the next style object so that we can assume it won't be
@@ -835,9 +827,9 @@ export function diffProperties(
835827
}
836828
break;
837829
}
838-
case DANGEROUSLY_SET_INNER_HTML: {
839-
const nextHtml = nextProp ? nextProp[HTML] : undefined;
840-
const lastHtml = lastProp ? lastProp[HTML] : undefined;
830+
case 'dangerouslySetInnerHTML': {
831+
const nextHtml = nextProp ? nextProp.__html : undefined;
832+
const lastHtml = lastProp ? lastProp.__html : undefined;
841833
if (nextHtml != null) {
842834
if (lastHtml !== nextHtml) {
843835
(updatePayload = updatePayload || []).push(propKey, nextHtml);
@@ -848,7 +840,7 @@ export function diffProperties(
848840
}
849841
break;
850842
}
851-
case CHILDREN: {
843+
case 'children': {
852844
if (typeof nextProp === 'string' || typeof nextProp === 'number') {
853845
(updatePayload = updatePayload || []).push(propKey, '' + nextProp);
854846
}
@@ -870,15 +862,15 @@ export function diffProperties(
870862
}
871863
break;
872864
}
873-
case SUPPRESS_CONTENT_EDITABLE_WARNING:
874-
case SUPPRESS_HYDRATION_WARNING:
865+
case 'suppressContentEditableWarning':
866+
case 'suppressHydrationWarning':
875867
case 'defaultValue': // Reserved
876868
case 'defaultChecked':
877869
case 'innerHTML': {
878870
// Noop
879871
break;
880872
}
881-
case AUTOFOCUS: {
873+
case 'autoFocus': {
882874
// Noop on updates
883875
break;
884876
}
@@ -912,9 +904,9 @@ export function diffProperties(
912904
}
913905
if (styleUpdates) {
914906
if (__DEV__) {
915-
validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE]);
907+
validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style);
916908
}
917-
(updatePayload = updatePayload || []).push(STYLE, styleUpdates);
909+
(updatePayload = updatePayload || []).push('style', styleUpdates);
918910
}
919911
return updatePayload;
920912
}
@@ -1000,32 +992,32 @@ function diffHydratedCustomComponent(
1000992
}
1001993
continue;
1002994
}
1003-
if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
995+
if (rawProps.suppressHydrationWarning === true) {
1004996
// Don't bother comparing. We're ignoring all these warnings.
1005997
continue;
1006998
}
1007999
// Validate that the properties correspond to their expected values.
10081000
let serverValue;
10091001
switch (propKey) {
1010-
case CHILDREN: // Checked above already
1011-
case SUPPRESS_CONTENT_EDITABLE_WARNING:
1012-
case SUPPRESS_HYDRATION_WARNING:
1002+
case 'children': // Checked above already
1003+
case 'suppressContentEditableWarning':
1004+
case 'suppressHydrationWarning':
10131005
case 'defaultValue':
10141006
case 'defaultChecked':
10151007
case 'innerHTML':
10161008
// Noop
10171009
continue;
1018-
case DANGEROUSLY_SET_INNER_HTML:
1010+
case 'dangerouslySetInnerHTML':
10191011
const serverHTML = domElement.innerHTML;
1020-
const nextHtml = nextProp ? nextProp[HTML] : undefined;
1012+
const nextHtml = nextProp ? nextProp.__html : undefined;
10211013
if (nextHtml != null) {
10221014
const expectedHTML = normalizeHTML(domElement, nextHtml);
10231015
if (expectedHTML !== serverHTML) {
10241016
warnForPropDifference(propKey, serverHTML, expectedHTML);
10251017
}
10261018
}
10271019
continue;
1028-
case STYLE:
1020+
case 'style':
10291021
// $FlowFixMe - Should be inferred as not undefined.
10301022
extraAttributeNames.delete(propKey);
10311023

@@ -1103,16 +1095,16 @@ function diffHydratedGenericElement(
11031095
}
11041096
continue;
11051097
}
1106-
if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
1098+
if (rawProps.suppressHydrationWarning === true) {
11071099
// Don't bother comparing. We're ignoring all these warnings.
11081100
continue;
11091101
}
11101102
// Validate that the properties correspond to their expected values.
11111103
let serverValue;
11121104
switch (propKey) {
1113-
case CHILDREN: // Checked above already
1114-
case SUPPRESS_CONTENT_EDITABLE_WARNING:
1115-
case SUPPRESS_HYDRATION_WARNING:
1105+
case 'children': // Checked above already
1106+
case 'suppressContentEditableWarning':
1107+
case 'suppressHydrationWarning':
11161108
case 'value': // Controlled attributes are not validated
11171109
case 'checked': // TODO: Only ignore them on controlled tags.
11181110
case 'selected':
@@ -1121,17 +1113,17 @@ function diffHydratedGenericElement(
11211113
case 'innerHTML':
11221114
// Noop
11231115
continue;
1124-
case DANGEROUSLY_SET_INNER_HTML:
1116+
case 'dangerouslySetInnerHTML':
11251117
const serverHTML = domElement.innerHTML;
1126-
const nextHtml = nextProp ? nextProp[HTML] : undefined;
1118+
const nextHtml = nextProp ? nextProp.__html : undefined;
11271119
if (nextHtml != null) {
11281120
const expectedHTML = normalizeHTML(domElement, nextHtml);
11291121
if (expectedHTML !== serverHTML) {
11301122
warnForPropDifference(propKey, serverHTML, expectedHTML);
11311123
}
11321124
}
11331125
continue;
1134-
case STYLE:
1126+
case 'style':
11351127
// $FlowFixMe - Should be inferred as not undefined.
11361128
extraAttributeNames.delete(propKey);
11371129

@@ -1292,7 +1284,7 @@ export function diffHydratedProperties(
12921284
// TODO: Should we use domElement.firstChild.nodeValue to compare?
12931285
if (typeof children === 'string' || typeof children === 'number') {
12941286
if (domElement.textContent !== '' + children) {
1295-
if (rawProps[SUPPRESS_HYDRATION_WARNING] !== true) {
1287+
if (rawProps.suppressHydrationWarning !== true) {
12961288
checkForUnmatchedText(
12971289
domElement.textContent,
12981290
children,
@@ -1301,7 +1293,7 @@ export function diffHydratedProperties(
13011293
);
13021294
}
13031295
if (!isConcurrentMode) {
1304-
updatePayload = [CHILDREN, children];
1296+
updatePayload = ['children', children];
13051297
}
13061298
}
13071299
}
@@ -1346,7 +1338,7 @@ export function diffHydratedProperties(
13461338
if (
13471339
// $FlowFixMe - Should be inferred as not undefined.
13481340
extraAttributeNames.size > 0 &&
1349-
rawProps[SUPPRESS_HYDRATION_WARNING] !== true
1341+
rawProps.suppressHydrationWarning !== true
13501342
) {
13511343
// $FlowFixMe - Should be inferred as not undefined.
13521344
warnForExtraAttributes(extraAttributeNames);

0 commit comments

Comments
 (0)