Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(engine): fixes #663 - unique keys for slotted elements #664

Merged
merged 1 commit into from
Sep 22, 2018

Conversation

caridy
Copy link
Contributor

@caridy caridy commented Sep 21, 2018

Details

This PR fixes an issue described in #663. It is a very hard bug to reproduce, but basically, there is a chance that, when in fallback mode (synthetic shadow), a key of an slotted element matches the key assigned by the compiler to the vnode in the default slot content, in which case the diffing algo will attempt to reuse the element, which can have old kind of weird effects.

This PR, guarantees that the slotted elements will always get re-keyed when needed.

Does this PR introduce a breaking change?

  • No

@@ -573,7 +573,12 @@ export function allocateInSlot(vm: VM, children: VNodes) {
const data = (vnode.data as VNodeData);
const slotName = ((data.attrs && data.attrs.slot) || '') as string;
const vnodes: VNodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
vnodes.push(vnode);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we were using dot notation here :(

// which might have similar keys. Each vnode will always have a key that
// starts with a numeric character from compiler. In this case, we add a unique
// notation for slotted vnodes keys, e.g.: `@foo:1:1`
vnode.key = `@${slotName}:${vnode.key}`;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the re-keying routine, only for fallback mode.

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: e971f2c | Target commit: 0822521

lwc-engine-benchmark-ie11

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 801.80 (±0.00 ms) 790.50 (±0.00 ms) -11.3ms (1.4%) 👌
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 78.50 (±0.00 ms) 78.70 (±0.00 ms) +0.2ms (0.3%) 👌
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 7377.80 (±0.00 ms) 7519.60 (±0.00 ms) +141.8ms (1.9%) 👌
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 673.80 (±0.00 ms) 673.00 (±0.00 ms) -0.8ms (0.1%) 👌
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 114.80 (±0.00 ms) 107.80 (±0.00 ms) -7.0ms (6.1%) 👌
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 1049.80 (±0.00 ms) 1055.30 (±0.00 ms) +5.5ms (0.5%) 👌
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 191.20 (±0.00 ms) 180.50 (±0.00 ms) -10.7ms (5.6%) 👌
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 10701.20 (±0.00 ms) 10859.70 (±0.00 ms) +158.5ms (1.5%) 👌
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 968.40 (±0.00 ms) 941.60 (±0.00 ms) -26.8ms (2.8%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 104.90 (±0.00 ms) 101.20 (±0.00 ms) -3.7ms (3.5%) 👌

lwc-engine-benchmark

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 161.30 (±5.10 ms) 163.45 (±6.75 ms) +2.1ms (1.3%) 👌
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 12.25 (±0.75 ms) 13.20 (±0.60 ms) +0.9ms (7.8%) 👎
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 929.75 (±9.60 ms) 926.25 (±6.80 ms) -3.5ms (0.4%) 👍
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 110.20 (±3.10 ms) 111.35 (±2.15 ms) +1.2ms (1.0%) 👌
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 98.45 (±2.70 ms) 88.85 (±2.95 ms) -9.6ms (9.8%) 👌
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 240.95 (±6.55 ms) 249.75 (±6.85 ms) +8.8ms (3.7%) 👎
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 19.85 (±2.00 ms) 21.30 (±2.00 ms) +1.4ms (7.3%) 👎
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 1659.95 (±11.85 ms) 1646.10 (±11.40 ms) -13.8ms (0.8%) 👍
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 187.05 (±4.50 ms) 189.45 (±5.45 ms) +2.4ms (1.3%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 82.20 (±7.20 ms) 84.75 (±6.35 ms) +2.6ms (3.1%) 👌
wc-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/append/1k duration 264.15 (±18.90 ms) 274.20 (±20.70 ms) +10.1ms (3.8%) 👌
wc-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/clear/1k duration 31.95 (±2.65 ms) 32.40 (±2.60 ms) +0.4ms (1.4%) 👎
wc-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/10k duration 2153.30 (±9.40 ms) 2109.45 (±15.35 ms) -43.9ms (2.0%) 👍
wc-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/1k duration 224.85 (±6.00 ms) 228.20 (±5.45 ms) +3.3ms (1.5%) 👎
wc-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/update-10th/1k duration 84.40 (±4.80 ms) 84.85 (±6.10 ms) +0.4ms (0.5%) 👌

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: e971f2c | Target commit: 0822521

lwc-engine-benchmark-ie11

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 801.80 (±0.00 ms) 779.70 (±0.00 ms) -22.1ms (2.8%) 👌
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 78.50 (±0.00 ms) 76.70 (±0.00 ms) -1.8ms (2.3%) 👌
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 7377.80 (±0.00 ms) 7328.40 (±0.00 ms) -49.4ms (0.7%) 👌
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 673.80 (±0.00 ms) 664.30 (±0.00 ms) -9.5ms (1.4%) 👌
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 114.80 (±0.00 ms) 112.40 (±0.00 ms) -2.4ms (2.1%) 👌
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 1049.80 (±0.00 ms) 1040.50 (±0.00 ms) -9.3ms (0.9%) 👌
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 191.20 (±0.00 ms) 206.50 (±0.00 ms) +15.3ms (8.0%) 👌
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 10701.20 (±0.00 ms) 10687.60 (±0.00 ms) -13.6ms (0.1%) 👌
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 968.40 (±0.00 ms) 953.70 (±0.00 ms) -14.7ms (1.5%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 104.90 (±0.00 ms) 101.50 (±0.00 ms) -3.4ms (3.2%) 👌

lwc-engine-benchmark

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 161.30 (±5.10 ms) 165.60 (±6.55 ms) +4.3ms (2.7%) 👎
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 12.25 (±0.75 ms) 13.20 (±0.60 ms) +0.9ms (7.8%) 👎
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 929.75 (±9.60 ms) 930.60 (±8.95 ms) +0.9ms (0.1%) 👌
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 110.20 (±3.10 ms) 113.35 (±2.20 ms) +3.2ms (2.9%) 👎
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 98.45 (±2.70 ms) 94.85 (±6.25 ms) -3.6ms (3.7%) 👌
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 240.95 (±6.55 ms) 244.40 (±6.45 ms) +3.5ms (1.4%) 👌
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 19.85 (±2.00 ms) 20.50 (±2.15 ms) +0.6ms (3.3%) 👌
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 1659.95 (±11.85 ms) 1696.95 (±10.85 ms) +37.0ms (2.2%) 👎
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 187.05 (±4.50 ms) 187.35 (±6.35 ms) +0.3ms (0.2%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 82.20 (±7.20 ms) 84.05 (±4.95 ms) +1.9ms (2.3%) 👌
wc-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/append/1k duration 264.15 (±18.90 ms) 266.25 (±19.10 ms) +2.1ms (0.8%) 👌
wc-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/clear/1k duration 31.95 (±2.65 ms) 30.45 (±2.45 ms) -1.5ms (4.7%) 👌
wc-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/10k duration 2153.30 (±9.40 ms) 2114.15 (±13.25 ms) -39.2ms (1.8%) 👍
wc-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/1k duration 224.85 (±6.00 ms) 228.90 (±4.15 ms) +4.1ms (1.8%) 👎
wc-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/update-10th/1k duration 84.40 (±4.80 ms) 87.75 (±6.25 ms) +3.3ms (4.0%) 👎

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: e971f2c | Target commit: 0822521

lwc-engine-benchmark-ie11

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 801.80 (±0.00 ms) 801.30 (±0.00 ms) -0.5ms (0.1%) 👌
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 78.50 (±0.00 ms) 75.80 (±0.00 ms) -2.7ms (3.4%) 👌
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 7377.80 (±0.00 ms) 7475.60 (±0.00 ms) +97.8ms (1.3%) 👌
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 673.80 (±0.00 ms) 688.70 (±0.00 ms) +14.9ms (2.2%) 👌
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 114.80 (±0.00 ms) 111.90 (±0.00 ms) -2.9ms (2.5%) 👌
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 1049.80 (±0.00 ms) 1050.70 (±0.00 ms) +0.9ms (0.1%) 👌
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 191.20 (±0.00 ms) 187.70 (±0.00 ms) -3.5ms (1.8%) 👌
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 10701.20 (±0.00 ms) 10815.80 (±0.00 ms) +114.6ms (1.1%) 👌
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 968.40 (±0.00 ms) 952.40 (±0.00 ms) -16.0ms (1.7%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 104.90 (±0.00 ms) 97.30 (±0.00 ms) -7.6ms (7.2%) 👌

lwc-engine-benchmark

table-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table/append/1k duration 161.30 (±5.10 ms) 159.90 (±5.55 ms) -1.4ms (0.9%) 👌
table-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table/clear/1k duration 12.25 (±0.75 ms) 12.90 (±0.90 ms) +0.7ms (5.3%) 👎
table-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table/create/10k duration 929.75 (±9.60 ms) 923.25 (±8.35 ms) -6.5ms (0.7%) 👍
table-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table/create/1k duration 110.20 (±3.10 ms) 112.90 (±2.20 ms) +2.7ms (2.5%) 👎
table-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table/update-10th/1k duration 98.45 (±2.70 ms) 99.65 (±2.40 ms) +1.2ms (1.2%) 👎
tablecmp-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/append/1k duration 240.95 (±6.55 ms) 210.15 (±7.40 ms) -30.8ms (12.8%) 👍
tablecmp-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/clear/1k duration 19.85 (±2.00 ms) 21.85 (±2.15 ms) +2.0ms (10.1%) 👎
tablecmp-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/10k duration 1659.95 (±11.85 ms) 1677.95 (±8.70 ms) +18.0ms (1.1%) 👎
tablecmp-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/create/1k duration 187.05 (±4.50 ms) 187.05 (±4.30 ms) 0.0ms (0.0%) 👌
tablecmp-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-component/update-10th/1k duration 82.20 (±7.20 ms) 83.85 (±6.00 ms) +1.7ms (2.0%) 👌
wc-append-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/append/1k duration 264.15 (±18.90 ms) 278.75 (±15.25 ms) +14.6ms (5.5%) 👌
wc-clear-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/clear/1k duration 31.95 (±2.65 ms) 31.00 (±1.80 ms) -0.9ms (3.0%) 👌
wc-create-10k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/10k duration 2153.30 (±9.40 ms) 2107.20 (±10.95 ms) -46.1ms (2.1%) 👍
wc-create-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/create/1k duration 224.85 (±6.00 ms) 225.05 (±5.85 ms) +0.2ms (0.1%) 👌
wc-update-10th-1k metric base(e971f2c) target(0822521) trend
benchmark-table-wc/update-10th/1k duration 84.40 (±4.80 ms) 86.55 (±6.05 ms) +2.2ms (2.5%) 👌

@ekashida ekashida merged commit 00529a9 into master Sep 22, 2018
@ekashida ekashida deleted the caridy/issue-663/unique-key-for-slotted branch September 22, 2018 03:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants