fix: Array rest property fix (#8553)

Fixes #8552

src/compiler/compile/Component.ts

@@ -25,7 +25,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Pattern, Expression } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b } from 'code-red';
@@ -1034,7 +1034,7 @@ export default class Component {
 						const inserts = [];
 						const props = [];
 
-						function add_new_props(exported, local, default_value) {
+						function add_new_props(exported: Identifier, local: Pattern, default_value: Expression) {
 							props.push({
 								type: 'Property',
 								method: false,
@@ -1064,7 +1064,7 @@ export default class Component {
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
 							if (declarator.id.type !== 'Identifier') {
-								function get_new_name(local) {
+								function get_new_name(local: Identifier): Identifier {
 									const variable = component.var_lookup.get(local.name);
 									if (variable.subscribable) {
 										inserts.push(get_insert(variable));
@@ -1078,7 +1078,7 @@ export default class Component {
 									return local;
 								}
 
-								function rename_identifiers(param: Node) {
+								function rename_identifiers(param: Pattern) {
 									switch (param.type) {
 										case 'ObjectPattern': {
 											const handle_prop = (prop: Property | RestElement) => {
@@ -1087,7 +1087,7 @@ export default class Component {
 												} else if (prop.value.type === 'Identifier') {
 													prop.value = get_new_name(prop.value);
 												} else {
-													rename_identifiers(prop.value);
+													rename_identifiers(prop.value as Pattern);
 												}
 											};
 
@@ -1095,7 +1095,7 @@ export default class Component {
 											break;
 										}
 										case 'ArrayPattern': {
-											const handle_element = (element: Node, index: number, array: Node[]) => {
+											const handle_element = (element: Pattern | null, index: number, array: Array<Pattern | null>) => {
 												if (element) {
 													if (element.type === 'Identifier') {
 														array[index] = get_new_name(element);
@@ -1110,7 +1110,11 @@ export default class Component {
 										}
 
 										case 'RestElement':
+											if (param.argument.type === 'Identifier') {
 												param.argument = get_new_name(param.argument);
+											} else {
+												rename_identifiers(param.argument);
+											}
 											break;
 
 										case 'AssignmentPattern':

test/runtime/samples/array-rest-is-array-or-object/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `
+    <h1>1</h1>
+    <h1>2</h1>
+    <h1>3</h1>
+    <h1>5</h1>
+    <h1>10</h1>
+    <h1>20</h1>
+    <h1>30</h1>
+    <h1>6</h1>
+  `
+};

test/runtime/samples/array-rest-is-array-or-object/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	let [first, second, ...[third, ...[, fifth]]] = [1, 2, 3, 4, 5];
+	let [one, two, ...[three, ...{ length }]] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+</script>
+
+<h1>{first}</h1>
+<h1>{second}</h1>
+<h1>{third}</h1>
+<h1>{fifth}</h1>
+
+<h1>{one}</h1>
+<h1>{two}</h1>
+<h1>{three}</h1>
+<h1>{length}</h1>
+

test/runtime/samples/destructured-props-4/A.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { writable } from 'svelte/store';
+
+  const THING = { a: 1, b: { c: 2, d: [3, 4, writable(5), 6, 7] }, e: [6], h: 8 };
+  const default_g = 9;
+
+  export let { a, b: { c, d: [d_one, ...[, ...[d_three, ...{ length }]]], f }, e: [e_one], g = default_g } = THING;
+  export const { a: A, b: { c: C } } = THING;
+</script>
+
+<div>
+a: {a},
+b: {typeof b},
+c: {c},
+d_one: {d_one},
+d_three: {$d_three},
+length: {length},
+f: {f},
+g: {g},
+e: {typeof e},
+e_one: {e_one},
+A: {A},
+C: {C}
+</div>
+<div>{JSON.stringify(THING)}</div>

test/runtime/samples/destructured-props-4/_config.js

@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>a: 1, b: undefined, c: 2, d_one: 3, d_three: 5, length: 2, f: undefined, g: 9, e: undefined, e_one: 6, A: 1, C: 2</div>
+		<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
+		<br>
+		<div>a: a, b: undefined, c: 2, d_one: d_one, d_three: 5, length: 7, f: f, g: g, e: undefined, e_one: 6, A: 1, C: 2</div>
+		<div>{"a":1,"b":{"c":2,"d":[3,4,{},6,7]},"e":[6],"h":8}</div>
+	`
+};

test/runtime/samples/destructured-props-4/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import A from './A.svelte';
+</script>
+
+<A />
+<br />
+<A a="a" d_one="d_one" list_one="list_one" f="f" list_two_b="list_two_b" g="g" A="A" C="C" length={7} />

test/runtime/samples/destructured-props-5/A.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { writable } from "svelte/store";
+
+	let default_b = 5;
+	const LIST = [1, 2, 3, { a: 4 }, [5, writable(6), writable(7), 8]];
+	export const [
+		x,
+		,
+		...[, { a: list_two_a, b: list_two_b = default_b }, [, ...{ length: y }]]
+	] = LIST;
+	export let [
+		l,
+		m,
+		,
+		...[{ a: n, b: o = default_b }, [p, q, ...[r, ...{ length: s }]]]
+	] = LIST;
+</script>
+
+<div>
+	x: {x}, list_two_a: {list_two_a}, list_two_b: {list_two_b}, y: {y}, l: {l}, m: {m},
+	n: {n}, o: {o}, p: {p}, q: {$q}, r: {$r}, s: {s}
+</div>
+<div>{JSON.stringify(LIST)}</div>

test/runtime/samples/destructured-props-5/_config.js

@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
+		<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
+		<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: l, m: m, n: n, o: o, p: p, q: q, r: r, s: s</div>
+		<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
+	`,
+
+	async test({ component, assert, target }) {
+		await component.update();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: 1, m: 2, n: 4, o: 5, p: 5, q: 6, r: 7, s: 1</div>
+			<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
+			<br><div>x: 1, list_two_a: 4, list_two_b: 5, y: 3, l: LL, m: MM, n: NN, o: OO, p: PP, q: QQ, r: RR, s: SS</div>
+			<div>[1,2,3,{"a":4},[5,{},{},8]]</div>
+		`);
+	}
+};

test/runtime/samples/destructured-props-5/main.svelte

@@ -0,0 +1,36 @@
+<script>
+	import A from "./A.svelte";
+	import { writable } from "svelte/store";
+
+	let x = "x",
+		list_two_a = "list_two_a",
+		list_two_b = "list_two_b",
+		y = writable("y"),
+		l = "l",
+		m = "m",
+		n = "n",
+		o = "o",
+		p = "p",
+		q = writable("q"),
+		r = writable("r"),
+		s = "s";
+
+	export function update() {
+		x = "XX";
+		list_two_a = "LIST_TWO_A";
+		list_two_b = "LIST_TWO_B";
+		y = writable("YY");
+		l = "LL";
+		m = "MM";
+		n = "NN";
+		o = "OO";
+		p = "PP";
+		q = writable("QQ");
+		r = writable("RR");
+		s = "SS";
+	}
+</script>
+
+<A />
+<br />
+<A {x} {list_two_a} {list_two_b} {y} {l} {m} {n} {o} {p} {q} {r} {s} />