Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VS Code freezes when the last character of a custom event handler is deleted #808

Closed
JBergles opened this issue Feb 9, 2021 · 2 comments
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.

Comments

@JBergles
Copy link

JBergles commented Feb 9, 2021

Describe the bug

I noticed some strange behavior when using a component with custom events. If I have <Foo on:bar={e => alert("hey")} /> and I start deleting from the end of the event handler, the VS code window hangs as soon as the body of the event handler becomes empty <Foo on:bar={} />

To Reproduce

Foo.svelte:

<script lang="ts">
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    function func() {
        dispatch("bar", {abc: 123})
    }
</script>

App.svelte:

<script lang="ts">
	import Foo from "./Foo.svelte";
</script>

<Foo on:bar={e => alert("hey")} />

Place the cursor at the end of the event handler right before the closing }. Backspace until the event handler body becomes {}.

Expected behavior

VSCode doesn't crash and I can continue editing the app component.

System (please complete the following information):

  • OS: Windows 10 Home 2004 19041.746
  • IDE: VSCode 1.53.0 Remote on WSL2 (Ubuntu 20.04)
  • Plugin/Package: Svelte for VSCode 104.4.0

Additional context

Minimal project to reproduce the issue
SvelteExample.tar.gz

@JBergles JBergles added the bug Something isn't working label Feb 9, 2021
@jasonlyu123
Copy link
Member

This is weird. I can see a high CPU usage on the main process of vscode, not extension host or language server. From my understanding, the extension can't block the UI thread.

After some more digging, I found disabling svelte.plugin.typescript.semanticTokens.enable would prevent the problem. But I don't know why. It freezes before asking the language server to update semantic tokens.

@jasonlyu123
Copy link
Member

Found the reason. There is a negative length in the semantic tokens result. We need to filter that out.

dummdidumm pushed a commit that referenced this issue Feb 10, 2021
…#811)

#808
In svelte2tsx transformation, component event handler code is moved, Thus the semantic token would have the wrong order with other attributes and a negative length($on). Filter out the negative one and then sort the token
@dummdidumm dummdidumm added the Fixed Fixed in master branch. Pending production release. label Feb 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.
Projects
None yet
Development

No branches or pull requests

3 participants