Updating to [email protected] (or later) throws some errors.

[mwc]

Astro Info

astro: latest
svelte: [email protected]+(excluding next.55)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

1、If the svelte version is later than 5.0.0-next.55, the following error will be thrown, the result of rendering is not as expected as the next-55.:

2、Most likely because the 5.0.0-next.56 updated hydrate.
3. Not sure if this issue should be fixed by astro or by svelte.

What's the expected result?

like [email protected]

Link to Minimal Reproducible Example

none

Participation

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

[bluwy]

Yeah it needs to be fixed in Astro: sveltejs/svelte#10581 (comment)

[matthewp]

@mwc would you be willing to submit a PR that fixes this? Should work not just in the next tag, of course.

[github-actions]

Hello @mwc. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[mwc]

@matthewp 👌👌👌 I'll give it a try.

[bluwy]

@mwc Sorry for not mentioning, but I was already looking into it in the past hour 😅 If you want to try, I can let you do so though. I haven't got far yet.

[mwc]

@bluwy
i can provide some ideas:

import { hydrate, unmount } from 'svelte';  // --> here
import { add_snippet_symbol } from 'svelte/internal';

// Allow a slot to be rendered as a snippet (dev validation only)
const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s;

export default (element) => {
	return async (Component, props, slotted) => {
		if (!element.hasAttribute('ssr')) return;

		let children = undefined;
		let $$slots = undefined;
		for (const [key, value] of Object.entries(slotted)) {
			if (key === 'default') {
				children = createSlotDefinition(key, value);
			} else {
				$$slots ??= {};
				$$slots[key] = createSlotDefinition(key, value);
			}
		}

                 // --> here
		const component = hydrate(Component, {
			target: element,
			props: {
				...props,
				children,
				$$slots,
			},
		});

                // --> and here
		element.addEventListener('astro:unmount', () => unmount(component), { once: true });
	};
};

... then it work.

I'm afraid it will take me longer than you, so it's better if you fix it.

[bluwy]

Yeah, we also need to use mount or hydrate depending of if client:only is used. If client:only is used, it should use mount. You can check it like this:

astro/packages/integrations/preact/src/client.ts

Line 31 in a013182

const bootstrap = client !== 'only' ? hydrate : render;

And finally we need bump the peer dep too to next.56:

astro/packages/integrations/svelte/package.json

Line 56 in a013182

"svelte": "^4.0.0 || ^5.0.0-next.1"

And also test it manually. We don't have automated tests for Svelte 5 yet but that's fine.

[mwc]

thanks @bluwy

under your guidance, I have tried to submit a pr(#10224), but it seems that it has not passed all the checks.