Language-tools: Show exported functions in auto-complete menu

Created on 15 Jul 2020 · 8Comments · Source: sveltejs/language-tools

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>

Fixed enhancement

Source

geoffrich

Most helpful comment

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

dummdidumm on 27 Jul 2020

👍2 ❤1 🎉1

All 8 comments

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

opensas on 17 Jul 2020

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.

geoffrich on 17 Jul 2020

@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 on 20 Jul 2020

👍1

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"
  },

opensas on 27 Jul 2020

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

dummdidumm on 27 Jul 2020

👍2 ❤1 🎉1

Excellent!!!

opensas on 27 Jul 2020

🎉1

@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>