Auto closing tags trigger on any greater than sign

[trbrc]

It looks like the overall useful sveltejs/svelte-repl#14 / sveltejs/svelte-repl#17 is getting in the way in a few situations. Try for example to type out the following examples character by character:

<button on:click={() => (counter++)}>Increment</button>

<div class:too-much={counter > 10}>{counter}</div>

When you get to the greater than signs, you will end up with the following result:

<button on:click={() =>
  │
</button>}

<div class:too-much={counter >
  │
</div>}

[mjgartendev]

I think this is going to require a new CodeMirror Mode for Svelte, which seems worth it anyway. I do not see a way to override the existing add-ons/mode config to handle this logic, but it's very possible I'm just missing something.

It would require overlaying or reusing parts of the existing Handlebars/JSX modes (jsx already handles the auto closing issue when {} is inside an xml open tag) on top of HTML.

In addition, the Vue mode has a good example for handling different languages in script/style/markup blocks so a Svelte specific mode would have other benefits along the lines of supporting preprocessors.

1. Does a Svelte Mode already exist somewhere that I'm missing?
2. If not, would that belong here with the REPL, in the svelte-language repo, or in a separate repo?
3. There's an existing TM grammar in the language repo and a Svelte Prism definition somewhere. Does anybody know if it's worth trying to reuse any of that for CodeMirror specifically? Should we try to keep all the editor integrations together?