Open
Description
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>