svelte component-library intellisense for exported properties

Question

I have created a small component-library for myself based on this GitHub Repo: https://github.com/sveltejs/component-template

This works fine and i have uploaded it to npm.

When i want to use my components in another project i just install them and use them. This works fine as well. The only thing i don't get is Intellisense for the exported properties of my component in VSCode.

What do i have to add in my component library to get some basic Intellisense in the project where i use them?

Answer 1

Use the SvelteComponentTyped utility class for that:

declare module "myModule" {
  import { SvelteComponentTyped } from 'svelte';
  
  export class MyComponent extends SvelteComponentTyped<
    { propA: boolean },
    { someEvent: CustomEvent<string>; click: MouseEvent }> {}
}

Old/Outdated answer

At the moment there is no official way yet. This RFC proposes a way on how to that. If it's accepted and implemented, you would write a d.ts definition file with something like this:

import { SvelteComponent } from 'svelte';

declare module "myModule" {
  export class MyComponent extends SvelteComponent<
    { propA: boolean },
    { someEvent: CustomEvent<string>; click: MouseEvent }> {}
}

If you don't want to wait you can copy over the definition from here, which is likely to become the official type definition, and switch it out later - but you have been warned.

Answer 2

You have to add a svelte.config.js file to your projects-root dir. Highlighting, code-complete and other things can be configured for css, html and js/ts.

Have a look at: https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode