fix: object destructring picks up literal properties (#8357)

Part of #6609

Author: ngtr6788

src/compiler/compile/nodes/shared/Context.ts

@@ -108,20 +108,36 @@ export function unpack_destructuring({
 					context_rest_properties
 				});
 				context_rest_properties.set((property.argument as Identifier).name, property);
-			} else {
-				const key = property.key as Identifier;
+			} else if (property.type === 'Property') {
+				const key = property.key;
 				const value = property.value;
 
-				used_properties.push(x`"${key.name}"`);
+				let property_name: any;
+				let new_modifier: (node: Node) => Node; 
+
+				if (property.computed) {
+					// TODO: If the property is computed, ie, { [computed_key]: prop }, the computed_key can be any type of expression.
+				} else if (key.type === 'Identifier') {
+					// e.g. { someProperty: ... }
+				  property_name = key.name;
+					new_modifier = (node) => x`${modifier(node)}.${property_name}`;
+				} else if (key.type === 'Literal') {
+					// e.g. { "property-in-quotes": ... } or { 14: ... }
+					property_name = key.value;
+					new_modifier = (node) => x`${modifier(node)}["${property_name}"]`;
+				}
+				
+			  used_properties.push(x`"${property_name}"`);
 				if (value.type === 'AssignmentPattern') {
+					// e.g. { property = default } or { property: newName = default }
 					const n = contexts.length;
 
 					mark_referenced(value.right, scope, component);
 
 					unpack_destructuring({
 						contexts,
 						node: value.left,
-						modifier: (node) => x`${modifier(node)}.${key.name}`,
+						modifier: new_modifier,
 						default_modifier: (node, to_ctx) =>
 							x`${node} !== undefined ? ${node} : ${update_reference(
 								contexts,
@@ -134,10 +150,11 @@ export function unpack_destructuring({
 						context_rest_properties
 					});
 				} else {
+					// e.g. { property } or { property: newName }
 					unpack_destructuring({
 						contexts,
 						node: value,
-						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
+						modifier: new_modifier,
 						default_modifier,
 						scope,
 						component,

test/runtime/samples/await-then-destruct-number-props/_config.js

@@ -0,0 +1,63 @@
+export default {
+	props: {
+		thePromise: new Promise(_ => {})
+	},
+
+	html: `
+		loading...
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve([10, 11, 12, 13, 14, 15]));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[1] 11</p>
+        <p>[3] 13</p>
+				<p>[4] 14</p>
+			`
+		);
+
+		await (component.thePromise = Promise.resolve({ 1: 21, 3: 23, 4: 24 }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[1] 21</p>
+				<p>[3] 23</p>
+				<p>[4] 24</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject([30, 31, 32, 33, 34, 35]));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[0] 30</p>
+				<p>[2] 32</p>
+				<p>[5] 35</p>
+			`
+		);
+
+		try {
+		  await (component.thePromise = Promise.reject({ 0: 40, 2: 42, 5: 45 }));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>[0] 40</p>
+				<p>[2] 42</p>
+				<p>[5] 45</p>
+			`
+		);
+	}
+};

test/runtime/samples/await-then-destruct-number-props/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	loading...
+{:then { 1: a, 3: b, 4: c }}
+	<p>[1] {a}</p>
+	<p>[3] {b}</p>
+	<p>[4] {c}</p>
+{:catch { 0: d, 2: e, 5: f }}
+	<p>[0] {d}</p>
+	<p>[2] {e}</p>
+	<p>[5] {f}</p>
+{/await}

test/runtime/samples/await-then-destruct-string-props/_config.js

@@ -0,0 +1,17 @@
+export default {
+	async test({ assert, target }) {
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>prop-1: 1</p>
+			<p>prop4: 4</p>
+			<p>rest: {"prop2":2,"prop-3":3}</p>
+			<p>prop-7: 7</p>
+			<p>prop6: 6</p>
+			<p>rest: {"prop-5":5,"prop8":8}</p>
+			`
+		);
+	}
+};

test/runtime/samples/await-then-destruct-string-props/main.svelte

@@ -0,0 +1,19 @@
+<script>
+  const object = Promise.resolve({ 'prop-1': 1, 'prop2': 2, 'prop-3': 3, 'prop4': 4 });
+  const objectReject = Promise.reject({ 'prop-5': 5, 'prop6': 6, 'prop-7': 7, 'prop8': 8 });
+</script>
+
+{#await object then { 'prop-1': prop1, 'prop4': fourthProp, ...rest }}
+	<p>prop-1: {prop1}</p>
+	<p>prop4: {fourthProp}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await objectReject then value}
+	resolved
+{:catch { 'prop-7': prop7, 'prop6': sixthProp, ...rest }}
+	<p>prop-7: {prop7}</p>
+	<p>prop6: {sixthProp}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+

test/runtime/samples/const-tag-await-then-destructuring-literals/_config.js

@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};

test/runtime/samples/const-tag-await-then-destructuring-literals/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { 'the-area': width * height, 'the-volume': width * height * constant };
+	}
+</script>
+
+{#await promise1 then { width, height }}
+	{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
+
+{#await promise2 catch { width, height }}
+	{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}

test/runtime/samples/const-tag-each-destructure-literals/_config.js

@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};

test/runtime/samples/const-tag-each-destructure-literals/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { 'the-area': width * height, 'the-volume': width * height * constant };
+	}
+</script>
+
+{#each boxes as { width, height }}
+	{@const { 'the-area': area, 'the-volume': volume } = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const { 2: sum, 0: _width, 1: _height } = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/each}

test/runtime/samples/each-block-destructured-array-as-object/_config.js

@@ -0,0 +1,22 @@
+export default {
+	props: {
+		array: [
+      [1, 2, 3, 4, 5],
+      [6, 7, 8],
+      [9, 10, 11, 12]
+		]
+	},
+
+	html: `
+		<p>First: 1, Third: 3, Length: 5</p>
+		<p>First: 6, Third: 8, Length: 3</p>
+		<p>First: 9, Third: 11, Length: 4</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.array = [[12, 13]];
+		assert.htmlEqual( target.innerHTML, `
+			<p>First: 12, Third: undefined, Length: 2</p>
+		`);
+	}
+};

test/runtime/samples/each-block-destructured-array-as-object/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let array;
+</script>
+
+{#each array as { 0: first, '2': third, "length": length }}
+	<p>First: {first}, Third: {third}, Length: {length}</p>
+{/each}

test/runtime/samples/each-block-destructured-object-literal-props/_config.js

@@ -0,0 +1,22 @@
+export default {
+	props: {
+		objectsArray: [
+      { 'foo-bar': 'FooBar', 0: 'zero', prop: 'prop' },
+      { 'foo-bar': 'foobar', 0: 'null', prop: 'a prop' },
+      { 'foo-bar': 'FOO BAR', 0: 'nada', prop: 'the prop' }
+		]
+	},
+
+	html: `
+		<p>FooBar: prop zero</p>
+		<p>foobar: a prop null</p>
+		<p>FOO BAR: the prop nada</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.objectsArray = [{ 'foo-bar': 'Fool Ball', 0: 'nil', prop: 'one prop' }];
+		assert.htmlEqual( target.innerHTML, `
+			<p>Fool Ball: one prop nil</p>
+		`);
+	}
+};

test/runtime/samples/each-block-destructured-object-literal-props/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let objectsArray;
+</script>
+
+{#each objectsArray as { 0: prop0, "foo-bar": propFooBar, prop: varProp } }
+	<p>{propFooBar}: {varProp} {prop0}</p>
+{/each}

test/runtime/samples/each-block-destructured-object-literal-rest/_config.js

@@ -0,0 +1,22 @@
+export default {
+	props: {
+		objectsArray: [
+			{ quote: 'q1', 'wrong-quote': 'wq1', 16: '16', class: 'class' },
+			{ quote: 'q2', 'wrong-quote': 'wq2', 16: 'sixteen', class: 'glass' },
+			{ quote: 'q3', 'wrong-quote': 'wq3', 16: 'seize', class: 'mass' }
+		]
+	},
+
+	html: `
+    <p class="class">Quote: q1, Wrong Quote: wq1, 16: 16</p>
+    <p class="glass">Quote: q2, Wrong Quote: wq2, 16: sixteen</p>
+    <p class="mass">Quote: q3, Wrong Quote: wq3, 16: seize</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.objectsArray = [{ quote: 'new-quote', 'wrong-quote': 'wq4', 16: 'ten+six', role: 'role' }];
+		assert.htmlEqual(target.innerHTML, `
+			<p role="role">Quote: new-quote, Wrong Quote: wq4, 16: ten+six</p>
+		`);
+	}
+};

test/runtime/samples/each-block-destructured-object-literal-rest/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let objectsArray;
+</script>
+
+{#each objectsArray as { "quote": quotedProp, "wrong-quote": wrongQuote, 16: sixteen, ...props } }
+	<p {...props}>Quote: {quotedProp}, Wrong Quote: {wrongQuote}, 16: {sixteen}</p>
+{/each}