Language-tools: Confusing / wrong code completion

[vatro]

Describe the bug
I'm experiencing confusing code completion with both plain JS and TS. Not sure if I've set up something wrong.

To Reproduce
see simple setup with a Parent.svelte and a Child.svelte component:

// Parent.svelte
<script>
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script>
    export let foo
    export let bar = undefined

    export const baz = () => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

JS with <script></script>:

• Code completion on the Child component shows bar, baz, foo, ref etc.
  expected: only foo and bar

  • why is ref there, what does it do?
  • I guess $$prop_def, $$slot_def, __sveltets_ensureType, __sveltets_partial are related to svelte2tsx (?)
  • Child / child?
  • onMount?

• bar, baz, foo are all listed as optional (?:)
  expected: bar optional, baz not listed, foo obligatory (see console warning).

• Code completion on child-reference is also confusing me, beside svelte2tsx related stuff etc.:
  foo is listed, although it's not accessible (see console error), baz is not listed.
  expected: foo is not listed, baz is listed

• Although baz is not listed I can call it and it works as expected (see console log)

TS version with <script lang="typescript"></script>:

// Parent.svelte
<script lang="typescript">
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child:Child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script lang="typescript">
    export let foo: number
    export let bar: number = undefined

    export const baz = (): void => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

• Code completion on the Child component shows bar, baz, foo, ref etc.
  expected: only foo and bar + etc.

• bar, baz, foo are all listed as optional (?:)
  expected: bar optional, baz not listed, foo obligatory (see console warning).

• Code completion on child-reference shows only $$prop_def and $$slot_def

  • After accessing $$prop_def the list contains bar, baz, foo (would expect only baz)
  • When trying to set foo I get "Cannot read ..."-error, but would expect "Props cannot be read directly from the component ..."
  • Calling $$prop_def.baz() doesn't work (see console-error)
  • Calling child.baz() works as expected (see console.log), although it's not listed, but gets marked as an error in VS Code: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

Conclusion:

Code completion actually seems so confusing / wrong, that I'm not sure if I've maybe configured something wrong? 🤔 Would highly appreciate any hint if assuming so!

System (please complete the following information):

• OS: Windows 10
• IDE: VSCode 1.47.2
• Plugin/Package: Svelte for VSCode 101.2.0

relevant package.json

"rollup": "^2.21.0",
"rollup-plugin-svelte": "^5.2.3",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-typescript": "^5.0.2",
"svelte": "^3.24.0",
"svelte-preprocess": "^4.0.8",
"tslib": "^2.0.0",
"typescript": "^3.9.7"

tsconfig.json

"compilerOptions": {
        "target": "es2017",
        "strict": false, 
        "moduleResolution": "node",
        "allowJs": false,
        "lib": [
            "es2017", "DOM"
        ],
        "types": [
            "svelte"
        ],
        "baseUrl": "."
    },
    "include": [
        "./src"
      ]
}

Thank you!

[dummdidumm]

You don't have setup anything wrong, you just noticed many of the shortcomings at once 😃

• Child reference has only $$..: Same cause as #307, still needs to be implemented
• Having $$..-completions: Yes, internal svelte2tsx, we may need to filter this
• foo optional: Because you don't have strict mode, every prop is marked as optional. We may need to revisit this decision.

[vatro]

Ah, okay, thank you for the fast reply!

• foo optional: Because you don't have strict mode, every prop is marked as optional. We may need to revisit this decision.

Okay, can't share my opinion on this atm, got to first check / remember why I don't have it on. 🤔

[dummdidumm]

Quick update:

• Code completion on the reference should be working now. $$slot_def etc have a comment which tells you this is about type checking only and you should not use this.
• ref no longer appears