fix: place instance-level snippets inside async body (#16666)

* fix: place instance-level snippets inside async body

* lint

.changeset/cool-garlics-fail.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: place instance-level snippets inside async body

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -362,12 +362,12 @@ export function client_component(analysis, options) {
 		store_init,
 		...store_setup,
 		...legacy_reactive_declarations,
-		...group_binding_declarations,
-		...state.instance_level_snippets
+		...group_binding_declarations
 	]);
 
 	if (analysis.instance.has_await) {
 		const body = b.block([
+			...state.instance_level_snippets,
 			.../** @type {ESTree.Statement[]} */ (instance.body),
 			b.if(b.call('$.aborted'), b.return()),
 			.../** @type {ESTree.Statement[]} */ (template.body)
@@ -375,7 +375,10 @@ export function client_component(analysis, options) {
 
 		component_block.body.push(b.stmt(b.call(`$.async_body`, b.arrow([], body, true))));
 	} else {
-		component_block.body.push(.../** @type {ESTree.Statement[]} */ (instance.body));
+		component_block.body.push(
+			...state.instance_level_snippets,
+			.../** @type {ESTree.Statement[]} */ (instance.body)
+		);
 
 		if (!analysis.runes && analysis.needs_context) {
 			component_block.body.push(b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)));

packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/_config.js

@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'value');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/app.svelte

@@ -0,0 +1,9 @@
+<script>
+	const value = await 'value';
+</script>
+
+{#snippet valueSnippet()}
+	{value}
+{/snippet}
+
+{@render valueSnippet()}

packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/main.svelte

@@ -0,0 +1,8 @@
+<script>
+    import App from './app.svelte';
+</script>
+<svelte:boundary>
+    {#snippet pending()}
+    {/snippet}
+    <App />
+</svelte:boundary>