Add refactoring action to export selected JSX code as stateless component

[rosieks]

Please add refactoring action that will improve productivity while working with JSX/TSX. Suppose that I have the following code:

class Page extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.header}</h1>
            </div>
        );
    }
}

I would like to select line with <h1> and chose from context menu "Extract to stateless component". And that would create the following stateless component:

const NewComponent = ({ header }) => (<h1>{header}</h1>);

The selected text would be replaced with that:

<NewComponent header={this.props.header} />

[cevek]

It would also be fine if it can convert component class into stateless component if possible and reverse convertion

class Page extends React.Component<PageProps, {}> {
    render() {
        return (
            <div>
                <h1>{this.props.header}</h1>
            </div>
        );
    }
}

// refactor converts to 

function Page({header}: PageProps) {
    return (
             <div>
                <h1>{header}</h1>
            </div>
    );
}

I think it possible to do with language service's plugin
https://github.com/RyanCavanaugh/sample-ts-plugin

[DanielRosenwasser]

I have a partially working version of this, but it was hard to get this working without #15868. The problem was accomodating propTypes.

[rosieks]

@DanielRosenwasser - is it because after extracting selected text to stateless function you also want to generate propTypes? If so then maybe it would be nice to generate that without propTypes - as far as I know it's not necessary to have it

[weswigham]

This should no longer be blocked, so if you already have a quickfix, let's see it. 😄

[OliverJAsh]

This is very similar to #25891.

I made a proposal here: #25891 (comment)