Skip to content

[WIP] Stronger types for React DOM #6727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
motiz88 wants to merge 12 commits into from
Closed

[WIP] Stronger types for React DOM #6727

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
96eb8e3
Create placeholder prop types for react-dom HTML/SVG intrinsics
motiz88 Aug 11, 2018
fa2dcc9
Type some props of React DOM intrinsics
motiz88 Aug 11, 2018
a66a619
React DOM: Add autoCapitalize HTML prop
motiz88 Aug 11, 2018
46ab07e
React DOM: Restrict content props on void HTML elements
motiz88 Aug 11, 2018
75b45ee
Add definitions for DOM pointer events
motiz88 Aug 12, 2018
4e8408a
Add definition for React DOM SyntheticPointerEvent
motiz88 Aug 12, 2018
5c63180
Add tangentialPressure and twist fields to SyntheticPointerEvent
motiz88 Aug 12, 2018
4d4ee6b
Merge branch 'pointer-events-6373' into stronger-react-dom
motiz88 Aug 12, 2018
f8f4b09
Add definitions for all React DOM events to HTML JSX intrinsics
motiz88 Aug 12, 2018
5363e88
Remove empty string from React DOM booleans/enums
motiz88 Aug 15, 2018
3898ec5
Merge remote-tracking branch 'facebook/master' into pointer-events-6373
motiz88 Aug 15, 2018
b579b77
Merge branch 'pointer-events-6373' into stronger-react-dom
motiz88 Aug 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove empty string from React DOM booleans/enums 
This is a design choice documented in
#6727 (comment)
  • Loading branch information
@motiz88
motiz88 committed Aug 15, 2018
commit 5363e88216c5a6c4c5e6d9ed51d7360a48ca5b34
6 changes: 2 additions & 4 deletions lib/react-dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,7 +611,7 @@ type ReactDOM$HTMLElementProps = ReactDOM$ElementProps & {
spellCheck?: ReactDOM$BooleanishString,
suppressContentEditableWarning?: boolean,
title?: string,
translate?: $TODO$CaseInsensitive<"" | "yes" | "no">
translate?: $TODO$CaseInsensitive<"yes" | "no">
};

type ReactDOM$SVGElementProps = ReactDOM$ElementProps & {
Expand All @@ -633,12 +633,10 @@ type ReactDOM$SVGElementProps = ReactDOM$ElementProps & {
};

type ReactDOM$BooleanishString =
| ""
| $TODO$CaseInsensitive<"true" | "false">
| boolean;

type ReactDOM$Boolean<AttributeName: string = ""> =
| ""
type ReactDOM$Boolean<AttributeName: string> =
| $TODO$CaseInsensitive<AttributeName>
| boolean;

Expand Down
2 changes: 1 addition & 1 deletion tests/react_dom/props_boolean.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from "react";
<span hidden={null} />; // Error: Expected DOM boolean
<span hidden="true" />; // Error: Expected DOM boolean
<span hidden="false" />; // Error: Expected DOM boolean
<span hidden="" />; // OK
<span hidden="" />; // Error: Expected DOM boolean
<span hidden="yes" />; // Error: Expected DOM boolean
<span hidden="hidden" />; // OK

Expand Down
2 changes: 1 addition & 1 deletion tests/react_dom/props_booleanish_string.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ import React from "react";
<div contentEditable={null} />; // Error: Expected booleanish string
<div contentEditable="true" />; // OK
<div contentEditable="false" />; // OK
<div contentEditable="" />; // OK
<div contentEditable="" />; // Error: Expected booleanish string
<div contentEditable="yes" />; // Error: Expected booleanish string
<div contentEditable="contentEditable" />; // Error: Expected booleanish string
192 changes: 102 additions & 90 deletions tests/react_dom/react_dom.exp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,8 @@ References:
Error --------------------------------------------------------------------------------------------- props_boolean.js:7:1

Cannot create `span` element because in property `hidden`:
- Either null [1] is incompatible with empty string [2].
- Or null [1] is incompatible with string literal `hidden` [3].
- Or null [1] is incompatible with boolean [4].
- Either null [1] is incompatible with string literal `hidden` [2].
- Or null [1] is incompatible with boolean [3].

props_boolean.js:7:1
7| <span hidden={null} />; // Error: Expected DOM boolean
Expand All @@ -119,23 +118,19 @@ References:
props_boolean.js:7:15
7| <span hidden={null} />; // Error: Expected DOM boolean
^^^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | ""
^^ [2]
<BUILTINS>/react-dom.js:642:5
642| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:643:5
643| | boolean;
^^^^^^^ [4]
641| | boolean;
^^^^^^^ [3]


Error --------------------------------------------------------------------------------------------- props_boolean.js:8:1

Cannot create `span` element because in property `hidden`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with string literal `hidden` [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with string literal `hidden` [2].
- Or string [1] is incompatible with boolean [3].

props_boolean.js:8:1
8| <span hidden="true" />; // Error: Expected DOM boolean
Expand All @@ -145,23 +140,19 @@ References:
props_boolean.js:8:14
8| <span hidden="true" />; // Error: Expected DOM boolean
^^^^^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | ""
^^ [2]
<BUILTINS>/react-dom.js:642:5
642| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:643:5
643| | boolean;
^^^^^^^ [4]
641| | boolean;
^^^^^^^ [3]


Error --------------------------------------------------------------------------------------------- props_boolean.js:9:1

Cannot create `span` element because in property `hidden`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with string literal `hidden` [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with string literal `hidden` [2].
- Or string [1] is incompatible with boolean [3].

props_boolean.js:9:1
9| <span hidden="false" />; // Error: Expected DOM boolean
Expand All @@ -171,23 +162,41 @@ References:
props_boolean.js:9:14
9| <span hidden="false" />; // Error: Expected DOM boolean
^^^^^^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | ""
^^ [2]
<BUILTINS>/react-dom.js:642:5
642| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:643:5
643| | boolean;
^^^^^^^ [4]
641| | boolean;
^^^^^^^ [3]


Error -------------------------------------------------------------------------------------------- props_boolean.js:10:1

Cannot create `span` element because in property `hidden`:
- Either string [1] is incompatible with string literal `hidden` [2].
- Or string [1] is incompatible with boolean [3].

props_boolean.js:10:1
10| <span hidden="" />; // Error: Expected DOM boolean
^^^^^^^^^^^^^^^^^^

References:
props_boolean.js:10:14
10| <span hidden="" />; // Error: Expected DOM boolean
^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | boolean;
^^^^^^^ [3]


Error -------------------------------------------------------------------------------------------- props_boolean.js:11:1

Cannot create `span` element because in property `hidden`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with string literal `hidden` [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with string literal `hidden` [2].
- Or string [1] is incompatible with boolean [3].

props_boolean.js:11:1
11| <span hidden="yes" />; // Error: Expected DOM boolean
Expand All @@ -197,23 +206,19 @@ References:
props_boolean.js:11:14
11| <span hidden="yes" />; // Error: Expected DOM boolean
^^^^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | ""
^^ [2]
<BUILTINS>/react-dom.js:642:5
642| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:643:5
643| | boolean;
^^^^^^^ [4]
641| | boolean;
^^^^^^^ [3]


Error -------------------------------------------------------------------------------------------- props_boolean.js:15:1

Cannot create `span` element because in property `hidden`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with string literal `hidden` [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with string literal `hidden` [2].
- Or string [1] is incompatible with boolean [3].

props_boolean.js:15:1
15| <span hidden="Hidden" />; // Currently an error
Expand All @@ -223,23 +228,19 @@ References:
props_boolean.js:15:14
15| <span hidden="Hidden" />; // Currently an error
^^^^^^^^ [1]
<BUILTINS>/react-dom.js:640:5
640| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:641:5
641| | ""
^^ [2]
<BUILTINS>/react-dom.js:642:5
642| | $TODO$CaseInsensitive<AttributeName>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:643:5
643| | boolean;
^^^^^^^ [4]
641| | boolean;
^^^^^^^ [3]


Error ----------------------------------------------------------------------------------- props_booleanish_string.js:7:1

Cannot create `div` element because in property `contentEditable`:
- Either null [1] is incompatible with empty string [2].
- Or null [1] is incompatible with enum [3].
- Or null [1] is incompatible with boolean [4].
- Either null [1] is incompatible with enum [2].
- Or null [1] is incompatible with boolean [3].

props_booleanish_string.js:7:1
7| <div contentEditable={null} />; // Error: Expected booleanish string
Expand All @@ -250,22 +251,40 @@ References:
7| <div contentEditable={null} />; // Error: Expected booleanish string
^^^^ [1]
<BUILTINS>/react-dom.js:636:5
636| | ""
^^ [2]
636| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:637:5
637| | boolean;
^^^^^^^ [3]


Error ---------------------------------------------------------------------------------- props_booleanish_string.js:10:1

Cannot create `div` element because in property `contentEditable`:
- Either string [1] is incompatible with enum [2].
- Or string [1] is incompatible with boolean [3].

props_booleanish_string.js:10:1
10| <div contentEditable="" />; // Error: Expected booleanish string
^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
props_booleanish_string.js:10:22
10| <div contentEditable="" />; // Error: Expected booleanish string
^^ [1]
<BUILTINS>/react-dom.js:636:5
636| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:637:5
637| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:638:5
638| | boolean;
^^^^^^^ [4]
637| | boolean;
^^^^^^^ [3]


Error ---------------------------------------------------------------------------------- props_booleanish_string.js:11:1

Cannot create `div` element because in property `contentEditable`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with enum [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with enum [2].
- Or string [1] is incompatible with boolean [3].

props_booleanish_string.js:11:1
11| <div contentEditable="yes" />; // Error: Expected booleanish string
Expand All @@ -276,22 +295,18 @@ References:
11| <div contentEditable="yes" />; // Error: Expected booleanish string
^^^^^ [1]
<BUILTINS>/react-dom.js:636:5
636| | ""
^^ [2]
636| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:637:5
637| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:638:5
638| | boolean;
^^^^^^^ [4]
637| | boolean;
^^^^^^^ [3]


Error ---------------------------------------------------------------------------------- props_booleanish_string.js:12:1

Cannot create `div` element because in property `contentEditable`:
- Either string [1] is incompatible with empty string [2].
- Or string [1] is incompatible with enum [3].
- Or string [1] is incompatible with boolean [4].
- Either string [1] is incompatible with enum [2].
- Or string [1] is incompatible with boolean [3].

props_booleanish_string.js:12:1
12| <div contentEditable="contentEditable" />; // Error: Expected booleanish string
Expand All @@ -302,14 +317,11 @@ References:
12| <div contentEditable="contentEditable" />; // Error: Expected booleanish string
^^^^^^^^^^^^^^^^^ [1]
<BUILTINS>/react-dom.js:636:5
636| | ""
^^ [2]
636| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/react-dom.js:637:5
637| | $TODO$CaseInsensitive<"true" | "false">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
<BUILTINS>/react-dom.js:638:5
638| | boolean;
^^^^^^^ [4]
637| | boolean;
^^^^^^^ [3]


Error ------------------------------------------------------------------------------------------------ props_enum.js:5:1
Expand Down Expand Up @@ -479,8 +491,8 @@ References:
void_element_tags.js:7:36
7| <menuitem dangerouslySetInnerHTML={{ __html: "Content" }} />; // Error
^^^^^^^^^^^^^^^^^^^^^ [1]
<BUILTINS>/react-dom.js:677:30
677| dangerouslySetInnerHTML?: ?void // innerHTML cannot be set on empty elements
<BUILTINS>/react-dom.js:675:30
675| dangerouslySetInnerHTML?: ?void // innerHTML cannot be set on empty elements
^^^^ [2]


Expand All @@ -496,10 +508,10 @@ References:
void_element_tags.js:8:5
8| <br>Content</br>; // Error
^^^^^^^ [1]
<BUILTINS>/react-dom.js:676:15
676| children?: ?void, // Empty elements cannot have children
<BUILTINS>/react-dom.js:674:15
674| children?: ?void, // Empty elements cannot have children
^^^^ [2]



Found 25 errors
Found 27 errors