TS named like "MyButton.svelte.d.ts" breaks "@component" in "MyButton.svelte" about language-tools HOT 4 CLOSED

A .svelte.d.ts file next to a .svelte file with the same name means that the d.ts file is used for intellisense, including hover information. So you either have to move/copy the docs into the d.ts file or you use typescript inside your Svelte file.
Closing because this is working as intended.

from language-tools.

Ok, interesting... I made a new library starter but selected Typescript instead of JSDoc + Typescript.

For MyButtonTS.svelte I put the following code:

<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	interface $$Props extends HTMLButtonAttributes {
		/** What should my name be? */
		myName: string;
		/** My custom prop! */
		myCustomProp: boolean;
	}

	export let myName: $$Props['myName'] = 'Foo';
	export let myCustomProp: $$Props['myCustomProp'];
</script>

<button {...$$restProps}>
	{myName}
	{#if myCustomProp}isTrue{/if}
	<slot />
</button>

<!--
@component
Here's some documentation for this component...

## Usage
- Simple usage:
<MyButton>Foo</MyButton>
- Advanced usage:
<MyButton myName="Foo" myCustomProp={true}>Bar</MyButton>

## Props
@prop export let myCustomProp: boolean;
@prop export let myName: string;
-->

I then ran npm run build and checked ./dist to see it had generated MyButtonTS.svelte.d.ts with contents:

import { SvelteComponent } from "svelte";
import type { HTMLButtonAttributes } from 'svelte/elements';
declare const __propDef: {
    props: HTMLButtonAttributes & {
        /** What should my name be? */
        myName: string;
        /** My custom prop! */
        myCustomProp: boolean;
    };
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        default: {};
    };
};
export type MyButtonTsProps = typeof __propDef.props;
export type MyButtonTsEvents = typeof __propDef.events;
export type MyButtonTsSlots = typeof __propDef.slots;
/**
 * Here's some documentation for this component...
 *
 * ## Usage
 * - Simple usage:
 * <MyButton>Foo</MyButton>
 * - Advanced usage: 
 * <MyButton myName="Foo" myCustomProp={true}>Bar</MyButton>
 *
 * ## Props
 * @prop export let myCustomProp: boolean;
 * @prop export let myName: string;
 */
export default class MyButtonTs extends SvelteComponent<MyButtonTsProps, MyButtonTsEvents, MyButtonTsSlots> {
}
export {};

With this setup I see the intellisense for @component as well as the custom props in addition to the default attributes for button... It looks like it would be necessary to move the @component comment into the MyButtonTS.svelte.d.ts as a JSDoc-style comment instead of HTML-style comment in MyButtonTS.svelte.

The Typescript-only version is more magic but also more succinct... But I guess I can manage all this TS in a hand-rolled .d.ts so as to get the benefits of the JSDoc version... I'm just not so confident in my TS skills so as to know if this can be whittled down. If anyone can give some guidance on if this is what's necessary and a good path to take...?

Here is what it's looking like right now:

• https://github.com/leoj3n/my-button/blob/main/src/lib/MyButton.svelte.d.ts
• https://github.com/leoj3n/my-button/blob/main/src/lib/MyButton.svelte

from language-tools.

@dummdidumm Okay this is what I am seeing as well. Thanks for confirming. Moving the docs into the d.ts results in intellisense working as desired.

Does my Typescript file have to be this verbose or is there another way to write it so it's more succinct along the lines of this which was used to generate it:

<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	interface $$Props extends HTMLButtonAttributes {
		/** What should my name be? */
		myName: string;
		/** My custom prop! */
		myCustomProp: boolean;
	}

	export let myName: $$Props['myName'] = 'Foo';
	export let myCustomProp: $$Props['myCustomProp'];
</script>

I know it's kind of unrelated to the OP but would be nice to see, if you know.

from language-tools.

Followup answer to my own question:

It is correct that Svelte and SvelteKit's source code itself was written in JS and JSDoc, and not TypeScript. This allows for hacking on the core library without necessitating a build step. That advice doesn't transfer well to Svelte components, but it still does for "libraries" written in TS. For "component libraries" written in .svelte, it's not so really valid advice, because Svelte always has a build step. @typedef $$props could work to do this today even though it is not really a benefit for the component library case... Considering the Svelte 5 $props Rune solves prop typing going forwards, I doubt any further effort will be put into Svelte 4's type system, as this typing will be more automatic in the future.

https://svelte-5-preview.vercel.app/docs/runes#$props-what-this-replaces

from language-tools.