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

[REF] blockdom,compiler: implement properties

Browse Source 
Before this commit, properties were just handled as a special case of
attributes. But it does not make that much sense, since they are
different. For example, the `readOnly` property does not have the same
name as the `readonly` attribute.  The confusion probably comes from the
fact that QWeb does not distinguish between property and attributes, so
Owl has to infer which one is which.

With this commit, we introduce a `block-property` directive in blockdom,
and change the compiler to use it in emitted code. It has the additional
benefits of slightly shrinking the runtime code, since the `isProp`
function can now be located in the compiler.
This commit is contained in:
Géry Debongnie
2023-03-01 11:50:30 +01:00
committed by Sam Degueldre
parent f0fb3ab64e
commit f892929c80
9 changed files with 203 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/compiler/__snapshots__/misc.test.ts.snap
+13 -13
View File
@@ -187,7 +187,7 @@ exports[`misc other complex template 1`] = `
const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-property-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
<h5>Search options</h5>
<input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
@@ -209,8 +209,8 @@ exports[`misc other complex template 1`] = `
let block12 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
let block13 = createBlock(\`<li class=\\"nav-item dropdown\\"><a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\"><b><span><block-text-0/></span></b></a><div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\"><a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a><a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a></div></li>\`);
let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-property-1=\\"selected\\"><block-text-2/></option>\`);
let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
let block21 = createBlock(\`<div><button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button><button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button><button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button><button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button></div>\`);
let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
@@ -269,15 +269,15 @@ exports[`misc other complex template 1`] = `
ctx[\`category\`] = v_block15[i1];
const key1 = ctx['category'].id;
let attr6 = ctx['category'].id;
let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
let prop1 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
let txt5 = ctx['category'].name;
c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
c_block15[i1] = withKey(block16([attr6, prop1, txt5]), key1);
}
ctx = ctx.__proto__;
const b15 = list(c_block15);
b14 = block14([], [b15]);
}
let attr8 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
let prop2 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
let hdlr4 = [ctx['updateFilter'], ctx];
let hdlr5 = [ctx['updateFilter'], ctx];
let hdlr6 = [ctx['clearSearch'], ctx];
@@ -289,14 +289,14 @@ exports[`misc other complex template 1`] = `
const key1 = ctx['trigger'].id;
let b20;
if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
let attr9 = \`trigger_\${ctx['trigger'].id}\`;
let attr10 = \`trigger_\${ctx['trigger'].id}\`;
let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
let attr12 = ctx['trigger'].id;
let attr7 = \`trigger_\${ctx['trigger'].id}\`;
let attr8 = \`trigger_\${ctx['trigger'].id}\`;
let prop3 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
let attr9 = ctx['trigger'].id;
let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
let attr13 = \`trigger_\${ctx['trigger'].id}\`;
let attr10 = \`trigger_\${ctx['trigger'].id}\`;
let txt6 = ctx['trigger'].name;
b20 = block20([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
b20 = block20([attr7, attr8, prop3, attr9, hdlr7, attr10, txt6]);
}
c_block18[i1] = withKey(multi([b20]), key1);
}
@@ -323,7 +323,7 @@ exports[`misc other complex template 1`] = `
const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
b25 = block25([], [b26, b27]);
}
return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
return block1([attr1, txt1, hdlr2, hdlr3, prop2, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
}
}"
`;
tests/compiler/__snapshots__/properties.test.ts.snap
+36 -36
View File
@@ -19,11 +19,11 @@ exports[`dynamic input value: falsy values 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
return block1([attr1]);
let prop1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -33,11 +33,11 @@ exports[`dynamic input value: falsy values 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
return block1([attr1]);
let prop1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -47,11 +47,11 @@ exports[`dynamic input value: falsy values 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
return block1([attr1]);
let prop1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -61,11 +61,11 @@ exports[`dynamic input value: falsy values 4`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
return block1([attr1]);
let prop1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -75,11 +75,11 @@ exports[`input of type checkbox with t-att-indeterminate 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"indeterminate\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['v']);
return block1([attr1]);
let prop1 = new Boolean(ctx['v']);
return block1([prop1]);
}
}"
`;
@@ -89,11 +89,11 @@ exports[`input type= checkbox, with t-att-checked 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['flag']);
return block1([attr1]);
let prop1 = new Boolean(ctx['flag']);
return block1([prop1]);
}
}"
`;
@@ -103,11 +103,11 @@ exports[`input with t-att-value (patching with same value 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]);
let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -117,11 +117,11 @@ exports[`input with t-att-value 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]);
let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -131,11 +131,11 @@ exports[`input, type checkbox, with t-att-checked (patching with same value 1`]
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['v']);
return block1([attr1]);
let prop1 = new Boolean(ctx['v']);
return block1([prop1]);
}
}"
`;
@@ -145,11 +145,11 @@ exports[`select with t-att-value 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
let block1 = createBlock(\`<select block-property-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
return block1([attr1]);
let prop1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -159,11 +159,11 @@ exports[`textarea with t-att-value 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<textarea block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]);
let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([prop1]);
}
}"
`;
@@ -173,11 +173,11 @@ exports[`updating property with falsy value 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]);
let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([prop1]);
}
}"
`;
tests/compiler/properties.test.ts
-1
View File
@@ -58,7 +58,6 @@ test("updating property with falsy value", async () => {
expect(input.value).toBe("");
});
test("input type= checkbox, with t-att-checked", () => {
const template = `<input type="checkbox" t-att-checked="flag"/>`;
const result = renderToString(template, { flag: true });