Svelte island does not expect class prop by default, causing warning

[Shmuppel]

What version of astro are you using?

1.7.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

A lot of work has already gone into passing Astro classes to Svelte islands (#5397, #5112), currently it seems the default behaviour is to pass the scoped classname as a prop (class="astro-VFKJLXQS"). However, Svelte components by default don't expect this prop unless explicitly used in the Svelte component. This causes a console warning: <Example> was created with unknown prop 'class'.

I'm hesitant to bring it up because it seems like more of a Svelte issue than an Astro one, but it does cause unexpected warnings which can be considered bad DX.

Thanks guys!

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/sweet-james-kxt2e3

Participation

• I am willing to submit a pull request for this issue.

[narration-sd]

Just spent a time on this myself, without discovering an external workaround, but indeed tis is something apparently internal to Svelte...not to be fixed, as it's supposed to be a dev 'warning'' to 'help'.

Someone ought to speak to them about the psychology of this, but the good thing is that it and others do go away for production. You can prove it to yourself by doing a build and then preview with your Astro project.

Still agree well with @Princesseuh 's categorization...

reference: sveltejs/svelte#4652 (comment)

[SrJSDev]

Just came here from a Google search, after a similar incident while using Astro + Svelte:

index.svelte? [sm]:20 <App> was created with unknown prop 'class'

Not crazy bad or anything, but annoying, as I cannot even export let class = "" in my Svelte component - it's invalid JS syntax.

Is there a reason Astro must pass in a class prop?

[HiDeoo]

A dirty workaround could be the @astrojs/svelte renderer clientEntrypoint containing a console filter like the ones already existing in Astro, e.g. this one or the one in the preact integration, filtering out warnings specifically targeting the class prop.

It looks like SvelteKit is already using a similar approach for filtering out the data & form prop warnings:

if (DEV) {
	// Nasty hack to silence harmless warnings the user can do nothing about
	const console_warn = console.warn;
	console.warn = function warn(...args) {
		if (
			args.length === 1 &&
			/<(Layout|Page|Error)(_[\w$]+)?> was created (with unknown|without expected) prop '(data|form)'/.test(
				args[0]
			)
		) {
			return;
		}
		console_warn(...args);
	};
}