mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
a51b286671
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
414 lines
13 KiB
Plaintext
414 lines
13 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`.alike suffix in a list 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { prepareList, withKey } = helpers;
|
|
const comp1 = app.createComponent(\`Todo\`, true, false, false, [\\"todo\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
|
|
for (let i1 = 0; i1 < l_block1; i1++) {
|
|
ctx[\`elem\`] = v_block1[i1];
|
|
const key1 = ctx['elem'].id;
|
|
const v1 = ctx['this'];
|
|
const v2 = ctx['elem'];
|
|
c_block1[i1] = withKey(comp1({todo: ctx['elem'],toggle: ()=>v1.toggle(v2.id)}, key + \`__1__\${key1}\`, node, this, null), key1);
|
|
}
|
|
return list(c_block1);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`.alike suffix in a list 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/><block-child-0/></button>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2;
|
|
let hdlr1 = [ctx['props'].toggle, ctx];
|
|
let txt1 = ctx['props'].todo.id;
|
|
if (ctx['props'].todo.isChecked) {
|
|
b2 = text(\`V\`);
|
|
}
|
|
return block1([hdlr1, txt1], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`.alike suffix in a simple case 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = text(ctx['state'].counter);
|
|
const b3 = comp1({fn: ()=>1}, key + \`__1\`, node, this, null);
|
|
return multi([b2, b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`.alike suffix in a simple case 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(ctx['props'].fn());
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"greetings\\"]);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = comp1({greetings: ctx['greetings']}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props'].greetings;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics arrow functions as prop correctly capture their scope 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { prepareList, withKey } = helpers;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"onClick\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
|
|
for (let i1 = 0; i1 < l_block1; i1++) {
|
|
ctx[\`item\`] = v_block1[i1];
|
|
const key1 = ctx['item'].val;
|
|
const v1 = ctx['onClick'];
|
|
const v2 = ctx['item'];
|
|
c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
|
|
}
|
|
return list(c_block1);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics arrow functions as prop correctly capture their scope 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let hdlr1 = [ctx['props'].onClick, ctx];
|
|
return block1([hdlr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics explicit object prop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = comp1({value: ctx['state'].val}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics explicit object prop 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['state'].someval;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics prop names can contain - 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop-name\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics prop names can contain - 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props']['prop-name'];
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics support prop names that aren't valid bare object property names 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"some-dashed-prop\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics support prop names that aren't valid bare object property names 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let hdlr1 = [ctx['props'].onClick, ctx];
|
|
return block1([hdlr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { isBoundary, withDefault, LazyValue } = helpers;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
let block2 = createBlock(\`<p>43</p>\`);
|
|
|
|
function value1(ctx, node, key = \\"\\") {
|
|
return block2();
|
|
}
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
ctx[isBoundary] = 1
|
|
ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
|
|
const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
|
|
return block1([], [b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { safeOutput } = helpers;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props'].val;
|
|
const b2 = safeOutput(ctx['props'].val);
|
|
return block1([txt1], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set with a body expression can be used as textual prop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { isBoundary, withDefault, setContextValue } = helpers;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
ctx[isBoundary] = 1
|
|
setContextValue(ctx, \\"abc\\", \`42\`);
|
|
const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set with a body expression can be used as textual prop 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props'].val;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set works 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { isBoundary, withDefault, setContextValue } = helpers;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
ctx[isBoundary] = 1
|
|
setContextValue(ctx, \\"val\\", 42);
|
|
const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics t-set works 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props'].val;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics template string in prop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"propName\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`basics template string in prop 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(\`\`);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`bound functions are considered 'alike' 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = text(ctx['state'].val);
|
|
const b3 = comp1({fn: ctx['someFunction'].bind(this)}, key + \`__1\`, node, this, null);
|
|
return multi([b2, b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`bound functions are considered 'alike' 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(\`child\`);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`bound functions is not referentially equal after update 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({val: ctx['state'].val,fn: ctx['someFunction'].bind(this)}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`bound functions is not referentially equal after update 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(ctx['props'].val);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`can bind function prop with bind suffix 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({doSomething: ctx['doSomething'].bind(this)}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`can bind function prop with bind suffix 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(\`child\`);
|
|
}
|
|
}"
|
|
`;
|