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
src/compiler/code_generator.ts
+35 -10
View File
@@ -1,4 +1,3 @@
import { isProp } from "../runtime/blockdom/attributes";
import { import {
compileExpr, compileExpr,
compileExprToArray, compileExprToArray,
@@ -58,6 +57,29 @@ function generateId(prefix: string = "") {
return prefix + nextDataIds[prefix]; return prefix + nextDataIds[prefix];
} }
function isProp(tag: string, key: string): boolean {
switch (tag) {
case "input":
return (
key === "checked" ||
key === "indeterminate" ||
key === "value" ||
key === "readonly" ||
key === "disabled"
);
case "option":
return key === "selected" || key === "disabled";
case "textarea":
return key === "value" || key === "readonly" || key === "disabled";
case "select":
return key === "value" || key === "disabled";
case "button":
case "optgroup":
return key === "disabled";
}
return false;
}
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// BlockDescription // BlockDescription
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -585,12 +607,15 @@ export class CodeGenerator {
} else { } else {
expr = `new Boolean(${expr})`; expr = `new Boolean(${expr})`;
} }
} const idx = block!.insertData(expr, "prop");
const idx = block!.insertData(expr, "attr"); attrs[`block-property-${idx}`] = attrName!;
if (key === "t-att") {
attrs[`block-attributes`] = String(idx);
} else { } else {
attrs[`block-attribute-${idx}`] = attrName!; const idx = block!.insertData(expr, "attr");
if (key === "t-att") {
attrs[`block-attributes`] = String(idx);
} else {
attrs[`block-attribute-${idx}`] = attrName!;
}
} }
} else if (this.translatableAttributes.includes(key)) { } else if (this.translatableAttributes.includes(key)) {
attrs[key] = this.translateFn(ast.attrs[key]); attrs[key] = this.translateFn(ast.attrs[key]);
@@ -640,15 +665,15 @@ export class CodeGenerator {
targetExpr = compileExpr(dynamicTgExpr); targetExpr = compileExpr(dynamicTgExpr);
} }
} }
idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "attr"); idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "prop");
attrs[`block-attribute-${idx}`] = specialInitTargetAttr; attrs[`block-property-${idx}`] = specialInitTargetAttr;
} else if (hasDynamicChildren) { } else if (hasDynamicChildren) {
const bValueId = generateId("bValue"); const bValueId = generateId("bValue");
tModelSelectedExpr = `${bValueId}`; tModelSelectedExpr = `${bValueId}`;
this.define(tModelSelectedExpr, fullExpression); this.define(tModelSelectedExpr, fullExpression);
} else { } else {
idx = block!.insertData(`${fullExpression}`, "attr"); idx = block!.insertData(`${fullExpression}`, "prop");
attrs[`block-attribute-${idx}`] = targetAttr; attrs[`block-property-${idx}`] = targetAttr;
} }
this.helpers.add("toNumber"); this.helpers.add("toNumber");
let valueCode = `ev.target.${targetAttr}`; let valueCode = `ev.target.${targetAttr}`;
src/runtime/blockdom/attributes.ts
-30
View File
@@ -140,33 +140,3 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
} }
} }
} }
export function makePropSetter(name: string): Setter<HTMLElement> {
return function setProp(this: HTMLElement, value: any) {
// support 0, fallback to empty string for other falsy values
(this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
};
}
export function isProp(tag: string, key: string): boolean {
switch (tag) {
case "input":
return (
key === "checked" ||
key === "indeterminate" ||
key === "value" ||
key === "readonly" ||
key === "disabled"
);
case "option":
return key === "selected" || key === "disabled";
case "textarea":
return key === "value" || key === "readonly" || key === "disabled";
case "select":
return key === "value" || key === "disabled";
case "button":
case "optgroup":
return key === "disabled";
}
return false;
}
src/runtime/blockdom/block_compiler.ts
+29 -15
View File
@@ -1,13 +1,5 @@
import { OwlError } from "../error_handling"; import { OwlError } from "../error_handling";
import { import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
attrsSetter,
attrsUpdater,
createAttrUpdater,
isProp,
makePropSetter,
setClass,
updateClass,
} from "./attributes";
import { config } from "./config"; import { config } from "./config";
import { createEventHandler } from "./events"; import { createEventHandler } from "./events";
import type { VNode } from "./index"; import type { VNode } from "./index";
@@ -25,6 +17,13 @@ const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
const NO_OP = () => {}; const NO_OP = () => {};
function makePropSetter(name: string): Setter<HTMLElement> {
return function setProp(this: HTMLElement, value: any) {
// support 0, fallback to empty string for other falsy values
(this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
};
}
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Main compiler code // Main compiler code
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -101,7 +100,7 @@ function normalizeNode(node: HTMLElement | Text) {
interface DynamicInfo { interface DynamicInfo {
idx: number; idx: number;
refIdx?: number; refIdx?: number;
type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref"; type: "text" | "child" | "handler" | "attribute" | "attributes" | "property" | "ref";
isOnlyChild?: boolean; isOnlyChild?: boolean;
name?: string; name?: string;
tag?: string; tag?: string;
@@ -184,6 +183,14 @@ function buildTree(
name: attrValue, name: attrValue,
tag: tagName, tag: tagName,
}); });
} else if (attrName.startsWith("block-property-")) {
const idx = parseInt(attrName.slice(15), 10);
info.push({
type: "property",
idx,
name: attrValue,
tag: tagName,
});
} else if (attrName === "block-attributes") { } else if (attrName === "block-attributes") {
info.push({ info.push({
type: "attributes", type: "attributes",
@@ -377,15 +384,22 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
}; };
} }
break; break;
case "property": {
const refIdx = info.refIdx!;
const setProp = makePropSetter(info.name!);
ctx.locations.push({
idx: info.idx,
refIdx,
setData: setProp,
updateData: setProp,
});
break;
}
case "attribute": { case "attribute": {
const refIdx = info.refIdx!; const refIdx = info.refIdx!;
let updater: any; let updater: any;
let setter: any; let setter: any;
if (isProp(info.tag!, info.name!)) { if (info.name === "class") {
const setProp = makePropSetter(info.name!);
setter = setProp;
updater = setProp;
} else if (info.name === "class") {
setter = setClass; setter = setClass;
updater = updateClass; updater = updateClass;
} else { } else {
tests/blockdom/block_attributes.test.ts
-1
View File
@@ -145,4 +145,3 @@ test("class attribute (with a preexisting value", async () => {
patch(tree, block([""])); patch(tree, block([""]));
expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`); expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
}); });
tests/blockdom/block_properties.test.ts
+6 -6
View File
@@ -15,9 +15,9 @@ afterEach(() => {
fixture.remove(); fixture.remove();
}); });
test("input with value attribute", () => { test("input with value property", () => {
// render input with initial value // 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"]); const tree = block(["zucchini"]);
mount(tree, fixture); mount(tree, fixture);
@@ -37,8 +37,8 @@ test("input with value attribute", () => {
expect(input.value).toBe("potato"); expect(input.value).toBe("potato");
}); });
test("input with value attribute, and falsy value given", () => { test("input with value property, and falsy value given", () => {
const block = createBlock(`<input block-attribute-0="value"/>`); const block = createBlock(`<input block-property-0="value"/>`);
const tree = block([undefined]); const tree = block([undefined]);
mount(tree, fixture); mount(tree, fixture);
@@ -58,9 +58,9 @@ test("input with value attribute, and falsy value given", () => {
expect(input.value).toBe(""); expect(input.value).toBe("");
}); });
test("input type=checkbox with checked attribute", () => { test("input type=checkbox with checked property", () => {
// render input with initial value // 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]); const tree = block([true]);
mount(tree, fixture); mount(tree, fixture);
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 comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
const comp2 = 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> <h5>Search options</h5>
<input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/> <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 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 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 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 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-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 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 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 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>\`); 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]; ctx[\`category\`] = v_block15[i1];
const key1 = ctx['category'].id; const key1 = ctx['category'].id;
let attr6 = 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; 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__; ctx = ctx.__proto__;
const b15 = list(c_block15); const b15 = list(c_block15);
b14 = block14([], [b15]); 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 hdlr4 = [ctx['updateFilter'], ctx];
let hdlr5 = [ctx['updateFilter'], ctx]; let hdlr5 = [ctx['updateFilter'], ctx];
let hdlr6 = [ctx['clearSearch'], ctx]; let hdlr6 = [ctx['clearSearch'], ctx];
@@ -289,14 +289,14 @@ exports[`misc other complex template 1`] = `
const key1 = ctx['trigger'].id; const key1 = ctx['trigger'].id;
let b20; let b20;
if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) { 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 attr7 = \`trigger_\${ctx['trigger'].id}\`;
let attr10 = \`trigger_\${ctx['trigger'].id}\`; let attr8 = \`trigger_\${ctx['trigger'].id}\`;
let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]); let prop3 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
let attr12 = ctx['trigger'].id; let attr9 = ctx['trigger'].id;
let hdlr7 = [ctx['updateTriggerDisplay'], ctx]; let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
let attr13 = \`trigger_\${ctx['trigger'].id}\`; let attr10 = \`trigger_\${ctx['trigger'].id}\`;
let txt6 = ctx['trigger'].name; 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); 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); const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
b25 = block25([], [b26, b27]); 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 { 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((0) === 0 ? 0 : ((0) || \\"\\")); let prop1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -33,11 +33,11 @@ exports[`dynamic input value: falsy values 2`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((false) === 0 ? 0 : ((false) || \\"\\")); let prop1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -47,11 +47,11 @@ exports[`dynamic input value: falsy values 3`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\")); let prop1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -61,11 +61,11 @@ exports[`dynamic input value: falsy values 4`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String(('') === 0 ? 0 : (('') || \\"\\")); let prop1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
return block1([attr1]); 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 { 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['v']); let prop1 = new Boolean(ctx['v']);
return block1([attr1]); 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 { 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['flag']); let prop1 = new Boolean(ctx['flag']);
return block1([attr1]); 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 { 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\")); let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -117,11 +117,11 @@ exports[`input with t-att-value 1`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\")); let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]); 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 { 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new Boolean(ctx['v']); let prop1 = new Boolean(ctx['v']);
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -145,11 +145,11 @@ exports[`select with t-att-value 1`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\")); let prop1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -159,11 +159,11 @@ exports[`textarea with t-att-value 1`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\")); let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]); return block1([prop1]);
} }
}" }"
`; `;
@@ -173,11 +173,11 @@ exports[`updating property with falsy value 1`] = `
) { ) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom; 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 = \\"\\") { return function template(ctx, node, key = \\"\\") {
let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\")); let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
return block1([attr1]); 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(""); expect(input.value).toBe("");
}); });
test("input type= checkbox, with t-att-checked", () => { test("input type= checkbox, with t-att-checked", () => {
const template = `<input type="checkbox" t-att-checked="flag"/>`; const template = `<input type="checkbox" t-att-checked="flag"/>`;
const result = renderToString(template, { flag: true }); const result = renderToString(template, { flag: true });
tests/components/__snapshots__/t_model.test.ts.snap
+84 -84
View File
@@ -6,15 +6,15 @@ exports[`t-model directive .lazy modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text; let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -25,15 +25,15 @@ exports[`t-model directive .number modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'number'; const expr1 = 'number';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }]; let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
let txt1 = ctx['state'].number; let txt1 = ctx['state'].number;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -44,15 +44,15 @@ exports[`t-model directive .trim modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
let txt1 = ctx['state'].text; let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -63,15 +63,15 @@ exports[`t-model directive basic use, on an input 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text; let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -82,15 +82,15 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text; let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -101,15 +101,15 @@ exports[`t-model directive basic use, on another key in component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['some']; const bExpr1 = ctx['some'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['some'].text; let txt1 = ctx['some'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -120,15 +120,15 @@ exports[`t-model directive can also define t-on directive on same event, part 1
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let hdlr2 = [ctx['onInput'], ctx]; let hdlr2 = [ctx['onInput'], ctx];
return block1([attr1, hdlr1, hdlr2]); return block1([prop1, hdlr1, hdlr2]);
} }
}" }"
`; `;
@@ -139,25 +139,25 @@ exports[`t-model directive can also define t-on directive on same event, part 2
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-attribute-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`); let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-property-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'choice'; const expr1 = 'choice';
let attr1 = bExpr1[expr1] === 'One'; let prop1 = bExpr1[expr1] === 'One';
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let hdlr2 = [ctx['onClick'], ctx]; let hdlr2 = [ctx['onClick'], ctx];
const bExpr2 = ctx['state']; const bExpr2 = ctx['state'];
const expr2 = 'choice'; const expr2 = 'choice';
let attr2 = bExpr2[expr2] === 'Two'; let prop2 = bExpr2[expr2] === 'Two';
let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }]; let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
let hdlr4 = [ctx['onClick'], ctx]; let hdlr4 = [ctx['onClick'], ctx];
const bExpr3 = ctx['state']; const bExpr3 = ctx['state'];
const expr3 = 'choice'; const expr3 = 'choice';
let attr3 = bExpr3[expr3] === 'Three'; let prop3 = bExpr3[expr3] === 'Three';
let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }]; let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
let hdlr6 = [ctx['onClick'], ctx]; let hdlr6 = [ctx['onClick'], ctx];
return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]); return block1([prop1, hdlr1, hdlr2, prop2, hdlr3, hdlr4, prop3, hdlr5, hdlr6]);
} }
}" }"
`; `;
@@ -168,7 +168,7 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue, toNumber } = helpers; let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx); ctx = Object.create(ctx);
@@ -176,9 +176,9 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
setContextValue(ctx, \\"admiral\\", 'Bruno'); setContextValue(ctx, \\"admiral\\", 'Bruno');
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([attr1, hdlr1]); return block1([prop1, hdlr1]);
} }
}" }"
`; `;
@@ -190,7 +190,7 @@ exports[`t-model directive in a t-foreach 1`] = `
let { prepareList, toNumber, withKey } = helpers; let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`); let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`); let block3 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx); ctx = Object.create(ctx);
@@ -200,9 +200,9 @@ exports[`t-model directive in a t-foreach 1`] = `
const key1 = ctx['thing'].id; const key1 = ctx['thing'].id;
const bExpr1 = ctx['thing']; const bExpr1 = ctx['thing'];
const expr1 = 'f'; const expr1 = 'f';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1); c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
} }
const b2 = list(c_block2); const b2 = list(c_block2);
return block1([], [b2]); return block1([], [b2]);
@@ -217,7 +217,7 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
let { prepareList, toNumber, withKey } = helpers; let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`); let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`); let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx); ctx = Object.create(ctx);
@@ -228,9 +228,9 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
const key1 = ctx['thing_index']; const key1 = ctx['thing_index'];
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = ctx['thing_index']; const expr1 = ctx['thing_index'];
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1); c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
} }
const b2 = list(c_block2); const b2 = list(c_block2);
return block1([], [b2]); return block1([], [b2]);
@@ -245,7 +245,7 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
let { prepareList, toNumber, withKey } = helpers; let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`); let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`); let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx); ctx = Object.create(ctx);
@@ -256,9 +256,9 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
const key1 = ctx['name_index']; const key1 = ctx['name_index'];
const bExpr1 = ctx['state'].values; const bExpr1 = ctx['state'].values;
const expr1 = ctx['name']; const expr1 = ctx['name'];
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1); c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
} }
const b2 = list(c_block2); const b2 = list(c_block2);
return block1([], [b2]); return block1([], [b2]);
@@ -272,15 +272,15 @@ exports[`t-model directive on a select 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`); let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'color'; const expr1 = 'color';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].color; let txt1 = ctx['state'].color;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -291,14 +291,14 @@ exports[`t-model directive on a select, initial state 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`); let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'color'; const expr1 = 'color';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([attr1, hdlr1]); return block1([prop1, hdlr1]);
} }
}" }"
`; `;
@@ -309,15 +309,15 @@ exports[`t-model directive on a sub state key 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'].something; const bExpr1 = ctx['state'].something;
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].something.text; let txt1 = ctx['state'].something.text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -328,19 +328,19 @@ exports[`t-model directive on an input type=radio 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`); let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'choice'; const expr1 = 'choice';
let attr1 = bExpr1[expr1] === 'One'; let prop1 = bExpr1[expr1] === 'One';
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
const bExpr2 = ctx['state']; const bExpr2 = ctx['state'];
const expr2 = 'choice'; const expr2 = 'choice';
let attr2 = bExpr2[expr2] === 'Two'; let prop2 = bExpr2[expr2] === 'Two';
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }]; let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
let txt1 = ctx['state'].choice; let txt1 = ctx['state'].choice;
return block1([attr1, hdlr1, attr2, hdlr2, txt1]); return block1([prop1, hdlr1, prop2, hdlr2, txt1]);
} }
}" }"
`; `;
@@ -351,18 +351,18 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`); let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'choice'; const expr1 = 'choice';
let attr1 = bExpr1[expr1] === 'One'; let prop1 = bExpr1[expr1] === 'One';
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
const bExpr2 = ctx['state']; const bExpr2 = ctx['state'];
const expr2 = 'choice'; const expr2 = 'choice';
let attr2 = bExpr2[expr2] === 'Two'; let prop2 = bExpr2[expr2] === 'Two';
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }]; let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
return block1([attr1, hdlr1, attr2, hdlr2]); return block1([prop1, hdlr1, prop2, hdlr2]);
} }
}" }"
`; `;
@@ -373,20 +373,20 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`); let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
let b2,b3; let b2,b3;
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'flag'; const expr1 = 'flag';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
if (ctx['state'].flag) { if (ctx['state'].flag) {
b2 = text(\`yes\`); b2 = text(\`yes\`);
} else { } else {
b3 = text(\`no\`); b3 = text(\`no\`);
} }
return block1([attr1, hdlr1], [b2, b3]); return block1([prop1, hdlr1], [b2, b3]);
} }
}" }"
`; `;
@@ -397,15 +397,15 @@ exports[`t-model directive on an textarea 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><textarea block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text; let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;
@@ -416,15 +416,15 @@ exports[`t-model directive t-model is applied before t-on-input 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let hdlr2 = [ctx['onInput'], ctx]; let hdlr2 = [ctx['onInput'], ctx];
return block1([attr1, hdlr1, hdlr2]); return block1([prop1, hdlr1, hdlr2]);
} }
}" }"
`; `;
@@ -435,14 +435,14 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`); let block1 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text'; const expr1 = 'text';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([attr1, hdlr1]); return block1([prop1, hdlr1]);
} }
}" }"
`; `;
@@ -453,17 +453,17 @@ exports[`t-model directive t-model on select with static options 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`); let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'model'; const expr1 = 'model';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = 'a'; let txt1 = 'a';
let txt2 = 'b'; let txt2 = 'b';
let txt3 = 'c'; let txt3 = 'c';
return block1([attr1, hdlr1, txt1, txt2, txt3]); return block1([prop1, hdlr1, txt1, txt2, txt3]);
} }
}" }"
`; `;
@@ -576,7 +576,7 @@ exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
let { prepareList, toNumber, withKey } = helpers; let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`); let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-attribute-0=\\"value\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>\`); let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-property-0=\\"value\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
let hdlr1 = [ctx['getData'], ctx]; let hdlr1 = [ctx['getData'], ctx];
@@ -585,13 +585,13 @@ exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
for (let i1 = 0; i1 < l_block2; i1++) { for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`opt\`] = v_block2[i1]; ctx[\`opt\`] = v_block2[i1];
const key1 = ctx['opt']; const key1 = ctx['opt'];
let attr1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\")); let prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
let attr2 = ctx['opt']; let attr1 = ctx['opt'];
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'group'; const expr1 = 'group';
let attr3 = bExpr1[expr1] === ctx['opt']; let prop2 = bExpr1[expr1] === ctx['opt'];
let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
c_block2[i1] = withKey(block3([attr1, attr2, attr3, hdlr2]), key1); c_block2[i1] = withKey(block3([prop1, attr1, prop2, hdlr2]), key1);
} }
const b2 = list(c_block2); const b2 = list(c_block2);
return block1([hdlr1], [b2]); return block1([hdlr1], [b2]);
@@ -606,24 +606,24 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`); let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`); let block2 = createBlock(\`<input class=\\"a\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`); let block3 = createBlock(\`<input class=\\"b\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
let b2,b3; let b2,b3;
if (ctx['state'].flag) { if (ctx['state'].flag) {
const bExpr1 = ctx['state']; const bExpr1 = ctx['state'];
const expr1 = 'text1'; const expr1 = 'text1';
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
b2 = block2([attr1, hdlr1]); b2 = block2([prop1, hdlr1]);
} }
if (!ctx['state'].flag) { if (!ctx['state'].flag) {
const bExpr2 = ctx['state']; const bExpr2 = ctx['state'];
const expr2 = 'text2'; const expr2 = 'text2';
let attr2 = bExpr2[expr2]; let prop2 = bExpr2[expr2];
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }]; let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
b3 = block3([attr2, hdlr2]); b3 = block3([prop2, hdlr2]);
} }
return block1([], [b2, b3]); return block1([], [b2, b3]);
} }
@@ -636,15 +636,15 @@ exports[`t-model directive with expression having a changing key 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom; let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers; let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`); let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
return function template(ctx, node, key = \\"\\") { return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'].something; const bExpr1 = ctx['state'].something;
const expr1 = ctx['text'].key; const expr1 = ctx['text'].key;
let attr1 = bExpr1[expr1]; let prop1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }]; let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].something[ctx['text'].key]; let txt1 = ctx['state'].something[ctx['text'].key];
return block1([attr1, hdlr1, txt1]); return block1([prop1, hdlr1, txt1]);
} }
}" }"
`; `;