[IMP] implement .alike suffix on props

It is common in Owl components to have anonymous function as props.
However, since each rendering create a different (but equivalent)
closure, Owl will consider the props different, so will update the child
component, but this is (often) not necessary.

This commit will help reduce the problem by introducing a new `.alike`
prop suffix, that will let Owl know that each version of that specific
prop should be considered the same, so, will be ignored by the props
comparison code.

closes #1360
This commit is contained in:
Géry Debongnie
2023-02-27 07:57:33 +01:00
committed by Sam Degueldre
parent aadc9eafa3
commit a51b286671
30 changed files with 879 additions and 586 deletions
@@ -127,7 +127,7 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click\\":0});
let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
@@ -160,7 +160,7 @@ exports[`t-on t-on on components 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click\\":0});
return function template(ctx, node, key = \\"\\") {
@@ -189,7 +189,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, createCatcher, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click\\":0});
return function template(ctx, node, key = \\"\\") {
@@ -227,7 +227,7 @@ exports[`t-on t-on on components, variation 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click\\":0});
let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
@@ -259,7 +259,7 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click.prevent\\":0});
return function template(ctx, node, key = \\"\\") {
@@ -288,7 +288,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
const catcher1 = createCatcher({\\"click\\":0});
return function template(ctx, node, key = \\"\\") {
@@ -321,7 +321,7 @@ exports[`t-on t-on on destroyed components 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -354,7 +354,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { markRaw } = helpers;
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
let block1 = createBlock(\`<button>button</button>\`);
@@ -388,7 +388,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { capture, createCatcher, markRaw } = helpers;
const catcher1 = createCatcher({\\"click\\":0});
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
let block6 = createBlock(\`<p>something</p>\`);
let block7 = createBlock(\`<p>paragraph</p>\`);
@@ -429,7 +429,7 @@ exports[`t-on t-on on t-slots 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { markRaw } = helpers;
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
let block1 = createBlock(\`<p>something</p>\`);
@@ -467,7 +467,7 @@ exports[`t-on t-on when first component child is an empty component 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { createCatcher } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"list\\"]);
const catcher1 = createCatcher({\\"click\\":0});
let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);