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

Event handlers types not working properly in <svelte:element> unless a prop is explicitly specified #2593

Open
alialaa opened this issue Nov 18, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@alialaa
Copy link

alialaa commented Nov 18, 2024

Describe the bug

I am creating a Button component where it can be an html button element or an anchor tag based on whether an href prop is passed or not. I am typing my props like so:

Screenshot 2024-11-18 at 5 25 00 PM

It seems to be working fine except when using an event handler, I get this error:
Parameter 'e' implicitly has an 'any' type.

Screenshot 2024-11-18 at 5 25 09 PM

However when explicitly setting href to undefined it works fine:

Screenshot 2024-11-18 at 5 25 30 PM

Reproduction

I believe everything is provided in the screenshots but here's the code as text:

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

	type Props = (
		| (HTMLButtonAttributes & { href?: never })
		| (HTMLAnchorAttributes & { href: string })
	) & {
		children: Snippet;
	};

	let { children, ...props }: Props = $props();
</script>

<svelte:element this={props.href ? 'a' : 'button'} class="button" {...props}>
	{@render children()}
</svelte:element>

Expected behaviour

I expect that passing href={undefined} should not be required.

System Info

System:
   OS: macOS 15.1
   CPU: (12) arm64 Apple M3 Pro
   Memory: 97.98 MB / 18.00 GB
   Shell: 5.9 - /bin/zsh
 Binaries:
   Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
   npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
 Browsers:
   Chrome: 130.0.6723.117
   Safari: 18.1
 npmPackages:
   svelte: ^5.0.0 => 5.2.2 

Which package is the issue about?

No response

Additional Information, eg. Screenshots

No response

@alialaa alialaa added the bug Something isn't working label Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant