Skip to content

Commit

Permalink
Fixed React.lazy definition and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Nov 29, 2018
1 parent e762f41 commit 9b45d2b
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 26 deletions.
2 changes: 1 addition & 1 deletion lib/react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ declare module react {
): React$StatelessFunctionalComponent<P>;

declare export function lazy<P>(
component: () => React$ComponentType<P>,
component: () => Promise<{ default: React$ComponentType<P> }>,
): React$ComponentType<P>;

declare type MaybeCleanUpFn = ?(() => mixed);
Expand Down
13 changes: 11 additions & 2 deletions tests/react_16_6/lazy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,23 @@ type Props = {| foo: number |};
function FunctionComponent(x: Props): React.Node { return null }
class ClassComponent extends React.Component<Props> {}

const LazyFunctionComponent = React.lazy( () => FunctionComponent );
React.lazy(() => FunctionComponent); // Error incompatible with Promise
React.lazy(() => ClassComponent); // Error incompatible with Promise
React.lazy(() => Promise.resolve(FunctionComponent)); // Error property default is missing
React.lazy(() => Promise.resolve(ClassComponent)); // Error property default is missing

const LazyFunctionComponent = React.lazy(
() => Promise.resolve({default: FunctionComponent})
);

const _a = <LazyFunctionComponent foo={3} />;
const _b = <LazyFunctionComponent />; // Error missing foo
const _c = <LazyFunctionComponent foo={3} bar={3} />; // Error extra bar
const _d = <LazyFunctionComponent foo="string" />; // Error wrong type for foo

const LazyClassComponent = React.lazy( () => ClassComponent );
const LazyClassComponent = React.lazy(
() => Promise.resolve({default: ClassComponent})
);

const _e = <LazyClassComponent foo={3} />;
const _f = <LazyClassComponent />; // Error missing foo
Expand Down
122 changes: 100 additions & 22 deletions tests/react_16_6/react_16_6.exp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,90 @@ References:
^^^^^^^^^^^^^^^^^^^^^ [4]


Error ----------------------------------------------------------------------------------------------------- lazy.js:9:12

Cannot call `React.lazy` with function bound to `component` because function [1] is incompatible with `Promise` [2] in
the return value.

lazy.js:9:12
9| React.lazy(() => FunctionComponent); // Error incompatible with Promise
^^^^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:6:1
6| function FunctionComponent(x: Props): React.Node { return null }
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
<BUILTINS>/react.js:294:22
294| component: () => Promise<{ default: React$ComponentType<P> }>,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]


Error ---------------------------------------------------------------------------------------------------- lazy.js:10:12

Cannot call `React.lazy` with function bound to `component` because class `ClassComponent` [1] is incompatible with
`Promise` [2] in the return value.

lazy.js:10:12
10| React.lazy(() => ClassComponent); // Error incompatible with Promise
^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:7:7
7| class ClassComponent extends React.Component<Props> {}
^^^^^^^^^^^^^^ [1]
<BUILTINS>/react.js:294:22
294| component: () => Promise<{ default: React$ComponentType<P> }>,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]


Error ---------------------------------------------------------------------------------------------------- lazy.js:11:12

Cannot call `React.lazy` with function bound to `component` because property `default` is missing in function [1] but
exists in object type [2] in type argument `R` [3] of the return value.

lazy.js:11:12
11| React.lazy(() => Promise.resolve(FunctionComponent)); // Error property default is missing
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:6:1
6| function FunctionComponent(x: Props): React.Node { return null }
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
<BUILTINS>/react.js:294:30
294| component: () => Promise<{ default: React$ComponentType<P> }>,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/core.js:612:24
612| declare class Promise<+R> {
^ [3]


Error ---------------------------------------------------------------------------------------------------- lazy.js:12:12

Cannot create `LazyFunctionComponent` element because property `foo` is missing in props [1] but exists in `Props` [2].
Cannot call `React.lazy` with function bound to `component` because property `default` is missing in statics of
`ClassComponent` [1] but exists in object type [2] in type argument `R` [3] of the return value.

lazy.js:12:12
12| const _b = <LazyFunctionComponent />; // Error missing foo
12| React.lazy(() => Promise.resolve(ClassComponent)); // Error property default is missing
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:7:7
7| class ClassComponent extends React.Component<Props> {}
^^^^^^^^^^^^^^ [1]
<BUILTINS>/react.js:294:30
294| component: () => Promise<{ default: React$ComponentType<P> }>,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
<BUILTINS>/core.js:612:24
612| declare class Promise<+R> {
^ [3]


Error ---------------------------------------------------------------------------------------------------- lazy.js:19:12

Cannot create `LazyFunctionComponent` element because property `foo` is missing in props [1] but exists in `Props` [2].

lazy.js:19:12
19| const _b = <LazyFunctionComponent />; // Error missing foo
^^^^^^^^^^^^^^^^^^^^^^^^^ [1]

References:
Expand All @@ -55,12 +133,12 @@ References:
^^^^^ [2]


Error ---------------------------------------------------------------------------------------------------- lazy.js:13:12
Error ---------------------------------------------------------------------------------------------------- lazy.js:20:12

Cannot create `LazyFunctionComponent` element because property `bar` is missing in `Props` [1] but exists in props [2].

lazy.js:13:12
13| const _c = <LazyFunctionComponent foo={3} bar={3} />; // Error extra bar
lazy.js:20:12
20| const _c = <LazyFunctionComponent foo={3} bar={3} />; // Error extra bar
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]

References:
Expand All @@ -69,29 +147,29 @@ References:
^^^^^ [1]


Error ---------------------------------------------------------------------------------------------------- lazy.js:14:12
Error ---------------------------------------------------------------------------------------------------- lazy.js:21:12

Cannot create `LazyFunctionComponent` element because string [1] is incompatible with number [2] in property `foo`.

lazy.js:14:12
14| const _d = <LazyFunctionComponent foo="string" />; // Error wrong type for foo
lazy.js:21:12
21| const _d = <LazyFunctionComponent foo="string" />; // Error wrong type for foo
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:14:39
14| const _d = <LazyFunctionComponent foo="string" />; // Error wrong type for foo
lazy.js:21:39
21| const _d = <LazyFunctionComponent foo="string" />; // Error wrong type for foo
^^^^^^^^ [1]
lazy.js:5:22
5| type Props = {| foo: number |};
^^^^^^ [2]


Error ---------------------------------------------------------------------------------------------------- lazy.js:19:12
Error ---------------------------------------------------------------------------------------------------- lazy.js:28:12

Cannot create `LazyClassComponent` element because property `foo` is missing in props [1] but exists in `Props` [2].

lazy.js:19:12
19| const _f = <LazyClassComponent />; // Error missing foo
lazy.js:28:12
28| const _f = <LazyClassComponent />; // Error missing foo
^^^^^^^^^^^^^^^^^^^^^^ [1]

References:
Expand All @@ -100,12 +178,12 @@ References:
^^^^^ [2]


Error ---------------------------------------------------------------------------------------------------- lazy.js:20:12
Error ---------------------------------------------------------------------------------------------------- lazy.js:29:12

Cannot create `LazyClassComponent` element because property `bar` is missing in `Props` [1] but exists in props [2].

lazy.js:20:12
20| const _g = <LazyClassComponent foo={3} bar={3} />; // Error extra bar
lazy.js:29:12
29| const _g = <LazyClassComponent foo={3} bar={3} />; // Error extra bar
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]

References:
Expand All @@ -114,17 +192,17 @@ References:
^^^^^ [1]


Error ---------------------------------------------------------------------------------------------------- lazy.js:21:12
Error ---------------------------------------------------------------------------------------------------- lazy.js:30:12

Cannot create `LazyClassComponent` element because string [1] is incompatible with number [2] in property `foo`.

lazy.js:21:12
21| const _h = <LazyClassComponent foo="string" />; // Error wrong type for foo
lazy.js:30:12
30| const _h = <LazyClassComponent foo="string" />; // Error wrong type for foo
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
lazy.js:21:36
21| const _h = <LazyClassComponent foo="string" />; // Error wrong type for foo
lazy.js:30:36
30| const _h = <LazyClassComponent foo="string" />; // Error wrong type for foo
^^^^^^^^ [1]
lazy.js:5:22
5| type Props = {| foo: number |};
Expand Down Expand Up @@ -222,7 +300,7 @@ References:



Found 14 errors
Found 18 errors

Only showing the most relevant union/intersection branches.
To see all branches, re-run Flow with --show-all-branches
Loading

0 comments on commit 9b45d2b

Please sign in to comment.