Closed
Description
Describe the bug
When migrating a component from Svelte 4 to 5, JSDoc annotations that were above the export let
props aren't found in interface Props
.
Before
<script lang="ts">
/** Total clicks */
export let count = 0;
/** Background color for button */
export let backgroundColor = 'blue';
/** Binding to button element */
export let button: HTMLButtonElement
/** Dispatches click to button element */
export function dispatchClick() {
button.dispatchEvent(new MouseEvent('click'));
}
</script>
<button on:click={() => count++} style="background-color: {backgroundColor}" bind:this={button}>
clicks: {count}
</button>
After
<script lang="ts">
/** Total clicks */
/** Background color for button */
/** Binding to button element */
interface Props { count?: number, backgroundColor?: string, button: HTMLButtonElement }
let { count = $bindable(0), backgroundColor = 'blue', button = $bindable() }: Props = $props();
/** Dispatches click to button element */
export function dispatchClick() {
button.dispatchEvent(new MouseEvent('click'));
}
</script>
<button onclick={() => count++} style="background-color: {backgroundColor}" bind:this={button}>
clicks: {count}
</button>
Expected
<script lang="ts">
interface Props {
/** Total clicks */
count?: number,
/** Background color for button */
backgroundColor?: string,
/** Binding to button element */
button: HTMLButtonElement
}
let { count = $bindable(0), backgroundColor = 'blue', button = $bindable() }: Props = $props();
/** Dispatches click to button element */
export function dispatchClick() {
button.dispatchEvent(new MouseEvent('click'));
}
</script>
<button onclick={() => count++} style="background-color: {backgroundColor}" bind:this={button}>
clicks: {count}
</button>
Reproduction
Link to Svelte 5 Repro - Click MIGRATE
Logs
No response
System Info
Using svelte 5 preview MIGRATE feature
Severity
annoyance