Props removed when saving

[frederichoule]

Describe the bug

When VSCode adds an import automatically, it adds it under the let { data }: { data: PageData } = $props();, which then gets removed when saving, probably due to auto-formatting.

Reproduction

1. Create a +page.svelte file
2. Write this: (Normally you wouldn't add the "error" import yourself, it would be added by VSCode when adding that function in your code somewhere in the file.)

import type { PageData } from './$types';
let { data }: { data: PageData } = $props();
import { error } from '@sveltejs/kit';

3. Save (or format file)
4. This will result in the let {data} being deleted.

import { error } from '@sveltejs/kit';
import type { PageData } from './$types';

Expected behaviour

Either the import { error } should be added before the let { data } initially, or the formatting tool places it at the correct place and do not delete the let { data }.

System Info

• OS: macOS 15.1
• IDE: VSCode 1.95.3

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

[jasonlyu123]

You probably have the editor.codeActionsOnSave config. What is the config? if it has source.organizeImports then this is a duplicate of #1590. It's a limitation of how the code is transformed under the hood and we haven't found a way to workaround it yet.

I can't reproduce auto-import adding import to after props. Can you provide a code snippet and instructions for reproducing it?

[frederichoule]

Yeah it seems like a duplicate of #1590

Here is a video that shows when an import is added after the let { data }.

CleanShot.2024-11-19.at.10.10.26.mp4

[frederichoule]

And I forgot to confirm:

"editor.codeActionsOnSave": {
    "source.organizeImports": "always"
},

[dummdidumm]

Fixed the auto import, for the more general problem I defer to #1590

[mcullifer]

Can confirm this is happening on 109.3.0.
From my testing, it isn't just let { data }: {data: PageData} = $props() being sandwiched between import statements, it was happening for any top level variable assignments in a svelte component const, let, etc.

Example

<script lang="ts">
    import X from '...';
    import Y from '...';
    import Z from '...';

    let { data }: { data: PageData } = $props();
</script>

Turns into

<script lang="ts">
    import X from '...';
    import Y from '...';
    import Z from '...';
{ data: PageData } = $props();
</script>

If I have any other top level variable declarations and put them before the $props() assignment then those get removed up to the type of the $props().

<script lang="ts">
    import X from '...';
    import Y from '...';
    import Z from '...';

    let test = $state('');
    let test2 = $state(true);
    const test3 = "test3"; 
    let { data }: { data: PageData } = $props();
</script>

Turns into

<script lang="ts">
    import X from '...';
    import Y from '...';
    import Z from '...';
{ data: PageData } = $props();
</script>

Interestingly

The bug doesn't happen at all when using a named type for props instead of doing it inline

<script lang="ts">
    import X from '...';
    import Y from '...';
    import Z from '...';

    type MyProps = {
        data: PageData;
    }
    let test = $state('');
    let test2 = $state(true);
    const test3 = "test3"; 
    let { data }: MyProps = $props();
</script>

It could be related to one of my imports having side effects? Like maybe something declares a variable at the top level, but I haven't pinned that down yet as most of my imports are from 3rd party npm modules. For now though I'm just setting "source.organizeImports": "never".

[frederichoule]

109.3.0 seems to introduce a new bug.

When organize imports runs, it rewrites

let { data }: { data: PageData } = $props();

to

{ data: PageData } = $props();

Which makes 109.3.0 unusable for me. Just reverted to 109.2.4.

Edit: Just saw @mcullifer comment. I have the same exact issue.

[dummdidumm]

Should be fixed in the latest release

[lts20050703]

@dummdidumm I can still reproduce mcullifer's issue in 109.3.2

[dummdidumm]

Please provide a complete code snippet that reproduces this

[frederichoule]

@dummdidumm I can still reproduce mcullifer's issue in 109.3.2

The issues seems to be fixed for me with 109.3.2.

[lts20050703]

@dummdidumm

<script lang="ts">
	import {} from "svelte"
	let {}: {} = $props()
</script>

102.3.2 formats to

<script lang="ts">
	import { } from "svelte"
 {} = $props()
</script>

.vscode/settings.json

{
	"editor.codeActionsOnSave": { "source.organizeImports": "always" }
}

[frederichoule]

Also:

	let { data }: { data: PageData } = $props();

	import {} from "svelte"

becomes:

	let { data }:import { } from "svelte";
import {} from "svelte"