Do not toLowerCase lists of lowercase words (#13428)
* Do not toLowerCase lists of lowercase words * Add notes about downcasing to DOMProperty.js * Use consistent comment breakout * Make toLowerCase more obvious
Nathan Hunzaker committed
Aug 17, 2018 at 19:52 UTC
0cd8d470da69793f7e8efcfa830012637b01757a
1 file changed
+42
-6
packages/react-dom/src/shared/DOMProperty.js
+42
-6
@@ -320,35 +320,55 @@ const properties = {};
320
'multiple',
321
'muted',
322
'selected',
323
+
324
+ // NOTE: if you add a camelCased prop to this list,
325
+ // you'll need to set attributeName to name.toLowerCase()
326
+ // instead in the assignment below.
327
].forEach(name => {
328
properties[name] = new PropertyInfoRecord(
329
name,
330
BOOLEAN,
331
true, // mustUseProperty
328
- name.toLowerCase(), // attributeName
332
+ name, // attributeName
333
null, // attributeNamespace
334
);
335
});
336
337
// These are HTML attributes that are "overloaded booleans": they behave like
338
// booleans, but can also accept a string value.
335
-['capture', 'download'].forEach(name => {
339
+[
340
+ 'capture',
341
+ 'download',
342
+
343
+ // NOTE: if you add a camelCased prop to this list,
344
+ // you'll need to set attributeName to name.toLowerCase()
345
+ // instead in the assignment below.
346
+].forEach(name => {
347
properties[name] = new PropertyInfoRecord(
348
name,
349
OVERLOADED_BOOLEAN,
350
false, // mustUseProperty
340
- name.toLowerCase(), // attributeName
351
+ name, // attributeName
352
null, // attributeNamespace
353
);
354
});
355
356
// These are HTML attributes that must be positive numbers.
346
-['cols', 'rows', 'size', 'span'].forEach(name => {
357
+[
358
+ 'cols',
359
+ 'rows',
360
+ 'size',
361
+ 'span',
362
+
363
+ // NOTE: if you add a camelCased prop to this list,
364
+ // you'll need to set attributeName to name.toLowerCase()
365
+ // instead in the assignment below.
366
+].forEach(name => {
367
properties[name] = new PropertyInfoRecord(
368
name,
369
POSITIVE_NUMERIC,
370
false, // mustUseProperty
351
- name.toLowerCase(), // attributeName
371
+ name, // attributeName
372
null, // attributeNamespace
373
);
374
});
@@ -446,6 +466,10 @@ const capitalize = token => token[1].toUpperCase();
466
'writing-mode',
467
'xmlns:xlink',
468
'x-height',
469
+
470
+ // NOTE: if you add a camelCased prop to this list,
471
+ // you'll need to set attributeName to name.toLowerCase()
472
+ // instead in the assignment below.
473
].forEach(attributeName => {
474
const name = attributeName.replace(CAMELIZE, capitalize);
475
properties[name] = new PropertyInfoRecord(
@@ -466,6 +490,10 @@ const capitalize = token => token[1].toUpperCase();
490
'xlink:show',
491
'xlink:title',
492
'xlink:type',
493
+
494
+ // NOTE: if you add a camelCased prop to this list,
495
+ // you'll need to set attributeName to name.toLowerCase()
496
+ // instead in the assignment below.
497
].forEach(attributeName => {
498
const name = attributeName.replace(CAMELIZE, capitalize);
499
properties[name] = new PropertyInfoRecord(
@@ -478,7 +506,15 @@ const capitalize = token => token[1].toUpperCase();
506
});
507
508
// String SVG attributes with the xml namespace.
481
-['xml:base', 'xml:lang', 'xml:space'].forEach(attributeName => {
509
+[
510
+ 'xml:base',
511
+ 'xml:lang',
512
+ 'xml:space',
513
+
514
+ // NOTE: if you add a camelCased prop to this list,
515
+ // you'll need to set attributeName to name.toLowerCase()
516
+ // instead in the assignment below.
517
+].forEach(attributeName => {
518
const name = attributeName.replace(CAMELIZE, capitalize);
519
properties[name] = new PropertyInfoRecord(
520
name,