`@deprecated` JSDoc isn't respected for component props

[theetrain]

Description

Deprecating component props do not yield any apparent warnings in Svelte 4 and Svelte 5.

Example Svelte 4 code:

<script>
  /**
   * @type { boolean }
   * @deprecated Will be removed in next major.
   */
  export let test = false
</script>

Example Svelte 5 code:

<script>
  /**
   * @typedef {boolean} Test
   * @deprecated Will be removed in next major.
   */
  
  /** @type {{ test: Test }} */
  let { test } = $props()
</script>

Proposed solution

When deprecating a component prop:

• have it appear crossed-out in my editor for component consumers (not just internally to the component)
• display a warning reported by svelte-check when deprecated props are used.

Alternatives

No response

Additional Information, eg. Screenshots

Svelte 5 example, props used internally are crossed out. In this image, burst is incorrectly crossed out.

No deprecation warning when consuming Svelte 5 component.

Svelte 4 example, internal usage is correctly deprecated.

Consumption is documented as deprecated without being crossed out.

[jasonlyu123]

Probably related to https://github.com/microsoft/TypeScript/issues/45657

[theetrain]

On a related note, how would we declare Svelte 5 props as deprecated?

The only way I know today is to make a separate types.ts file and export an interface with @deprecated use where needed, such as:

import type { Snippet } from 'svelte'

export interface TestProps {
  /** @deprecated */
  size?: 'sm' | 'md' | 'lg'
  children?: Snippet
}

And import that in my component:

<script>
  /**
   * @type {import('./types').TestProps}
   * @default { size: 'md', children: undefined }
   */
  let { size = 'md', children } = $props()
</script>

<button class={size}>{@render children?.()}</button>

I don't see a way to use @deprecated within a Svelte component that isn't using Typescript.

Reference: https://stackoverflow.com/a/72604401