Problem with autocompletion in Svelte templates (VSCode)

[ptrxyz]

Describe the bug

Consider this code:

<script lang="ts">
    class Test {
        public foo = $state([1, 2, 3])
    }

    const T = new Test()
</script>

{#each T.foo as F}{/each}
       ^^^^^

When I am typing T. within the script block, VSCode suggests foo for autocompletion. This is however not the case within templates, i.e. the T.foo I highlighted with ^^^^^. There, VSCode does some autocompletion but it's just random stuff, not the property of T (see screenshot).

It this a bug/problem/missing feature with the Svelte language server? Can I fix this somehow?

I am on Svelte v5.0.0-next.199 and Svelte extension for VSCode version v108.5.4.

Reproduction

• Create a new Svelte project and copy the code above to any +page.svelte.
• Start VSCode in the project folder and have the VSCode Svelte Extension installed and running
• go to the location in the code marked with ^^^^^. After each, enter T.fo
• Find that autocompletion options do not contain foo.

Expected behaviour

Autocompletion options should contain Foo.

System Info

• OS: Linux
• IDE: VSCode
• Svelte v5.0.0-next.199
• Svelte extension for VSCode version v108.5.4
• VSCode 1.91.1

Which package is the issue about?

Svelte for VS Code extension, svelte-language-server

Additional Information, eg. Screenshots

Note:
Funny enough, if I have T. in the script block and nothing else, obviously I get a Transform failed error but the autocompletion works just as expected.

[jasonlyu123]

Duplicate of #1302 and #1990. You can see #1302 (comment) for the explanation. About the "Additional Infomation" part, Yes completion in the script tag is not affected because the entire script tag is blanked before passing into the Svelte compiler. The "transform failed.." error happens in a different step. We do have some workaround for the property access expression but it is only a string analysis so it only works in limited cases.

[ptrxyz]

Thanks @jasonlyu123 for the explanation! I can workaround this by destructuring the object in the script and assigning foo to its own variable.

However, I didn't fully get why the completion in the template works as long as I have that syntax error in the script tag. It seems it needs to be that specific error T., another one would not work.

Would you mind explaining it -- no need to go in details, i was just wondering, so I would really appreciate it.

[jasonlyu123]

For TypeScript to understand svelte we generate a virtual ts file. The generation relies on Svelte's AST so when the Svelte compiler throws an "Unexpected token" error the generation can't proceed. In that case, the virtual ts file is just the content of the script tag. The position where the completion is triggered is mapped to the script tag content. So it will either be at the start of the script tag or the end of the script tag. In other words, you are just triggering the completion from the T. at the end of the script tag so it'll only work when it is the same.

[ptrxyz]

Oh I see. Thanks for the clarification!