fix: reset hydrate_node after hydrate(...) (#12512)

Author: Rich-Harris

.changeset/four-papayas-turn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reset hydrate node after `hydrate(...)`

packages/svelte/src/internal/client/render.js

@@ -119,6 +119,7 @@ export function hydrate(component, options) {
 	options.intro = options.intro ?? false;
 	const target = options.target;
 	const was_hydrating = hydrating;
+	const previous_hydrate_node = hydrate_node;
 
 	try {
 		// Don't flush previous effects to ensure order of outer effects stays consistent
@@ -175,6 +176,7 @@ export function hydrate(component, options) {
 		throw error;
 	} finally {
 		set_hydrating(was_hydrating);
+		set_hydrate_node(previous_hydrate_node);
 		reset_head_anchor();
 	}
 }

packages/svelte/tests/runtime-legacy/shared.ts

@@ -35,6 +35,7 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 	ssrHtml?: string;
 	compileOptions?: Partial<CompileOptions>;
 	props?: Props;
+	server_props?: Props;
 	before_test?: () => void;
 	after_test?: () => void;
 	test?: (args: {
@@ -256,7 +257,9 @@ async function run_test_variant(
 			config.before_test?.();
 			// ssr into target
 			const SsrSvelteComponent = (await import(`${cwd}/_output/server/main.svelte.js`)).default;
-			const { html, head } = render(SsrSvelteComponent, { props: config.props || {} });
+			const { html, head } = render(SsrSvelteComponent, {
+				props: config.server_props ?? config.props ?? {}
+			});
 
 			fs.writeFileSync(`${cwd}/_output/rendered.html`, html);
 			target.innerHTML = html;

packages/svelte/tests/runtime-runes/samples/snippet-raw-component/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => (count += 1)}>
+	clicks: {count}
+</button>

packages/svelte/tests/runtime-runes/samples/snippet-raw-component/_config.js

@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	props: {
+		browser: true
+	},
+
+	server_props: {
+		browser: false
+	},
+
+	html: `<div><button>clicks: 0</button></div>`,
+
+	test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div><button>clicks: 1</button></div>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-raw-component/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { createRawSnippet, hydrate } from 'svelte';
+	import { render } from 'svelte/server';
+	import Child from './Child.svelte';
+
+	let { browser } = $props();
+
+	let count = $state(0);
+
+	const hello = createRawSnippet((count) => ({
+		render: () => `
+			<div>${browser ? '' : render(Child).body}</div>
+		`,
+		setup(target) {
+			hydrate(Child, { target })
+		}
+	}));
+</script>
+
+{@render hello()}