Autocompletion inside on:click arrowfunction

[icebr9]

Describe the bug
When making event handler (i.e. on:click), the arrow function autocompletion inside seems to be malfunctioning.

To Reproduce
Try typing:

<div class="answer" on:click={() =}

when you do > it autocomplete the div inside the arrow function, see gif below:

Expected behavior
No autocompletion, let me do the arrow function.

Screenshots

Link to imgur gif

System (please complete the following information):

• OS: Windows
• IDE: VSCode
• Plugin: Svelte Beta

[jasonlyu123]

Oh! this bugs me a lot before lol. I did try to fix it a few days ago and thought it was fixed. Turns out it is just because of html tag auto-close not working. And it got reintroduced after #79.

[dummdidumm]

Maybe we need a regex for that, checking something along the lines of "if tag open and > comes after { but not after a closing }, don't do autoclose logic".

[jasonlyu123]

@icebr9 you can disable tag auto close for now

svelte.plugin.html.tagComplete: false

[icebr9]

@jasonlyu123 thanks! Doesn't bother me that much, just wanted to let you guys know that It is happening. Seems to be a very old bug because present in community's version of Svelte plugin as well, just seen it on an old tutorial video happening.

[jasonlyu123]

The issue behind this is that the language server uses vscode's HTML language service to provide HTML features. Problem is, the HTML parser would take the arrow as the end of a tag

svelte:

{#each items as item}
  <Foo on:click={() => bars(item.id)} />
{/each}

html:

{#each items as item}
  <Foo on:click={() => bars(item.id)} />
{/each}

So everything behind arrow will be treated as text content. That means after that emmet will started to bother you and property auto complete won't work.

It could be handle by preprocessing everything in the {} to whitespace and then hand it to HTML language service. But as mentions in sveltejs/svelte#4701 (comment), it would be pretty hard to properly determine where the expression ends. If sveltejs/svelte#4701 make it into release we might be able to use it to preprocess.

For now, to properly address it would be using the svelte parser to get the AST and preprocess using it, but it might have some performance issues. On the other hand, using a big regex to handle it would be a solution but it will have some edge-case to be handled. Also, there is already a lot of regex to match tags, maybe at some point, it might really be faster to do preprocess and parse AST.

[dummdidumm]

There is another problem with using the svelte parser/compiler: If you get into this situation, you are in an incomplete state, so the parser/compiler will throw an error. To address this, something like sveltejs/svelte#4818 needs to be done.

For now I think we need some quickfix like "check last 10-15 characters and see if there is a {" or, maybe even better "check if last character was not =".