Implement 'Synced Regions' for Svelte

[milkbump]

HTML for VS Code recently introduced Synced Regions for HTML tags. In summary, if you edit an opening tag, the same edits appear in the closing tag and vice versa.

This API is available for other extensions as of two weeks ago.

This is an issue to track the implementation of Synced Regions for: (Tip: | is the cursor)

• Svelte markup (e.g <div|></div|>)
• Svelte control flow (e.g {#each| n}{/each|}).
• ** Svelte classes & ids (e.g <div class="apple|"></div> <style> .apple| {color: red}</style> )
• ** JavaScript
  • <script> let world| = "" </script><div>Hello {world|}</div>.
  • <script> import Component| from "./component"</script><Component|></Component|>

** Syncing JavaScript and CSS classes and ids is iffy since I can imagine wanting to edit a variable/class without changing others in many situations. I haven't experimented with how flexible the LinkedEditingRangeProvider API is, but if possible, we could require a key-binding to get into synced mode for these contentious regions. Requiring a key-binding will likely hurt feature discovery + usage of syncing for these regions, so discussion of other possible implementations is very welcome.

I'd suggest four separate settings options for HTML, flow control, CSS and JS. Where HTML & flow control are on by default, but CSS & JS are off by default.

[jasonlyu123]

The markup part would be easy to implement and it probably is what it's designed for. The svelte control flow is viable but probably only possible when there's no syntax error in the file.
The proposal of CSS class name, id, and javascript identifier feel more like a rename symbol to me. We already have it for javascript but not CSS. And about the partly rename you can always use multiple cursors to achieve it.

[jasonlyu123]

I tried to implement the svelte control flow but the result using svelte AST is not very useful. It's too brittle. During linked editing, the code is very likely to be invalid. So the svelte compiler keeps complaining. We might need to implement a dedicated parser for it to be useful. So this probably won't happen soon.

To be clear, it does work. But once you exit for the linked editing mode, you can't go back because the code is invalid. So you will have to type quickly and correctly before vscode exit the linked editing mode.

[dummdidumm]

I also think that using the Svelte AST will be too brittle. Writing a custom parser sound like too much work for such a feature. Maybe the html parser we use in other places could be used for that.

[jasonlyu123]

Element and component tag can be done by the html-language-service. Not much code needed but there is a weird problem I just can't find out why.

[dummdidumm]

This feature is now live for html tags. Still not sure if other areas are valid use cases.