Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5 migrate function doesn't preserve JSDoc annotation for props #11508

Open
FireMakeThunder opened this issue May 7, 2024 · 0 comments
Assignees
Labels
Milestone

Comments

@FireMakeThunder
Copy link

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

@dummdidumm dummdidumm added this to the 5.0 milestone May 13, 2024
@dummdidumm dummdidumm added the bug label May 16, 2024
@dummdidumm dummdidumm self-assigned this May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants