fix: reset reset_element in render to prevent runtime error (#13669)

Author: paoloricciuti

.changeset/witty-shirts-confess.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reset `reset_element` in `render` to prevent runtime error

packages/svelte/src/internal/server/dev.js

@@ -53,7 +53,11 @@ function print_error(payload, parent, child) {
 }
 
 export function reset_elements() {
+	let old_parent = parent;
 	parent = null;
+	return () => {
+		parent = old_parent;
+	};
 }
 
 /**

packages/svelte/src/internal/server/index.js

@@ -101,9 +101,11 @@ export function render(component, options = {}) {
 	on_destroy = [];
 	payload.out += BLOCK_OPEN;
 
+	let reset_reset_element;
+
 	if (DEV) {
 		// prevent parent/child element state being corrupted by a bad render
-		reset_elements();
+		reset_reset_element = reset_elements();
 	}
 
 	if (options.context) {
@@ -118,6 +120,10 @@ export function render(component, options = {}) {
 		pop();
 	}
 
+	if (reset_reset_element) {
+		reset_reset_element();
+	}
+
 	payload.out += BLOCK_CLOSE;
 	for (const cleanup of on_destroy) cleanup();
 	on_destroy = prev_on_destroy;

packages/svelte/tests/runtime-runes/samples/snippet-raw-component-ssr-dev/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-ssr-dev/_config.js

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

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

@@ -0,0 +1,22 @@
+<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>
+
+<div>
+	{@render hello()}
+</div>