feat: simplify derived object destructuring (#12781)

* simplify derived object destructuring

* add test for destructuring an array

* add changeset

* shorter temp variable name

* skip intermediate derived for simple cases

---------

Co-authored-by: Rich Harris <[email protected]>

Author: ottomated

.changeset/wicked-years-drive.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: simplify derived object destructuring

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

@@ -171,39 +171,29 @@ export function VariableDeclaration(node, context) {
 						)
 					);
 				} else {
-					const bindings = context.state.scope.get_bindings(declarator);
-					const object_id = context.state.scope.generate('derived_object');
-					const values_id = context.state.scope.generate('derived_values');
-					declarations.push(
-						b.declarator(
-							b.id(object_id),
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
-					declarations.push(
-						b.declarator(
-							b.id(values_id),
-							b.call(
-								'$.derived',
-								b.thunk(
-									b.block([
-										b.let(declarator.id, b.call('$.get', b.id(object_id))),
-										b.return(b.array(bindings.map((binding) => binding.node)))
-									])
-								)
-							)
-						)
-					);
+					const bindings = extract_paths(declarator.id);
+
+					const init = /** @type {CallExpression} */ (declarator.init);
+
+					/** @type {Identifier} */
+					let id;
+					let rhs = value;
+
+					if (init.arguments[0].type === 'Identifier') {
+						id = init.arguments[0];
+					} else {
+						id = b.id(context.state.scope.generate('$$d'));
+						rhs = b.call('$.get', id);
+
+						declarations.push(
+							b.declarator(id, b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value)))
+						);
+					}
+
 					for (let i = 0; i < bindings.length; i++) {
 						const binding = bindings[i];
 						declarations.push(
-							b.declarator(
-								binding.node,
-								b.call(
-									'$.derived',
-									b.thunk(b.member(b.call('$.get', b.id(values_id)), b.literal(i), true))
-								)
-							)
+							b.declarator(binding.node, b.call('$.derived', b.thunk(binding.expression(rhs))))
 						);
 					}
 				}

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

@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	html: `true 1 2 baz`
+	html: `true 1 2 baz 1 2 3`
 });

packages/svelte/tests/runtime-runes/samples/derived-destructured/main.svelte

@@ -1,6 +1,9 @@
 <script>
   let stuff = $state({ foo: true, bar: [1, 2, {baz: 'baz'}] });
   let { foo, bar: [a, b, { baz }]} = $derived(stuff);
+
+	let stuff2 = $state([1, 2, 3]);
+	let [d, e, f] = $derived(stuff2);
 </script>
 
-{foo} {a} {b} {baz}
+{foo} {a} {b} {baz} {d} {e} {f}