Ability to extract Svelte HTML into a component

[milkbump]

It'd be nice to get the ability to extract sections of HTML into a separate component through a context-menu. For example, if I select a div and right-click, it should give me the option to extract it into a separate component.

Example extracting an expression to a variable VSCode:

☝️ I essentially would like to be able to do that with HTML, not just JS.

I've used @proverbial-ninja's vscode-component-extractor which is very handy for simple refactors.

But for more complex examples, understanding the Svelte's compiler's output is necessary. eg:

<!-- Number.svelte ->
<script>
	let one = 1;
</script>

<div class="number">
	<div class="one">{one}</div>
</div>

<style>
	.number { background-color: black };
	.one { color: white };
</style>

I'd like to select div.one > Extract to component and end up with:

<!-- Number.svelte ->
<script>
	let one = 1;
</script>

<div class="number">
	<One {one}/>
</div>

<style>
	.number { background-color: black };
</style>

<!-- One.svelte ->
<script>
	export let one;
</script>

<div class="one">{one}</div>

<style>
	.one { color: white };
</style>

[dummdidumm]

This now exists (for a while) to some extend. Here's what you need to do:

1. Select a range you want to export
2. Fire up the command window
3. "Svelte: Extract Component"
4. Choose name/location relative to current component

What's missing:

• no semantic analysis if selection range is valid
• no analysis which script/style code should be transferred

[milkbump]

Thanks for the heads-up!!

When I saw the initial PR, my immediate impulse was to try right-clicking. It didn't work, so I assumed it just hadn't shipped yet, and I forgot about it for a while. This was based on my expectations from extracting/refactoring support in JavaScript.

Did you consider implementing this via the context-menu?

[ziontee113]

Hi, I wonder if it's possible to have this functionality in the native LSP protocol code actions?