Extract refactoring runs on JSX attribute

[automatensalat]

Describe the bug

The Extract refactoring can be run on JSX attributes, resulting in invalid syntax:

function MyComponent() {
	return <div id="test">Hello</div>;
}

Run "Extract" on attribute "id", results in

function MyComponent() {
	const extracted = id;
	return <div {extracted}="test">Hello</div>;
}

How to reproduce

See above

Expected behavior

I don't know if there's ever a way this can be useful; I think the refactoring should just show an error message in this case.

Additional information

• Version of the extension impacted: v6.18.2

[nicoespeon]

Thanks for reporting! I handled this case and now it will resolve the closest extractable chunk.

In this case, it will extract the whole JSX Element:

function MyComponent() {
  const extracted = <div id="test">Hello</div>;
  return extracted;
}

[automatensalat]

I suppose it could also extract the value of the attribute, i.e.

function MyComponent() {
  const extracted = "test";
  return <div id={extracted}>Hello</div>;
}

Not sure which behavior would be more helpful / expected.

[nicoespeon]

Maybe… I went for the consistent behavior of "extract the closest extractable node", I'm not sure how easy it would be to add this one special case at the moment. I think that's fine, you would put your cursor on the value to extract the value and that should work fine 👍