mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
33174b301b
Previously, if the value of a t-component directive changed, but there was already a scheduled render for the component before that change, the rendering of the existing component would get delayed (as it should), but after the parent's rendering was complete, the old component which will be destroyed during the patch would still get rendered, despite being stale. This can cause crashes if that component relies on state that no longer exists. This was caused by the fact that when rendering, we check the parent chain for an active render, and also check that the component still exists in the parent's fiber childrenMap (ie, we know that the upcoming patch is not about to destroy the component). To do this, we use the component's parentKey, but in the case of t-component, the parentKey for both possible components is the same, causing the stale component to incorrectly believe that it's not about to be destroyed, by finding the next component in the childrenMap under the same key. This commit fixes that by prepending the component's name to the parentKey, meaning that if the value of the t-component changes, so will the key, and the render will be further delayed until the new state is patched, at which point the stale component will be destroyed and the following attempt to render will be cancelled as expected. The choice to use the component's name is to simplify the implementation, this means that if using t-component and switching between components that have the same class name, this protection will not work. The alternative would be to generate a unique id for the component class, eg with a WeakMap, but this both complicates the implementation and adds runtime overhead, for a case that is likely extremely rare. We are open to refine the implementation should this problem occur in practice.
219 lines
6.5 KiB
Plaintext
219 lines
6.5 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const Comp1 = ctx['constructor'].components[ctx['state'].child];
|
|
const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span>child a</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span>child b</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const tKey_1 = ctx['state'].child;
|
|
const Comp1 = ctx['myComponent'];
|
|
return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span>child a</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div>child b</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const tKey_1 = ctx['state'].child;
|
|
const Comp1 = ctx['myComponent'];
|
|
return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span>child a</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component can use dynamic components (the class) if given 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span>child b</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component modifying a sub widget 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const Comp1 = ctx['Counter'];
|
|
const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component modifying a sub widget 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['state'].counter;
|
|
const v1 = ctx['state'];
|
|
let hdlr1 = [()=>v1.counter++, ctx];
|
|
return block1([txt1, hdlr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component switching dynamic component 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const Comp1 = ctx['Child'];
|
|
return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component switching dynamic component 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div>child a</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component switching dynamic component 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(\`child b\`);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component t-component works in simple case 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(null, false, false, false, true);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const Comp1 = ctx['Child'];
|
|
return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-component t-component works in simple case 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div>child</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|