mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] compiler: add support for t-for directive
This commit adds support for the `t-for` whose syntax and usage is similar to the syntax of the for..of loop in JS (and in fact it compiles to a for..of loop). This looping construct supports looping on arbitrary iterables and destructuring assignments, which would be difficult to support in a backward compatible manner on the existing t-foreach directive.
This commit is contained in:
Samuel Degueldre
@@ -0,0 +1,493 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`list of components components in a node in a t-for 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"item\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
|
||||
let block3 = createBlock(\`<li><block-child-0/></li>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['item'] of ctx['items']) {
|
||||
const key1 = 'li_'+ctx['item'];
|
||||
const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
|
||||
c_block2[i1] = withKey(block3([], [b4]), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components components in a node in a t-for 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].item;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components crash on duplicate key in dev mode 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { OwlError, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const keys1 = new Set();
|
||||
const c_block1 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['item'] of [1,2]) {
|
||||
const key1 = 'child';
|
||||
if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-for: \${key1}\`)}
|
||||
keys1.add(String(key1));
|
||||
const props1 = {};
|
||||
helpers.validateProps(\`Child\`, props1, this);
|
||||
c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
return list(c_block1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components crash on duplicate key in dev mode 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components crash when using object as keys that serialize to the same string 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { OwlError, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const keys1 = new Set();
|
||||
const c_block1 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['item'] of [{},{}]) {
|
||||
const key1 = ctx['item'];
|
||||
if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-for: \${key1}\`)}
|
||||
keys1.add(String(key1));
|
||||
const props1 = {};
|
||||
helpers.validateProps(\`Child\`, props1, this);
|
||||
c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
return list(c_block1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components crash when using object as keys that serialize to the same string 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components list of sub components inside other nodes 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`SubComponent\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['blip'] of ctx['state'].blips) {
|
||||
const key1 = ctx['blip'].id;
|
||||
const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
|
||||
c_block2[i1] = withKey(block3([], [b4]), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components list of sub components inside other nodes 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span>asdf</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components order is correct when slots are not of same type 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
|
||||
let block2 = createBlock(\`<div>A</div>\`);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (!ctx['state'].active) {
|
||||
b2 = block2();
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
|
||||
function slot2(ctx, node, key = \\"\\") {
|
||||
return text(\`B\`);
|
||||
}
|
||||
|
||||
function slot3(ctx, node, key = \\"\\") {
|
||||
return text(\`C\`);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const ctx1 = capture(ctx);
|
||||
return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components order is correct when slots are not of same type 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot, withKey } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block1 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['slotName'] of ctx['slotNames']) {
|
||||
const key1 = ctx['slotName'];
|
||||
const slot1 = (ctx['slotName']);
|
||||
c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
|
||||
i1++;
|
||||
}
|
||||
return list(c_block1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-for in t-for 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['section'] of ctx['state'].s) {
|
||||
const key1 = ctx['section'];
|
||||
ctx = Object.create(ctx);
|
||||
const c_block3 = [];
|
||||
let i2 = 0;
|
||||
for (ctx['blip'] of ctx['section'].blips) {
|
||||
const key2 = ctx['blip'];
|
||||
c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
|
||||
i2++;
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
c_block2[i1] = withKey(list(c_block3), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-for in t-for 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].blip;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-for in t-for, 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"row\\",\\"col\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
let block5 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['row'] of ctx['state'].rows) {
|
||||
const key1 = ctx['row'];
|
||||
ctx = Object.create(ctx);
|
||||
const c_block4 = [];
|
||||
let i2 = 0;
|
||||
for (ctx['col'] of ctx['state'].cols) {
|
||||
const key2 = ctx['col'];
|
||||
const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
|
||||
c_block4[i2] = withKey(block5([], [b6]), key2);
|
||||
i2++;
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
const b4 = list(c_block4);
|
||||
c_block2[i1] = withKey(block3([], [b4]), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-for in t-for, 2 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].row+'_'+ctx['props'].col;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components simple list 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block1 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['elem'] of ctx['state'].elems) {
|
||||
const key1 = ctx['elem'].id;
|
||||
c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
return list(c_block1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components simple list 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components rendered in a loop 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['number'] of ctx['state'].numbers) {
|
||||
const key1 = ctx['number'];
|
||||
c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components rendered in a loop 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].n;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components with some state rendered in a loop 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['number'] of ctx['state'].numbers) {
|
||||
const key1 = ctx['number'];
|
||||
c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components with some state rendered in a loop 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['state'].n;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components switch component position 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['c'] of ctx['clist']) {
|
||||
const key1 = ctx['c'];
|
||||
c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components switch component position 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['props'].key;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components t-for with t-component, and update 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const c_block2 = [];
|
||||
let i1 = 0;
|
||||
for (ctx['n'] of [0,1]) {
|
||||
const key1 = ctx['n'];
|
||||
c_block2[i1] = withKey(comp1({val: ctx['n']}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
i1++;
|
||||
}
|
||||
const b2 = list(c_block2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components t-for with t-component, and update 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['state'].val;
|
||||
let txt2 = ctx['props'].val;
|
||||
return block1([txt1, txt2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
Reference in New Issue
Block a user