Skip to content

Commit

Permalink
[flow] add configurability for user-visible strings in the DOM
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@jbrown215 @facebook-github-bot
jbrown215 authored and facebook-github-bot committed Feb 24, 2025
1 parent a551b69 commit f191e57
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 44 deletions.
59 changes: 31 additions & 28 deletions lib/react-dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,18 @@ type ReactDOM$SVGElementJSXIntrinsic = {
...
};

// Override this if you want to add custom props to all HTML elements
type ReactDOM$CustomHTMLElementProps = $ReadOnly<{||}>;

// Override this if you want to change the types accepted by data-prefixed props
type ReactDOM$DataPropValues = ?(string | boolean | number);

// Override this if you want to change the types accepted for user-visible DOM attributes
type ReactDOM$UserVisibleString = string;

// Override this if you want to add custom events to all HTML elements
type ReactDOM$CustomEvents<-E> = $ReadOnly<{||}>;

type ReactDOM$BooleanishString = boolean | 'true' | 'false';

type ReactDOM$Style = any;
Expand Down Expand Up @@ -351,12 +363,12 @@ type ReactDOM$AriaAttributes = {|
* Defines a string value that labels the current element, which is intended to be converted into Braille.
* @see aria-label.
*/
'aria-braillelabel'?: ?string,
'aria-braillelabel'?: ?ReactDOM$UserVisibleString,
/**
* Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
* @see aria-roledescription.
*/
'aria-brailleroledescription'?: ?string,
'aria-brailleroledescription'?: ?ReactDOM$UserVisibleString,
'aria-busy'?: ?ReactDOM$BooleanishString,
/**
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
Expand All @@ -377,7 +389,7 @@ type ReactDOM$AriaAttributes = {|
* Defines a human readable text alternative of aria-colindex.
* @see aria-rowindextext.
*/
'aria-colindextext'?: ?string,
'aria-colindextext'?: ?ReactDOM$UserVisibleString,
/**
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-colindex @see aria-rowspan.
Expand Down Expand Up @@ -406,7 +418,7 @@ type ReactDOM$AriaAttributes = {|
* Defines a string value that describes or annotates the current element.
* @see related aria-describedby.
*/
'aria-description'?: ?string,
'aria-description'?: ?ReactDOM$UserVisibleString,
/**
* Identifies the element that provides a detailed, extended description for the object.
* @see aria-describedby.
Expand Down Expand Up @@ -471,7 +483,7 @@ type ReactDOM$AriaAttributes = {|
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/
'aria-label'?: ?string,
'aria-label'?: ?ReactDOM$UserVisibleString,
/**
* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
Expand Down Expand Up @@ -499,7 +511,7 @@ type ReactDOM$AriaAttributes = {|
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
* A hint could be a sample value or a brief description of the expected format.
*/
'aria-placeholder'?: ?string,
'aria-placeholder'?: ?ReactDOM$UserVisibleString,
/**
* 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.
* @see aria-setsize.
Expand Down Expand Up @@ -534,7 +546,7 @@ type ReactDOM$AriaAttributes = {|
/** Indicates that user input is required on the element before a form may be submitted. */
'aria-required'?: ?ReactDOM$BooleanishString,
/** Defines a human-readable, author-localized description for the role of an element. */
'aria-roledescription'?: ?string,
'aria-roledescription'?: ?ReactDOM$UserVisibleString,
/**
* Defines the total number of rows in a table, grid, or treegrid.
* @see aria-rowindex.
Expand All @@ -549,7 +561,7 @@ type ReactDOM$AriaAttributes = {|
* Defines a human readable text alternative of aria-rowindex.
* @see aria-colindextext.
*/
'aria-rowindextext'?: ?string,
'aria-rowindextext'?: ?ReactDOM$UserVisibleString,
/**
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-rowindex @see aria-colspan.
Expand Down Expand Up @@ -577,7 +589,7 @@ type ReactDOM$AriaAttributes = {|
*/
'aria-valuenow'?: ?number,
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
'aria-valuetext'?: ?string,
'aria-valuetext'?: ?ReactDOM$UserVisibleString,
|};

type ReactDOM$EventHandlers<-E> = $ReadOnly<{|
Expand Down Expand Up @@ -783,14 +795,11 @@ type ReactDOM$EventHandlers<-E> = $ReadOnly<{|
...ReactDOM$CustomEvents<E>,
|}>;

// Override this if you want to add custom events to all HTML elements
type ReactDOM$CustomEvents<-E> = $ReadOnly<{||}>;

// Special props provided by React
type ReactDOM$ReactSpecificProps = {|
children?: React$Node,
dangerouslySetInnerHTML?: {|
__html: string,
__html: ReactDOM$UserVisibleString,
|},
defaultChecked?: ?boolean,
defaultValue?: ?(string | number | $ReadOnlyArray<string>),
Expand Down Expand Up @@ -854,17 +863,11 @@ type ReactDOM$HTMLElementProps = {|
style?: ?ReactDOM$Style,
suppressContentEditableWarning?: ?boolean,
tabIndex?: ?number,
title?: ?string,
title?: ?ReactDOM$UserVisibleString,
translate?: ?('yes' | 'no'),
...ReactDOM$CustomHTMLElementProps,
|};

// Override this if you want to add custom props to all HTML elements
type ReactDOM$CustomHTMLElementProps = $ReadOnly<{||}>;

// Override this if you want to change the types accepted by data-prefixed props
type ReactDOM$DataPropValues = ?(string | boolean | number);

// Self closing tags, like br, do not allow children
type ReactDOM$SelfClosingHTMLElementProps = Omit<
ReactDOM$HTMLElementProps,
Expand Down Expand Up @@ -920,7 +923,7 @@ type ReactDOM$addressInstance = HTMLElement;

type ReactDOM$areaProps = {|
...ReactDOM$SelfClosingHTMLElementProps,
alt?: ?string,
alt?: ?ReactDOM$UserVisibleString,
coords?: ?string,
download?: any,
href?: ?string,
Expand Down Expand Up @@ -1170,7 +1173,7 @@ type ReactDOM$iframeInstance = HTMLIFrameElement;

type ReactDOM$imgProps = {|
...ReactDOM$SelfClosingHTMLElementProps,
alt?: ?string,
alt?: ?ReactDOM$UserVisibleString,
crossOrigin?: ?ReactDOM$CrossOrigin,
decoding?: ?('async' | 'auto' | 'sync'),
fetchPriority?: 'high' | 'low' | 'auto',
Expand All @@ -1188,7 +1191,7 @@ type ReactDOM$imgInstance = HTMLImageElement;
type ReactDOM$inputProps = {|
...ReactDOM$HTMLElementProps,
accept?: ?string,
alt?: ?string,
alt?: ?ReactDOM$UserVisibleString,
autoComplete?: ?string,
capture?: ?(boolean | 'user' | 'environment'),
checked?: ?boolean,
Expand All @@ -1208,7 +1211,7 @@ type ReactDOM$inputProps = {|
multiple?: ?boolean,
name?: ?string,
pattern?: ?string,
placeholder?: ?string,
placeholder?: ?ReactDOM$UserVisibleString,
readOnly?: ?boolean,
required?: ?boolean,
size?: ?number,
Expand Down Expand Up @@ -1367,15 +1370,15 @@ type ReactDOM$olInstance = HTMLOListElement;
type ReactDOM$optgroupProps = {|
...ReactDOM$HTMLElementProps,
disabled?: ?boolean,
label?: ?string,
label?: ?ReactDOM$UserVisibleString,
|};

type ReactDOM$optgroupInstance = HTMLOptGroupElement;

type ReactDOM$optionProps = {|
...ReactDOM$HTMLElementProps,
disabled?: ?boolean,
label?: ?string,
label?: ?ReactDOM$UserVisibleString,
selected?: ?boolean,
value?: ?(string | $ReadOnlyArray<string> | number),
|};
Expand Down Expand Up @@ -1549,7 +1552,7 @@ type ReactDOM$textareaProps = {|
maxLength?: ?number,
minLength?: ?number,
name?: ?string,
placeholder?: ?string,
placeholder?: ?ReactDOM$UserVisibleString,
readOnly?: ?boolean,
required?: ?boolean,
rows?: ?number,
Expand Down Expand Up @@ -1594,7 +1597,7 @@ type ReactDOM$trackProps = {|
...ReactDOM$SelfClosingHTMLElementProps,
default?: ?boolean,
kind?: ?string,
label?: ?string,
label?: ?ReactDOM$UserVisibleString,
src?: ?string,
srcLang?: ?string,
|};
Expand Down
32 changes: 16 additions & 16 deletions tests/component_syntax/component_syntax.exp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2482,8 +2482,8 @@ Cannot cast `intrinsicProp.children` to empty because `$Iterable` [1] is incompa
^^^^^^^^^^^^^^^^^^^^^^

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

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

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

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

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

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

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

References:
<BUILTINS>/react-dom.js:791:14
791| children?: React$Node,
<BUILTINS>/react-dom.js:800:14
800| children?: React$Node,
^^^^^^^^^^ [1]
propsof.js:14:26
14| (intrinsicProp.children: empty); // children is ?React.Node
Expand Down

0 comments on commit f191e57

Please sign in to comment.