[FIX] compiler, component: handle change of t-key before patch

Have a dynamic children with a t-key. This child has a delayed willStart.
Change the key during a rendering.

Before this commit there was a leak: a component corresponding to an old key had been created, xwithout being destroyed.

After this commit, the outdated component is destroyed.
This commit is contained in:
Lucas Perais (lpe)
2022-01-10 19:32:49 +01:00
parent a568ca6687
commit b9f5a9aa47
27 changed files with 547 additions and 445 deletions
@@ -23,7 +23,7 @@ exports[`basics a class component inside a class component, no external dom 1`]
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -49,7 +49,7 @@ exports[`basics a component inside a component 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -92,7 +92,7 @@ exports[`basics can handle empty props 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {val: undefined}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -210,7 +210,7 @@ exports[`basics child can be updated 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
return component(\`Child\`, {value: ctx['state'].counter}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -246,7 +246,7 @@ exports[`basics class parent, class child component with props 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
return component(\`Child\`, {value: 42}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -312,7 +312,7 @@ exports[`basics higher order components parent and child 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
return component(\`Child\`, {child: ctx['state'].child}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -325,9 +325,9 @@ exports[`basics higher order components parent and child 2`] = `
return function template(ctx, node, key = \\"\\") {
let b2,b3;
if (ctx['props'].child==='a') {
b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`ChildA\`, {}, key+\`__1\`,null, node, ctx);
} else {
b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
b3 = component(\`ChildB\`, {}, key+\`__2\`,null, node, ctx);
}
return multi([b2, b3]);
}
@@ -375,8 +375,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`blip\`] = v_block2[i1];
let key1 = ctx['blip'].id;
let b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
let b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, node, ctx);
let b4 = component(\`SubWidget\`, {}, key+\`__1__\${key1}\`,null, node, ctx);
let b5 = component(\`SubWidget\`, {}, key+\`__2__\${key1}\`,null, node, ctx);
c_block2[i1] = withKey(block3([], [b4, b5]), key1);
}
let b2 = list(c_block2);
@@ -404,7 +404,7 @@ exports[`basics parent, child and grandchild 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -415,7 +415,7 @@ exports[`basics parent, child and grandchild 2`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -454,9 +454,9 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
const tKey_1 = 4;
let b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, node, ctx));
let b3 = toggler(tKey_1, component(\`Child\`, {}, key+\`__2\`,tKey_1, node, ctx));
return block1([], [b2, b3]);
}
}"
@@ -481,7 +481,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Counter\`, {}, key + \`__1\`, node, ctx);
return component(\`Counter\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -511,9 +511,9 @@ exports[`basics same t-keys in two different places 1`] = `
return function template(ctx, node, key = \\"\\") {
const tKey_1 = 1;
let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, key+\`__1\`,tKey_1, node, ctx));
const tKey_2 = 1;
let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__2\`, node, ctx));
let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, key+\`__2\`,tKey_2, node, ctx));
return block1([], [b2, b3]);
}
}"
@@ -591,7 +591,7 @@ exports[`basics sub components between t-ifs 1`] = `
} else {
b3 = block3();
}
b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b4 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
if (ctx['state'].flag) {
b5 = block5();
}
@@ -626,7 +626,7 @@ exports[`basics t-elif works with t-component 1`] = `
if (ctx['state'].flag) {
b2 = block2();
} else if (!ctx['state'].flag) {
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return block1([], [b2, b3]);
}
@@ -659,7 +659,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
if (ctx['state'].flag) {
b2 = block2();
} else {
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return block1([], [b2, b3]);
}
@@ -692,7 +692,7 @@ exports[`basics t-else works with t-component 1`] = `
if (ctx['state'].flag) {
b2 = block2();
} else {
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return block1([], [b2, b3]);
}
@@ -722,7 +722,7 @@ exports[`basics t-if works with t-component 1`] = `
return function template(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].flag) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return block1([], [b2]);
}
@@ -753,9 +753,9 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
let b2,b3;
if (false) {
const tKey_1 = 'str';
b2 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
b2 = toggler(tKey_1, component(\`Child\`, {}, key+\`__1\`,tKey_1, node, ctx));
}
b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
return block1([], [b2, b3]);
}
}"
@@ -784,7 +784,7 @@ exports[`basics text after a conditional component 1`] = `
return function template(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].hasChild) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
let txt1 = ctx['state'].text;
return block1([txt1], [b2]);
@@ -811,7 +811,7 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -822,7 +822,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -846,8 +846,8 @@ exports[`basics two child components 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
return multi([b2, b3]);
}
}"
@@ -875,7 +875,7 @@ exports[`basics update props of component without concrete own node 1`] = `
return function template(ctx, node, key = \\"\\") {
const tKey_1 = ctx['childProps'].key;
let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], tKey_1 + key + \`__1\`, node, ctx));
let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], key+\`__1\`,tKey_1, node, ctx));
return block1([], [b2]);
}
}"
@@ -888,7 +888,7 @@ exports[`basics update props of component without concrete own node 2`] = `
return function template(ctx, node, key = \\"\\") {
const tKey_1 = ctx['props'].subKey;
return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx));
return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, key+\`__1\`,tKey_1, node, ctx));
}
}"
`;
@@ -933,7 +933,7 @@ exports[`basics updating widget immediately 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
return component(\`Child\`, {flag: ctx['state'].flag}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -974,7 +974,7 @@ exports[`basics widget after a t-foreach 1`] = `
}
ctx = ctx.__proto__;
let b2 = list(c_block2);
let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
let b4 = component(\`SomeComponent\`, {}, key+\`__1\`,null, node, ctx);
return block1([], [b2, b4]);
}
}"
@@ -1001,7 +1001,7 @@ exports[`basics zero or one child components 1`] = `
return function template(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].hasChild) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return multi([b2]);
}
@@ -1081,7 +1081,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
let b2 = component(\`GComp\`, {}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"