mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
df59ec49ae
t-call-context is a feature that's supposed to mask the rendering context completely, but currently the component remains available through `this`. This commit stops treating `this` as a reserved word, so that it's compiled to a lookup in the rendering context, and adds `this` to the rendering context when binding the component's rendering function. With these changes, `this` behaves the same as before when outside a t-call-context, but when the rendering context is overriden, the template can no longer access `this`. `this` still represents the instance of the component inside of the rendering function since it's needed by owl internally. A side-effect of this change is that now the rendering context is no longer the instance of the component by default, but is always an object with the component in its prototype chain. This was already the case before in some contexts (eg inside t-foreach, or inside components with a t-set/t-call anywhere in its template). This can cause issues in rare cases when a component method was called directly on the rendering context, as before this change, the method's bound this would be the component instance (except in a t-foreach, component with a t-set/t-call, etc), while after this change it is now never the component instance. When the method only reads on `this` there is no issue as all the components properties are available on the rendering contexts, but setting a value on `this` will write on the rendering context and not the component which is likely a mistake. While this is a breaking change, simply adding a t-set/t-call to any template would break components that would be broken by this change, with this in mind we decided to make this change anyway so that developers get the error as early as possible in the development cycle rather than having a seemingly inocuous change break code under them.
503 lines
16 KiB
Plaintext
503 lines
16 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`style and class handling can set class on multi root component 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on multi root component 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block2 = createBlock(\`<div>a</div>\`);
|
|
let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = block2();
|
|
let attr1 = ctx['props'].class;
|
|
const b3 = block3([attr1]);
|
|
return multi([b2, b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on sub component, as prop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on sub component, as prop 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on sub sub component 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on sub sub component 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set class on sub sub component 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set more than one class on sub component 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'a b'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set more than one class on sub component 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling can set style and class inside component 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return block1();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class on components do not interfere with user defined classes 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = {c:ctx['state'].c};
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class on sub component, which is switched to another 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class on sub component, which is switched to another 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
|
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2,b3;
|
|
if (ctx['props'].child==='a') {
|
|
b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, this, null);
|
|
} else {
|
|
b3 = comp2({class: ctx['props'].class}, key + \`__2\`, node, this, null);
|
|
}
|
|
return multi([b2, b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class on sub component, which is switched to another 3`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class on sub component, which is switched to another 4`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class with extra whitespaces (variation) 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = comp1({class: 'a b c d'}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class with extra whitespaces (variation) 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class with extra whitespaces 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'a b c d'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling class with extra whitespaces 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling component class and parent class combine together 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling component class and parent class combine together 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
|
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let d1 = {'font-size':'20px',...ctx['props'].style};
|
|
return block1([d1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 2`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
|
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return component(\`Child\`, {style: ctx['state'].style}, key + \`__1\`, node, ctx);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = comp1({class: undefined}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling error in subcomponent with class 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'a'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling error in subcomponent with class 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
let txt1 = ctx['this'].will.crash;
|
|
return block1([attr1, txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling no class is set is child ignores it 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling no class is set is child ignores it 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();
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].class;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling style is properly added on widget root el 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling style is properly added on widget root el 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = ctx['props'].style;
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = {d:ctx['state'].d,...ctx['props'].class};
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let attr1 = {d:ctx['state'].d,...ctx['props'].class};
|
|
return block1([attr1]);
|
|
}
|
|
}"
|
|
`;
|