[REF] initial prototype of owl 2

tests/qweb/__snapshots__/attributes.test.ts.snap

@@ -0,0 +1,679 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes changing a class with t-att-class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes changing an attribute with t-att- 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes class and t-att-class should combine together 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes class and t-attf-class with ternary operation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = (ctx['value']?'world':'');
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute evaluating to 0 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute falsy variable  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute with a dash 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['id'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'bar';
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['c'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute evaluating to 0 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic empty class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['c'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic formatted attributes with a dash 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`Some text \${ctx['id']}\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes fixed variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes format expression 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = (ctx['value']+37);
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes format literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`bar\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes format multiple 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`a \${ctx['value1']} is \${ctx['value2']} of \${ctx['value3']} ]\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes format value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`b\${ctx['value']}r\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes from object variables set previously 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`o\`] = {a:'b'};
+    let d1 = ctx['o'].a;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes from variables set previously (no external node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`abc\`] = 'def';
+    let d1 = ctx['abc'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes from variables set previously 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`abc\`] = 'def';
+    let d1 = ctx['abc'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes static attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes static attributes on void elements 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes static attributes with dashes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes t-att-class and class should combine together 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {'a b c':ctx['value']};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {['a b c']:ctx['value']};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {'a b c':ctx['value'],'a b d':!ctx['value']};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {a:ctx['b'],c:ctx['d'],e:ctx['f']};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`hello\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class should combine with class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`world\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class with multiple classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`hello \${ctx['word']}\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = \`hello  \${ctx['word']}\`;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes tuple literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ['foo','bar'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes tuple variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes two classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes two dynamic attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'bar';
+    let d2 = 'foo';
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`attributes updating classes (with obj notation) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {'a b':ctx['condition']};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes various escapes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['bar'];
+    let d2 = \`<\${ctx['baz']}>\`;
+    let d3 = ctx['qux'];
+    return block1([d1, d2, d3]);
+  }
+}"
+`;
+
+exports[`attributes various escapes 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div> &lt; </div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['flag'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/qweb/__snapshots__/comments.test.ts.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`comments only a comment 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<!-- comment-->\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`comments properly handle comments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`comments properly handle comments between t-if/t-else 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span>true</span>\`);
+  let block3 = createBlock(\`<span>owl</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (true) {
+      b2 = block2();
+    } else {
+      b3 = block3();
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;

tests/qweb/__snapshots__/event_handling.test.ts.snap

@@ -0,0 +1,369 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-on can bind event handler 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'add'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with arguments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [5];
+    let d1 = [ctx, 'add', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty  object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [{}];
+    let d1 = [ctx, 'doSomething', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [{}];
+    let d1 = [ctx, 'doSomething', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(['someval']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`action\`] = v2[i1];
+      ctx[\`action_index\`] = i1;
+      let key1 = ctx['action_index'];
+      const arg1 = [ctx['action']];
+      let d1 = [ctx, 'activate', arg1];
+      c2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with object arguments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [{val:5}];
+    let d1 = [ctx, 'add', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on can bind two event handlers 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'handleClick'];
+    let d2 = [ctx, 'handleDblClick'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'add'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList([1]);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`value\`] = v1[i1];
+      let key1 = ctx['value'];
+      let d1 = [ctx, 'add'];
+      c1[i1] = withKey(block2([d1]), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'add'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 3 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_2(ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 4 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'add'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 4 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList([1]);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`value\`] = v1[i1];
+      ctx[\`value_first\`] = i1 === 0;
+      ctx[\`value_last\`] = i1 === v1.length - 1;
+      ctx[\`value_index\`] = i1;
+      ctx[\`value_value\`] = k1[i1];
+      let key1 = ctx['value'];
+      c1[i1] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}\`), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`t-on receive event in first argument 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'add'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement (function call) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = (e) => {const res = (() => { return v1.incrementCounter(2) })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = (e) => {const res = (() => { return v1.flag=!v1.flag })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    const v2 = ctx['someFunction'];
+    let d1 = (e) => {const res = (() => { return v1.n=v2(3) })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'update'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on, with arguments and t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [ctx['value']];
+    let d1 = [ctx, 'update', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on, with arguments and t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/qweb/__snapshots__/misc.test.ts.snap

@@ -0,0 +1,324 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`misc complex template 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><div block-attribute-1=\\"class\\"><div class=\\"batch_header\\"><a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\"><block-text-4/><block-child-0/><i class=\\"arrow fa fa-window-maximize\\"/></a></div><block-child-1/><div class=\\"batch_slots\\"><block-child-2/><block-child-3/></div><div class=\\"batch_commits\\"><block-child-4/></div></div></div>\`);
+  let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
+  let block3 = createBlock(\`<span><i class=\\"fa fa-cog fa-spin fa-fw\\"/> preparing</span>\`);
+  let block7 = createBlock(\`<div class=\\"slot_filler\\"/>\`);
+  let block9 = createBlock(\`<div class=\\"one_line\\"><a block-attribute-0=\\"href\\" block-attribute-1=\\"class\\"><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-text-2/></a><a block-attribute-3=\\"href\\" class=\\"badge badge-light\\" title=\\"View Commit on Github\\"><i class=\\"fa fa-github\\"/></a><span><block-text-4/></span></div>\`);
+  let block10 = createBlock(\`<i class=\\"fa fa-fw fa-hashtag\\" title=\\"This commit is a new head\\"/>\`);
+  let block11 = createBlock(\`<i class=\\"fa fa-fw fa-link\\" title=\\"This commit is an existing head from bundle branches\\"/>\`);
+  let block12 = createBlock(\`<i class=\\"fa fa-fw fa-code-fork\\" title=\\"This commit is matched from a base batch with matching merge_base\\"/>\`);
+  let block13 = createBlock(\`<i class=\\"fa fa-fw fa-clock-o\\" title=\\"This commit is the head of a base branch\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3,b4,b6,b8;
+    let d1 = \`batch_tile \${ctx['options'].more?'more':'nomore'}\`;
+    let d2 = \`card bg-\${ctx['klass']}-light\`;
+    let d3 = \`/runbot/batch/\${ctx['batch'].id}\`;
+    let d4 = \`badge badge-\${ctx['batch'].has_warning?'warning':'light'}\`;
+    let d5 = ctx['batch'].formated_age;
+    if (ctx['batch'].has_warning) {
+      b2 = block2();
+    }
+    if (ctx['batch'].state=='preparing') {
+      b3 = block3();
+    }
+    ctx = Object.create(ctx);
+    const [k4, v4, l4, c4] = prepareList(ctx['batch'].slot_ids.filter(slot=>slot.build_id.id&&!slot.trigger_id.manual&&(ctx['options'].trigger_display[slot.trigger_id.id])));
+    for (let i1 = 0; i1 < l4; i1++) {
+      ctx[\`slot\`] = v4[i1];
+      let key1 = ctx['slot'].id;
+      c4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    ctx = ctx.__proto__;
+    b4 = list(c4);
+    ctx = Object.create(ctx);
+    const [k6, v6, l6, c6] = prepareList([1,2,3,4]);
+    for (let i1 = 0; i1 < l6; i1++) {
+      ctx[\`x\`] = v6[i1];
+      let key1 = ctx['x'];
+      c6[i1] = withKey(block7(), key1);
+    }
+    ctx = ctx.__proto__;
+    b6 = list(c6);
+    ctx = Object.create(ctx);
+    const [k8, v8, l8, c8] = prepareList(ctx['commit_links']);
+    for (let i1 = 0; i1 < l8; i1++) {
+      ctx[\`commit_link\`] = v8[i1];
+      let key1 = ctx['commit_link'].id;
+      let b10,b11,b12,b13;
+      let d6 = \`/runbot/commit/\${ctx['commit_link'].commit_id}\`;
+      let d7 = \`badge badge-light batch_commit match_type_\${ctx['commit_link'].match_type}\`;
+      if (ctx['commit_link'].match_type=='new') {
+        b10 = block10();
+      }
+      if (ctx['commit_link'].match_type=='head') {
+        b11 = block11();
+      }
+      if (ctx['commit_link'].match_type=='base_match') {
+        b12 = block12();
+      }
+      if (ctx['commit_link'].match_type=='base_head') {
+        b13 = block13();
+      }
+      let d8 = ctx['commit_link'].commit_dname;
+      let d9 = 'https://%s/commit/%s'%(ctx['commit_link'].commit_remote_url,ctx['commit_link'].commit_name);
+      let d10 = ctx['commit_link'].commit_subject;
+      c8[i1] = withKey(block9([d6, d7, d8, d9, d10], [b10, b11, b12, b13]), key1);
+    }
+    b8 = list(c8);
+    return block1([d1, d2, d3, d4, d5], [b2, b3, b4, b6, b8]);
+  }
+}"
+`;
+
+exports[`misc global 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'agüero';
+    let b2 = html(ctx[zero]);
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`misc global 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = withDefault(ctx['foo'], \`foo default\`);
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`misc global 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = text(\`toto default\`);
+    let b2 = html(withDefault(ctx['toto'], b3));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`misc global 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_4 = getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_6 = getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_8 = getTemplate(\`_callee-asc\`);
+  const callTemplate_10 = getTemplate(\`_callee-asc-toto\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([4,5,6]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`value\`] = v2[i1];
+      ctx[\`value_first\`] = i1 === 0;
+      ctx[\`value_last\`] = i1 === v2.length - 1;
+      ctx[\`value_index\`] = i1;
+      ctx[\`value_value\`] = k2[i1];
+      let key1 = ctx['value'];
+      let d1 = ctx['value'];
+      let b4 = block4([d1]);
+      ctx = Object.create(ctx);
+      ctx = Object.create(ctx);
+      ctx[\`foo\`] = 'aaa';
+      let b6 = callTemplate_2(ctx, node, key + \`__1__\${key1}\`);
+      ctx = ctx.__proto__;
+      let b7 = callTemplate_4(ctx, node, key + \`__3__\${key1}\`);
+      ctx[\`foo\`] = 'bbb';
+      let b8 = callTemplate_6(ctx, node, key + \`__5__\${key1}\`);
+      let b5 = multi([b6, b7, b8]);
+      ctx[zero] = b5;
+      let b9 = callTemplate_8(ctx, node, key + \`__7__\${key1}\`);
+      ctx = ctx.__proto__;
+      c2[i1] = withKey(multi([b4, b9]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c2);
+    let b10 = callTemplate_10(ctx, node, key + \`__9\`);
+    return block1([], [b2, b10]);
+  }
+}"
+`;
+
+exports[`misc other complex template 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_3 = getTemplate(\`LOAD_INFOS_TEMPLATE\`);
+  
+  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\\">
+                      <h5>Search options</h5>
+                      <input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
+      
+                      <h5>Display options</h5>
+                      <div class=\\"form-check\\">
+                          <input class=\\"form-check-input\\" type=\\"checkbox\\" name=\\"display_sticky\\"/>
+                          <label class=\\"form-check-label\\" for=\\"display_sticky\\">Display sticky</label>
+                      </div>
+                      <div class=\\"form-check\\">
+                          <input class=\\"form-check-input\\" type=\\"checkbox\\" name=\\"display_dev\\"/>
+                          <label class=\\"form-check-label\\" for=\\"display_dev\\">Display dev</label>
+                      </div>
+                  </div--><div class=\\"form-group col-md-6\\"><h5>Triggers</h5><block-child-3/></div></div></div><div class=\\"container-fluid frontend\\"><div class=\\"row\\"><div class=\\"col-md-12\\"><block-child-4/></div><div class=\\"col-md-12\\"><block-child-5/><block-child-6/><block-child-7/></div></div></div></div>\`);
+  let block3 = createBlock(\`<li class=\\"nav-item\\"><a class=\\"nav-link\\" href=\\"#\\" block-handler-0=\\"click\\"><block-text-1/></a></li>\`);
+  let block5 = createBlock(\`<li class=\\"nav-item dropdown\\"><b><a class=\\"nav-link\\" block-attribute-0=\\"href\\">Login</a></b></li>\`);
+  let block8 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link text-danger\\" block-attribute-0=\\"title\\"><i class=\\"fa fa-bug\\"/><block-text-1/></a></li>\`);
+  let block9 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
+  let block11 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link\\" title=\\"Random Bugs\\"><i class=\\"fa fa-bug\\"/></a></li>\`);
+  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 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>\`);
+  let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let b2,b4,b14,b17,b22,b23,b24,b25;
+    let d1 = \`/runbot/\${ctx['project'].slug}\`;
+    let d2 = ctx['project'].name;
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['projects']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`project\`] = v2[i1];
+      let key1 = ctx['project'].id;
+      const arg1 = [ctx['project']];
+      let d3 = [ctx, 'selectProject', arg1];
+      let d4 = ctx['project'].name;
+      c2[i1] = withKey(block3([d3, d4]), key1);
+    }
+    ctx = ctx.__proto__;
+    b2 = list(c2);
+    if (ctx['user']) {
+      let b5,b6;
+      if (ctx['user'].public) {
+        let d5 = \`/web/login?redirect=/\`;
+        b5 = block5([d5]);
+      } else {
+        let b7,b10,b13;
+        if (ctx['nb_assigned_errors']&&ctx['nb_assigned_errors']>0) {
+          let d6 = \`You have \${ctx['nb_assigned_errors']} random bug assigned\`;
+          let d7 = ctx['nb_assigned_errors'];
+          let b8 = block8([d6, d7]);
+          let b9 = block9();
+          b7 = multi([b8, b9]);
+        } else if (ctx['nb_build_errors']&&ctx['nb_build_errors']>0) {
+          let b11 = block11();
+          let b12 = block12();
+          b10 = multi([b11, b12]);
+        }
+        let d8 = ctx['user'].name.length>25?ctx['user'].namesubstring(0,23)+'...':ctx['user'].name;
+        let d9 = \`/web/session/logout?redirect=/\`;
+        let d10 = \`/web\`;
+        b13 = block13([d8, d9, d10]);
+        b6 = multi([b7, b10, b13]);
+      }
+      b4 = multi([b5, b6]);
+    }
+    let d11 = [ctx, 'toggleSettingsMenu'];
+    let d12 = [ctx, 'toggleMore'];
+    if (ctx['categories']&&ctx['categories'].length>1) {
+      ctx = Object.create(ctx);
+      const [k15, v15, l15, c15] = prepareList(ctx['categories']);
+      for (let i1 = 0; i1 < l15; i1++) {
+        ctx[\`category\`] = v15[i1];
+        let key1 = ctx['category'].id;
+        let d13 = ctx['category'].id;
+        let d14 = ctx['category'].id==ctx['options'].active_category_id;
+        let d15 = ctx['category'].name;
+        c15[i1] = withKey(block16([d13, d14, d15]), key1);
+      }
+      ctx = ctx.__proto__;
+      let b15 = list(c15);
+      b14 = block14([], [b15]);
+    }
+    let d16 = ctx['search'].value;
+    let d17 = [ctx, 'updateFilter'];
+    let d18 = [ctx, 'updateFilter'];
+    let d19 = (el) => refs[\`search_input\`] = el;
+    let d20 = [ctx, 'clearSearch'];
+    let d21 = (el) => refs[\`settings_menu\`] = el;
+    if (ctx['triggers']) {
+      ctx = Object.create(ctx);
+      const [k18, v18, l18, c18] = prepareList(ctx['triggers']);
+      for (let i1 = 0; i1 < l18; i1++) {
+        ctx[\`trigger\`] = v18[i1];
+        let 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 d22 = \`trigger_\${ctx['trigger'].id}\`;
+          let d23 = \`trigger_\${ctx['trigger'].id}\`;
+          let d24 = ctx['options'].trigger_display[ctx['trigger'].id];
+          let d25 = ctx['trigger'].id;
+          let d26 = [ctx, 'updateTriggerDisplay'];
+          let d27 = \`trigger_\${ctx['trigger'].id}\`;
+          let d28 = ctx['trigger'].name;
+          b20 = block20([d22, d23, d24, d25, d26, d27, d28]);
+        }
+        c18[i1] = withKey(multi([b20]), key1);
+      }
+      ctx = ctx.__proto__;
+      let b18 = list(c18);
+      let d29 = [ctx, 'triggerAll'];
+      let d30 = [ctx, 'triggerNone'];
+      let d31 = [ctx, 'triggerDefault'];
+      let d32 = [ctx, 'toggleSettingsMenu'];
+      let b21 = block21([d29, d30, d31, d32]);
+      b17 = multi([b18, b21]);
+    }
+    if (ctx['load_infos']) {
+      b22 = callTemplate_3(ctx, node, key + \`__2\`);
+    }
+    if (ctx['message']) {
+      let d33 = ctx['message'];
+      b23 = block23([d33]);
+    }
+    if (!ctx['project']) {
+      b24 = block24();
+    } else {
+      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__4\`, node, ctx);
+      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__5\`, node, ctx);
+      b25 = block25([], [b26, b27]);
+    }
+    return block1([d1, d2, d11, d12, d16, d17, d18, d19, d20, d21], [b2, b4, b14, b17, b22, b23, b24, b25]);
+  }
+}"
+`;

tests/qweb/__snapshots__/qweb_memory.test.ts.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`memory t-foreach does not leak stuff in global scope 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('p', p1, c1);
-    let _2 = [3,2,1];
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    let _3 = _2;
-    let _4 = _2;
-    if (!(_2 instanceof Array)) {
-        _3 = Object.keys(_2);
-        _4 = Object.values(_2);
-    }
-    let _length3 = _3.length;
-    let _origScope5 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length3; i1++) {
-        scope.item_first = i1 === 0
-        scope.item_last = i1 === _length3 - 1
-        scope.item_index = i1
-        scope.item = _3[i1]
-        scope.item_value = _4[i1]
-        let key1 = i1;
-        let _6 = scope['item'];
-        if (_6 != null) {
-            c1.push({text: _6});
-        }
-    }
-    scope = _origScope5;
-    return vn1;
-}"
-`;

tests/qweb/__snapshots__/qweb_t_att.test.ts.snap

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`qweb t-att t-att-class with multiple classes 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _1 = utils.toClassObj({'a b c':scope['value']});
-    let c2 = [], p2 = {key:2,class:_1};
-    let vn2 = h('div', p2, c2);
-    return vn2;
-}"
-`;
-
-exports[`qweb t-att t-att-class with multiple classes 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _3 = utils.toClassObj({['a b c']:scope['value']});
-    let c4 = [], p4 = {key:4,class:_3};
-    let vn4 = h('div', p4, c4);
-    return vn4;
-}"
-`;
-
-exports[`qweb t-att t-att-class with multiple classes, some of which are duplicate 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _1 = utils.toClassObj({'a b c':scope['value'],'a b d':!scope['value']});
-    let c2 = [], p2 = {key:2,class:_1};
-    let vn2 = h('div', p2, c2);
-    return vn2;
-}"
-`;
-
-exports[`qweb t-att t-att-class with multiple classes, some of which are duplicate 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _3 = utils.toClassObj({'a b c':scope['value'],'a b d':!scope['value']});
-    let c4 = [], p4 = {key:4,class:_3};
-    let vn4 = h('div', p4, c4);
-    return vn4;
-}"
-`;

tests/qweb/__snapshots__/qweb_t_tag.test.ts.snap

@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`qweb t-tag simple usecases 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let result;
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let tag2 = 'div';
-    let vn1 = h(tag2, p1, c1);
-    result = vn1;
-    return result;
-}"
-`;
-
-exports[`qweb t-tag simple usecases 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let result;
-    let h = this.h;
-    let c3 = [], p3 = {key:3};
-    let tag4 = scope['tag'];
-    let vn3 = h(tag4, p3, c3);
-    result = vn3;
-    c3.push({text: \`text\`});
-    return result;
-}"
-`;
-
-exports[`qweb t-tag with multiple attributes 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let result;
-    let h = this.h;
-    let _2 = {'blueberry':true};
-    let _3 = 'raspberry';
-    let c4 = [], p4 = {key:4,attrs:{taste: _3},class:_2};
-    let tag5 = scope['tag'];
-    let vn4 = h(tag5, p4, c4);
-    result = vn4;
-    c4.push({text: \`gooseberry\`});
-    return result;
-}"
-`;
-
-exports[`qweb t-tag with multiple child nodes 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let result;
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let tag2 = scope['tag'];
-    let vn1 = h(tag2, p1, c1);
-    result = vn1;
-    c1.push({text: \` pear \`});
-    let c3 = [], p3 = {key:3};
-    let vn3 = h('span', p3, c3);
-    c1.push(vn3);
-    c3.push({text: \`apple\`});
-    c1.push({text: \` strawberry \`});
-    return result;
-}"
-`;

tests/qweb/__snapshots__/simple_templates.test.ts.snap

@@ -0,0 +1,337 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple templates, mostly static can render a table row 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<tr><td>cell</td></tr>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with a class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"abc\\">foo</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with a class attribute with a quote 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"a'bc\\">word</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with a span child node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span>word</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with an arbitrary attribute with a quote 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div abc=\\"a'bc\\">word</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with an empty class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>word</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static div with content 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>foo</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static dom node with t-esc 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static dom node with t-esc 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static dynamic text value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['text']);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static empty div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`simple templates, mostly static empty string 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static empty string in a template set 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static multiple root nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<div>foo</div>\`);
+  let block3 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = block3();
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static simple string 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`hello vdom\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static simple string in t tag 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`hello vdom\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static static text and dynamic text (no t tag) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(\`hello \`);
+    let b3 = text(ctx['text']);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static static text and dynamic text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(\`hello \`);
+    let b3 = text(ctx['text']);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static t-esc in dom node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hello <block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hello <block-text-0/> world</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static two t-escs next to each other 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(ctx['text1']);
+    let b3 = text(ctx['text2']);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static two t-escs next to each other 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(ctx['text1']);
+    let b3 = text(ctx['text2']);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static two t-escs next to each other, in a div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['text1'];
+    let d2 = ctx['text2'];
+    return block1([d1, d2]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_debug_log.test.ts.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`debugging t-debug 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    debugger;
+    let b2;
+    if (true) {
+      debugger;
+      b2 = block2();
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`debugging t-log 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`foo\`] = 42;
+    console.log(ctx['foo']+3);
+    return block1();
+  }
+}"
+`;

tests/qweb/__snapshots__/t_esc.test.ts.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-esc div with falsy values 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v1'];
+    let d2 = ctx['v2'];
+    let d3 = ctx['v3'];
+    let d4 = ctx['v4'];
+    let d5 = ctx['v5'];
+    return block1([d1, d2, d3, d4, d5]);
+  }
+}"
+`;
+
+exports[`t-esc escaping 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['var'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc escaping on a node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'ok';
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc escaping on a node with a body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = withDefault('ok', \`nope\`);
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc escaping on a node with a body, as a default 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = withDefault(ctx['var'], \`nope\`);
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc falsy values in text nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(ctx['v1']);
+    let b3 = text(\`:\`);
+    let b4 = text(ctx['v2']);
+    let b5 = text(\`:\`);
+    let b6 = text(ctx['v3']);
+    let b7 = text(\`:\`);
+    let b8 = text(ctx['v4']);
+    let b9 = text(\`:\`);
+    let b10 = text(ctx['v5']);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
+  }
+}"
+`;
+
+exports[`t-esc literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'ok';
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc is escaped 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block2 = createBlock(\`<p>escaped</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = block2();
+    ctx[\`var\`] = b2;
+    let d1 = ctx['var'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc work with spread operator 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [...ctx['state'].list];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc=0 is escaped 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx[zero];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc=0 is escaped 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>escaped</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = block2();
+    ctx[zero] = b2;
+    let b3 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-esc variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['var'];
+    return block1([d1]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_foreach.test.ts.snap

@@ -0,0 +1,524 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-foreach does not pollute the rendering context 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([1]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = ctx['item'];
+      c2[i1] = withKey(text(ctx['item']), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach iterate on items (on a element node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([1,2]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = ctx['item'];
+      let d1 = ctx['item'];
+      c2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach iterate on items 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k2[i1];
+      let key1 = ctx['item'];
+      let b4 = text(\` [\`);
+      let b5 = text(ctx['item_index']);
+      let b6 = text(\`: \`);
+      let b7 = text(ctx['item']);
+      let b8 = text(\` \`);
+      let b9 = text(ctx['item_value']);
+      let b10 = text(\`] \`);
+      c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach iterate, dict param 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['value']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k2[i1];
+      let key1 = ctx['item_index'];
+      let b4 = text(\` [\`);
+      let b5 = text(ctx['item_index']);
+      let b6 = text(\`: \`);
+      let b7 = text(ctx['item']);
+      let b8 = text(\` \`);
+      let b9 = text(ctx['item_value']);
+      let b10 = text(\`] \`);
+      c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach iterate, position 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(Array(5));
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`elem\`] = v2[i1];
+      ctx[\`elem_first\`] = i1 === 0;
+      ctx[\`elem_last\`] = i1 === v2.length - 1;
+      ctx[\`elem_index\`] = i1;
+      let key1 = ctx['elem'];
+      let b4,b5,b6,b7,b8,b9;
+      b4 = text(\` -\`);
+      if (ctx['elem_first']) {
+        b5 = text(\` first\`);
+      }
+      if (ctx['elem_last']) {
+        b6 = text(\` last\`);
+      }
+      b7 = text(\` (\`);
+      b8 = text(ctx['elem_index']);
+      b9 = text(\`) \`);
+      c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach simple iteration (in a node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = ctx['item'];
+      c2[i1] = withKey(text(ctx['item']), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach simple iteration 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`item\`] = v1[i1];
+      let key1 = ctx['item'];
+      c1[i1] = withKey(text(ctx['item']), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`t-foreach simple iteration with two nodes inside 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
+  let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`item\`] = v1[i1];
+      let key1 = ctx['item'];
+      let d1 = ctx['item'];
+      let b3 = block3([d1]);
+      let d2 = ctx['item'];
+      let b4 = block4([d2]);
+      c1[i1] = withKey(multi([b3, b4]), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(\` [\`);
+    let b3 = text(ctx['a']);
+    let b4 = text(\`] [\`);
+    let b5 = text(ctx['b']);
+    let b6 = text(\`] [\`);
+    let b7 = text(ctx['c']);
+    let b8 = text(\`] \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
+  }
+}"
+`;
+
+exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`a\`] = v2[i1];
+      ctx[\`a_first\`] = i1 === 0;
+      ctx[\`a_last\`] = i1 === v2.length - 1;
+      ctx[\`a_index\`] = i1;
+      ctx[\`a_value\`] = k2[i1];
+      let key1 = ctx['a'];
+      ctx = Object.create(ctx);
+      const [k4, v4, l4, c4] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l4; i2++) {
+        ctx[\`b\`] = v4[i2];
+        ctx[\`b_first\`] = i2 === 0;
+        ctx[\`b_last\`] = i2 === v4.length - 1;
+        ctx[\`b_index\`] = i2;
+        ctx[\`b_value\`] = k4[i2];
+        let key2 = ctx['b'];
+        ctx = Object.create(ctx);
+        ctx[\`c\`] = 'x'+'_'+ctx['a']+'_'+ctx['b'];
+        c4[i2] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        ctx = ctx.__proto__;
+      }
+      ctx = ctx.__proto__;
+      let b4 = list(c4);
+      let d1 = ctx['c'];
+      let b6 = block6([d1]);
+      c2[i1] = withKey(multi([b4, b6]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c2);
+    let d2 = ctx['a'];
+    let d3 = ctx['b'];
+    let d4 = ctx['c'];
+    return block1([d2, d3, d4], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`c\`] = 'x'+'_'+ctx['a']+'_'+ctx['b'];
+    let b2 = text(\` [\`);
+    let b3 = text(ctx['a']);
+    let b4 = text(\`] [\`);
+    let b5 = text(ctx['b']);
+    let b6 = text(\`] [\`);
+    let b7 = text(ctx['c']);
+    let b8 = text(\`] \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
+  }
+}"
+`;
+
+exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`a\`] = v2[i1];
+      ctx[\`a_first\`] = i1 === 0;
+      ctx[\`a_last\`] = i1 === v2.length - 1;
+      ctx[\`a_index\`] = i1;
+      ctx[\`a_value\`] = k2[i1];
+      let key1 = ctx['a'];
+      ctx = Object.create(ctx);
+      const [k4, v4, l4, c4] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l4; i2++) {
+        ctx[\`b\`] = v4[i2];
+        ctx[\`b_first\`] = i2 === 0;
+        ctx[\`b_last\`] = i2 === v4.length - 1;
+        ctx[\`b_index\`] = i2;
+        ctx[\`b_value\`] = k4[i2];
+        let key2 = ctx['b'];
+        c4[i2] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+      }
+      ctx = ctx.__proto__;
+      let b4 = list(c4);
+      let d1 = ctx['c'];
+      let b6 = block6([d1]);
+      c2[i1] = withKey(multi([b4, b6]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c2);
+    let d2 = ctx['a'];
+    let d3 = ctx['b'];
+    let d4 = ctx['c'];
+    return block1([d2, d3, d4], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach t-foreach in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`number\`] = v2[i1];
+      let key1 = ctx['number'];
+      ctx = Object.create(ctx);
+      const [k3, v3, l3, c3] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l3; i2++) {
+        ctx[\`letter\`] = v3[i2];
+        let key2 = ctx['letter'];
+        let b5 = text(\` [\`);
+        let b6 = text(ctx['number']);
+        let b7 = text(ctx['letter']);
+        let b8 = text(\`] \`);
+        c3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
+      }
+      ctx = ctx.__proto__;
+      c2[i1] = withKey(list(c3), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList(ctx['elems']);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`elem\`] = v1[i1];
+      let key1 = ctx['elem'].id;
+      let b3;
+      if (ctx['elem'].id<3) {
+        let d1 = ctx['elem'].text;
+        b3 = block3([d1]);
+      }
+      c1[i1] = withKey(multi([b3]), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`t-foreach t-foreach with t-if inside 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['elems']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`elem\`] = v2[i1];
+      let key1 = ctx['elem'].id;
+      let b4;
+      if (ctx['elem'].id<3) {
+        let d1 = ctx['elem'].text;
+        b4 = block4([d1]);
+      }
+      c2[i1] = withKey(multi([b4]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach throws error if invalid loop expression 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['abc']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      ctx[\`item_index\`] = i1;
+      let key1 = ctx['item'];
+      c2[i1] = withKey(block3(), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach warn if no key in some case 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList([1,2]);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = i1;
+      let d1 = ctx['item'];
+      c2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach with t-memo 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let cache = ctx.cache || {};
+    let nextCache = ctx.cache = {};
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = ctx['item'].id;
+      let memo1 = [ctx['item'].x]
+      let vnode1 = cache[key1];
+      if (vnode1) {
+        if (shallowEqual(vnode1.memo, memo1)) {
+          c2[i1] = vnode1;
+          nextCache[key1] = vnode1;
+          continue;
+        }
+      }
+      let d1 = ctx['item'].x;
+      let d2 = ctx['item'].y;
+      c2[i1] = withKey(block3([d1, d2]), key1);
+      nextCache[key1] = assign(c2[i1], {memo: memo1});
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_if.test.ts.snap

@@ -0,0 +1,521 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-if a t-if next to a div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<div>foo</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = block2();
+    if (ctx['cond']) {
+      b3 = text(\`1\`);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if a t-if with two inner nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block3 = createBlock(\`<span>yip</span>\`);
+  let block4 = createBlock(\`<div>yip</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      let b3 = block3();
+      let b4 = block4();
+      b2 = multi([b3, b4]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`t-if boolean value condition elif (no outside node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3,b4,b5;
+    if (ctx['color']=='black') {
+      b2 = text(\`black pearl\`);
+    } else if (ctx['color']=='yellow') {
+      b3 = text(\`yellow submarine\`);
+    } else if (ctx['color']=='red') {
+      b4 = text(\`red is dead\`);
+    } else {
+      b5 = text(\`beer\`);
+    }
+    return multi([b2, b3, b4, b5]);
+  }
+}"
+`;
+
+exports[`t-if boolean value condition elif 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3,b4,b5;
+    if (ctx['color']=='black') {
+      b2 = text(\`black pearl\`);
+    } else if (ctx['color']=='yellow') {
+      b3 = text(\`yellow submarine\`);
+    } else if (ctx['color']=='red') {
+      b4 = text(\`red is dead\`);
+    } else {
+      b5 = text(\`beer\`);
+    }
+    return block1([], [b2, b3, b4, b5]);
+  }
+}"
+`;
+
+exports[`t-if boolean value condition else 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      b2 = text(\`ok\`);
+    } else {
+      b3 = text(\`ok-else\`);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if boolean value condition false else 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      b2 = text(\`fail\`);
+    } else {
+      b3 = text(\`fail-else\`);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if can use some boolean operators in expressions 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3,b4,b5,b6,b7,b8,b9;
+    if (ctx['cond1']&&ctx['cond2']) {
+      b2 = text(\`and\`);
+    }
+    if (ctx['cond1']&&ctx['cond3']) {
+      b3 = text(\`nope\`);
+    }
+    if (ctx['cond1']||ctx['cond3']) {
+      b4 = text(\`or\`);
+    }
+    if (ctx['cond3']||ctx['cond4']) {
+      b5 = text(\`nope\`);
+    }
+    if (ctx['m']>3) {
+      b6 = text(\`mgt\`);
+    }
+    if (ctx['n']>3) {
+      b7 = text(\`ngt\`);
+    }
+    if (ctx['m']<3) {
+      b8 = text(\`mlt\`);
+    }
+    if (ctx['n']<3) {
+      b9 = text(\`nlt\`);
+    }
+    return block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
+  }
+}"
+`;
+
+exports[`t-if div containing a t-if with two inner nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>yip</span>\`);
+  let block4 = createBlock(\`<div>yip</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      let b3 = block3();
+      let b4 = block4();
+      b2 = multi([b3, b4]);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if dynamic content after t-if with two children nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<p>1</p>\`);
+  let block4 = createBlock(\`<p>2</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      let b3 = block3();
+      let b4 = block4();
+      b2 = multi([b3, b4]);
+    }
+    let d1 = ctx['text'];
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`t-if just a t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      b2 = text(\`ok\`);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`t-if simple t-if/t-else 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      b2 = text(\`1\`);
+    } else {
+      b3 = text(\`2\`);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if simple t-if/t-else in a div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      b2 = text(\`1\`);
+    } else {
+      b3 = text(\`2\`);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if t-esc with t-elif 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (false) {
+      b2 = text(\`abc\`);
+    } else {
+      b3 = text('x');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if t-esc with t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (true) {
+      b2 = text('x');
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if t-if and t-else with two nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block4 = createBlock(\`<span>a</span>\`);
+  let block5 = createBlock(\`<span>b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      b2 = text(\`1\`);
+    } else {
+      let b4 = block4();
+      let b5 = block5();
+      b3 = multi([b4, b5]);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if t-if in a div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      b2 = text(\`ok\`);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if t-if in a t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>1<block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['cond1']) {
+      let b3;
+      if (ctx['cond2']) {
+        b3 = text(\`2\`);
+      }
+      b2 = block2([], [b3]);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if t-if/t-else with more content 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      if (ctx['condition']) {
+        b2 = text(\`asf\`);
+      }
+    } else {
+      b3 = text(\`coucou\`);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if t-set, then t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2;
+    ctx[\`title\`] = 'test';
+    if (ctx['title']) {
+      b2 = text(ctx['title']);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if t-set, then t-if, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>COUCOU</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2;
+    ctx[\`y\`] = true;
+    ctx[\`x\`] = ctx['y'];
+    if (ctx['x']) {
+      b2 = block2();
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-if t-set, then t-if, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span>AAA</span>\`);
+  let block3 = createBlock(\`<span>BBB</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2,b3;
+    ctx[\`y\`] = false;
+    ctx[\`x\`] = ctx['y'];
+    if (ctx['x']) {
+      b2 = block2();
+    } else if (!ctx['x']) {
+      b3 = block3();
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if two consecutive t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['cond1']) {
+      b2 = text(\`1\`);
+    }
+    if (ctx['cond2']) {
+      b3 = text(\`2\`);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if two consecutive t-if in a div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['cond1']) {
+      b2 = text(\`1\`);
+    }
+    if (ctx['cond2']) {
+      b3 = text(\`2\`);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-if two t-ifs next to each other 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  let block4 = createBlock(\`<p>1</p>\`);
+  let block5 = createBlock(\`<p>2</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['condition']) {
+      let d1 = ctx['text'];
+      b2 = block2([d1]);
+    }
+    if (ctx['condition']) {
+      let b4 = block4();
+      let b5 = block5();
+      b3 = multi([b4, b5]);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_raw.test.ts.snap

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-raw literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html('ok');
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw literal, no outside html element 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return html('ok');
+  }
+}"
+`;
+
+exports[`t-raw multiple calls to t-raw 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx[zero]);
+    let b3 = html(ctx[zero]);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`t-raw multiple calls to t-raw 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>coucou</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = block2();
+    ctx[zero] = b2;
+    let b3 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-raw not escaping 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw t-raw and another sibling node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><span>hello</span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw t-raw on a node with a body, as a default 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = text(\`nope\`);
+    let b2 = html(withDefault(ctx['var'], b3));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw t-raw on a node with a dom node in body, as a default 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block3 = createBlock(\`<div>nope</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = block3();
+    let b2 = html(withDefault(ctx['var'], b3));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw t-raw with a <t/> in body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return html(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-raw t-raw with comment 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-raw t-raw with just a t-set t-value in body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return html(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-raw variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_ref.test.ts.snap

@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-ref can get a dynamic ref on a node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    const v1 = ctx['id'];
+    let d1 = (el) => refs[\`myspan\${v1}\`] = el;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-ref can get a ref on a node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let d1 = (el) => refs[\`myspan\`] = el;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-ref ref in a t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-ref ref in a t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let d1 = (el) => refs[\`name\`] = el;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-ref ref in a t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let b2;
+    if (ctx['condition']) {
+      let d1 = (el) => refs[\`name\`] = el;
+      b2 = block2([d1]);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-ref refs in a loop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = ctx['item'];
+      const v1 = ctx['item'];
+      let d1 = (el) => refs[\`\${v1}\`] = el;
+      let d2 = ctx['item'];
+      c2[i1] = withKey(block3([d1, d2]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-ref two refs, one in a t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let b2;
+    if (ctx['condition']) {
+      let d1 = (el) => refs[\`name\`] = el;
+      b2 = block2([d1]);
+    }
+    let d2 = (el) => refs[\`p\`] = el;
+    return block1([d2], [b2]);
+  }
+}"
+`;

tests/qweb/__snapshots__/t_set.test.ts.snap

@@ -0,0 +1,386 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-set evaluate value expression 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = 1+2;
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set evaluate value expression, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = ctx['somevariable']+2;
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set set from attribute literal (no outside div) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = 'ok';
+    return text(ctx['value']);
+  }
+}"
+`;
+
+exports[`t-set set from attribute literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = 'ok';
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set set from attribute lookup 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`stuff\`] = ctx['value'];
+    let d1 = ctx['stuff'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set set from body literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = \`ok\`;
+    return text(ctx['value']);
+  }
+}"
+`;
+
+exports[`t-set set from body lookup 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = text(ctx['value']);
+    ctx[\`stuff\`] = b2;
+    let d1 = ctx['stuff'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set set from empty body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`stuff\`] = null;
+    let d1 = ctx['stuff'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set t-set and t-if 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2;
+    ctx[\`v\`] = ctx['value'];
+    if (ctx['v']==='ok') {
+      b2 = text(\`grimbergen\`);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set body is evaluated immediately 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`v1\`] = 'before';
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = b2;
+    ctx[\`v1\`] = 'after';
+    let b3 = html(ctx['v2']);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set evaluates an expression only once 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`v\`] = ctx['value']+' artois';
+    let d1 = ctx['v'];
+    let d2 = ctx['v'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-set t-set should reuse variable if possible 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`v\`] = 1;
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['list']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`elem\`] = v2[i1];
+      ctx[\`elem_index\`] = i1;
+      let key1 = ctx['elem_index'];
+      let d1 = ctx['v'];
+      ctx[\`v\`] = ctx['elem'];
+      c2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set with content and sub t-esc 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b3 = text(ctx['beep']);
+    let b4 = text(\` boop\`);
+    let b2 = multi([b3, b4]);
+    ctx[\`setvar\`] = b2;
+    let d1 = ctx['setvar'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set t-set with t-value (falsy) and body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`v3\`] = false;
+    ctx[\`v1\`] = 'before';
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = withDefault(ctx['v3'], b2);
+    ctx[\`v1\`] = 'after';
+    ctx[\`v3\`] = true;
+    let b3 = html(ctx['v2']);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set with t-value (truthy) and body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`v3\`] = 'Truthy';
+    ctx[\`v1\`] = 'before';
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = withDefault(ctx['v3'], b2);
+    ctx[\`v1\`] = 'after';
+    ctx[\`v3\`] = false;
+    let b3 = html(ctx['v2']);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    if (ctx['flag']) {
+      ctx[\`ourvar\`] = \`1\`;
+    } else {
+      ctx[\`ourvar\`] = 0;
+    }
+    let d1 = ctx['ourvar'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    if (ctx['flag']) {
+      ctx[\`ourvar\`] = 1;
+    } else {
+      ctx[\`ourvar\`] = \`0\`;
+    }
+    let d1 = ctx['ourvar'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2;
+    if (ctx['flag']) {
+      ctx[\`ourvar\`] = 1;
+    } else {
+      ctx[\`ourvar\`] = \`0\`;
+    }
+    b2 = text(ctx['ourvar']);
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`t-set value priority (with non text body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block2 = createBlock(\`<span>2</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = block2();
+    ctx[\`value\`] = withDefault(1, b2);
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-set value priority 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`value\`] = withDefault(1, \`2\`);
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;

tests/qweb/__snapshots__/white_space.test.ts.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div> abc </div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`white space handling nothing is done in pre tags 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<pre>   </pre>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`white space handling nothing is done in pre tags 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<pre>
+          some text
+        </pre>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`white space handling nothing is done in pre tags 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<pre>
+          
+        </pre>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`white space handling white space only text nodes are condensed into a single space 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div> </div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`white space handling whitespace only text nodes with newlines are removed 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><span>abc</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/qweb/attributes.test.ts

@@ -0,0 +1,382 @@
+import { xml } from "../../src";
+import { mount, patch } from "../../src/blockdom";
+import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+// -----------------------------------------------------------------------------
+// attributes
+// -----------------------------------------------------------------------------
+
+describe("attributes", () => {
+  test("static attributes", () => {
+    const template = `<div foo="a" bar="b" baz="c"/>`;
+    expect(renderToString(template)).toBe(`<div foo="a" bar="b" baz="c"></div>`);
+  });
+
+  test("two classes", () => {
+    const template = `<div class="a b"/>`;
+    expect(renderToString(template)).toBe(`<div class="a b"></div>`);
+  });
+
+  test("static attributes with dashes", () => {
+    const template = `<div aria-label="Close"/>`;
+    expect(renderToString(template)).toBe(`<div aria-label="Close"></div>`);
+  });
+
+  test("static attributes on void elements", () => {
+    const template = `<img src="/test.skip.jpg" alt="Test"/>`;
+    expect(renderToString(template)).toBe(`<img src="/test.skip.jpg" alt="Test">`);
+  });
+
+  test("dynamic attributes", () => {
+    const template = `<div t-att-foo="'bar'"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("two dynamic attributes", () => {
+    const template = `<div t-att-foo="'bar'" t-att-bar="'foo'"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div foo="bar" bar="foo"></div>`);
+  });
+
+  test("dynamic class attribute", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: "abc" });
+    expect(result).toBe(`<div class="abc"></div>`);
+  });
+
+  test("dynamic empty class attribute", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: "" });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("dynamic attribute with a dash", () => {
+    const template = `<div t-att-data-action-id="id"/>`;
+    const result = renderToString(template, { id: 32 });
+    expect(result).toBe(`<div data-action-id="32"></div>`);
+  });
+
+  test("dynamic formatted attributes with a dash", () => {
+    const template = `<div t-attf-aria-label="Some text {{id}}"/>`;
+    const result = renderToString(template, { id: 32 });
+    expect(result).toBe(`<div aria-label="Some text 32"></div>`);
+  });
+
+  test("fixed variable", () => {
+    const template = `<div t-att-foo="value"/>`;
+    const result = renderToString(template, { value: "ok" });
+    expect(result).toBe(`<div foo="ok"></div>`);
+  });
+
+  test("dynamic attribute evaluating to 0", () => {
+    const template = `<div t-att-foo="value"/>`;
+    const result = renderToString(template, { value: 0 });
+    expect(result).toBe(`<div foo="0"></div>`);
+  });
+
+  test("dynamic class attribute evaluating to 0", () => {
+    const template = `<div t-att-class="value"/>`;
+    const result = renderToString(template, { value: 0 });
+    expect(result).toBe(`<div class="0"></div>`);
+  });
+
+  test("dynamic attribute falsy variable ", () => {
+    const template = `<div t-att-foo="value"/>`;
+    const result = renderToString(template, { value: false });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("tuple literal", () => {
+    const template = `<div t-att="['foo', 'bar']"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("tuple variable", () => {
+    const template = `<div t-att="value"/>`;
+    const result = renderToString(template, { value: ["foo", "bar"] });
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("object", () => {
+    const template = `<div t-att="value"/>`;
+    const result = renderToString(template, {
+      value: { a: 1, b: 2, c: 3 },
+    });
+    expect(result).toBe(`<div a="1" b="2" c="3"></div>`);
+  });
+
+  test("format literal", () => {
+    const template = `<div t-attf-foo="bar"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("format value", () => {
+    const template = `<div t-attf-foo="b{{value}}r"/>`;
+    const result = renderToString(template, { value: "a" });
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("t-attf-class", () => {
+    const template = `<div t-attf-class="hello"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div class="hello"></div>`);
+  });
+
+  test("t-attf-class with multiple classes", () => {
+    const template = `<div t-attf-class="hello {{word}}"/>`;
+    const result = renderToString(template, { word: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("t-attf-class with multiple classes separated by multiple spaces", () => {
+    const template = `<div t-attf-class="hello  {{word}}"/>`;
+    const result = renderToString(template, { word: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("t-attf-class should combine with class", () => {
+    const template = `<div class="hello" t-attf-class="world"/>`;
+    const result = renderToString(template);
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("from variables set previously", () => {
+    const template = `<div><t t-set="abc" t-value="'def'"/><span t-att-class="abc"/></div>`;
+    const result = renderToString(template);
+    expect(result).toBe('<div><span class="def"></span></div>');
+  });
+
+  test("from variables set previously (no external node)", () => {
+    const template = `
+      <t t-set="abc" t-value="'def'"/>
+      <span t-att-class="abc"/>`;
+    const result = renderToString(template);
+    expect(result).toBe('<span class="def"></span>');
+  });
+
+  test("from object variables set previously", () => {
+    // Note: standard qweb does not allow this...
+    const template = `
+      <div>
+        <t t-set="o" t-value="{a:'b'}"/>
+        <span t-att-class="o.a"/>
+      </div>`;
+    const result = renderToString(template);
+    expect(result).toBe('<div><span class="b"></span></div>');
+  });
+
+  test("format expression", () => {
+    const template = `<div t-attf-foo="{{value + 37}}"/>`;
+    const result = renderToString(template, { value: 5 });
+    expect(result).toBe(`<div foo="42"></div>`);
+  });
+
+  test("format multiple", () => {
+    const template = `<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>`;
+    const result = renderToString(template, {
+      value1: 0,
+      value2: 1,
+      value3: 2,
+    });
+    expect(result).toBe(`<div foo="a 0 is 1 of 2 ]"></div>`);
+  });
+
+  test("various escapes", () => {
+    const template = `
+      <div foo="&lt;foo"
+        t-att-bar="bar"
+        t-attf-baz="&lt;{{baz}}&gt;"
+        t-att="qux"/>`;
+
+    const result = renderToString(template, {
+      bar: 0,
+      baz: 1,
+      qux: { qux: "<>" },
+    });
+    const expected = '<div foo="<foo" bar="0" baz="<1>" qux="<>"></div>';
+    expect(result).toBe(expected);
+  });
+
+  test("various escapes 2", () => {
+    const template = `<div> &lt; </div>`;
+
+    const result = renderToString(template, {});
+    const expected = "<div> &lt; </div>";
+    expect(result).toBe(expected);
+  });
+
+  test("t-att-class and class should combine together", () => {
+    const template = `<div class="hello" t-att-class="value"/>`;
+    const result = renderToString(template, { value: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("class and t-att-class should combine together", () => {
+    const template = `<div t-att-class="value" class="hello" />`;
+    const result = renderToString(template, { value: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("class and t-attf-class with ternary operation", () => {
+    const template = `<div class="hello" t-attf-class="{{value ? 'world' : ''}}"/>`;
+    const result = renderToString(template, { value: true });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
+  test("t-att-class with object", () => {
+    const template = `<div class="static" t-att-class="{a: b, c: d, e: f}"/>`;
+    const result = renderToString(template, { b: true, d: false, f: true });
+    expect(result).toBe(`<div class="static a e"></div>`);
+  });
+
+  test("t-att-class with multiple classes", () => {
+    expect(renderToString(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
+      '<div class="a b c"></div>'
+    );
+    expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
+      '<div class="a b c"></div>'
+    );
+  });
+
+  test("t-att-class with multiple classes, some of which are duplicate", () => {
+    expect(
+      renderToString(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: true })
+    ).toBe('<div class="a b c"></div>');
+    expect(
+      renderToString(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: false })
+    ).toBe('<div class="a b d"></div>');
+  });
+
+  test("changing an attribute with t-att-", () => {
+    // render input with initial value
+    const template = `<div t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
+
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(fixture.innerHTML).toBe('<div value="potato"></div>');
+
+    const bnode3 = renderToBdom(template, { v: "" });
+    patch(bnode1, bnode3);
+    // not sure about this. maybe we want to remove the attribute?
+    expect(fixture.innerHTML).toBe('<div value=""></div>');
+  });
+
+  test("changing a class with t-att-class", () => {
+    // render input with initial value
+    const template = `<div t-att-class="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    expect(fixture.innerHTML).toBe('<div class="zucchini"></div>');
+
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(fixture.innerHTML).toBe('<div class="potato"></div>');
+
+    const bnode3 = renderToBdom(template, { v: "" });
+    patch(bnode1, bnode3);
+    // not sure about this. maybe we want to remove the attribute?
+    expect(fixture.innerHTML).toBe('<div class=""></div>');
+  });
+
+  test("changing a class with t-att-class (preexisting class", () => {
+    // render input with initial value
+    const template = `<div class="hoy" t-att-class="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    expect(fixture.innerHTML).toBe('<div class="hoy zucchini"></div>');
+
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(fixture.innerHTML).toBe('<div class="hoy potato"></div>');
+
+    const bnode3 = renderToBdom(template, { v: "" });
+    patch(bnode1, bnode3);
+    // not sure about this. maybe we want to remove the attribute?
+    expect(fixture.innerHTML).toBe('<div class="hoy"></div>');
+  });
+
+  test("updating classes (with obj notation)", () => {
+    // render input with initial value
+    const template = `<div class="hoy" t-att-class="{'a b': condition}"/>`;
+    const bnode1 = renderToBdom(template, { condition: true });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
+
+    const bnode2 = renderToBdom(template, { condition: false });
+    patch(bnode1, bnode2);
+    expect(fixture.innerHTML).toBe('<div class="hoy"></div>');
+
+    const bnode3 = renderToBdom(template, { condition: true });
+    patch(bnode1, bnode3);
+    // not sure about this. maybe we want to remove the attribute?
+    expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
+  });
+});
+
+describe("special cases for some specific html attributes/properties", () => {
+  test("input type= checkbox, with t-att-checked", () => {
+    const template = `<input type="checkbox" t-att-checked="flag"/>`;
+    const result = renderToString(template, { flag: true });
+    expect(result).toBe(`<input type="checkbox">`);
+  });
+
+  test("various boolean html attributes", () => {
+    // the unique assertion here is the code snapshot automatically done by
+    // renderToString
+    xml`
+      <div>
+        <input type="checkbox" checked="checked"/>
+        <input checked="checked"/>
+        <div checked="checked"/>
+        <div selected="selected"/>
+        <option selected="selected" other="1"/>
+        <input readonly="readonly"/>
+        <button disabled="disabled"/>
+      </div>
+      `;
+  });
+
+  test("input with t-att-value", () => {
+    // render input with initial value
+    const template = `<input  t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("zucchini");
+
+    // change value manually in input, to simulate user input
+    input.value = "tomato";
+    expect(input.value).toBe("tomato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // input value was properly reset by owl
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(input.value).toBe("potato");
+  });
+
+  test("input of type checkbox with t-att-indeterminate", () => {
+    const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
+    const bnode1 = renderToBdom(template, { v: true });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.indeterminate).toBe(true);
+  });
+});

tests/qweb/comments.test.ts

@@ -0,0 +1,29 @@
+import { renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// comments
+// -----------------------------------------------------------------------------
+
+describe("comments", () => {
+  test("properly handle comments", () => {
+    const template = `<div>hello <!-- comment-->owl</div>`;
+    expect(renderToString(template)).toBe("<div>hello <!-- comment-->owl</div>");
+  });
+
+  test("only a comment", () => {
+    const template = `<!-- comment-->`;
+    expect(renderToString(template)).toBe(`<!-- comment-->`);
+  });
+
+  test("properly handle comments between t-if/t-else", () => {
+    const template = `
+        <div>
+          <span t-if="true">true</span>
+          <!-- comment-->
+          <span t-else="">owl</span>
+        </div>`;
+    expect(renderToString(template)).toBe("<div><span>true</span></div>");
+  });
+});

tests/qweb/event_handling.test.ts

@@ -0,0 +1,304 @@
+import { TemplateSet } from "../../src/qweb/template_helpers";
+import { mount } from "../../src/blockdom";
+import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+// -----------------------------------------------------------------------------
+// t-on
+// -----------------------------------------------------------------------------
+
+describe("t-on", () => {
+  function mountToFixture(template: string, ctx: any = {}, node?: any): HTMLDivElement {
+    if (!node) {
+      node = { component: ctx };
+      ctx.__owl__ = node;
+    }
+    const block = renderToBdom(template, ctx, node);
+    const fixture = makeTestFixture();
+
+    mount(block, fixture);
+    return fixture;
+  }
+
+  test("can bind event handler", () => {
+    const template = `<button t-on-click="add">Click</button>`;
+    let a = 1;
+    const fixture = mountToFixture(template, { add: () => (a = 3) });
+    expect(a).toBe(1);
+    fixture.querySelector("button")!.click();
+    expect(a).toBe(3);
+  });
+
+  test("receive event in first argument", () => {
+    expect.assertions(2);
+    const template = `<button t-on-click="add">Click</button>`;
+    const fixture = mountToFixture(template, {
+      add: (ev: any) => {
+        expect(ev).toBeInstanceOf(Event);
+      },
+    });
+    fixture.querySelector("button")!.click();
+  });
+
+  test("can bind two event handlers", () => {
+    const template = `
+        <button t-on-click="handleClick" t-on-dblclick="handleDblClick">Click</button>`;
+    let steps: string[] = [];
+    const fixture = mountToFixture(template, {
+      handleClick() {
+        steps.push("click");
+      },
+      handleDblClick() {
+        steps.push("dblclick");
+      },
+    });
+    expect(steps).toEqual([]);
+    fixture.querySelector("button")!.click();
+    expect(steps).toEqual(["click"]);
+    fixture.querySelector("button")!.dispatchEvent(new Event("dblclick", { bubbles: true }));
+    expect(steps).toEqual(["click", "dblclick"]);
+  });
+
+  test("can bind handlers with arguments", () => {
+    const template = `<button t-on-click="add(5)">Click</button>`;
+    let a = 1;
+    const fixture = mountToFixture(template, { add: (n: number) => (a = a + n) });
+    expect(a).toBe(1);
+    fixture.querySelector("button")!.click();
+    expect(a).toBe(6);
+  });
+
+  test("can bind handlers with object arguments", () => {
+    const template = `<button t-on-click="add({val: 5})">Click</button>`;
+    let a = 1;
+    const fixture = mountToFixture(template, { add: ({ val }: any) => (a = a + val) });
+    expect(a).toBe(1);
+    fixture.querySelector("button")!.click();
+    expect(a).toBe(6);
+  });
+
+  test("can bind handlers with empty  object", () => {
+    expect.assertions(2);
+    const template = `<button t-on-click="doSomething({})">Click</button>`;
+    const fixture = mountToFixture(template, {
+      doSomething(arg: any) {
+        expect(arg).toEqual({});
+      },
+    });
+    fixture.querySelector("button")!.click();
+  });
+
+  test("can bind handlers with empty object (with non empty inner string)", () => {
+    expect.assertions(2);
+    const template = `<button t-on-click="doSomething({ })">Click</button>`;
+    const fixture = mountToFixture(template, {
+      doSomething(arg: any) {
+        expect(arg).toEqual({});
+      },
+    });
+    fixture.querySelector("button")!.click();
+  });
+
+  test("can bind handlers with empty object (with non empty inner string)", () => {
+    expect.assertions(2);
+    const template = `
+        <ul>
+          <li t-foreach="['someval']" t-as="action" t-key="action_index">
+            <a t-on-click="activate(action)">link</a>
+          </li>
+        </ul>`;
+    const fixture = mountToFixture(template, {
+      activate(action: string) {
+        expect(action).toBe("someval");
+      },
+    });
+    fixture.querySelector("a")!.click();
+  });
+
+  test("handler is bound to proper owner", () => {
+    expect.assertions(2);
+    const template = `<button t-on-click="add">Click</button>`;
+    let owner = {
+      add() {
+        expect(this).toBe(owner);
+      },
+    };
+    const fixture = mountToFixture(template, owner);
+    fixture.querySelector("button")!.click();
+  });
+
+  test("handler is bound to proper owner, part 2", () => {
+    expect.assertions(2);
+    const template = `
+        <t t-foreach="[1]" t-as="value" t-key="value">
+          <button t-on-click="add">Click</button>
+        </t>`;
+    let owner = {
+      add() {
+        expect(this).toBe(owner);
+      },
+    };
+    const fixture = mountToFixture(template, owner);
+    fixture.querySelector("button")!.click();
+  });
+
+  test("handler is bound to proper owner, part 3", () => {
+    expect.assertions(3);
+    const context = new TemplateSet();
+    const sub = `<button t-on-click="add">Click</button>`;
+    const main = `<t t-call="sub"/>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    let owner: any = {
+      add() {
+        expect(this).toBe(owner);
+      },
+    };
+    const node = { component: owner };
+    owner.__owl__ = node;
+    const fixture = makeTestFixture();
+    const render = context.getTemplate("main");
+    const bdom = render(owner, node);
+    mount(bdom, fixture);
+    fixture.querySelector("button")!.click();
+  });
+
+  test("handler is bound to proper owner, part 4", () => {
+    expect.assertions(3);
+    const context = new TemplateSet();
+    const sub = `<button t-on-click="add">Click</button>`;
+    const main = `
+        <t t-foreach="[1]" t-as="value" t-key="value">
+          <t t-call="sub"/>
+        </t>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    let owner: any = {
+      add() {
+        expect(this).toBe(owner);
+      },
+    };
+    const node = { component: owner };
+    owner.__owl__ = node;
+    const fixture = makeTestFixture();
+    const render = context.getTemplate("main");
+    const bdom = render(owner, node);
+    mount(bdom, fixture);
+    fixture.querySelector("button")!.click();
+  });
+
+  test("t-on with inline statement", () => {
+    const template = `<button t-on-click="state.counter++">Click</button>`;
+    let owner = { state: { counter: 0 } };
+    const fixture = mountToFixture(template, owner);
+    expect(owner.state.counter).toBe(0);
+    fixture.querySelector("button")!.click();
+    expect(owner.state.counter).toBe(1);
+  });
+
+  test("t-on with inline statement (function call)", () => {
+    const template = `<button t-on-click="state.incrementCounter(2)">Click</button>`;
+    let owner = {
+      state: {
+        counter: 0,
+        incrementCounter: (inc: number) => {
+          owner.state.counter += inc;
+        },
+      },
+    };
+    const fixture = mountToFixture(template, owner);
+    expect(owner.state.counter).toBe(0);
+    fixture.querySelector("button")!.click();
+    expect(owner.state.counter).toBe(2);
+  });
+
+  test("t-on with inline statement, part 2", () => {
+    const template = `<button t-on-click="state.flag = !state.flag">Toggle</button>`;
+    let owner = {
+      state: {
+        flag: true,
+      },
+    };
+    const fixture = mountToFixture(template, owner);
+    expect(owner.state.flag).toBe(true);
+    fixture.querySelector("button")!.click();
+    expect(owner.state.flag).toBe(false);
+    fixture.querySelector("button")!.click();
+    expect(owner.state.flag).toBe(true);
+  });
+
+  test("t-on with inline statement, part 3", () => {
+    const template = `<button t-on-click="state.n = someFunction(3)">Toggle</button>`;
+    let owner = {
+      someFunction(n: number) {
+        return n + 1;
+      },
+      state: {
+        n: 11,
+      },
+    };
+
+    const fixture = mountToFixture(template, owner);
+    expect(owner.state.n).toBe(11);
+    fixture.querySelector("button")!.click();
+    expect(owner.state.n).toBe(4);
+  });
+
+  test("t-on with t-call", async () => {
+    expect.assertions(3);
+    const app = new TemplateSet();
+    const sub = `<p t-on-click="update">lucas</p>`;
+    const main = `<div><t t-call="sub"/></div>`;
+    app.addTemplate("sub", sub);
+    app.addTemplate("main", main);
+
+    let owner: any = {
+      update() {
+        expect(this).toBe(owner);
+      },
+    };
+    const node = { component: owner };
+    owner.__owl__ = node;
+
+    const fixture = makeTestFixture();
+    const render = app.getTemplate("main");
+    const bdom = render(owner, node);
+    mount(bdom, fixture);
+    fixture.querySelector("p")!.click();
+  });
+
+  test("t-on, with arguments and t-call", async () => {
+    expect.assertions(4);
+    const app = new TemplateSet();
+    const sub = `<p t-on-click="update(value)">lucas</p>`;
+    const main = `<div><t t-call="sub"/></div>`;
+    app.addTemplate("sub", sub);
+    app.addTemplate("main", main);
+
+    let owner: any = {
+      update(val: number) {
+        expect(this).toBe(owner);
+        expect(val).toBe(444);
+      },
+      value: 444,
+    };
+
+    const node = { component: owner };
+    owner.__owl__ = node;
+
+    const fixture = makeTestFixture();
+    const render = app.getTemplate("main");
+    const bdom = render(owner, node);
+    mount(bdom, fixture);
+    fixture.querySelector("p")!.click();
+  });
+
+  test("nice error when t-on is evaluated with a missing event", () => {
+    const template = `<div t-on="somemethod"></div>`;
+    expect(() => renderToString(template, { someMethod() {} })).toThrow(
+      "Missing event name with t-on directive"
+    );
+  });
+});

tests/qweb/inline_expressions.test.ts

@@ -0,0 +1,209 @@
+import { compileExpr, tokenize } from "../../src/qweb/inline_expressions";
+
+describe("tokenizer", () => {
+  test("simple tokens", () => {
+    expect(tokenize("1.3")).toEqual([{ type: "VALUE", value: "1.3" }]);
+
+    expect(tokenize("{}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "RIGHT_BRACE", value: "}" },
+    ]);
+    expect(tokenize("{ }}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "RIGHT_BRACE", value: "}" },
+      { type: "RIGHT_BRACE", value: "}" },
+    ]);
+    expect(tokenize("a")).toEqual([{ type: "SYMBOL", value: "a" }]);
+    expect(tokenize("true")).toEqual([{ type: "SYMBOL", value: "true" }]);
+    expect(tokenize("abcde")).toEqual([{ type: "SYMBOL", value: "abcde" }]);
+    expect(tokenize("_ab2")).toEqual([{ type: "SYMBOL", value: "_ab2" }]);
+    expect(tokenize("$ab2")).toEqual([{ type: "SYMBOL", value: "$ab2" }]);
+    expect(tokenize("ABC")).toEqual([{ type: "SYMBOL", value: "ABC" }]);
+
+    expect(tokenize("{a: 2}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "SYMBOL", value: "a" },
+      { type: "COLON", value: ":" },
+      { type: "VALUE", value: "2" },
+      { type: "RIGHT_BRACE", value: "}" },
+    ]);
+    expect(tokenize("a,")).toEqual([
+      { type: "SYMBOL", value: "a" },
+      { type: "COMMA", value: "," },
+    ]);
+    expect(tokenize("][")).toEqual([
+      { type: "RIGHT_BRACKET", value: "]" },
+      { type: "LEFT_BRACKET", value: "[" },
+    ]);
+  });
+
+  test("various operators", () => {
+    expect(tokenize(">= <= < > !== !=")).toEqual([
+      { type: "OPERATOR", value: ">=" },
+      { type: "OPERATOR", value: "<=" },
+      { type: "OPERATOR", value: "<" },
+      { type: "OPERATOR", value: ">" },
+      { type: "OPERATOR", value: "!==" },
+      { type: "OPERATOR", value: "!=" },
+    ]);
+    expect(tokenize("typeof a")).toEqual([
+      { type: "OPERATOR", value: "typeof " },
+      { type: "SYMBOL", value: "a" },
+    ]);
+
+    expect(tokenize("a...1")).toEqual([
+      { type: "SYMBOL", value: "a" },
+      { type: "OPERATOR", value: "..." },
+      { type: "VALUE", value: "1" },
+    ]);
+
+    expect(tokenize("a in b")).toEqual([
+      { type: "SYMBOL", value: "a" },
+      { type: "OPERATOR", value: "in " },
+      { type: "SYMBOL", value: "b" },
+    ]);
+  });
+
+  test("strings", () => {
+    expect(() => tokenize("'")).toThrow("Invalid expression");
+    expect(() => tokenize("'\\")).toThrow("Invalid expression");
+    expect(() => tokenize("'\\'")).toThrow("Invalid expression");
+    expect(tokenize("'hello ged'")).toEqual([{ type: "VALUE", value: "'hello ged'" }]);
+    expect(tokenize("'hello \\'ged\\''")).toEqual([{ type: "VALUE", value: "'hello \\'ged\\''" }]);
+
+    expect(() => tokenize('"')).toThrow("Invalid expression");
+    expect(() => tokenize('"\\"')).toThrow("Invalid expression");
+    expect(tokenize('"hello ged"')).toEqual([{ type: "VALUE", value: '"hello ged"' }]);
+    expect(tokenize('"hello ged"}')).toEqual([
+      { type: "VALUE", value: '"hello ged"' },
+      { type: "RIGHT_BRACE", value: "}" },
+    ]);
+    expect(tokenize('"hello \\"ged\\""')).toEqual([{ type: "VALUE", value: '"hello \\"ged\\""' }]);
+  });
+});
+
+describe("expression evaluation", () => {
+  test("simple static values", () => {
+    expect(compileExpr("1")).toBe("1");
+    expect(compileExpr("1 ")).toBe("1");
+    expect(compileExpr("'some string#/, {' ")).toBe("'some string#/, {'");
+    expect(compileExpr("{ } ")).toBe("{}");
+    expect(compileExpr("{a: 1} ")).toBe("{a:1}");
+    expect(compileExpr("{a: 1, b: 2   } ")).toBe("{a:1,b:2}");
+    expect(compileExpr("[] ")).toBe("[]");
+    expect(compileExpr("[1] ")).toBe("[1]");
+    expect(compileExpr("['1', '2'] ")).toBe("['1','2']");
+    expect(compileExpr("['1', \"2\"] ")).toBe("['1',\"2\"]");
+  });
+
+  test("various types of 'words'", () => {
+    expect(compileExpr("true")).toBe("true");
+    expect(compileExpr("false")).toBe("false");
+    expect(compileExpr("debugger")).toBe("debugger");
+  });
+
+  test("parenthesis", () => {
+    expect(compileExpr("(1)")).toBe("(1)");
+    expect(compileExpr("a*(1 +3)")).toBe("ctx['a']*(1+3)");
+  });
+
+  test("objects and sub objects", () => {
+    expect(compileExpr("{a:{b:1}} ")).toBe("{a:{b:1}}");
+  });
+
+  test("arrays and objects", () => {
+    expect(compileExpr("[{b:1}] ")).toBe("[{b:1}]");
+    expect(compileExpr("{a: []} ")).toBe("{a:[]}");
+    expect(compileExpr("[{b:1, c: [1, {d: {e: 3}} ]}] ")).toBe("[{b:1,c:[1,{d:{e:3}}]}]");
+  });
+
+  test("dot operator", () => {
+    expect(compileExpr("a.b")).toBe("ctx['a'].b");
+    expect(compileExpr("a.b.c")).toBe("ctx['a'].b.c");
+  });
+
+  test("various unary operators", () => {
+    expect(compileExpr("!flag")).toBe("!ctx['flag']");
+    expect(compileExpr("-3")).toBe("-3");
+    expect(compileExpr("-a")).toBe("-ctx['a']");
+    expect(compileExpr("typeof a")).toBe("typeof ctx['a']");
+  });
+
+  test("various binary operators", () => {
+    expect(compileExpr("color == 'black'")).toBe("ctx['color']=='black'");
+    expect(compileExpr("a || b")).toBe("ctx['a']||ctx['b']");
+    expect(compileExpr("color === 'black'")).toBe("ctx['color']==='black'");
+    expect(compileExpr("'li_'+item")).toBe("'li_'+ctx['item']");
+    expect(compileExpr("state.val > 1")).toBe("ctx['state'].val>1");
+    expect(compileExpr("a in b")).toBe("ctx['a']in ctx['b']");
+  });
+
+  test("boolean operations", () => {
+    expect(compileExpr("a && b")).toBe("ctx['a']&&ctx['b']");
+  });
+
+  test("ternary operators", () => {
+    expect(compileExpr("a ? b: '2'")).toBe("ctx['a']?ctx['b']:'2'");
+    expect(compileExpr("a ? b: (c or '2') ")).toBe("ctx['a']?ctx['b']:(ctx['c']||'2')");
+    expect(compileExpr("a ? {test:c}: [1,u]")).toBe("ctx['a']?{test:ctx['c']}:[1,ctx['u']]");
+  });
+
+  test("word replacement", () => {
+    expect(compileExpr("a or b")).toBe("ctx['a']||ctx['b']");
+    expect(compileExpr("a and b")).toBe("ctx['a']&&ctx['b']");
+  });
+
+  test("function calls", () => {
+    expect(compileExpr("a()")).toBe("ctx['a']()");
+    expect(compileExpr("a(1)")).toBe("ctx['a'](1)");
+    expect(compileExpr("a(1,2)")).toBe("ctx['a'](1,2)");
+    expect(compileExpr("a(1,2,{a:[a]})")).toBe("ctx['a'](1,2,{a:[ctx['a']]})");
+    expect(compileExpr("'x'.toUpperCase()")).toBe("'x'.toUpperCase()");
+    expect(compileExpr("'x'.toUpperCase({a: 3})")).toBe("'x'.toUpperCase({a:3})");
+  });
+
+  test("arrow functions", () => {
+    expect(compileExpr("list.map(e => e.val)")).toBe("ctx['list'].map(e=>e.val)");
+    expect(compileExpr("list.map(e => a + e)")).toBe("ctx['list'].map(e=>ctx['a']+e)");
+    expect(compileExpr("list.map((e) => e)")).toBe("ctx['list'].map((e)=>e)");
+    expect(compileExpr("list.map((elem, index) => elem + index)")).toBe(
+      "ctx['list'].map((elem,index)=>elem+index)"
+    );
+  });
+
+  test("assignation", () => {
+    expect(compileExpr("a = b")).toBe("ctx['a']=ctx['b']");
+    expect(compileExpr("a += b")).toBe("ctx['a']+=ctx['b']");
+    expect(compileExpr("a -= b")).toBe("ctx['a']-=ctx['b']");
+    expect(compileExpr("a.b = !a.b")).toBe("ctx['a'].b=!ctx['a'].b");
+  });
+
+  test("spread operator", () => {
+    expect(compileExpr("[...state.list]")).toBe("[...ctx['state'].list]");
+    expect(compileExpr("f(...state.list)")).toBe("ctx['f'](...ctx['state'].list)");
+    expect(compileExpr("f([...list])")).toBe("ctx['f']([...ctx['list']])");
+  });
+
+  test("works with builtin properties", () => {
+    expect(compileExpr("state.constructor.name")).toBe("ctx['state'].constructor.name");
+  });
+
+  test("works with shortcut object key description", () => {
+    expect(compileExpr("{a}")).toBe("{a:ctx['a']}");
+    expect(compileExpr("{a,b}")).toBe("{a:ctx['a'],b:ctx['b']}");
+    expect(compileExpr("{a,b:3,c}")).toBe("{a:ctx['a'],b:3,c:ctx['c']}");
+  });
+
+  test("template strings", () => {
+    expect(compileExpr("`hey`")).toBe("`hey`");
+    expect(compileExpr("`hey ${you}`")).toBe("`hey ${ctx['you']}`");
+    expect(compileExpr("`hey ${1 + 2}`")).toBe("`hey ${1+2}`");
+  });
+
+  test("works with short object description and lists ", () => {
+    expect(compileExpr("[a, b]")).toBe("[ctx['a'],ctx['b']]");
+    expect(compileExpr("[a, b, c]")).toBe("[ctx['a'],ctx['b'],ctx['c']]");
+    expect(compileExpr("[a, {b, c},d]")).toBe("[ctx['a'],{b:ctx['b'],c:ctx['c']},ctx['d']]");
+    expect(compileExpr("{a:[b, {c, d: e}]}")).toBe("{a:[ctx['b'],{c:ctx['c'],d:ctx['e']}]}");
+  });
+});

tests/qweb/misc.test.ts

@@ -0,0 +1,262 @@
+import { xml } from "../../src";
+import { renderToString, snapshotEverything, TestContext, trim } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// misc
+// -----------------------------------------------------------------------------
+
+describe("misc", () => {
+  test("global", () => {
+    const context = new TestContext();
+    const _calleeAsc = `<año t-att-falló="'agüero'" t-raw="0"/>`;
+    const _calleeUsesFoo = `<span t-esc="foo">foo default</span>`;
+    const _calleeAscToto = `<div t-raw="toto">toto default</div>`;
+    const caller = `
+        <div>
+          <t t-foreach="[4,5,6]" t-as="value" t-key="value">
+            <span t-esc="value"/>
+            <t t-call="_callee-asc">
+              <t t-call="_callee-uses-foo">
+                  <t t-set="foo" t-value="'aaa'"/>
+              </t>
+              <t t-call="_callee-uses-foo"/>
+              <t t-set="foo" t-value="'bbb'"/>
+              <t t-call="_callee-uses-foo"/>
+            </t>
+          </t>
+          <t t-call="_callee-asc-toto"/>
+        </div>`;
+    context.addTemplate("_callee-asc", _calleeAsc);
+    context.addTemplate("_callee-uses-foo", _calleeUsesFoo);
+    context.addTemplate("_callee-asc-toto", _calleeAscToto);
+    context.addTemplate("caller", caller);
+
+    const result = trim(context.renderToString("caller"));
+    const expected = trim(`
+        <div>
+          <span>4</span>
+          <año falló="agüero">
+            <span>aaa</span>
+            <span>foo default</span>
+            <span>bbb</span>
+          </año>
+  
+          <span>5</span>
+          <año falló="agüero">
+            <span>aaa</span>
+            <span>foo default</span>
+            <span>bbb</span>
+          </año>
+  
+          <span>6</span>
+          <año falló="agüero">
+            <span>aaa</span>
+            <span>foo default</span>
+            <span>bbb</span>
+          </año>
+  
+          <div>toto default</div>
+        </div>
+      `);
+    expect(result).toBe(expected);
+  });
+
+  test("complex template", () => {
+    const template = `
+      <div t-attf-class="batch_tile {{options.more? 'more' : 'nomore'}}">
+        <div t-attf-class="card bg-{{klass}}-light">
+          <div class="batch_header">
+              <a t-attf-href="/runbot/batch/{{batch.id}}" t-attf-class="badge badge-{{batch.has_warning ? 'warning' : 'light'}}" title="View Batch">
+                  <t t-esc="batch.formated_age"/>
+                  <i class="fa fa-exclamation-triangle" t-if="batch.has_warning"/>
+                  <i class="arrow fa fa-window-maximize"/>
+              </a>
+          </div>
+          <t t-if="batch.state=='preparing'">
+              <span><i class="fa fa-cog fa-spin fa-fw"/> preparing</span>
+          </t>
+          <div class="batch_slots">
+              <t t-foreach="batch.slot_ids.filter(slot => slot.build_id.id and !slot.trigger_id.manual and (options.trigger_display[slot.trigger_id.id]))" t-as="slot" t-key="slot.id">
+                  <SlotButton class="slot_container" slot="slot"/>
+              </t>
+              <div class="slot_filler" t-foreach="[1, 2, 3, 4]" t-as="x" t-key="x"/>
+          </div>
+          <div class="batch_commits">
+              <div t-foreach="commit_links" t-as="commit_link" class="one_line" t-key="commit_link.id">
+                  <a t-attf-href="/runbot/commit/{{commit_link.commit_id}}" t-attf-class="badge badge-light batch_commit match_type_{{commit_link.match_type}}">
+                  <i class="fa fa-fw fa-hashtag" t-if="commit_link.match_type == 'new'" title="This commit is a new head"/>
+                  <i class="fa fa-fw fa-link" t-if="commit_link.match_type == 'head'" title="This commit is an existing head from bundle branches"/>
+                  <i class="fa fa-fw fa-code-fork" t-if="commit_link.match_type == 'base_match'" title="This commit is matched from a base batch with matching merge_base"/>
+                  <i class="fa fa-fw fa-clock-o" t-if="commit_link.match_type == 'base_head'" title="This commit is the head of a base branch"/>
+                  <t t-esc="commit_link.commit_dname"/>
+                  </a>
+                  <a t-att-href="'https://%s/commit/%s' % (commit_link.commit_remote_url, commit_link.commit_name)" class="badge badge-light" title="View Commit on Github"><i class="fa fa-github"/></a>
+                  <span t-esc="commit_link.commit_subject"/>
+              </div>
+          </div>
+        </div>
+      </div>`;
+
+    const context = {
+      options: { more: true },
+      klass: "info",
+      batch: {
+        id: 3,
+        has_warning: true,
+        formated_age: "1 year",
+        state: "preparing",
+        slot_ids: [],
+      },
+      commit_links: [],
+    };
+    const expected = `<div class=\"batch_tile more\"><div class=\"card bg-info-light\"><div class=\"batch_header\"><a title=\"View Batch\" href=\"/runbot/batch/3\" class=\"badge badge-warning\">1 year<i class=\"fa fa-exclamation-triangle\"></i><i class=\"arrow fa fa-window-maximize\"></i></a></div><span><i class=\"fa fa-cog fa-spin fa-fw\"></i> preparing</span><div class=\"batch_slots\"><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div></div><div class=\"batch_commits\"></div></div></div>`;
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("other complex template", () => {
+    xml`
+        <div>
+          <header>
+              <nav class="navbar navbar-expand-md navbar-light bg-light">
+                  <a t-attf-href="/runbot/{{project.slug}}">
+                      <b style="color:#777;">
+                          <t t-esc="project.name"/>
+                      </b>
+                  </a>
+                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top_menu_collapse">
+                      <span class="navbar-toggler-icon"></span>
+                  </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">
+                          <li class="nav-item" t-foreach="projects" t-as="project" t-key="project.id">
+                              <a class="nav-link" href="#" t-on-click="selectProject(project)">
+                                  <t t-esc="project.name"/>
+                              </a>
+                          </li>
+                              
+                          <li class="nav-item divider"></li>
+                          <t t-if="user">
+                              <t t-if="user.public">
+                                  <li class="nav-item dropdown">
+                                      <b>
+                                          <a class="nav-link" t-attf-href="/web/login?redirect=/">Login</a>
+                                      </b>
+                                  </li>
+                              </t>
+                              <t t-else="">
+                                  <t t-if="nb_assigned_errors and nb_assigned_errors > 0">
+                                      <li class="nav-item">
+                                          <a href="/runbot/errors" class="nav-link text-danger" t-attf-title="You have {{nb_assigned_errors}} random bug assigned">
+                                              <i class="fa fa-bug"/><t t-esc="nb_assigned_errors"/>
+                                          </a>
+                                      </li>
+                                      <li class="nav-item divider"/>
+                                  </t>
+                                  <t t-elif="nb_build_errors and nb_build_errors > 0">
+                                      <li class="nav-item">
+                                          <a href="/runbot/errors" class="nav-link" title="Random Bugs"><i class="fa fa-bug"/></a>
+                                      </li>
+                                      <li class="nav-item divider"/>
+                                  </t>
+                                  <li class="nav-item dropdown">
+                                      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
+                                          <b>
+                                              <span t-esc=" user.name.length &gt; 25 ? user.namesubstring(0, 23) + '...' : user.name"/>
+                                          </b>
+                                      </a>
+                                      <div class="dropdown-menu js_usermenu" role="menu">
+                                          <a class="dropdown-item" id="o_logout" role="menuitem" t-attf-href="/web/session/logout?redirect=/">Logout</a>
+                                          <a class="dropdown-item" role="menuitem" t-attf-href="/web">Web</a>
+                                      </div>
+                                  </li>
+                              </t>
+                          </t>
+                      </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" t-on-click="toggleSettingsMenu" title="Settings"/>
+                                  <button class="btn btn-default" t-on-click="toggleMore">
+                                      More
+                                  </button>
+                                  <select t-if="categories and categories.length > 1" class="custom-select" name="category" id="category">
+                                      <option t-foreach="categories" t-as="category" t-key="category.id" t-att-value="category.id" t-esc="category.name" t-att-selected="category.id==options.active_category_id"/>
+                                  </select>
+                              </div>
+                              
+                              <input class="form-control" type="text" placeholder="Search" aria-label="Search" name="search" t-att-value="search.value" t-on-keyup="updateFilter" t-on-change="updateFilter" t-ref="search_input"/>
+                              <div class="input-group-append">
+                                  <button class="btn btn-default fa fa-eraser" t-on-click="clearSearch"/>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </nav>
+          </header>
+      
+          <div class="container-fluid" t-ref="settings_menu">
+              <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"/>
+      
+                      <h5>Display options</h5>
+                      <div class="form-check">
+                          <input class="form-check-input" type="checkbox" name="display_sticky"/>
+                          <label class="form-check-label" for="display_sticky">Display sticky</label>
+                      </div>
+                      <div class="form-check">
+                          <input class="form-check-input" type="checkbox" name="display_dev"/>
+                          <label class="form-check-label" for="display_dev">Display dev</label>
+                      </div>
+                  </div-->
+                  <div class="form-group col-md-6">
+                      <h5>Triggers</h5>
+                      <t t-if="triggers">
+                          <t t-foreach="triggers" t-as="trigger" t-key="trigger.id">
+                              <div t-if="!trigger.manual and trigger.project_id === project.id and trigger.category_id === options.active_category_id" class="form-check">
+                                  <input class="form-check-input" type="checkbox" 
+                                  t-attf-name="trigger_{{trigger.id}}" 
+                                  t-attf-id="trigger_{{trigger.id}}" 
+                                  t-att-checked="options.trigger_display[trigger.id]"
+                                  t-att-data-trigger_id="trigger.id"
+                                  t-on-change="updateTriggerDisplay"/>
+                                  <label class="form-check-label" t-attf-for="trigger_{{trigger.id}}" t-esc="trigger.name"/>
+                              </div>
+                          </t>
+                          <div>
+                              <button class="btn btn-sm btn-default" t-on-click="triggerAll">All</button>
+                              <button class="btn btn-sm btn-default" t-on-click="triggerNone">None</button>
+                              <button class="btn btn-sm btn-info" t-on-click="triggerDefault">Default</button>
+                              <button class="btn btn-sm btn-default" t-on-click="toggleSettingsMenu">Close</button>
+                          </div>
+                      </t>
+                  </div>
+              </div>
+          </div>
+      
+          <div class="container-fluid frontend">
+              <div class="row">
+                  <div class='col-md-12'>
+                      <t t-call="LOAD_INFOS_TEMPLATE" t-if="load_infos"/>
+                  </div>
+                  <div class='col-md-12'>
+                      <div t-if="message" class="alert alert-warning" role="alert">
+                          <t t-esc="message" /> <!-- todo fixme-->
+                      </div>
+                      <div t-if="! project" class="mb32">
+                          <h1>No project</h1>
+                      </div>
+                      <div t-else="">
+                          <BundlesList bundles="bundles.sticky" category_custom_views="category_custom_views" search="search"/>
+                          <BundlesList bundles="bundles.dev" search="search"/>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>`;
+  });
+});

tests/qweb/qweb_expressions.test.ts

@@ -1,226 +0,0 @@
-import { compileExpr, tokenize } from "../../src/qweb/expression_parser";
-
-describe("tokenizer", () => {
-  test("simple tokens", () => {
-    expect(tokenize("1.3")).toEqual([{ type: "VALUE", value: "1.3" }]);
-
-    expect(tokenize("{}")).toEqual([
-      { type: "LEFT_BRACE", value: "{" },
-      { type: "RIGHT_BRACE", value: "}" },
-    ]);
-    expect(tokenize("{ }}")).toEqual([
-      { type: "LEFT_BRACE", value: "{" },
-      { type: "RIGHT_BRACE", value: "}" },
-      { type: "RIGHT_BRACE", value: "}" },
-    ]);
-    expect(tokenize("a")).toEqual([{ type: "SYMBOL", value: "a" }]);
-    expect(tokenize("true")).toEqual([{ type: "SYMBOL", value: "true" }]);
-    expect(tokenize("abcde")).toEqual([{ type: "SYMBOL", value: "abcde" }]);
-    expect(tokenize("_ab2")).toEqual([{ type: "SYMBOL", value: "_ab2" }]);
-    expect(tokenize("$ab2")).toEqual([{ type: "SYMBOL", value: "$ab2" }]);
-    expect(tokenize("ABC")).toEqual([{ type: "SYMBOL", value: "ABC" }]);
-
-    expect(tokenize("{a: 2}")).toEqual([
-      { type: "LEFT_BRACE", value: "{" },
-      { type: "SYMBOL", value: "a" },
-      { type: "COLON", value: ":" },
-      { type: "VALUE", value: "2" },
-      { type: "RIGHT_BRACE", value: "}" },
-    ]);
-    expect(tokenize("a,")).toEqual([
-      { type: "SYMBOL", value: "a" },
-      { type: "COMMA", value: "," },
-    ]);
-    expect(tokenize("][")).toEqual([
-      { type: "RIGHT_BRACKET", value: "]" },
-      { type: "LEFT_BRACKET", value: "[" },
-    ]);
-  });
-
-  test("various operators", () => {
-    expect(tokenize(">= <= < > !== !=")).toEqual([
-      { type: "OPERATOR", value: ">=" },
-      { type: "OPERATOR", value: "<=" },
-      { type: "OPERATOR", value: "<" },
-      { type: "OPERATOR", value: ">" },
-      { type: "OPERATOR", value: "!==" },
-      { type: "OPERATOR", value: "!=" },
-    ]);
-    expect(tokenize("typeof a")).toEqual([
-      { type: "OPERATOR", value: "typeof " },
-      { type: "SYMBOL", value: "a" },
-    ]);
-
-    expect(tokenize("a...1")).toEqual([
-      { type: "SYMBOL", value: "a" },
-      { type: "OPERATOR", value: "..." },
-      { type: "VALUE", value: "1" },
-    ]);
-
-    expect(tokenize("a in b")).toEqual([
-      { type: "SYMBOL", value: "a" },
-      { type: "OPERATOR", value: "in " },
-      { type: "SYMBOL", value: "b" },
-    ]);
-  });
-
-  test("strings", () => {
-    expect(() => tokenize("'")).toThrow("Invalid expression");
-    expect(() => tokenize("'\\")).toThrow("Invalid expression");
-    expect(() => tokenize("'\\'")).toThrow("Invalid expression");
-    expect(tokenize("'hello ged'")).toEqual([{ type: "VALUE", value: "'hello ged'" }]);
-    expect(tokenize("'hello \\'ged\\''")).toEqual([{ type: "VALUE", value: "'hello \\'ged\\''" }]);
-
-    expect(() => tokenize('"')).toThrow("Invalid expression");
-    expect(() => tokenize('"\\"')).toThrow("Invalid expression");
-    expect(tokenize('"hello ged"')).toEqual([{ type: "VALUE", value: '"hello ged"' }]);
-    expect(tokenize('"hello ged"}')).toEqual([
-      { type: "VALUE", value: '"hello ged"' },
-      { type: "RIGHT_BRACE", value: "}" },
-    ]);
-    expect(tokenize('"hello \\"ged\\""')).toEqual([{ type: "VALUE", value: '"hello \\"ged\\""' }]);
-  });
-});
-
-describe("expression evaluation", () => {
-  test("simple static values", () => {
-    expect(compileExpr("1", {})).toBe("1");
-    expect(compileExpr("1 ", {})).toBe("1");
-    expect(compileExpr("'some string#/, {' ", {})).toBe("'some string#/, {'");
-    expect(compileExpr("{ } ", {})).toBe("{}");
-    expect(compileExpr("{a: 1} ", {})).toBe("{a:1}");
-    expect(compileExpr("{a: 1, b: 2   } ", {})).toBe("{a:1,b:2}");
-    expect(compileExpr("[] ", {})).toBe("[]");
-    expect(compileExpr("[1] ", {})).toBe("[1]");
-    expect(compileExpr("['1', '2'] ", {})).toBe("['1','2']");
-    expect(compileExpr("['1', \"2\"] ", {})).toBe("['1',\"2\"]");
-  });
-
-  test("various types of 'words'", () => {
-    expect(compileExpr("true", {})).toBe("true");
-    expect(compileExpr("false", {})).toBe("false");
-    expect(compileExpr("debugger", {})).toBe("debugger");
-  });
-
-  test("parenthesis", () => {
-    expect(compileExpr("(1)", {})).toBe("(1)");
-    expect(compileExpr("a*(1 +3)", {})).toBe("scope['a']*(1+3)");
-  });
-
-  test("objects and sub objects", () => {
-    expect(compileExpr("{a:{b:1}} ", {})).toBe("{a:{b:1}}");
-  });
-
-  test("replacing variables", () => {
-    expect(compileExpr("a", {})).toBe("scope['a']");
-    expect(compileExpr("a", { a: { id: "_3", expr: "scope._3" } })).toBe("scope._3");
-  });
-
-  test("arrays and objects", () => {
-    expect(compileExpr("[{b:1}] ", {})).toBe("[{b:1}]");
-    expect(compileExpr("{a: []} ", {})).toBe("{a:[]}");
-    expect(compileExpr("[{b:1, c: [1, {d: {e: 3}} ]}] ", {})).toBe("[{b:1,c:[1,{d:{e:3}}]}]");
-  });
-
-  test("dot operator", () => {
-    expect(compileExpr("a.b", {})).toBe("scope['a'].b");
-    expect(compileExpr("a.b.c", {})).toBe("scope['a'].b.c");
-  });
-
-  test("various unary operators", () => {
-    expect(compileExpr("!flag", {})).toBe("!scope['flag']");
-    expect(compileExpr("-3", {})).toBe("-3");
-    expect(compileExpr("-a", {})).toBe("-scope['a']");
-    expect(compileExpr("typeof a", {})).toBe("typeof scope['a']");
-  });
-
-  test("various binary operators", () => {
-    expect(compileExpr("color == 'black'", {})).toBe("scope['color']=='black'");
-    expect(compileExpr("a || b", {})).toBe("scope['a']||scope['b']");
-    expect(compileExpr("color === 'black'", {})).toBe("scope['color']==='black'");
-    expect(compileExpr("'li_'+item", {})).toBe("'li_'+scope['item']");
-    expect(compileExpr("state.val > 1", {})).toBe("scope['state'].val>1");
-    expect(compileExpr("a in b", {})).toBe("scope['a']in scope['b']");
-  });
-
-  test("boolean operations", () => {
-    expect(compileExpr("a && b", {})).toBe("scope['a']&&scope['b']");
-  });
-
-  test("ternary operators", () => {
-    expect(compileExpr("a ? b: '2'", {})).toBe("scope['a']?scope['b']:'2'");
-    expect(compileExpr("a ? b: (c or '2') ", {})).toBe("scope['a']?scope['b']:(scope['c']||'2')");
-    expect(compileExpr("a ? {test:c}: [1,u]", {})).toBe(
-      "scope['a']?{test:scope['c']}:[1,scope['u']]"
-    );
-  });
-
-  test("word replacement", () => {
-    expect(compileExpr("a or b", {})).toBe("scope['a']||scope['b']");
-    expect(compileExpr("a and b", {})).toBe("scope['a']&&scope['b']");
-  });
-
-  test("function calls", () => {
-    expect(compileExpr("a()", {})).toBe("scope['a']()");
-    expect(compileExpr("a(1)", {})).toBe("scope['a'](1)");
-    expect(compileExpr("a(1,2)", {})).toBe("scope['a'](1,2)");
-    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("scope['a'](1,2,{a:[scope['a']]})");
-    expect(compileExpr("'x'.toUpperCase()", {})).toBe("'x'.toUpperCase()");
-    expect(compileExpr("'x'.toUpperCase({a: 3})", {})).toBe("'x'.toUpperCase({a:3})");
-    expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
-      "'x'.toUpperCase(scope._v5)"
-    );
-    expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
-      "'x'.toUpperCase({b:scope._v5})"
-    );
-  });
-
-  test("arrow functions", () => {
-    expect(compileExpr("list.map(e => e.val)", {})).toBe("scope['list'].map(e=>e.val)");
-    expect(compileExpr("list.map(e => a + e)", {})).toBe("scope['list'].map(e=>scope['a']+e)");
-    expect(compileExpr("list.map((e) => e)", {})).toBe("scope['list'].map((e)=>e)");
-    expect(compileExpr("list.map((elem, index) => elem + index)", {})).toBe(
-      "scope['list'].map((elem,index)=>elem+index)"
-    );
-  });
-
-  test("assignation", () => {
-    expect(compileExpr("a = b", {})).toBe("scope['a']=scope['b']");
-    expect(compileExpr("a += b", {})).toBe("scope['a']+=scope['b']");
-    expect(compileExpr("a -= b", {})).toBe("scope['a']-=scope['b']");
-    expect(compileExpr("a.b = !a.b", {})).toBe("scope['a'].b=!scope['a'].b");
-  });
-
-  test("spread operator", () => {
-    expect(compileExpr("[...state.list]", {})).toBe("[...scope['state'].list]");
-    expect(compileExpr("f(...state.list)", {})).toBe("scope['f'](...scope['state'].list)");
-    expect(compileExpr("f([...list])", {})).toBe("scope['f']([...scope['list']])");
-  });
-
-  test("works with builtin properties", () => {
-    expect(compileExpr("state.constructor.name", {})).toBe("scope['state'].constructor.name");
-  });
-
-  test("works with shortcut object key description", () => {
-    expect(compileExpr("{a}", {})).toBe("{a:scope['a']}");
-    expect(compileExpr("{a,b}", {})).toBe("{a:scope['a'],b:scope['b']}");
-    expect(compileExpr("{a,b:3,c}", {})).toBe("{a:scope['a'],b:3,c:scope['c']}");
-  });
-
-  test("works with short object description and lists ", () => {
-    expect(compileExpr("[a, b]", {})).toBe("[scope['a'],scope['b']]");
-    expect(compileExpr("[a, b, c]", {})).toBe("[scope['a'],scope['b'],scope['c']]");
-    expect(compileExpr("[a, {b, c},d]", {})).toBe(
-      "[scope['a'],{b:scope['b'],c:scope['c']},scope['d']]"
-    );
-    expect(compileExpr("{a:[b, {c, d: e}]}", {})).toBe(
-      "{a:[scope['b'],{c:scope['c'],d:scope['e']}]}"
-    );
-  });
-
-  test("template strings", () => {
-    expect(compileExpr("`hey`", {})).toBe("`hey`");
-    expect(compileExpr("`hey ${you}`", {})).toBe("`hey ${scope['you']}`");
-    expect(compileExpr("`hey ${1 + 2}`", {})).toBe("`hey ${1+2}`");
-  });
-});

tests/qweb/qweb_memory.test.ts

@@ -1,14 +0,0 @@
-import { QWeb } from "../../src/qweb/index";
-import { renderToString } from "../helpers";
-
-describe("memory", () => {
-  test("t-foreach does not leak stuff in global scope", () => {
-    let qweb = new QWeb();
-    const initialNumberOfGlobals = Object.keys(window).length;
-    qweb.addTemplate("test", `<p><t t-foreach="[3, 2, 1]" t-as="item"><t t-esc="item"/></t></p>`);
-    const result = renderToString(qweb, "test");
-    const expected = `<p>321</p>`;
-    expect(result).toBe(expected);
-    expect(Object.keys(window).length).toBe(initialNumberOfGlobals);
-  });
-});

tests/qweb/qweb_t_att.test.ts

@@ -1,36 +0,0 @@
-import { QWeb } from "../../src/qweb/index";
-import { renderToString } from "../helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-function render(template, context = {}) {
-  const qweb = new QWeb();
-  qweb.addTemplate("test", template);
-  return renderToString(qweb, "test", context);
-}
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-describe("qweb t-att", () => {
-  test("t-att-class with multiple classes", () => {
-    expect(render(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
-      '<div class="a b c"></div>'
-    );
-    expect(render(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
-      '<div class="a b c"></div>'
-    );
-  });
-
-  test("t-att-class with multiple classes, some of which are duplicate", () => {
-    expect(render(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: true })).toBe(
-      '<div class="a b c"></div>'
-    );
-    expect(
-      render(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: false })
-    ).toBe('<div class="a b d"></div>');
-  });
-});

tests/qweb/qweb_t_tag.test.ts

@@ -1,42 +0,0 @@
-import { QWeb } from "../../src/qweb/index";
-import { renderToString } from "../helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-function render(template, context = {}) {
-  const qweb = new QWeb();
-  qweb.addTemplate("test", template);
-  return renderToString(qweb, "test", context);
-}
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-describe("qweb t-tag", () => {
-  test("simple usecases", () => {
-    expect(render(`<t t-tag="'div'"></t>`)).toBe("<div></div>");
-    expect(render(`<t t-tag="tag">text</t>`, { tag: "span" })).toBe("<span>text</span>");
-  });
-
-  test("with multiple child nodes", () => {
-    const template = `
-            <t t-tag="tag">
-                pear
-                <span>apple</span>
-                strawberry
-            </t>`;
-    expect(render(template, { tag: "div" })).toBe(
-      "<div> pear <span>apple</span> strawberry </div>"
-    );
-  });
-
-  test("with multiple attributes", () => {
-    const template = `
-            <t t-tag="tag" class="blueberry" taste="raspberry">gooseberry</t>`;
-    const expected = `<div taste=\"raspberry\" class=\"blueberry\">gooseberry</div>`;
-    expect(render(template, { tag: "div" })).toBe(expected);
-  });
-});

tests/qweb/simple_templates.test.ts

@@ -0,0 +1,125 @@
+import { renderToString, snapshotEverything, TestContext } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// Simple templates, mostly static
+// -----------------------------------------------------------------------------
+
+describe("simple templates, mostly static", () => {
+  test("simple string", () => {
+    const template = `hello vdom`;
+    expect(renderToString(template)).toBe("hello vdom");
+  });
+
+  test("simple string in t tag", () => {
+    const template = `<t>hello vdom</t>`;
+    expect(renderToString(template)).toBe("hello vdom");
+  });
+
+  test("empty string", () => {
+    const template = ``;
+    expect(renderToString(template)).toBe("");
+  });
+
+  test("empty string in a template set", () => {
+    const template = ``;
+    const context = new TestContext();
+    context.addTemplate("potato", template);
+    expect(context.renderToString("potato")).toBe("");
+  });
+
+  test("empty div", () => {
+    const template = `<div></div>`;
+    expect(renderToString(template)).toBe("<div></div>");
+  });
+
+  test("div with content", () => {
+    const template = `<div>foo</div>`;
+    expect(renderToString(template)).toBe("<div>foo</div>");
+  });
+
+  test("multiple root nodes", () => {
+    const template = `<div>foo</div><span>hey</span>`;
+    expect(renderToString(template)).toBe("<div>foo</div><span>hey</span>");
+  });
+
+  test("dynamic text value", () => {
+    const template = `<t><t t-esc="text"/></t>`;
+    expect(renderToString(template, { text: "owl" })).toBe("owl");
+  });
+
+  test("two t-escs next to each other", () => {
+    const template = `<t><t t-esc="text1"/><t t-esc="text2"/></t>`;
+    expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("helloowl");
+  });
+
+  test("two t-escs next to each other", () => {
+    const template = `<t t-esc="text1"/><t t-esc="text2"/>`;
+    expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("helloowl");
+  });
+
+  test("two t-escs next to each other, in a div", () => {
+    const template = `<div><t t-esc="text1"/><t t-esc="text2"/></div>`;
+    expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("<div>helloowl</div>");
+  });
+
+  test("static text and dynamic text", () => {
+    const template = `<t>hello <t t-esc="text"/></t>`;
+    expect(renderToString(template, { text: "owl" })).toBe("hello owl");
+  });
+
+  test("static text and dynamic text (no t tag)", () => {
+    const template = `hello <t t-esc="text"/>`;
+    expect(renderToString(template, { text: "owl" })).toBe("hello owl");
+  });
+
+  test("t-esc in dom node", () => {
+    const template = `<div><t t-esc="text"/></div>`;
+    expect(renderToString(template, { text: "hello owl" })).toBe("<div>hello owl</div>");
+  });
+
+  test("dom node with t-esc", () => {
+    const template1 = `<div t-esc="text" />`;
+    expect(renderToString(template1, { text: "hello owl" })).toBe("<div>hello owl</div>");
+    const template2 = `<div t-esc="text"></div>`;
+    expect(renderToString(template2, { text: "hello owl" })).toBe("<div>hello owl</div>");
+  });
+
+  test("t-esc in dom node, variations", () => {
+    const template1 = `<div>hello <t t-esc="text"/></div>`;
+    expect(renderToString(template1, { text: "owl" })).toBe("<div>hello owl</div>");
+    const template2 = `<div>hello <t t-esc="text"/> world</div>`;
+    expect(renderToString(template2, { text: "owl" })).toBe("<div>hello owl world</div>");
+  });
+
+  test("div with a class attribute", () => {
+    const template = `<div class="abc">foo</div>`;
+    expect(renderToString(template)).toBe(`<div class="abc">foo</div>`);
+  });
+
+  test("div with a class attribute with a quote", () => {
+    const template = `<div class="a'bc">word</div>`;
+    expect(renderToString(template)).toBe(`<div class="a'bc">word</div>`);
+  });
+
+  test("div with an arbitrary attribute with a quote", () => {
+    const template = `<div abc="a'bc">word</div>`;
+    expect(renderToString(template)).toBe(`<div abc="a'bc">word</div>`);
+  });
+
+  test("div with an empty class attribute", () => {
+    const template = `<div class="">word</div>`;
+    expect(renderToString(template)).toBe(`<div>word</div>`);
+  });
+
+  test("div with a span child node", () => {
+    const template = `<div><span>word</span></div>`;
+    expect(renderToString(template)).toBe("<div><span>word</span></div>");
+  });
+
+  test("can render a table row", () => {
+    const template = `<tr><td>cell</td></tr>`;
+    expect(renderToString(template)).toBe(template);
+  });
+});

tests/qweb/t_call.test.ts

@@ -0,0 +1,448 @@
+import { snapshotEverything, TestContext } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-call
+// -----------------------------------------------------------------------------
+
+describe("t-call (template calling)", () => {
+  test("basic caller", () => {
+    const context = new TestContext();
+    context.addTemplate("_basic-callee", `<span>ok</span>`);
+    context.addTemplate("caller", `<div><t t-call="_basic-callee"/></div>`);
+
+    expect(context.renderToString("caller")).toBe("<div><span>ok</span></div>");
+  });
+
+  test("basic caller, no parent node", () => {
+    const context = new TestContext();
+    context.addTemplate("_basic-callee", `<span>ok</span>`);
+    context.addTemplate("caller", `<t t-call="_basic-callee"/>`);
+
+    expect(context.renderToString("caller")).toBe("<span>ok</span>");
+  });
+
+  test("t-esc inside t-call, with t-set outside", () => {
+    const context = new TestContext();
+    const main = `<div><t t-set="v">Hi</t><t t-call="sub"/></div>`;
+    context.addTemplate("main", main);
+    context.addTemplate("sub", `<span t-esc="v"/>`);
+
+    expect(context.renderToString("main")).toBe("<div><span>Hi</span></div>");
+  });
+
+  test("t-call with t-if", () => {
+    const context = new TestContext();
+    const main = '<div><t t-if="flag" t-call="sub"/></div>';
+    context.addTemplate("main", main);
+    context.addTemplate("sub", "<span>ok</span>");
+
+    expect(context.renderToString("main", { flag: true })).toBe("<div><span>ok</span></div>");
+  });
+
+  test("t-call allowed on a non t node", () => {
+    const context = new TestContext();
+    const main = '<div t-call="sub"/>';
+    context.addTemplate("main", main);
+    context.addTemplate("sub", "<span>ok</span>");
+
+    expect(context.renderToString("main")).toBe("<div><span>ok</span></div>");
+  });
+
+  test("with unused body", () => {
+    const context = new TestContext();
+    const sub = "<div>ok</div>";
+    const main = '<t t-call="sub">WHEEE</t>';
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<div>ok</div>");
+  });
+
+  test("with unused setbody", () => {
+    const context = new TestContext();
+    const sub = "<div>ok</div>";
+    const main = `<t t-call="sub"><t t-set="qux" t-value="3"/></t>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<div>ok</div>");
+  });
+
+  test("with used body", () => {
+    const context = new TestContext();
+    const sub = '<h1><t t-esc="0"/></h1>';
+    const main = '<t t-call="sub">ok</t>';
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<h1>ok</h1>");
+  });
+
+  test("with used setbody", () => {
+    const context = new TestContext();
+    const sub = '<t t-esc="foo"/>';
+    const main = `<span><t t-call="sub"><t t-set="foo" t-value="'ok'"/></t></span>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<span>ok</span>");
+  });
+
+  test("inherit context", () => {
+    const context = new TestContext();
+    const sub = '<t t-esc="foo"/>';
+    const main = `<div><t t-set="foo" t-value="1"/><t t-call="sub"/></div>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<div>1</div>");
+  });
+
+  test("scoped parameters", () => {
+    const context = new TestContext();
+    const sub = "<t>ok</t>";
+    const main = `
+        <div>
+          <t t-call="sub">
+            <t t-set="foo" t-value="42"/>
+          </t>
+          <t t-esc="foo"/>
+        </div>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<div>ok</div>");
+  });
+
+  test("scoped parameters, part 2", () => {
+    const context = new TestContext();
+    const sub = '<t t-esc="foo"/>';
+    const main = `
+        <div>
+          <t t-set="foo" t-value="11"/>
+          <t t-call="sub">
+            <t t-set="foo" t-value="42"/>
+          </t>
+          <t t-esc="foo"/>
+        </div>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe("<div>4211</div>");
+  });
+
+  test("call with several sub nodes on same line", () => {
+    const context = new TestContext();
+    const sub = `
+        <div>
+          <t t-raw="0"/>
+        </div>`;
+    const main = `
+        <div>
+          <t t-call="sub">
+            <span>hey</span> <span>yay</span>
+          </t>
+        </div>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    const expected = "<div><div><span>hey</span> <span>yay</span></div></div>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("cascading t-call t-raw='0'", () => {
+    const context = new TestContext();
+    const finalTemplate = `
+        <div>
+          <span>cascade 2</span>
+          <t t-raw="0"/>
+        </div>`;
+
+    const subSubTemplate = `
+        <div>
+          <t t-call="finalTemplate">
+            <span>cascade 1</span>
+            <t t-raw="0"/>
+          </t>
+        </div>`;
+
+    const subTemplate = `
+        <div>
+          <t t-call="subSubTemplate">
+            <span>cascade 0</span>
+            <t t-raw="0"/>
+          </t>
+        </div>`;
+
+    const main = `
+        <div>
+          <t t-call="subTemplate">
+            <span>hey</span> <span>yay</span>
+          </t>
+        </div>`;
+
+    context.addTemplate("finalTemplate", finalTemplate);
+    context.addTemplate("subSubTemplate", subSubTemplate);
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+
+    const expected =
+      "<div><div><div><div><span>cascade 2</span><span>cascade 1</span><span>cascade 0</span><span>hey</span> <span>yay</span></div></div></div></div>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("cascading t-call t-raw='0', without external divs", () => {
+    const context = new TestContext();
+    const finalTemplate = `
+          <span>cascade 2</span>
+          <t t-raw="0"/>`;
+
+    const subSubTemplate = `
+          <t t-call="finalTemplate">
+            <span>cascade 1</span>
+            <t t-raw="0"/>
+          </t>`;
+
+    const subTemplate = `
+          <t t-call="subSubTemplate">
+            <span>cascade 0</span>
+            <t t-raw="0"/>
+          </t>`;
+
+    const main = `
+          <t t-call="subTemplate">
+            <span>hey</span> <span>yay</span>
+          </t>`;
+
+    context.addTemplate("finalTemplate", finalTemplate);
+    context.addTemplate("subSubTemplate", subSubTemplate);
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+
+    const expected =
+      "<span>cascade 2</span><span>cascade 1</span><span>cascade 0</span><span>hey</span> <span>yay</span>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("recursive template, part 1", () => {
+    const context = new TestContext();
+    const recursive = `
+        <div>
+          <span>hey</span>
+          <t t-if="false">
+            <t t-call="recursive"/>
+          </t>
+        </div>`;
+
+    context.addTemplate("recursive", recursive);
+
+    const expected = "<div><span>hey</span></div>";
+    expect(context.renderToString("recursive")).toBe(expected);
+  });
+
+  test("recursive template, part 2", () => {
+    const context = new TestContext();
+    const Parent = `
+        <div>
+          <t t-call="nodeTemplate">
+              <t t-set="node" t-value="root"/>
+          </t>
+        </div>`;
+
+    const nodeTemplate = `
+        <div>
+          <p><t t-esc="node.val"/></p>
+          <t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
+              <t t-call="nodeTemplate">
+                  <t t-set="node" t-value="subtree"/>
+              </t>
+          </t>
+        </div>`;
+
+    context.addTemplate("Parent", Parent);
+    context.addTemplate("nodeTemplate", nodeTemplate);
+
+    const root = { val: "a", children: [{ val: "b" }, { val: "c" }] };
+    const expected = "<div><div><p>a</p><div><p>b</p></div><div><p>c</p></div></div></div>";
+    expect(context.renderToString("Parent", { root })).toBe(expected);
+  });
+
+  test("recursive template, part 3", () => {
+    const context = new TestContext();
+    const Parent = `
+        <div>
+          <t t-call="nodeTemplate">
+              <t t-set="node" t-value="root"/>
+          </t>
+        </div>`;
+
+    const nodeTemplate = `
+        <div>
+          <p><t t-esc="node.val"/></p>
+          <t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
+            <t t-call="nodeTemplate">
+              <t t-set="node" t-value="subtree"/>
+            </t>
+        </t>
+        </div>`;
+
+    context.addTemplate("Parent", Parent);
+    context.addTemplate("nodeTemplate", nodeTemplate);
+
+    const root = { val: "a", children: [{ val: "b", children: [{ val: "d" }] }, { val: "c" }] };
+    const expected =
+      "<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
+    expect(context.renderToString("Parent", { root })).toBe(expected);
+  });
+
+  test("recursive template, part 4: with t-set recursive index", () => {
+    const context = new TestContext();
+    const Parent = `
+        <div>
+          <t t-call="nodeTemplate">
+            <t t-set="recursive_idx" t-value="1"/>
+            <t t-set="node" t-value="root"/>
+          </t>
+        </div>`;
+
+    const nodeTemplate = `
+        <div>
+          <t t-set="recursive_idx" t-value="recursive_idx + 1"/>
+          <p><t t-esc="node.val"/> <t t-esc="recursive_idx"/></p>
+          <t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
+            <t t-call="nodeTemplate">
+              <t t-set="node" t-value="subtree"/>
+            </t>
+          </t>
+        </div>`;
+
+    context.addTemplate("Parent", Parent);
+    context.addTemplate("nodeTemplate", nodeTemplate);
+
+    const root = {
+      val: "a",
+      children: [{ val: "b", children: [{ val: "c", children: [{ val: "d" }] }] }],
+    };
+    const expected =
+      "<div><div><p>a 2</p><div><p>b 3</p><div><p>c 4</p><div><p>d 5</p></div></div></div></div></div>";
+    expect(context.renderToString("Parent", { root })).toBe(expected);
+  });
+
+  test("t-call, conditional and t-set in t-call body", () => {
+    const context = new TestContext();
+    const callee1 = `<div>callee1</div>`;
+    const callee2 = `<div>callee2 <t t-esc="v"/></div>`;
+    const caller = `
+        <div>
+          <t t-set="v1" t-value="'elif'"/>
+          <t t-if="v1 === 'if'" t-call="callee1" />
+          <t t-elif="v1 === 'elif'" t-call="callee2" >
+            <t t-set="v" t-value="'success'" />
+          </t>
+        </div>`;
+
+    context.addTemplate("callee1", callee1);
+    context.addTemplate("callee2", callee2);
+    context.addTemplate("caller", caller);
+
+    const expected = `<div><div>callee2 success</div></div>`;
+    expect(context.renderToString("caller")).toBe(expected);
+  });
+
+  test("t-call with t-set inside and outside", () => {
+    const context = new TestContext();
+    const main = `
+        <div>
+          <t t-foreach="list" t-as="v" t-key="v_index">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>`;
+    const sub = `
+        <t>
+          <span t-esc="val3"/>
+        </t>`;
+
+    context.addTemplate("main", main);
+    context.addTemplate("sub", sub);
+
+    const expected = "<div><span>3</span><span>6</span><span>9</span></div>";
+    const ctx = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(context.renderToString("main", ctx)).toBe(expected);
+  });
+
+  test("t-call with t-set inside and outside. 2", () => {
+    const context = new TestContext();
+    const main = `
+        <div>
+          <t t-foreach="list" t-as="v" t-key="v_index">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>`;
+    const sub = `
+        <t>
+          <span t-esc="val3"/>
+          <t t-esc="w"/>
+        </t>`;
+    const wrapper = `<p><t t-set="w" t-value="'fromwrapper'"/><t t-call="main"/></p>`;
+
+    context.addTemplate("main", main);
+    context.addTemplate("sub", sub);
+    context.addTemplate("wrapper", wrapper);
+
+    const expected =
+      "<p><div><span>3</span>fromwrapper<span>6</span>fromwrapper<span>9</span>fromwrapper</div></p>";
+    const ctx = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(context.renderToString("wrapper", ctx)).toBe(expected);
+  });
+
+  test("t-call with t-set inside and body text content", () => {
+    const context = new TestContext();
+    const main = `
+        <div>
+          <t t-call="sub">
+            <t t-set="val">yip yip</t>
+          </t>
+        </div>`;
+    const sub = `<p><t t-esc="val"/></p>`;
+
+    context.addTemplate("main", main);
+    context.addTemplate("sub", sub);
+
+    const expected = "<div><p>yip yip</p></div>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("t-call with body content as root of a template", () => {
+    const context = new TestContext();
+    const antony = `<foo><t t-raw="0"/></foo>`;
+    const main = `<t><t t-call="antony"><p>antony</p></t></t>`;
+    context.addTemplate("antony", antony);
+    context.addTemplate("main", main);
+    const expected = "<foo><p>antony</p></foo>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("dynamic t-call", () => {
+    const context = new TestContext();
+    const foo = `<foo><t t-esc="val"/></foo>`;
+    const bar = `<bar><t t-esc="val"/></bar>`;
+    const main = `<div><t t-call="{{template}}"/></div>`;
+
+    context.addTemplate("foo", foo);
+    context.addTemplate("bar", bar);
+    context.addTemplate("main", main);
+
+    const expected1 = "<div><foo>foo</foo></div>";
+    expect(context.renderToString("main", { template: "foo", val: "foo" })).toBe(expected1);
+    const expected2 = "<div><bar>quux</bar></div>";
+    expect(context.renderToString("main", { template: "bar", val: "quux" })).toBe(expected2);
+  });
+});

tests/qweb/t_debug_log.test.ts

@@ -0,0 +1,30 @@
+import { renderToString, snapshotTemplateCode } from "../helpers";
+
+// -----------------------------------------------------------------------------
+// debugging
+// -----------------------------------------------------------------------------
+
+describe("debugging", () => {
+  test("t-debug", () => {
+    const consoleLog = console.log;
+    console.log = jest.fn();
+    const template = `<div t-debug=""><t t-if="true"><span t-debug="">hey</span></t></div>`;
+    snapshotTemplateCode(template);
+    expect(console.log).toHaveBeenCalledTimes(1);
+    console.log = consoleLog;
+  });
+
+  test("t-log", () => {
+    const consoleLog = console.log;
+    console.log = jest.fn();
+
+    const template = `<div>
+            <t t-set="foo" t-value="42"/>
+            <t t-log="foo + 3"/>
+          </div>`;
+    snapshotTemplateCode(template);
+    renderToString(template);
+    expect(console.log).toHaveBeenCalledWith(45);
+    console.log = consoleLog;
+  });
+});

tests/qweb/t_esc.test.ts

@@ -0,0 +1,109 @@
+import { mount } from "../../src/blockdom";
+import {
+  makeTestFixture,
+  renderToBdom,
+  renderToString,
+  snapshotEverything,
+  TestContext,
+} from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-esc
+// -----------------------------------------------------------------------------
+
+describe("t-esc", () => {
+  test("literal", () => {
+    const template = `<span><t t-esc="'ok'"/></span>`;
+    expect(renderToString(template)).toBe("<span>ok</span>");
+  });
+
+  test("variable", () => {
+    const template = `<span><t t-esc="var"/></span>`;
+    expect(renderToString(template, { var: "ok" })).toBe("<span>ok</span>");
+  });
+
+  test("escaping", () => {
+    const template = `<span><t t-esc="var"/></span>`;
+    expect(renderToString(template, { var: "<ok>abc</ok>" })).toBe(
+      "<span>&lt;ok&gt;abc&lt;/ok&gt;</span>"
+    );
+  });
+
+  test("escaping on a node", () => {
+    const template = `<span t-esc="'ok'"/>`;
+    expect(renderToString(template)).toBe("<span>ok</span>");
+  });
+
+  test("escaping on a node with a body", () => {
+    const template = `<span t-esc="'ok'">nope</span>`;
+    expect(renderToString(template)).toBe("<span>ok</span>");
+  });
+
+  test("escaping on a node with a body, as a default", () => {
+    const template = `<span t-esc="var">nope</span>`;
+    expect(renderToString(template)).toBe("<span>nope</span>");
+  });
+
+  test("div with falsy values", () => {
+    const template = `
+      <div>
+        <p t-esc="v1"/>
+        <p t-esc="v2"/>
+        <p t-esc="v3"/>
+        <p t-esc="v4"/>
+        <p t-esc="v5"/>
+      </div>`;
+    const vals = {
+      v1: false,
+      v2: undefined,
+      v3: null,
+      v4: 0,
+      v5: "",
+    };
+    expect(renderToString(template, vals)).toBe(
+      "<div><p>false</p><p></p><p></p><p>0</p><p></p></div>"
+    );
+  });
+
+  test("falsy values in text nodes", () => {
+    const template = `
+        <t t-esc="v1"/>:<t t-esc="v2"/>:<t t-esc="v3"/>:<t t-esc="v4"/>:<t t-esc="v5"/>`;
+    const vals = {
+      v1: false,
+      v2: undefined,
+      v3: null,
+      v4: 0,
+      v5: "",
+    };
+    expect(renderToString(template, vals)).toBe("false:::0:");
+  });
+
+  test("t-esc work with spread operator", () => {
+    const template = `<span><t t-esc="[...state.list]"/></span>`;
+    expect(renderToString(template, { state: { list: [1, 2] } })).toBe("<span>1,2</span>");
+  });
+
+  test("t-esc is escaped", () => {
+    const template = `<div><t t-set="var"><p>escaped</p></t><t t-esc="var"/></div>`;
+    const bdom = renderToBdom(template);
+    const fixture = makeTestFixture();
+    mount(bdom, fixture);
+
+    expect(fixture.textContent).toBe("<p>escaped</p>");
+  });
+
+  test("t-esc=0 is escaped", () => {
+    const context = new TestContext();
+    const sub = '<span><t t-esc="0"/></span>';
+    const main = `<div><t t-call="sub"><p>escaped</p></t></div>`;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    const bdom = context.getTemplate("main")({}, {});
+    const fixture = makeTestFixture();
+    mount(bdom, fixture);
+    expect(fixture.querySelector("span")!.textContent).toBe("<p>escaped</p>");
+  });
+});

tests/qweb/t_foreach.test.ts

@@ -0,0 +1,237 @@
+import { renderToString, snapshotEverything, TestContext } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-foreach
+// -----------------------------------------------------------------------------
+
+describe("t-foreach", () => {
+  test("simple iteration", () => {
+    const template = `<t t-foreach="[3, 2, 1]" t-as="item" t-key="item"><t t-esc="item"/></t>`;
+    expect(renderToString(template)).toBe("321");
+  });
+
+  test("simple iteration with two nodes inside", () => {
+    const template = `
+      <t t-foreach="[3, 2, 1]" t-as="item" t-key="item">
+        <span>a<t t-esc="item"/></span>
+        <span>b<t t-esc="item"/></span>
+      </t>`;
+    const expected =
+      "<span>a3</span><span>b3</span><span>a2</span><span>b2</span><span>a1</span><span>b1</span>";
+    expect(renderToString(template)).toBe(expected);
+  });
+
+  test("simple iteration (in a node)", () => {
+    const template = `
+        <div>
+          <t t-foreach="[3, 2, 1]" t-as="item" t-key="item"><t t-esc="item"/></t>
+        </div>`;
+    expect(renderToString(template)).toBe("<div>321</div>");
+  });
+
+  test("iterate on items", () => {
+    const template = `
+        <div>
+          <t t-foreach="[3, 2, 1]" t-as="item" t-key="item">
+            [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+          </t>
+        </div>`;
+    expect(renderToString(template)).toBe("<div> [0: 3 3]  [1: 2 2]  [2: 1 1] </div>");
+  });
+
+  test("iterate on items (on a element node)", () => {
+    const template = `
+        <div>
+          <span t-foreach="[1, 2]" t-as="item" t-key="item"><t t-esc="item"/></span>
+        </div>`;
+    const expected = `<div><span>1</span><span>2</span></div>`;
+    expect(renderToString(template)).toBe(expected);
+  });
+
+  test("iterate, position", () => {
+    const template = `
+        <div>
+          <t t-foreach="Array(5)" t-as="elem" t-key="elem">
+            -<t t-if="elem_first"> first</t><t t-if="elem_last"> last</t> (<t t-esc="elem_index"/>)
+          </t>
+        </div>`;
+    const expected = `<div> - first (0)  - (1)  - (2)  - (3)  - last (4) </div>`;
+    expect(renderToString(template)).toBe(expected);
+  });
+
+  test("iterate, dict param", () => {
+    const template = `
+        <div>
+          <t t-foreach="value" t-as="item" t-key="item_index">
+            [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+          </t>
+        </div>`;
+    const expected = `<div> [0: a 1]  [1: b 2]  [2: c 3] </div>`;
+    const context = { value: { a: 1, b: 2, c: 3 } };
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("does not pollute the rendering context", () => {
+    const template = `
+        <div>
+          <t t-foreach="[1]" t-as="item" t-key="item"><t t-esc="item"/></t>
+        </div>`;
+    const context = { __owl__: {} };
+    renderToString(template, context);
+    expect(Object.keys(context)).toEqual(["__owl__"]);
+  });
+
+  test("t-foreach in t-foreach", () => {
+    const template = `
+        <div>
+          <t t-foreach="numbers" t-as="number" t-key="number">
+            <t t-foreach="letters" t-as="letter" t-key="letter">
+              [<t t-esc="number"/><t t-esc="letter"/>]
+            </t>
+          </t>
+        </div>`;
+
+    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
+    const expected = "<div> [1a]  [1b]  [2a]  [2b]  [3a]  [3b] </div>";
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("t-call without body in t-foreach in t-foreach", () => {
+    const context = new TestContext();
+    const sub = `
+        <t>
+          <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
+          [<t t-esc="a" />]
+          [<t t-esc="b" />]
+          [<t t-esc="c" />]
+        </t>`;
+
+    const main = `
+        <div>
+          <t t-foreach="numbers" t-as="a" t-key="a">
+            <t t-foreach="letters" t-as="b" t-key="b">
+              <t t-call="sub" />
+            </t>
+            <span t-esc="c"/>
+          </t>
+          <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
+        </div>`;
+
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    const ctx = { numbers: [1, 2, 3], letters: ["a", "b"] };
+    const expected =
+      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>";
+    expect(context.renderToString("main", ctx)).toBe(expected);
+  });
+
+  test("t-call with body in t-foreach in t-foreach", () => {
+    const context = new TestContext();
+    const sub = `
+        <t>
+          [<t t-esc="a" />]
+          [<t t-esc="b" />]
+          [<t t-esc="c" />]
+        </t>`;
+
+    const main = `
+        <div>
+          <t t-foreach="numbers" t-as="a" t-key="a">
+            <t t-foreach="letters" t-as="b"  t-key="b">
+              <t t-call="sub" >
+                <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
+              </t>
+            </t>
+            <span t-esc="c"/>
+          </t>
+          <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
+        </div>`;
+
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    const ctx = { numbers: [1, 2, 3], letters: ["a", "b"] };
+    const expected =
+      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>";
+    expect(context.renderToString("main", ctx)).toBe(expected);
+  });
+
+  test("throws error if invalid loop expression", () => {
+    const test = `<div><t t-foreach="abc" t-as="item" t-key="item"><span t-key="item_index"/></t></div>`;
+    expect(() => renderToString(test)).toThrow("Invalid loop expression");
+  });
+
+  test("warn if no key in some case", () => {
+    const consoleWarn = console.warn;
+    console.warn = jest.fn();
+
+    const template = `
+        <div>
+          <t t-foreach="[1, 2]" t-as="item">
+            <span><t t-esc="item"/></span>
+          </t>
+        </div>`;
+    renderToString(template);
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      `\"Directive t-foreach should always be used with a t-key! (in template: '
+        <div>
+          <t t-foreach=\"[1, 2]\" t-as=\"item\">
+            <span><t t-esc=\"item\"/></span>
+          </t>
+        </div>')\"`
+    );
+    console.warn = consoleWarn;
+  });
+
+  test("t-foreach with t-if inside", () => {
+    const template = `
+        <div>
+          <t t-foreach="elems" t-as="elem" t-key="elem.id">
+            <span t-if="elem.id &lt; 3"><t t-esc="elem.text"/></span>
+          </t>
+        </div>`;
+    const ctx = {
+      elems: [
+        { id: 1, text: "a" },
+        { id: 2, text: "b" },
+        { id: 3, text: "c" },
+      ],
+    };
+    expect(renderToString(template, ctx)).toBe("<div><span>a</span><span>b</span></div>");
+  });
+
+  test("t-foreach with t-if inside (no external node)", () => {
+    const template = `
+          <t t-foreach="elems" t-as="elem" t-key="elem.id">
+            <span t-if="elem.id &lt; 3"><t t-esc="elem.text"/></span>
+          </t>`;
+    const ctx = {
+      elems: [
+        { id: 1, text: "a" },
+        { id: 2, text: "b" },
+        { id: 3, text: "c" },
+      ],
+    };
+    expect(renderToString(template, ctx)).toBe("<span>a</span><span>b</span>");
+  });
+
+  test("with t-memo", () => {
+    const items = [
+      { id: 1, x: 1, y: 1 },
+      { id: 2, x: 1, y: 1 },
+    ];
+    const template = `
+        <div>
+          <p t-foreach="items" t-as="item" t-key="item.id" t-memo="[item.x]">
+            <t t-esc="item.x"/>
+            <t t-esc="item.y"/>
+          </p>
+        </div>`;
+    const expected = `<div><p>11</p><p>11</p></div>`;
+    expect(renderToString(template, { items })).toBe(expected);
+  });
+});

tests/qweb/t_if.test.ts

@@ -0,0 +1,223 @@
+// import { mountBlock } from "../../src/blockdom/block";
+import { mount } from "../../src/blockdom";
+import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-if
+// -----------------------------------------------------------------------------
+
+describe("t-if", () => {
+  test("t-if in a div", () => {
+    const template = `<div><t t-if="condition">ok</t></div>`;
+    expect(renderToString(template, { condition: true })).toBe("<div>ok</div>");
+    expect(renderToString(template, { condition: false })).toBe("<div></div>");
+    expect(renderToString(template, {})).toBe("<div></div>");
+  });
+
+  test("just a t-if", () => {
+    const template = `<t t-if="condition">ok</t>`;
+    expect(renderToString(template, { condition: true })).toBe("ok");
+    expect(renderToString(template, { condition: false })).toBe("");
+  });
+
+  test("a t-if with two inner nodes", () => {
+    const template = `<t t-if="condition"><span>yip</span><div>yip</div></t>`;
+    expect(renderToString(template, { condition: true })).toBe("<span>yip</span><div>yip</div>");
+    expect(renderToString(template, { condition: false })).toBe("");
+  });
+
+  test("div containing a t-if with two inner nodes", () => {
+    const template = `<div><t t-if="condition"><span>yip</span><div>yip</div></t></div>`;
+    expect(renderToString(template, { condition: true })).toBe(
+      "<div><span>yip</span><div>yip</div></div>"
+    );
+    expect(renderToString(template, { condition: false })).toBe("<div></div>");
+  });
+
+  test("two consecutive t-if", () => {
+    const template = `<t t-if="cond1">1</t><t t-if="cond2">2</t>`;
+    expect(renderToString(template, { cond1: true, cond2: true })).toBe("12");
+    expect(renderToString(template, { cond1: false, cond2: true })).toBe("2");
+  });
+
+  test("a t-if next to a div", () => {
+    const template = `<div>foo</div><t t-if="cond">1</t>`;
+    expect(renderToString(template, { cond: true })).toBe("<div>foo</div>1");
+    expect(renderToString(template, { cond: false })).toBe("<div>foo</div>");
+  });
+
+  test("two consecutive t-if in a div", () => {
+    const template = `<div><t t-if="cond1">1</t><t t-if="cond2">2</t></div>`;
+    expect(renderToString(template, { cond1: true, cond2: true })).toBe("<div>12</div>");
+    expect(renderToString(template, { cond1: false, cond2: true })).toBe("<div>2</div>");
+  });
+
+  test("simple t-if/t-else", () => {
+    const template = `<t t-if="condition">1</t><t t-else="">2</t>`;
+    expect(renderToString(template, { condition: true })).toBe("1");
+    expect(renderToString(template, { condition: false })).toBe("2");
+  });
+
+  test("simple t-if/t-else in a div", () => {
+    const template = `<div><t t-if="condition">1</t><t t-else="">2</t></div>`;
+    expect(renderToString(template, { condition: true })).toBe("<div>1</div>");
+    expect(renderToString(template, { condition: false })).toBe("<div>2</div>");
+  });
+
+  test("t-if/t-else with more content", () => {
+    const template = `<t t-if="condition"><t t-if="condition">asf</t></t><t t-else="">coucou</t>`;
+    expect(renderToString(template, { condition: true })).toBe("asf");
+    expect(renderToString(template, { condition: false })).toBe("coucou");
+  });
+
+  test("boolean value condition elif", () => {
+    const template = `
+        <div>
+          <t t-if="color == 'black'">black pearl</t>
+          <t t-elif="color == 'yellow'">yellow submarine</t>
+          <t t-elif="color == 'red'">red is dead</t>
+          <t t-else="">beer</t>
+        </div>`;
+    expect(renderToString(template, { color: "red" })).toBe("<div>red is dead</div>");
+  });
+
+  test("boolean value condition elif (no outside node)", () => {
+    const template = `
+          <t t-if="color == 'black'">black pearl</t>
+          <t t-elif="color == 'yellow'">yellow submarine</t>
+          <t t-elif="color == 'red'">red is dead</t>
+          <t t-else="">beer</t>`;
+    expect(renderToString(template, { color: "red" })).toBe("red is dead");
+  });
+
+  test("boolean value condition else", () => {
+    const template = `
+        <div>
+          <span>begin</span>
+          <t t-if="condition">ok</t>
+          <t t-else="">ok-else</t>
+          <span>end</span>
+        </div>`;
+    expect(renderToString(template, { condition: true })).toBe(
+      "<div><span>begin</span>ok<span>end</span></div>"
+    );
+  });
+
+  test("boolean value condition false else", () => {
+    const template = `
+        <div><span>begin</span><t t-if="condition">fail</t>
+        <t t-else="">fail-else</t><span>end</span></div>`;
+    expect(renderToString(template, { condition: false })).toBe(
+      "<div><span>begin</span>fail-else<span>end</span></div>"
+    );
+  });
+
+  test("can use some boolean operators in expressions", () => {
+    const template = `
+        <div>
+          <t t-if="cond1 and cond2">and</t>
+          <t t-if="cond1 and cond3">nope</t>
+          <t t-if="cond1 or cond3">or</t>
+          <t t-if="cond3 or cond4">nope</t>
+          <t t-if="m gt 3">mgt</t>
+          <t t-if="n gt 3">ngt</t>
+          <t t-if="m lt 3">mlt</t>
+          <t t-if="n lt 3">nlt</t>
+        </div>`;
+    const context = {
+      cond1: true,
+      cond2: true,
+      cond3: false,
+      cond4: false,
+      m: 5,
+      n: 2,
+    };
+    expect(renderToString(template, context)).toBe("<div>andormgtnlt</div>");
+  });
+
+  test("t-esc with t-if", () => {
+    const template = `<div><t t-if="true" t-esc="'x'"/></div>`;
+    expect(renderToString(template)).toBe("<div>x</div>");
+  });
+
+  test("t-esc with t-elif", () => {
+    const template = `<div><t t-if="false">abc</t><t t-else="" t-esc="'x'"/></div>`;
+    expect(renderToString(template)).toBe("<div>x</div>");
+  });
+
+  test("t-set, then t-if", () => {
+    const template = `
+        <div>
+          <t t-set="title" t-value="'test'"/>
+          <t t-if="title"><t t-esc="title"/></t>
+        </div>`;
+    expect(renderToString(template)).toBe("<div>test</div>");
+  });
+
+  test("t-set, then t-if, part 2", () => {
+    const template = `
+        <div>
+            <t t-set="y" t-value="true"/>
+            <t t-set="x" t-value="y"/>
+            <span t-if="x">COUCOU</span>
+        </div>`;
+    expect(renderToString(template)).toBe("<div><span>COUCOU</span></div>");
+  });
+
+  test("t-set, then t-if, part 3", () => {
+    const template = `
+        <div>
+          <t t-set="y" t-value="false"/>
+          <t t-set="x" t-value="y"/>
+          <span t-if="x">AAA</span>
+          <span t-elif="!x">BBB</span>
+        </div>`;
+    expect(renderToString(template)).toBe("<div><span>BBB</span></div>");
+  });
+
+  test("t-if in a t-if", () => {
+    const template = `<div><t t-if="cond1"><span>1<t t-if="cond2">2</t></span></t></div>`;
+    expect(renderToString(template, { cond1: true, cond2: true })).toBe(
+      "<div><span>12</span></div>"
+    );
+    expect(renderToString(template, { cond1: true, cond2: false })).toBe(
+      "<div><span>1</span></div>"
+    );
+    expect(renderToString(template, { cond1: false, cond2: true })).toBe("<div></div>");
+    expect(renderToString(template, { cond1: false, cond2: false })).toBe("<div></div>");
+  });
+
+  test("t-if and t-else with two nodes", () => {
+    const template = `<t t-if="condition">1</t><t t-else=""><span>a</span><span>b</span></t>`;
+    expect(renderToString(template, { condition: true })).toBe("1");
+    expect(renderToString(template, { condition: false })).toBe("<span>a</span><span>b</span>");
+  });
+
+  test("dynamic content after t-if with two children nodes", () => {
+    const template = `<div><t t-if="condition"><p>1</p><p>2</p></t><t t-esc="text"/></div>`;
+
+    // need to do it with bdom to go through the update path
+    const bdom = renderToBdom(template, { condition: true, text: "owl" });
+    const fixture = makeTestFixture();
+    mount(bdom, fixture);
+    expect(fixture.innerHTML).toBe("<div><p>1</p><p>2</p>owl</div>");
+    const bdom2 = renderToBdom(template, { condition: false, text: "halloween" });
+    bdom.patch(bdom2, true);
+    expect(fixture.innerHTML).toBe("<div>halloween</div>");
+  });
+
+  test("two t-ifs next to each other", () => {
+    const template = `<div><span t-if="condition"><t t-esc="text"/></span><t t-if="condition"><p>1</p><p>2</p></t></div>`;
+
+    // need to do it with bdom to go through the update path
+    const bdom = renderToBdom(template, { condition: true, text: "owl" });
+    const fixture = makeTestFixture();
+    mount(bdom, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>owl</span><p>1</p><p>2</p></div>");
+    const bdom2 = renderToBdom(template, { condition: false, text: "halloween" });
+    bdom.patch(bdom2, true);
+    expect(fixture.innerHTML).toBe("<div></div>");
+  });
+});

tests/qweb/t_raw.test.ts

@@ -0,0 +1,86 @@
+import { renderToString, snapshotEverything, TestContext } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-raw
+// -----------------------------------------------------------------------------
+
+describe("t-raw", () => {
+  test("literal", () => {
+    const template = `<span><t t-raw="'ok'"/></span>`;
+    expect(renderToString(template)).toBe("<span>ok</span>");
+  });
+
+  test("literal, no outside html element", () => {
+    const template = `<t t-raw="'ok'"/>`;
+    expect(renderToString(template)).toBe("ok");
+  });
+
+  test("variable", () => {
+    const template = `<span><t t-raw="var"/></span>`;
+    expect(renderToString(template, { var: "ok" })).toBe("<span>ok</span>");
+  });
+
+  test("not escaping", () => {
+    const template = `<div><t t-raw="var"/></div>`;
+    expect(renderToString(template, { var: "<ok></ok>" })).toBe("<div><ok></ok></div>");
+  });
+
+  test("t-raw and another sibling node", () => {
+    const template = `<span><span>hello</span><t t-raw="var"/></span>`;
+    expect(renderToString(template, { var: "<ok>world</ok>" })).toBe(
+      "<span><span>hello</span><ok>world</ok></span>"
+    );
+  });
+
+  test("t-raw with comment", () => {
+    const template = `<span><t t-raw="var"/></span>`;
+    expect(renderToString(template, { var: "<p>text<!-- top secret --></p>" })).toBe(
+      "<span><p>text<!-- top secret --></p></span>"
+    );
+  });
+
+  test("t-raw on a node with a body, as a default", () => {
+    const template = `<span t-raw="var">nope</span>`;
+    expect(renderToString(template)).toBe("<span>nope</span>");
+  });
+
+  test("t-raw with a <t/> in body", () => {
+    const template = `<t t-raw="var"><t></t></t>`;
+    expect(renderToString(template, { var: "coucou" })).toBe("coucou");
+  });
+
+  test("t-raw with just a t-set t-value in body", () => {
+    const template = `<t t-raw="var"><t t-set="a" t-value="1" /></t>`;
+    expect(renderToString(template, { var: "coucou" })).toBe("coucou");
+  });
+
+  test("t-raw on a node with a dom node in body, as a default", () => {
+    const template = `<span t-raw="var"><div>nope</div></span>`;
+    expect(renderToString(template)).toBe("<span><div>nope</div></span>");
+  });
+
+  test("multiple calls to t-raw", () => {
+    const context = new TestContext();
+    const sub = `
+        <div>
+          <t t-raw="0"/>
+          <div>Greeter</div>
+          <t t-raw="0"/>
+        </div>`;
+
+    const main = `
+        <div>
+          <t t-call="sub">
+            <span>coucou</span>
+          </t>
+        </div>`;
+
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+    const expected =
+      "<div><div><span>coucou</span><div>Greeter</div><span>coucou</span></div></div>";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+});

tests/qweb/t_ref.test.ts

@@ -0,0 +1,113 @@
+import { TemplateSet } from "../../src/qweb/template_helpers";
+import { mount } from "../../src/blockdom";
+import { renderToBdom, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-ref
+// -----------------------------------------------------------------------------
+
+describe("t-ref", () => {
+  test("can get a ref on a node", () => {
+    const template = `<div><span t-ref="myspan"/></div>`;
+    const refs: any = {};
+    const bdom = renderToBdom(template, { __owl__: { refs } });
+    expect(refs).toEqual({});
+    mount(bdom, document.createElement("div"));
+    expect(refs.myspan.tagName).toBe("SPAN");
+  });
+
+  test("can get a dynamic ref on a node", () => {
+    const template = `<div><span t-ref="myspan{{id}}"/></div>`;
+    const refs: any = {};
+    const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
+    expect(refs).toEqual({});
+    mount(bdom, document.createElement("div"));
+    expect(refs.myspan3.tagName).toBe("SPAN");
+  });
+
+  test("refs in a loop", () => {
+    const template = `<div>
+        <t t-foreach="items" t-as="item" t-key="item">
+          <div t-ref="{{item}}" t-key="item"><t t-esc="item"/></div>
+        </t>
+      </div>`;
+    const refs: any = {};
+    const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: { refs } });
+    expect(refs).toEqual({});
+    mount(bdom, document.createElement("div"));
+    expect(Object.keys(refs)).toEqual(["1", "2", "3"]);
+  });
+
+  test("ref in a t-if", () => {
+    const template = `
+      <div>
+        <t t-if="condition">
+          <span t-ref="name"/>
+        </t>
+      </div>`;
+
+    const refs: any = {};
+    // false
+    const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
+    expect(refs).toEqual({});
+    mount(bdom, document.createElement("div"));
+    expect(refs).toEqual({});
+
+    // true now
+    const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
+    bdom.patch(bdom2, true);
+    expect(refs.name.tagName).toBe("SPAN");
+
+    // false again
+    const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
+    bdom.patch(bdom3, true);
+    expect(refs).toEqual({ name: null });
+  });
+
+  test("two refs, one in a t-if", () => {
+    const template = `
+      <div>
+        <t t-if="condition">
+          <span t-ref="name"/>
+        </t>
+        <p t-ref="p"/>
+      </div>`;
+
+    const refs: any = {};
+
+    // false
+    const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
+    expect(Object.keys(refs)).toEqual([]);
+    mount(bdom, document.createElement("div"));
+    expect(Object.keys(refs)).toEqual(["p"]);
+
+    // true now
+    const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
+    bdom.patch(bdom2, true);
+    expect(Object.keys(refs)).toEqual(["p", "name"]);
+
+    // false again
+    const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
+    bdom.patch(bdom3, true);
+    expect(Object.keys(refs)).toEqual(["p", "name"]);
+    expect(refs.name).toBeNull();
+  });
+
+  test("ref in a t-call", () => {
+    const main = `<div><t t-call="sub"/></div>`;
+    const sub = `<div>1<span t-ref="name"/>2</div>`;
+
+    const refs: any = {};
+
+    const app = new TemplateSet();
+    app.addTemplate("main", main);
+    app.addTemplate("sub", sub);
+
+    const bdom = app.getTemplate("main")({ __owl__: { refs } }, {});
+    mount(bdom, document.createElement("div"));
+
+    expect(refs.name.tagName).toBe("SPAN");
+  });
+});

tests/qweb/t_set.test.ts

@@ -0,0 +1,182 @@
+import { renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-set
+// -----------------------------------------------------------------------------
+
+describe("t-set", () => {
+  test("set from attribute literal", () => {
+    const template = `<div><t t-set="value" t-value="'ok'"/><t t-esc="value"/></div>`;
+    expect(renderToString(template)).toBe("<div>ok</div>");
+  });
+
+  test("set from attribute literal (no outside div)", () => {
+    const template = `<t><t t-set="value" t-value="'ok'"/><t t-esc="value"/></t>`;
+    expect(renderToString(template)).toBe("ok");
+  });
+
+  test("t-set and t-if", () => {
+    const template = `
+        <div>
+          <t t-set="v" t-value="value"/>
+          <t t-if="v === 'ok'">grimbergen</t>
+        </div>`;
+    expect(renderToString(template, { value: "ok" })).toBe("<div>grimbergen</div>");
+  });
+
+  test("set from body literal", () => {
+    const template = `<t><t t-set="value">ok</t><t t-esc="value"/></t>`;
+    expect(renderToString(template)).toBe("ok");
+  });
+
+  test("set from attribute lookup", () => {
+    const template = `<div><t t-set="stuff" t-value="value"/><t t-esc="stuff"/></div>`;
+    expect(renderToString(template, { value: "ok" })).toBe("<div>ok</div>");
+  });
+
+  test("t-set evaluates an expression only once", () => {
+    const template = `
+        <div >
+          <t t-set="v" t-value="value + ' artois'"/>
+          <t t-esc="v"/>
+          <t t-esc="v"/>
+        </div>`;
+    expect(renderToString(template, { value: "stella" })).toBe(
+      "<div>stella artoisstella artois</div>"
+    );
+  });
+
+  test("set from body lookup", () => {
+    const template = `<div><t t-set="stuff"><t t-esc="value"/></t><t t-esc="stuff"/></div>`;
+    expect(renderToString(template, { value: "ok" })).toBe("<div>ok</div>");
+  });
+
+  test("set from empty body", () => {
+    const template = `<div><t t-set="stuff"/><t t-esc="stuff"/></div>`;
+    expect(renderToString(template)).toBe("<div></div>");
+  });
+
+  test("value priority", () => {
+    const template = `<div><t t-set="value" t-value="1">2</t><t t-esc="value"/></div>`;
+    expect(renderToString(template)).toBe("<div>1</div>");
+  });
+
+  test("value priority (with non text body", () => {
+    const template = `<div><t t-set="value" t-value="1"><span>2</span></t><t t-esc="value"/></div>`;
+    expect(renderToString(template)).toBe("<div>1</div>");
+  });
+
+  test("evaluate value expression", () => {
+    const template = `<div><t t-set="value" t-value="1 + 2"/><t t-esc="value"/></div>`;
+    expect(renderToString(template)).toBe("<div>3</div>");
+  });
+
+  test("t-set should reuse variable if possible", () => {
+    const template = `
+        <div>
+          <t t-set="v" t-value="1"/>
+          <div t-foreach="list" t-as="elem" t-key="elem_index">
+              <span>v<t t-esc="v"/></span>
+              <t t-set="v" t-value="elem"/>
+          </div>
+        </div>`;
+    const expected = "<div><div><span>v1</span></div><div><span>va</span></div></div>";
+    expect(renderToString(template, { list: ["a", "b"] })).toBe(expected);
+  });
+
+  test("t-set with content and sub t-esc", () => {
+    const template = `
+        <div>
+          <t t-set="setvar"><t t-esc="beep"/> boop</t>
+          <t t-esc="setvar"/>
+        </div>`;
+    expect(renderToString(template, { beep: "beep" })).toBe("<div>beep boop</div>");
+  });
+
+  test("evaluate value expression, part 2", () => {
+    const template = `<div><t t-set="value" t-value="somevariable + 2"/><t t-esc="value"/></div>`;
+    expect(renderToString(template, { somevariable: 43 })).toBe("<div>45</div>");
+  });
+
+  test("t-set, t-if, and mix of expression/body lookup, 1", () => {
+    const template = `
+        <div>
+          <t t-if="flag" t-set="ourvar">1</t>
+          <t t-else="" t-set="ourvar" t-value="0"></t>
+          <t t-esc="ourvar"/>
+        </div>`;
+
+    expect(renderToString(template, { flag: true })).toBe("<div>1</div>");
+    expect(renderToString(template, { flag: false })).toBe("<div>0</div>");
+  });
+
+  test("t-set, t-if, and mix of expression/body lookup, 2", () => {
+    const template = `
+        <div>
+          <t t-if="flag" t-set="ourvar" t-value="1"></t>
+          <t t-else="" t-set="ourvar">0</t>
+          <t t-esc="ourvar"/>
+        </div>`;
+
+    expect(renderToString(template, { flag: true })).toBe("<div>1</div>");
+    expect(renderToString(template, { flag: false })).toBe("<div>0</div>");
+  });
+
+  test("t-set, t-if, and mix of expression/body lookup, 3", () => {
+    const template = `
+          <t t-if="flag" t-set="ourvar" t-value="1"></t>
+          <t t-else="" t-set="ourvar">0</t>
+          <t t-esc="ourvar"/>`;
+
+    expect(renderToString(template, { flag: true })).toBe("1");
+    expect(renderToString(template, { flag: false })).toBe("0");
+  });
+
+  test("t-set body is evaluated immediately", () => {
+    const template = `
+        <div>
+          <t t-set="v1" t-value="'before'"/>
+          <t t-set="v2">
+            <span><t t-esc="v1"/></span>
+          </t>
+          <t t-set="v1" t-value="'after'"/>
+          <t t-raw="v2"/>
+        </div>`;
+
+    expect(renderToString(template)).toBe("<div><span>before</span></div>");
+  });
+
+  test("t-set with t-value (falsy) and body", () => {
+    const template = `
+        <div>
+          <t t-set="v3" t-value="false"/>
+          <t t-set="v1" t-value="'before'"/>
+          <t t-set="v2" t-value="v3">
+            <span><t t-esc="v1"/></span>
+          </t>
+          <t t-set="v1" t-value="'after'"/>
+          <t t-set="v3" t-value="true"/>
+          <t t-raw="v2"/>
+        </div>`;
+
+    expect(renderToString(template)).toBe("<div><span>before</span></div>");
+  });
+
+  test("t-set with t-value (truthy) and body", () => {
+    const template = `
+        <div>
+          <t t-set="v3" t-value="'Truthy'"/>
+          <t t-set="v1" t-value="'before'"/>
+          <t t-set="v2" t-value="v3">
+            <span><t t-esc="v1"/></span>
+          </t>
+          <t t-set="v1" t-value="'after'"/>
+          <t t-set="v3" t-value="false"/>
+          <t t-raw="v2"/>
+        </div>`;
+
+    expect(renderToString(template)).toBe("<div>Truthy</div>");
+  });
+});

tests/qweb/validation.test.ts

@@ -0,0 +1,39 @@
+import { TemplateSet } from "../../src/qweb/template_helpers";
+import { renderToString, TestContext, compile } from "../helpers";
+
+// -----------------------------------------------------------------------------
+// basic validation
+// -----------------------------------------------------------------------------
+
+describe("basic validation", () => {
+  test("error if no template with given name", () => {
+    const context = new TemplateSet();
+    expect(() => context.getTemplate("invalidname")).toThrow("Missing template");
+  });
+
+  test("cannot add twice the same template", () => {
+    const context = new TemplateSet();
+    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
+      "already defined"
+    );
+    expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
+  });
+
+  test("invalid xml", () => {
+    const template = "<div>";
+    expect(() => compile(template)).toThrow("Invalid XML in template");
+  });
+
+  test("missing template in template set", () => {
+    const context = new TestContext();
+    const template = `<t t-call="othertemplate" />`;
+
+    context.addTemplate("template", template);
+    expect(() => context.renderToString("template")).toThrowError("Missing");
+  });
+
+  test("error when unknown directive", () => {
+    const template = `<div t-best-beer="rochefort 10">test</div>`;
+    expect(() => renderToString(template)).toThrow("Unknown QWeb directive: 't-best-beer'");
+  });
+});

tests/qweb/white_space.test.ts

@@ -0,0 +1,42 @@
+import { renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// white space
+// -----------------------------------------------------------------------------
+
+describe("white space handling", () => {
+  test("white space only text nodes are condensed into a single space", () => {
+    const template = `<div>  </div>`;
+    expect(renderToString(template)).toBe("<div> </div>");
+  });
+
+  test("consecutives whitespaces are condensed into a single space", () => {
+    const template = `<div>  abc  </div>`;
+    expect(renderToString(template)).toBe("<div> abc </div>");
+  });
+
+  test("whitespace only text nodes with newlines are removed", () => {
+    const template = `<div>
+          <span>abc</span>
+        </div>`;
+
+    expect(renderToString(template)).toBe("<div><span>abc</span></div>");
+  });
+
+  test("nothing is done in pre tags", () => {
+    const template1 = `<pre>   </pre>`;
+    expect(renderToString(template1)).toBe(template1);
+
+    const template2 = `<pre>
+          some text
+        </pre>`;
+    expect(renderToString(template2)).toBe(template2);
+
+    const template3 = `<pre>
+          
+        </pre>`;
+    expect(renderToString(template3)).toBe(template3);
+  });
+});