[Fix] Support Flow type spread

[moroine]

This PR aims to support type spread like:

// @flow
import * as React from 'react';

type DefaultProps = {|
  foo: number,
|}

type Props = {
  bar: string,
};

function MyComponent(props: Props) {}

MyComponent.defaultProps = {
  foo: 42,
};

This PR also fixes #2138

[moroine]

What's your opinion about trying to resolve types from external files, or add an option to warn when type can't be resolved

[ljharb]

@moroine i'm not a flow user, so i'm not sure. what do you think?

[moroine]

@ljharb I think it can be a good idea to warn first, as I discover that limitation only when reading the code.

[ghiculescu]

possibly a dumb question, but why is this erroring? notOne doesn't appear anywhere else in this test?

[moroine]

@ghiculescu it is at line 4791

[joeyparis]

@moroine I'm not sure I understand. Why is a separate test causing this test to fail? Aren't they each independent tests?

[levenecav]

After this update, it stopped working for me. 7.16.0 - everything was fine, after 7.17.0 - below.

type PropsState = {|
    brokenExchangeConnection: boolean
|};

type PropsActions = {|
    updateUserParams: (string, StreamingUserParamsItem) => StreamingUpdateUserParamsAction
|};

type PropsParent = {|
    onTenorChange: (SettingsStreamerAccountsPair, StreamingUserParamsItem) => void
|};

type Props = {|
    ...PropsState,
    ...PropsActions,
    ...PropsParent
|};


51:31  error  'brokenExchangeConnection' PropType is defined but prop is never used  react/no-unused-prop-types
57:23  error  'updateUserParams' PropType is defined but prop is never used          react/no-unused-prop-types
70:20  error  'onTenorChange' PropType is defined but prop is never used             react/no-unused-prop-types

[moroine]

@levenecav could we have the code of the component?

[levenecav]

He is big, but the essence of this:

import ...
import ...
import ...

type PropsState = {|
    brokenExchangeConnection: boolean
|};

type PropsActions = {|
    updateUserParams: (string, StreamingUserParamsItem) => StreamingUpdateUserParamsAction
|};

type PropsParent = {|
    onTenorChange: (SettingsStreamerAccountsPair, StreamingUserParamsItem) => void
|};

type Props = {|
    ...PropsState,
    ...PropsActions,
    ...PropsParent
|};

class Instrument extends PureComponent<Props> {
    render(): Node {
        return (
            <div
                data-marker={currency}
                className={styles.root}>
                {this.renderBody()}
            </div>
        );
    }

    renderBody(): Node {
        const { brokenExchangeConnection } = this.props;
        
        return (
            <div className={className}>
                <InstrumentErrorMessage
                    brokenExchangeConnection={brokenExchangeConnection}
                    onUpdateUserParams={this.handleUpdateUserParams}
                    onTenorChange={this.handleTenorChange} />
            </div>
        );
    }

    handleUpdateUserParams = () => {
        this.props.updateUserParams('id', { id: 'id', name: 'name' });
    };

    handleTenorChange = () => {
        this.props.onTenorChange('USD/RUB', { id: 'id', name: 'name' });
    };
}

export default SortableElement(connect(
    (state: StoreState, props: Props): PropsState => {
        const { brokenExchangeConnection } = state;

        return { brokenExchangeConnection };
    },
    ({
        updateUserParams: Actions.streaming.updateUserParams
    }: PropsActions)
)(Instrument));

[levenecav]

I use "flow" for types.

[moroine]

If you use the following props do you have the same error? Because this PR is only about converting spread to the following props. Here I suspect the rule not finding usage of props in other methods

type Props = {|
    brokenExchangeConnection: boolean,
    updateUserParams: (string, StreamingUserParamsItem) => StreamingUpdateUserParamsAction,
    onTenorChange: (SettingsStreamerAccountsPair, StreamingUserParamsItem) => void,
|};

[levenecav]

I have exactly the same problem as in #2138.
As far as I understand, this PR should solve this problem.
But in my case, on the contrary, this problem appeared, because in 7.16.0 it did not exist, and in 7.17.0 it appeared.

[moroine]

I'm sure your issue is caused by this PR. But this should be because now spreading is recognized as being

type Props = {|
    brokenExchangeConnection: boolean,
    updateUserParams: (string, StreamingUserParamsItem) => StreamingUpdateUserParamsAction,
    onTenorChange: (SettingsStreamerAccountsPair, StreamingUserParamsItem) => void,
|};

Could you check using Props without spreading with v7.16.0?

I suspect the error is due not used Props in the following function:

(state: StoreState, props: Props): PropsState => {
        const { brokenExchangeConnection } = state;

        return { brokenExchangeConnection };
    }

[ljharb]

@levenecav Please file a new issue.

[levenecav]

@moroine
Yes, you're right, I combined all props and the problem remains.
It turned out that the problem arises because getDerivedStateFromProps has a call to a function that is on the same level as the component class and in which I passed all props.
Thanks.

[ljharb]

Passing the props object around is an antipattern; always destructure what you need immediately.