a.js

// @flow

import {connect} from './connect';

type Props = {
  name: string,
  magic: number,
};

export function MyComponent(props: Props) {
  return <div />;
}

export const MyConnectedComponent = connect(MyComponent, { magic: 42 });

// Flow says only `name` is missing, which is correct since we "connected" `magic`
// $ExpectError
//<MyConnectedComponent />;

// export MyConnectedComponent;

b.js

// @flow

import {MyConnectedComponent, MyComponent} from './a';

// Flow says `name` and `magic` are missing, which is expected
// $ExpectError
<MyComponent />;

// Flow is fine with this one?
<MyConnectedComponent />;

connect.js

// @flow

type Component<P> = (props: P) => any;

export function connect<P, E>(component: Component<P>, extra: E): Component<$Diff<P, E>> {
  return (component: any);
}

output

b.js:7
  7: <MyComponent />;
     ^^^^^^^^^^^^^^^ React element `MyComponent`
 10: export function MyComponent(props: Props) {
                                        ^^^^^ property `magic`. Property not found in. See: a.js:10
  7: <MyComponent />;
     ^^^^^^^^^^^^^^^ props of React element `MyComponent`

b.js:7
  7: <MyComponent />;
     ^^^^^^^^^^^^^^^ React element `MyComponent`
 10: export function MyComponent(props: Props) {
                                        ^^^^^ property `name`. Property not found in. See: a.js:10
  7: <MyComponent />;
     ^^^^^^^^^^^^^^^ props of React element `MyComponent`


Found 2 errors