-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Summary: React Fiber lets you return more types from your render method. Specifically, you can return an array of elements, or strings, etc. This change updates the React libdefs in a few ways. 1. Define a React$Node<T> type, which represents all valid return types 2. Update React.render and like to accept React$Node<T> (note that createElement still returns a React$Element) 3. Exports a non-parameterized Node type from the react module I also updated some of the hardcoded logic in Flow that deals with these types. Specifically, in the createElement custom fun, we check that a stateless functional component is correct by "calling" it with an expected return type. That expected return type is now `React$Node<Config>`. The non-parameterized exports give folks a way of importing types without depending on the globals. I used this in the tests in a few places. In projects that use a lot of React, I recommend creating an alias: ``` type ReactNode = React$Node<any> ``` and using that as the return types of render() methods. If you are doing something like a HOC, or otherwise need to use the parameterized version, you are free to do so, but people should use the non-parameterized versions otherwise. Note that one could equivalently write something like this in every module: ``` import {Node as ReactNode} from 'react'; ``` But I think that's too cumbersome to actually do in practice, if you have lots of React in your codebase, so just make a global alias. Reviewed By: spicyj Differential Revision: D5296482 fbshipit-source-id: 80c09dc22015dc1e53743a352091c26eb1aa6050
- Loading branch information
1 parent
f11cba5
commit 770a206
Showing
20 changed files
with
332 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
// @flow | ||
var React = require('react'); | ||
(<fbt />: React.Element<*>); | ||
(<fbt />: React$Element<*>); | ||
(<fbt />: number); // Error: ReactElement ~> number |
106 changes: 77 additions & 29 deletions
106
tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,82 @@ | ||
main.js:12 | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `CustomComponent` | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^ property `prop1`. Property not found in | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `CustomComponent` | ||
|
||
main.js:12 | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `CustomComponent` | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `prop`. Property not found in | ||
12: var b: React.Element<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^ object type | ||
|
||
main.js:19 | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `div` | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^ property `doesntmatch`. Property not found in | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `div` | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `CustomComponent` | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^ union: type application of class `React$Element` | string | number | type application of identifier `Iterable` | ||
Member 1: | ||
13: | React$Element<Config> | ||
^^^^^^^^^^^^^^^^^^^^^ type application of class `React$Element`. See lib: <BUILTINS>/react.js:13 | ||
Error: | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^ property `prop1`. Property not found in | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `CustomComponent` | ||
Member 2: | ||
14: | string | ||
^^^^^^ string. See lib: <BUILTINS>/react.js:14 | ||
Error: | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
14: | string | ||
^^^^^^ string. See lib: <BUILTINS>/react.js:14 | ||
Member 3: | ||
15: | number | ||
^^^^^^ number. See lib: <BUILTINS>/react.js:15 | ||
Error: | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
15: | number | ||
^^^^^^ number. See lib: <BUILTINS>/react.js:15 | ||
Member 4: | ||
16: | Iterable<React$Node<Config>>; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ type application of identifier `Iterable`. See lib: <BUILTINS>/react.js:16 | ||
Error: | ||
16: | Iterable<React$Node<Config>>; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `@@iterator` of $Iterable. Property not found in. See lib: <BUILTINS>/react.js:16 | ||
12: var b: React$Node<{prop1: string}> = <CustomComponent prop="asdf" />; // Error: Props<{prop}> ~> Props<{prop1}> | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element | ||
|
||
main.js:19 | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `div` | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `not_a_real_attr`. Property not found in | ||
19: var d: React.Element<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^ object type | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `div` | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ union: type application of class `React$Element` | string | number | type application of identifier `Iterable` | ||
Member 1: | ||
13: | React$Element<Config> | ||
^^^^^^^^^^^^^^^^^^^^^ type application of class `React$Element`. See lib: <BUILTINS>/react.js:13 | ||
Error: | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `not_a_real_attr`. Property not found in | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^ object type | ||
Member 2: | ||
14: | string | ||
^^^^^^ string. See lib: <BUILTINS>/react.js:14 | ||
Error: | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
14: | string | ||
^^^^^^ string. See lib: <BUILTINS>/react.js:14 | ||
Member 3: | ||
15: | number | ||
^^^^^^ number. See lib: <BUILTINS>/react.js:15 | ||
Error: | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with | ||
15: | number | ||
^^^^^^ number. See lib: <BUILTINS>/react.js:15 | ||
Member 4: | ||
16: | Iterable<React$Node<Config>>; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ type application of identifier `Iterable`. See lib: <BUILTINS>/react.js:16 | ||
Error: | ||
16: | Iterable<React$Node<Config>>; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `@@iterator` of $Iterable. Property not found in. See lib: <BUILTINS>/react.js:16 | ||
19: var d: React$Node<{doesntmatch: string}> = <div not_a_real_attr="asdf" />; | ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element | ||
|
||
|
||
Found 4 errors | ||
Found 2 errors |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.