[REF] blockdom,compiler: implement properties

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
-1
View File
@@ -145,4 +145,3 @@ test("class attribute (with a preexisting value", async () => {
patch(tree, block([""]));
expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
});
+6 -6
View File
@@ -15,9 +15,9 @@ afterEach(() => {
fixture.remove();
});
test("input with value attribute", () => {
test("input with value property", () => {
// render input with initial value
const block = createBlock(`<input block-attribute-0="value"/>`);
const block = createBlock(`<input block-property-0="value"/>`);
const tree = block(["zucchini"]);
mount(tree, fixture);
@@ -37,8 +37,8 @@ test("input with value attribute", () => {
expect(input.value).toBe("potato");
});
test("input with value attribute, and falsy value given", () => {
const block = createBlock(`<input block-attribute-0="value"/>`);
test("input with value property, and falsy value given", () => {
const block = createBlock(`<input block-property-0="value"/>`);
const tree = block([undefined]);
mount(tree, fixture);
@@ -58,9 +58,9 @@ test("input with value attribute, and falsy value given", () => {
expect(input.value).toBe("");
});
test("input type=checkbox with checked attribute", () => {
test("input type=checkbox with checked property", () => {
// render input with initial value
const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);
const block = createBlock(`<input type="checkbox" block-property-0="checked"/>`);
const tree = block([true]);
mount(tree, fixture);