Skip to content

Commit f191e57

Browse files
jbrown215facebook-github-bot
jbrown215
authored and
facebook-github-bot
committed
[flow] add configurability for user-visible strings in the DOM
Summary: Adds user-visible strings as an overridable type to allow for opaque-ly typed translation systems Changelog: [internal] Reviewed By: SamChou19815 Differential Revision: D69559371 fbshipit-source-id: 3231f94475311bd8de904bda33136b8edd31112a
1 parent a551b69 commit f191e57

File tree

2 files changed

+47
-44
lines changed

2 files changed

+47
-44
lines changed

‎lib/react-dom.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,18 @@ type ReactDOM$SVGElementJSXIntrinsic = {
324324
...
325325
};
326326

327+
// Override this if you want to add custom props to all HTML elements
328+
type ReactDOM$CustomHTMLElementProps = $ReadOnly<{||}>;
329+
330+
// Override this if you want to change the types accepted by data-prefixed props
331+
type ReactDOM$DataPropValues = ?(string | boolean | number);
332+
333+
// Override this if you want to change the types accepted for user-visible DOM attributes
334+
type ReactDOM$UserVisibleString = string;
335+
336+
// Override this if you want to add custom events to all HTML elements
337+
type ReactDOM$CustomEvents<-E> = $ReadOnly<{||}>;
338+
327339
type ReactDOM$BooleanishString = boolean | 'true' | 'false';
328340

329341
type ReactDOM$Style = any;
@@ -351,12 +363,12 @@ type ReactDOM$AriaAttributes = {|
351363
* Defines a string value that labels the current element, which is intended to be converted into Braille.
352364
* @see aria-label.
353365
*/
354-
'aria-braillelabel'?: ?string,
366+
'aria-braillelabel'?: ?ReactDOM$UserVisibleString,
355367
/**
356368
* Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
357369
* @see aria-roledescription.
358370
*/
359-
'aria-brailleroledescription'?: ?string,
371+
'aria-brailleroledescription'?: ?ReactDOM$UserVisibleString,
360372
'aria-busy'?: ?ReactDOM$BooleanishString,
361373
/**
362374
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
@@ -377,7 +389,7 @@ type ReactDOM$AriaAttributes = {|
377389
* Defines a human readable text alternative of aria-colindex.
378390
* @see aria-rowindextext.
379391
*/
380-
'aria-colindextext'?: ?string,
392+
'aria-colindextext'?: ?ReactDOM$UserVisibleString,
381393
/**
382394
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
383395
* @see aria-colindex @see aria-rowspan.
@@ -406,7 +418,7 @@ type ReactDOM$AriaAttributes = {|
406418
* Defines a string value that describes or annotates the current element.
407419
* @see related aria-describedby.
408420
*/
409-
'aria-description'?: ?string,
421+
'aria-description'?: ?ReactDOM$UserVisibleString,
410422
/**
411423
* Identifies the element that provides a detailed, extended description for the object.
412424
* @see aria-describedby.
@@ -471,7 +483,7 @@ type ReactDOM$AriaAttributes = {|
471483
* Defines a string value that labels the current element.
472484
* @see aria-labelledby.
473485
*/
474-
'aria-label'?: ?string,
486+
'aria-label'?: ?ReactDOM$UserVisibleString,
475487
/**
476488
* Identifies the element (or elements) that labels the current element.
477489
* @see aria-describedby.
@@ -499,7 +511,7 @@ type ReactDOM$AriaAttributes = {|
499511
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
500512
* A hint could be a sample value or a brief description of the expected format.
501513
*/
502-
'aria-placeholder'?: ?string,
514+
'aria-placeholder'?: ?ReactDOM$UserVisibleString,
503515
/**
504516
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
505517
* @see aria-setsize.
@@ -534,7 +546,7 @@ type ReactDOM$AriaAttributes = {|
534546
/** Indicates that user input is required on the element before a form may be submitted. */
535547
'aria-required'?: ?ReactDOM$BooleanishString,
536548
/** Defines a human-readable, author-localized description for the role of an element. */
537-
'aria-roledescription'?: ?string,
549+
'aria-roledescription'?: ?ReactDOM$UserVisibleString,
538550
/**
539551
* Defines the total number of rows in a table, grid, or treegrid.
540552
* @see aria-rowindex.
@@ -549,7 +561,7 @@ type ReactDOM$AriaAttributes = {|
549561
* Defines a human readable text alternative of aria-rowindex.
550562
* @see aria-colindextext.
551563
*/
552-
'aria-rowindextext'?: ?string,
564+
'aria-rowindextext'?: ?ReactDOM$UserVisibleString,
553565
/**
554566
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
555567
* @see aria-rowindex @see aria-colspan.
@@ -577,7 +589,7 @@ type ReactDOM$AriaAttributes = {|
577589
*/
578590
'aria-valuenow'?: ?number,
579591
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
580-
'aria-valuetext'?: ?string,
592+
'aria-valuetext'?: ?ReactDOM$UserVisibleString,
581593
|};
582594

583595
type ReactDOM$EventHandlers<-E> = $ReadOnly<{|
@@ -783,14 +795,11 @@ type ReactDOM$EventHandlers<-E> = $ReadOnly<{|
783795
...ReactDOM$CustomEvents<E>,
784796
|}>;
785797

786-
// Override this if you want to add custom events to all HTML elements
787-
type ReactDOM$CustomEvents<-E> = $ReadOnly<{||}>;
788-
789798
// Special props provided by React
790799
type ReactDOM$ReactSpecificProps = {|
791800
children?: React$Node,
792801
dangerouslySetInnerHTML?: {|
793-
__html: string,
802+
__html: ReactDOM$UserVisibleString,
794803
|},
795804
defaultChecked?: ?boolean,
796805
defaultValue?: ?(string | number | $ReadOnlyArray<string>),
@@ -854,17 +863,11 @@ type ReactDOM$HTMLElementProps = {|
854863
style?: ?ReactDOM$Style,
855864
suppressContentEditableWarning?: ?boolean,
856865
tabIndex?: ?number,
857-
title?: ?string,
866+
title?: ?ReactDOM$UserVisibleString,
858867
translate?: ?('yes' | 'no'),
859868
...ReactDOM$CustomHTMLElementProps,
860869
|};
861870

862-
// Override this if you want to add custom props to all HTML elements
863-
type ReactDOM$CustomHTMLElementProps = $ReadOnly<{||}>;
864-
865-
// Override this if you want to change the types accepted by data-prefixed props
866-
type ReactDOM$DataPropValues = ?(string | boolean | number);
867-
868871
// Self closing tags, like br, do not allow children
869872
type ReactDOM$SelfClosingHTMLElementProps = Omit<
870873
ReactDOM$HTMLElementProps,
@@ -920,7 +923,7 @@ type ReactDOM$addressInstance = HTMLElement;
920923

921924
type ReactDOM$areaProps = {|
922925
...ReactDOM$SelfClosingHTMLElementProps,
923-
alt?: ?string,
926+
alt?: ?ReactDOM$UserVisibleString,
924927
coords?: ?string,
925928
download?: any,
926929
href?: ?string,
@@ -1170,7 +1173,7 @@ type ReactDOM$iframeInstance = HTMLIFrameElement;
11701173

11711174
type ReactDOM$imgProps = {|
11721175
...ReactDOM$SelfClosingHTMLElementProps,
1173-
alt?: ?string,
1176+
alt?: ?ReactDOM$UserVisibleString,
11741177
crossOrigin?: ?ReactDOM$CrossOrigin,
11751178
decoding?: ?('async' | 'auto' | 'sync'),
11761179
fetchPriority?: 'high' | 'low' | 'auto',
@@ -1188,7 +1191,7 @@ type ReactDOM$imgInstance = HTMLImageElement;
11881191
type ReactDOM$inputProps = {|
11891192
...ReactDOM$HTMLElementProps,
11901193
accept?: ?string,
1191-
alt?: ?string,
1194+
alt?: ?ReactDOM$UserVisibleString,
11921195
autoComplete?: ?string,
11931196
capture?: ?(boolean | 'user' | 'environment'),
11941197
checked?: ?boolean,
@@ -1208,7 +1211,7 @@ type ReactDOM$inputProps = {|
12081211
multiple?: ?boolean,
12091212
name?: ?string,
12101213
pattern?: ?string,
1211-
placeholder?: ?string,
1214+
placeholder?: ?ReactDOM$UserVisibleString,
12121215
readOnly?: ?boolean,
12131216
required?: ?boolean,
12141217
size?: ?number,
@@ -1367,15 +1370,15 @@ type ReactDOM$olInstance = HTMLOListElement;
13671370
type ReactDOM$optgroupProps = {|
13681371
...ReactDOM$HTMLElementProps,
13691372
disabled?: ?boolean,
1370-
label?: ?string,
1373+
label?: ?ReactDOM$UserVisibleString,
13711374
|};
13721375

13731376
type ReactDOM$optgroupInstance = HTMLOptGroupElement;
13741377

13751378
type ReactDOM$optionProps = {|
13761379
...ReactDOM$HTMLElementProps,
13771380
disabled?: ?boolean,
1378-
label?: ?string,
1381+
label?: ?ReactDOM$UserVisibleString,
13791382
selected?: ?boolean,
13801383
value?: ?(string | $ReadOnlyArray<string> | number),
13811384
|};
@@ -1549,7 +1552,7 @@ type ReactDOM$textareaProps = {|
15491552
maxLength?: ?number,
15501553
minLength?: ?number,
15511554
name?: ?string,
1552-
placeholder?: ?string,
1555+
placeholder?: ?ReactDOM$UserVisibleString,
15531556
readOnly?: ?boolean,
15541557
required?: ?boolean,
15551558
rows?: ?number,
@@ -1594,7 +1597,7 @@ type ReactDOM$trackProps = {|
15941597
...ReactDOM$SelfClosingHTMLElementProps,
15951598
default?: ?boolean,
15961599
kind?: ?string,
1597-
label?: ?string,
1600+
label?: ?ReactDOM$UserVisibleString,
15981601
src?: ?string,
15991602
srcLang?: ?string,
16001603
|};

‎tests/component_syntax/component_syntax.exp

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2482,8 +2482,8 @@ Cannot cast `intrinsicProp.children` to empty because `$Iterable` [1] is incompa
24822482
^^^^^^^^^^^^^^^^^^^^^^
24832483

24842484
References:
2485-
<BUILTINS>/react-dom.js:791:14
2486-
791| children?: React$Node,
2485+
<BUILTINS>/react-dom.js:800:14
2486+
800| children?: React$Node,
24872487
^^^^^^^^^^ [1]
24882488
propsof.js:14:26
24892489
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2500,8 +2500,8 @@ Cannot cast `intrinsicProp.children` to empty because `React.Element` [1] is inc
25002500
^^^^^^^^^^^^^^^^^^^^^^
25012501

25022502
References:
2503-
<BUILTINS>/react-dom.js:791:14
2504-
791| children?: React$Node,
2503+
<BUILTINS>/react-dom.js:800:14
2504+
800| children?: React$Node,
25052505
^^^^^^^^^^ [1]
25062506
propsof.js:14:26
25072507
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2518,8 +2518,8 @@ Cannot cast `intrinsicProp.children` to empty because `React.Portal` [1] is inco
25182518
^^^^^^^^^^^^^^^^^^^^^^
25192519

25202520
References:
2521-
<BUILTINS>/react-dom.js:791:14
2522-
791| children?: React$Node,
2521+
<BUILTINS>/react-dom.js:800:14
2522+
800| children?: React$Node,
25232523
^^^^^^^^^^ [1]
25242524
propsof.js:14:26
25252525
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2535,8 +2535,8 @@ Cannot cast `intrinsicProp.children` to empty because boolean [1] is incompatibl
25352535
^^^^^^^^^^^^^^^^^^^^^^
25362536

25372537
References:
2538-
<BUILTINS>/react-dom.js:791:14
2539-
791| children?: React$Node,
2538+
<BUILTINS>/react-dom.js:800:14
2539+
800| children?: React$Node,
25402540
^^^^^^^^^^ [1]
25412541
propsof.js:14:26
25422542
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2552,8 +2552,8 @@ Cannot cast `intrinsicProp.children` to empty because null [1] is incompatible w
25522552
^^^^^^^^^^^^^^^^^^^^^^
25532553

25542554
References:
2555-
<BUILTINS>/react-dom.js:791:14
2556-
791| children?: React$Node,
2555+
<BUILTINS>/react-dom.js:800:14
2556+
800| children?: React$Node,
25572557
^^^^^^^^^^ [1]
25582558
propsof.js:14:26
25592559
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2569,8 +2569,8 @@ Cannot cast `intrinsicProp.children` to empty because number [1] is incompatible
25692569
^^^^^^^^^^^^^^^^^^^^^^
25702570

25712571
References:
2572-
<BUILTINS>/react-dom.js:791:14
2573-
791| children?: React$Node,
2572+
<BUILTINS>/react-dom.js:800:14
2573+
800| children?: React$Node,
25742574
^^^^^^^^^^ [1]
25752575
propsof.js:14:26
25762576
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2586,8 +2586,8 @@ Cannot cast `intrinsicProp.children` to empty because string [1] is incompatible
25862586
^^^^^^^^^^^^^^^^^^^^^^
25872587

25882588
References:
2589-
<BUILTINS>/react-dom.js:791:14
2590-
791| children?: React$Node,
2589+
<BUILTINS>/react-dom.js:800:14
2590+
800| children?: React$Node,
25912591
^^^^^^^^^^ [1]
25922592
propsof.js:14:26
25932593
14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2603,8 +2603,8 @@ Cannot cast `intrinsicProp.children` to empty because undefined [1] is incompati
26032603
^^^^^^^^^^^^^^^^^^^^^^
26042604

26052605
References:
2606-
<BUILTINS>/react-dom.js:791:14
2607-
791| children?: React$Node,
2606+
<BUILTINS>/react-dom.js:800:14
2607+
800| children?: React$Node,
26082608
^^^^^^^^^^ [1]
26092609
propsof.js:14:26
26102610
14| (intrinsicProp.children: empty); // children is ?React.Node

0 commit comments

Comments
 (0)