Auto-import breaks script

[timephy]

Describe the bug

Hey, I am not sure whether this is the right place to report this.

When I auto-import something from within a (ts) script, then it misplaces the import statement, therefore breaking the script, and requiring manual fixing:

<script lang="ts">
    import type { Snippet } from "svelte"

    const {
        children
    }:import volumeControlPhone from "svelte-awesome/icons/volumeControlPhone" // ❗ WRONG!
 {
        children: Snippet
    } = $props()

    volumeControlPhone // <-- AUTOCOMPLETED HERE

</script>

{@render children()}

It DOES matter what is imported... This for example is correctly auto-imported:

<script lang="ts">
    import { getModal } from "$lib/modals" // ✅ CORRECT!
    import type { Snippet } from "svelte"

    const {
        children
    }: {
        children: Snippet
    } = $props()

    getModal // <-- AUTOCOMPLETED HERE
</script>

{@render children()}

This has been bothering me for close to a week now.

Reproduction

Not sure how to reproduce this.

But I am using

• VSCode
  Version: 1.95.3
  Commit: f1a4fb101478ce6ec82fe9627c43efbf9e98c813
  Date: 2024-11-13T14:50:04.152Z (2 wks ago)
  Electron: 32.2.1
  ElectronBuildId: 10427718
  Chromium: 128.0.6613.186
  Node.js: 20.18.0
  V8: 12.8.374.38-electron.0
  OS: Darwin x64 24.1.0
• Svelte for VSCode v109.3.2
• (disabled all other extensions to verify)

Logs

No response

System Info

System:
    OS: macOS 15.1
    CPU: (20) x64 Intel(R) Xeon(R) W-2150B CPU @ 3.00GHz
    Memory: 33.86 MB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 23.1.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: 9.12.3 - /usr/local/bin/pnpm
    bun: 1.1.34 - ~/code/grouptube/frontend/node_modules/.bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1
  npmPackages:
    svelte: 5.2.10 => 5.2.10

Severity

annoyance

[timephy]

Also "Organize Imports" does weird stuff... It transforms this:

<script lang="ts" module>
    export type { IconType } from "svelte-awesome/components/Icon.svelte"
</script>

<script lang="ts">
    
</script>

to this:

<script lang="ts" module>
    export type { IconType } from "svelte-awesome/components/Icon.svelte"
<script lang="ts">
    
</script>

---

And this:

<script lang="ts">
    import Icon, { type IconType } from "$lib/ui/Icon.svelte"

    let {
        icon,
    }: {
        icon?: IconType
    } = $props()
</script>

to this:

<script lang="ts">
    import Icon, { type IconType } from "$lib/ui/Icon.svelte"
 {
        icon?: IconType
    } = $props()
</script>

[timephy]

My second comment seems to be related to or a duplicate of #2607