Feat: Extract function with jsx selection should be replaced with jsx sfc

[cevek]

Suggestion

If we select jsx element and do extract refactor, editor should be refactor it in jsx maner

Examples

function Foo({ items }: { items: { id: number; name: string }[] }) {
    return <div>{items.map(item => <div>{item.id}: {item.name}</div>)}</div>;
}

After refactor should be

function Foo({ items }: { items: { id: number; name: string }[] }) {
    return <div>{items.map(item => <Bar id={item.id} name={item.name}/>)}</div>;
}

function Bar(item: { id: number; name: string; }) {
    return <div>{item.id}: {item.name}</div>;
}

Current behavior

[mhegazy]

I would say a new refactoring should be offered in this context to extract the JSX element to an SFC.

[cevek]

But source code of new refactoring will be almost the same as main extractFunction refactoring, isn't it? Or we can reuse existent code?

[mhegazy]

This has nothing to do with the source code. the same refactoring implementation can offer multiple refactorings to the user. for instance extractFunction offers one for every containing scope. it is still the same implementation, it just gives the user choices.

[mariusGundersen]

I think this would be more obvious and useful when selecting a chunk of jsx, for example:

function Component({title, subtitle, author, publishedDate, text}){
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtlitle}</h2>
      <div className="byline">
        <a href={author.url}>{author.name}</a> ({publishedDate})
      </div>
      <p>{text}</p>
    </div>
  )
}

When selecting and extracting the .byline div and extracting it, it should be replaced with the jsx call to the function: like this:

function Component({title, subtitle, author, publishedDate, text}){
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtlitle}</h2>
-      <div className="byline">
-        <a href={author.url}>{author.name}</a> ({publishedDate})
-      </div>
+      <Byline author={author} publishedDate={publishedDate} />
      <p>{text}</p>
    </div>
  )
}

For this to work correctly it's necessary to make the function accept only a single parameter, so that it can be sent in as the props. That is, the implementation would in the above scenario be

function Byline({author, publishedDate}){
  return (
    <div className="byline">
      <a href={author.url}>{author.name}</a> ({publishedDate})
    </div>
  )
}

[OliverJAsh]

Perhaps we could achieve this by adding a few smaller refactorings and then composing them together to create a larger refactoring.

1. Extract to function in module scope
2. Convert parameters to destructured object
3. Convert call expression to JSX element

Here's a video where I demonstrate this using the example above: https://www.loom.com/share/4498fb6487bf42c39aa59a4a52dee5a1

The first 2 refactorings already exist, so we'd just need to add the third one ("Convert call expression to JSX element"). (I have written a version of this myself which I'm happy to share if anyone is interested.)

Once we have that, TypeScript could (somehow) package up these refactorings into a larger one and call it something like "Extract JSX as component".

At my workplace we prefer to write components using function expressions instead of function declarations. This has a few extra steps:

1. Extract to function in module scope (as before)
2. Convert parameters to destructured object (as before)
3. Convert function declaration to arrow function
4. Annotate as React.FC
5. Convert call expression to JSX element (as before)

https://www.loom.com/share/01281c815f5b44d38b3774df37ce703a

[OliverJAsh]

Note this is very similar to #15090.