msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Part of #6609
pull/8382/head
Nguyen Tran 2 years ago committed by GitHub
parent 26c38e750c
commit a6c329f489
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 314 additions and 5 deletions
Show Stats Download Patch File Download Diff File

27
src/compiler/compile/nodes/shared/Context.ts
Unescape View File

@ -108,12 +108,28 @@ 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);
@ -121,7 +137,7 @@ export function unpack_destructuring({
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,

63
test/runtime/samples/await-then-destruct-number-props/_config.js
Unescape View File

@ -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>
`
);
}
};

15
test/runtime/samples/await-then-destruct-number-props/main.svelte
Unescape View File

@ -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}

17
test/runtime/samples/await-then-destruct-string-props/_config.js
Unescape View File

@ -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>
`
);
}
};

19
test/runtime/samples/await-then-destruct-string-props/main.svelte
Unescape View File

@ -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}

19
test/runtime/samples/const-tag-await-then-destructuring-literals/_config.js
Unescape View File

@ -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>
`);
}
};

23
test/runtime/samples/const-tag-await-then-destructuring-literals/main.svelte
Unescape View File

@ -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}

30
test/runtime/samples/const-tag-each-destructure-literals/_config.js
Unescape View File

@ -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>
`);
}
};

19
test/runtime/samples/const-tag-each-destructure-literals/main.svelte
Unescape View File

@ -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}

22
test/runtime/samples/each-block-destructured-array-as-object/_config.js
Unescape View File

@ -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>
`);
}
};

7
test/runtime/samples/each-block-destructured-array-as-object/main.svelte
Unescape View File

@ -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}

22
test/runtime/samples/each-block-destructured-object-literal-props/_config.js
Unescape View File

@ -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>
`);
}
};

7
test/runtime/samples/each-block-destructured-object-literal-props/main.svelte
Unescape View File

@ -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}

22
test/runtime/samples/each-block-destructured-object-literal-rest/_config.js
Unescape View File

@ -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>
`);
}
};

7
test/runtime/samples/each-block-destructured-object-literal-rest/main.svelte
Unescape View File

@ -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}
Write Preview
Loading…
Cancel
Save