NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] implement .alike suffix on props

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/__snapshots__/basics.test.ts.snap
+39 -39
View File
@@ -4,7 +4,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(null, false, false, false, false);
const comp1 = app.createComponent(null, false, false, false, [\\"displayGrandChild\\"]);
return function template(ctx, node, key = \\"\\") {
const Comp1 = ctx['myComp'];
@@ -17,7 +17,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
let b2;
@@ -63,7 +63,7 @@ exports[`basics a class component inside a class component, no external dom 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, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -101,7 +101,7 @@ exports[`basics a component inside a component 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(\`<span><block-child-0/></span>\`);
@@ -145,7 +145,7 @@ exports[`basics can handle empty props 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -265,7 +265,7 @@ exports[`basics child can be updated 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
return function template(ctx, node, key = \\"\\") {
return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
@@ -302,7 +302,7 @@ exports[`basics class parent, class child component with props 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
return function template(ctx, node, key = \\"\\") {
return comp1({value: 42}, key + \`__1\`, node, this, null);
@@ -328,7 +328,7 @@ exports[`basics component children doesn't leak (if case) 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, []);
return function template(ctx, node, key = \\"\\") {
let b2;
@@ -357,7 +357,7 @@ exports[`basics component children doesn't leak (t-key case) 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, []);
return function template(ctx, node, key = \\"\\") {
const tKey_1 = ctx['keyVar'];
@@ -424,7 +424,7 @@ exports[`basics higher order components parent and child 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"child\\"]);
return function template(ctx, node, key = \\"\\") {
return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
@@ -436,8 +436,8 @@ exports[`basics higher order components parent and child 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
const comp1 = app.createComponent(\`ChildA\`, true, false, false, []);
const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -482,8 +482,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
const comp1 = app.createComponent(\`SubWidget\`, true, false, false, []);
const comp2 = app.createComponent(\`SubWidget\`, true, false, false, []);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -521,7 +521,7 @@ exports[`basics parent, child and grandchild 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, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -533,7 +533,7 @@ exports[`basics parent, child and grandchild 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -597,8 +597,8 @@ exports[`basics reconciliation alg is not confused in some specific situation 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 comp2 = app.createComponent(\`Child\`, true, false, false, true);
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -628,7 +628,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
const comp1 = app.createComponent(\`Counter\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -656,8 +656,8 @@ exports[`basics same t-keys in two different places 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
@@ -730,7 +730,7 @@ exports[`basics sub components between t-ifs 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/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
let block2 = createBlock(\`<h1>hey</h1>\`);
@@ -770,7 +770,7 @@ exports[`basics t-elif works with t-component 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/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
@@ -804,7 +804,7 @@ exports[`basics t-else with empty string works with t-component 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/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
@@ -838,7 +838,7 @@ exports[`basics t-else works with t-component 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/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
@@ -872,7 +872,7 @@ exports[`basics t-if works with t-component 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>\`);
@@ -903,8 +903,8 @@ exports[`basics t-key on a component with t-if, and a sibling component 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 comp2 = app.createComponent(\`Child\`, true, false, false, true);
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
@@ -937,7 +937,7 @@ exports[`basics text after a conditional component 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/><span><block-text-0/></span></div>\`);
@@ -969,7 +969,7 @@ exports[`basics three level of components with collapsing root nodes 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, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -981,7 +981,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -1006,8 +1006,8 @@ exports[`basics two child 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 comp2 = app.createComponent(\`Child\`, true, false, false, true);
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -1034,7 +1034,7 @@ exports[`basics update props of component without concrete own node 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
const comp1 = app.createComponent(\`Child\`, true, false, true, []);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -1050,7 +1050,7 @@ exports[`basics update props of component without concrete own node 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
const comp1 = app.createComponent(\`Custom\`, true, false, false, [\\"key\\",\\"subKey\\"]);
return function template(ctx, node, key = \\"\\") {
const tKey_1 = ctx['props'].subKey;
@@ -1097,7 +1097,7 @@ exports[`basics updating widget immediately 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"flag\\"]);
return function template(ctx, node, key = \\"\\") {
return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
@@ -1127,7 +1127,7 @@ exports[`basics widget after a t-foreach 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, []);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -1165,7 +1165,7 @@ exports[`basics zero or one child 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, []);
return function template(ctx, node, key = \\"\\") {
let b2;
@@ -1246,7 +1246,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
const comp1 = app.createComponent(\`GComp\`, true, false, false, []);
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);