Show exported functions in auto-complete menu

[geoffrich]

Is your feature request related to a problem? Please describe.
When binding to a component instance, I would like to have any exported functions available for auto-completion.

Describe the solution you'd like
Given the following components:

<!-- App.svelte -->
<script>
  import ClickTracker from "./ClickTracker.svelte";

  let componentRef;
</script>

<main>
  <ClickTracker bind:this={componentRef} />
  <button on:click={componentRef.track}>Click me</button>
</main>

<!-- ClickTracker.svelte -->
<script>
  export function track() {
    clicks++;
  }

  let clicks = 0;
</script>

<p>Clicks: {clicks}</p>

When operating on componentRef, I would like to see the track function show in the auto-complete menu.

Additional context
When using TypeScript with svelte-preprocess, referencing the track function shows the warning "Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'.ts(2339)" under the componentRef.track reference. I think this could be related.

<!-- App.svelte -->
<script lang="ts">
  import ClickTracker from "./ClickTracker.svelte";

  let componentRef: ClickTracker;
</script>

<main>
  <ClickTracker bind:this={componentRef} />
  <button on:click={componentRef.track}>Click me</button>
</main>

[opensas]

I had a similar issue and found the following workaround, although is too much code for my taste

<!-- ClickTracker.svelte -->
<script context='module' lang='ts'>
  export type ClickTrackerType =  SvelteComponent & { track(): void }
</script>
[...]

Then, from App.svelte:

<!-- App.svelte -->
<script lang='ts'>
  import ClickTracker from "./ClickTracker.svelte";
  import type { ClickTrackerType }  from "./ClickTracker.svelte";

  let componentRef: ClickTrackerType;
</script>

On the other hand, inspecting from vscode I found a

[geoffrich]

Hm, yeah, that's a good workaround. Though it's definitely more code than is ideal. I also don't like how any changes to the track() function would require manual updates to the exported type as well.

[opensas]

@geoffrich of course it's just a workaround until this issue is resolved, supporting typescript means that svelte can correctly generate the typings for my own Svelte component.

For me, the ideal syntax would be something like this:

let componentRef: ClickTracker

and that's it...

[opensas]

Has this been solved? Trying the ClickTracker example with typescript still gives me the following error:

Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'.ts(2339)

I'm working recently created from sveltejs/template, with the setupeNode.js script.

These are my devDependencies

  "devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-check": "^0.1.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^4.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },

[dummdidumm]

The new VSCode Plugin version was just released, maybe your IDE did not update yet. Newest version is 101.4.0 .

[opensas]

Excellent!!!

[vultix]

@opensas @dummdidumm I'm still seeing this issue.

Svelte plugin: 104.9.1

Steps to reproduce:

• Setup a new typescript svelte app:

npx degit sveltejs/template svelte-app
cd svelte-app
node ./scripts/setupTypeScript.js

• Create a new file src/ClickTracker.svelte with the following:

<script>
    export function track() {
        clicks++;
    }

    let clicks = 0;
</script>

<p>Clicks: {clicks}</p>

• Modify src/App.svelte to the following:

<script lang="ts">
	import ClickTracker from "./ClickTracker.svelte";
  
	let componentRef: ClickTracker;
</script>

<main>
	<ClickTracker bind:this={componentRef} />
	<button on:click={componentRef.track}>Click me</button>
</main>

• Note the error in src/App.svelte: Property 'track' does not exist on type 'ClickTracker__SvelteComponent_'