[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
@@ -21,8 +21,8 @@ exports[`lifecycle hooks component semantics 1`] = `
let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
let b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
let b2 = component(\`B\`, {}, key+\`__1\`,null, node, ctx);
let b3 = component(\`C\`, {}, key+\`__2\`,null, node, ctx);
return block1([], [b2, b3]);
}
}"
@@ -50,11 +50,11 @@ exports[`lifecycle hooks component semantics 3`] = `
return function template(ctx, node, key = \\"\\") {
let b2,b3,b4;
b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`D\`, {}, key+\`__1\`,null, node, ctx);
if (ctx['state'].flag) {
b3 = component(\`E\`, {}, key + \`__2\`, node, ctx);
b3 = component(\`E\`, {}, key+\`__2\`,null, node, ctx);
} else {
b4 = component(\`F\`, {}, key + \`__3\`, node, ctx);
b4 = component(\`F\`, {}, key+\`__3\`,null, node, ctx);
}
return block1([], [b2, b3, b4]);
}
@@ -110,7 +110,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
return function template(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].flag) {
let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
let b3 = component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
b2 = block2([], [b3]);
}
return multi([b2]);
@@ -140,7 +140,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
return function template(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].ok) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
}
return multi([b2]);
}
@@ -168,7 +168,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
let block1 = createBlock(\`<div><block-child-0/></div>\`);
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]);
}
}"
@@ -195,7 +195,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {a: ctx['state'].a}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -222,7 +222,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 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]);
}
@@ -235,7 +235,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 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);
}
}"
`;
@@ -261,7 +261,7 @@ exports[`lifecycle hooks lifecycle semantics, part 3 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]);
}
@@ -276,7 +276,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 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]);
}
@@ -289,7 +289,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 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);
}
}"
`;
@@ -315,7 +315,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 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]);
}
@@ -341,7 +341,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
}
}"
`;
@@ -380,7 +380,7 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
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]);
}
@@ -408,7 +408,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
let block1 = createBlock(\`<div><block-child-0/></div>\`);
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]);
}
}"
@@ -437,7 +437,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
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]);
}
@@ -452,7 +452,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
let b2 = component(\`ChildChild\`, {}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -477,7 +477,7 @@ exports[`lifecycle hooks onWillRender 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);
}
}"
`;
@@ -505,7 +505,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {a: ctx['state'].a}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -588,7 +588,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
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 multi([b2]);
}
@@ -616,7 +616,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
let b2 = component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -630,7 +630,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key+\`__1\`,null, node, ctx);
return block1([], [b2]);
}
}"
@@ -656,7 +656,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 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);
}
}"
`;
@@ -711,7 +711,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
return function template(ctx, node, key = \\"\\") {
let b2,b3;
if (ctx['state'].ok) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
} else {
b3 = block3();
}
@@ -739,7 +739,7 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
return component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
}
}"
`;