mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[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
committed by
Sam Degueldre
Sam Degueldre
parent
f0fb3ab64e
commit
f892929c80
@@ -1,4 +1,3 @@
|
||||
import { isProp } from "../runtime/blockdom/attributes";
|
||||
import {
|
||||
compileExpr,
|
||||
compileExprToArray,
|
||||
@@ -58,6 +57,29 @@ function generateId(prefix: string = "") {
|
||||
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
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -585,12 +607,15 @@ export class CodeGenerator {
|
||||
} else {
|
||||
expr = `new Boolean(${expr})`;
|
||||
}
|
||||
}
|
||||
const idx = block!.insertData(expr, "attr");
|
||||
if (key === "t-att") {
|
||||
attrs[`block-attributes`] = String(idx);
|
||||
const idx = block!.insertData(expr, "prop");
|
||||
attrs[`block-property-${idx}`] = attrName!;
|
||||
} 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)) {
|
||||
attrs[key] = this.translateFn(ast.attrs[key]);
|
||||
@@ -640,15 +665,15 @@ export class CodeGenerator {
|
||||
targetExpr = compileExpr(dynamicTgExpr);
|
||||
}
|
||||
}
|
||||
idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "attr");
|
||||
attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
|
||||
idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "prop");
|
||||
attrs[`block-property-${idx}`] = specialInitTargetAttr;
|
||||
} else if (hasDynamicChildren) {
|
||||
const bValueId = generateId("bValue");
|
||||
tModelSelectedExpr = `${bValueId}`;
|
||||
this.define(tModelSelectedExpr, fullExpression);
|
||||
} else {
|
||||
idx = block!.insertData(`${fullExpression}`, "attr");
|
||||
attrs[`block-attribute-${idx}`] = targetAttr;
|
||||
idx = block!.insertData(`${fullExpression}`, "prop");
|
||||
attrs[`block-property-${idx}`] = targetAttr;
|
||||
}
|
||||
this.helpers.add("toNumber");
|
||||
let valueCode = `ev.target.${targetAttr}`;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import { OwlError } from "../error_handling";
|
||||
import {
|
||||
attrsSetter,
|
||||
attrsUpdater,
|
||||
createAttrUpdater,
|
||||
isProp,
|
||||
makePropSetter,
|
||||
setClass,
|
||||
updateClass,
|
||||
} from "./attributes";
|
||||
import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
|
||||
import { config } from "./config";
|
||||
import { createEventHandler } from "./events";
|
||||
import type { VNode } from "./index";
|
||||
@@ -25,6 +17,13 @@ const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
|
||||
|
||||
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
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -101,7 +100,7 @@ function normalizeNode(node: HTMLElement | Text) {
|
||||
interface DynamicInfo {
|
||||
idx: number;
|
||||
refIdx?: number;
|
||||
type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
|
||||
type: "text" | "child" | "handler" | "attribute" | "attributes" | "property" | "ref";
|
||||
isOnlyChild?: boolean;
|
||||
name?: string;
|
||||
tag?: string;
|
||||
@@ -184,6 +183,14 @@ function buildTree(
|
||||
name: attrValue,
|
||||
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") {
|
||||
info.push({
|
||||
type: "attributes",
|
||||
@@ -377,15 +384,22 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
|
||||
};
|
||||
}
|
||||
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": {
|
||||
const refIdx = info.refIdx!;
|
||||
let updater: any;
|
||||
let setter: any;
|
||||
if (isProp(info.tag!, info.name!)) {
|
||||
const setProp = makePropSetter(info.name!);
|
||||
setter = setProp;
|
||||
updater = setProp;
|
||||
} else if (info.name === "class") {
|
||||
if (info.name === "class") {
|
||||
setter = setClass;
|
||||
updater = updateClass;
|
||||
} else {
|
||||
|
||||
@@ -145,4 +145,3 @@ test("class attribute (with a preexisting value", async () => {
|
||||
patch(tree, block([""]));
|
||||
expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
|
||||
});
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -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]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -6,15 +6,15 @@ exports[`t-model directive .lazy modifier 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'number';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['some'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'choice';
|
||||
let attr1 = bExpr1[expr1] === 'One';
|
||||
let prop1 = bExpr1[expr1] === 'One';
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
let hdlr2 = [ctx['onClick'], ctx];
|
||||
const bExpr2 = ctx['state'];
|
||||
const expr2 = 'choice';
|
||||
let attr2 = bExpr2[expr2] === 'Two';
|
||||
let prop2 = bExpr2[expr2] === 'Two';
|
||||
let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
|
||||
let hdlr4 = [ctx['onClick'], ctx];
|
||||
const bExpr3 = ctx['state'];
|
||||
const expr3 = 'choice';
|
||||
let attr3 = bExpr3[expr3] === 'Three';
|
||||
let prop3 = bExpr3[expr3] === 'Three';
|
||||
let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
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');
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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 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 = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -200,9 +200,9 @@ exports[`t-model directive in a t-foreach 1`] = `
|
||||
const key1 = ctx['thing'].id;
|
||||
const bExpr1 = ctx['thing'];
|
||||
const expr1 = 'f';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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);
|
||||
return block1([], [b2]);
|
||||
@@ -217,7 +217,7 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
|
||||
let { prepareList, toNumber, withKey } = helpers;
|
||||
|
||||
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 = \\"\\") {
|
||||
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 bExpr1 = ctx['state'];
|
||||
const expr1 = ctx['thing_index'];
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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);
|
||||
return block1([], [b2]);
|
||||
@@ -245,7 +245,7 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
|
||||
let { prepareList, toNumber, withKey } = helpers;
|
||||
|
||||
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 = \\"\\") {
|
||||
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 bExpr1 = ctx['state'].values;
|
||||
const expr1 = ctx['name'];
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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);
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'color';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'color';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'].something;
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'choice';
|
||||
let attr1 = bExpr1[expr1] === 'One';
|
||||
let prop1 = bExpr1[expr1] === 'One';
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
const bExpr2 = ctx['state'];
|
||||
const expr2 = 'choice';
|
||||
let attr2 = bExpr2[expr2] === 'Two';
|
||||
let prop2 = bExpr2[expr2] === 'Two';
|
||||
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'choice';
|
||||
let attr1 = bExpr1[expr1] === 'One';
|
||||
let prop1 = bExpr1[expr1] === 'One';
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
const bExpr2 = ctx['state'];
|
||||
const expr2 = 'choice';
|
||||
let attr2 = bExpr2[expr2] === 'Two';
|
||||
let prop2 = bExpr2[expr2] === 'Two';
|
||||
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 { 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 = \\"\\") {
|
||||
let b2,b3;
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'flag';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
|
||||
if (ctx['state'].flag) {
|
||||
b2 = text(\`yes\`);
|
||||
} else {
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'model';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
let txt1 = 'a';
|
||||
let txt2 = 'b';
|
||||
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 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 = \\"\\") {
|
||||
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++) {
|
||||
ctx[\`opt\`] = v_block2[i1];
|
||||
const key1 = ctx['opt'];
|
||||
let attr1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
|
||||
let attr2 = ctx['opt'];
|
||||
let prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
|
||||
let attr1 = ctx['opt'];
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'group';
|
||||
let attr3 = bExpr1[expr1] === ctx['opt'];
|
||||
let prop2 = bExpr1[expr1] === ctx['opt'];
|
||||
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);
|
||||
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 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 block3 = createBlock(\`<input class=\\"b\\" 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-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].flag) {
|
||||
const bExpr1 = ctx['state'];
|
||||
const expr1 = 'text1';
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
b2 = block2([attr1, hdlr1]);
|
||||
b2 = block2([prop1, hdlr1]);
|
||||
}
|
||||
if (!ctx['state'].flag) {
|
||||
const bExpr2 = ctx['state'];
|
||||
const expr2 = 'text2';
|
||||
let attr2 = bExpr2[expr2];
|
||||
let prop2 = bExpr2[expr2];
|
||||
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
|
||||
b3 = block3([attr2, hdlr2]);
|
||||
b3 = block3([prop2, hdlr2]);
|
||||
}
|
||||
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 { 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 = \\"\\") {
|
||||
const bExpr1 = ctx['state'].something;
|
||||
const expr1 = ctx['text'].key;
|
||||
let attr1 = bExpr1[expr1];
|
||||
let prop1 = bExpr1[expr1];
|
||||
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
|
||||
let txt1 = ctx['state'].something[ctx['text'].key];
|
||||
return block1([attr1, hdlr1, txt1]);
|
||||
return block1([prop1, hdlr1, txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user