Filter out Svelte's unknown class prop console warnings

[kitschpatrol]

Changes

Astro's hydration code passes a class prop to Svelte components, inducing Svelte to log a warning about an unknown prop.

Preempting this by exporting a class prop from the Svelte component isn't a viable workaround since class is a reserved identifier in JS.

This PR implements the console-filtering workaround suggested by @HiDeoo in #5665, borrowing the useConsoleFilter approach from the preact integration.

It would probably be better to generalize the console filtering process so it could be shared across multiple integrations.

Ideally there would be a way to handle this in Svelte, but as was pointed out in the issue thread even they resort to similar hackery in SvelteKit.

Note that you may need to clear your Vite cache to get this change to stick:

rm -rf ./node_modules/.vite/

Testing

1. Create an Astro + Svelte project:

   npm create astro@latest -- --template framework-svelte

2. Run the project and observe the browser console's warning output:

   npm run dev

   Console output:

   <Counter> was created with unknown prop 'class'
   

3. Apply the patch

4. Clear the vite cache:

   rm -rf ./node_modules/.vite/

5. Run the project and observe the browser console's (lack of) warning output:

   npm run dev

   Console output:

Docs

This is a non-breaking change that offers a minor quality of life improvement, not sure documentation beyond what's included in the source comments is necessary.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6b59b4f

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

I know the console messages are irritating but I don't love console filtering as a general approach... if this is spreading to multiple renderer integrations, maybe we need to rethink how the Svelte renderer works?

[kitschpatrol]

Yeah I'm not crazy about console filtering either, but if you decide it's worth it I've updated the PR with an import.meta.env.DEV check as suggested. Seems a little simpler than maintaining an additional client-dev.js file. Looks like DCE is working as expected.

[wackbyte]

FYI, you can export a class prop, like so:

let className;
export { className as class };

[bluwy]

I'm personally fine with the patching to avoid the confusion in the logs, but will hold off merging before discussing with @natemoo-re first.

[natemoo-re]

Sorry for the delay! I'm fine with merging this since it should help avoid confusion, appreciate the PR!