fix: array destructuring after await (#17254)

Author: paoloricciuti

.changeset/green-cloths-happen.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: array destructuring after await

packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js

@@ -54,7 +54,10 @@ export function transform_body(instance_body, runner, transform) {
 				);
 
 				const statements = visited.declarations.map((node) => {
-					if (node.id.type === 'Identifier' && node.id.name.startsWith('$$d')) {
+					if (
+						node.id.type === 'Identifier' &&
+						(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
+					) {
 						// this is an intermediate declaration created in VariableDeclaration.js;
 						// subsequent statements depend on it
 						return b.var(node.id, node.init);

packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte

@@ -1,5 +1,6 @@
 <script>
 	let count = $state(1);
+	let arr = $state([1,2]);
 
 	// More complex init
 	let { squared, cubed } = $derived(await {
@@ -8,10 +9,14 @@
 	});
 	// Simple init with multiple destructurings after await
 	let { toFixed, toString } = $derived(count);
+
+	// Simple init with array destructurings after await
+	let [a, b] = $derived(arr);
 </script>
 
 <button onclick={() => count++}>increment</button>
 
 <p>{count} ** 2 = {squared}</p>
 <p>{count} ** 3 = {cubed}</p>
 <p>{typeof toFixed} {typeof toString}</p>
+<p>{a} {b}</p>

packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js

@@ -14,6 +14,7 @@ export default test({
 				<p>1 ** 2 = 1</p>
 				<p>1 ** 3 = 1</p>
 				<p>function function</p>
+				<p>1 2</p>
 			`
 		);
 
@@ -27,6 +28,7 @@ export default test({
 				<p>2 ** 2 = 4</p>
 				<p>2 ** 3 = 8</p>
 				<p>function function</p>
+				<p>1 2</p>
 			`
 		);
 	}