[REF] compiler: rename qweb/ into compiler/

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

@@ -0,0 +1,712 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 select 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties textarea 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<textarea 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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/compiler/__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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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/compiler/__snapshots__/error_handling.test.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`error handling cannot add twice the same template 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

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

@@ -0,0 +1,579 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [v1, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [()=>v1(5), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['doSomething'];
+    let d1 = [()=>v1({}), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['doSomething'];
+    let d1 = [()=>v1({}), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`action\`] = v_block2[i1];
+      ctx[\`action_index\`] = i1;
+      let key1 = ctx['action_index'];
+      const v1 = ctx['activate'];
+      const v2 = ctx['action'];
+      let d1 = [()=>v1(v2), ctx];
+      c_block2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [()=>v1({val:5}), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['handleClick'];
+    let d1 = [v1, ctx];
+    const v2 = ctx['handleDblClick'];
+    let d2 = [v2, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [v1, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
+      let key1 = ctx['value'];
+      const v1 = ctx['add'];
+      let d1 = [v1, ctx];
+      c_block1[i1] = withKey(block2([d1]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [v1, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_2.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [v1, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value_first\`] = i1 === 0;
+      ctx[\`value_last\`] = i1 === v_block1.length - 1;
+      ctx[\`value_index\`] = i1;
+      ctx[\`value_value\`] = k_block1[i1];
+      let key1 = ctx['value'];
+      c_block1[i1] = withKey(callTemplate_2.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let d1 = [v1, ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['divClicked'];
+    let d1 = [v1, ctx];
+    const v2 = ctx['btnClicked'];
+    let d2 = [v2, ctx];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on combined 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClick'];
+    let d1 = [v1, ctx];
+    let d2 = ctx['text'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on combined with 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-child-0/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClick'];
+    let d1 = [v1, ctx];
+    let b2 = html(ctx['html']);
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onCapture'];
+    let d1 = [\\"capture\\", v1, ctx];
+    const v2 = ctx['doSomething'];
+    let d2 = [v2, ctx];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"prevent\\", , ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClick'];
+    let d1 = [\\"prevent\\",\\"self\\", v1, ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClickPrevented'];
+    let d1 = [\\"prevent\\", v1, ctx];
+    const v2 = ctx['onClickStopped'];
+    let d2 = [\\"stop\\", v2, ctx];
+    const v3 = ctx['onClickPreventedAndStopped'];
+    let d3 = [\\"prevent\\",\\"stop\\", v3, ctx];
+    return block1([d1, d2, d3]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent modifier 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`project\`] = v_block2[i1];
+      let key1 = ctx['project'];
+      const v1 = ctx['onEdit'];
+      const v2 = ctx['project'];
+      let d1 = [\\"prevent\\", ev=>v1(v2.id,ev), ctx];
+      let d2 = ctx['project'].name;
+      c_block2[i1] = withKey(block3([d1, d2]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClick'];
+    let d1 = [\\"self\\",\\"prevent\\", v1, ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['onClick'];
+    let d1 = [v1, ctx];
+    const v2 = ctx['onClickSelf'];
+    let d2 = [\\"self\\", v2, ctx];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['divClicked'];
+    let d1 = [\\"synthetic\\", v1, ctx];
+    const v2 = ctx['btnClicked'];
+    let d2 = [\\"synthetic\\", v2, ctx];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = [()=>v1.incrementCounter(2), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = [()=>v1.counter++, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let d1 = [()=>v1.flag=!v1.flag, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 = [()=>v1.n=v2(3), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['update'];
+    let d1 = [v1, ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['value'];
+    let d1 = [()=>this.update(v1), ctx];
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,338 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block4, v_block4, l_block4, c_block4] = 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 < l_block4; i1++) {
+      ctx[\`slot\`] = v_block4[i1];
+      let key1 = ctx['slot'].id;
+      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    ctx = ctx.__proto__;
+    b4 = list(c_block4);
+    ctx = Object.create(ctx);
+    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);
+    for (let i1 = 0; i1 < l_block6; i1++) {
+      ctx[\`x\`] = v_block6[i1];
+      let key1 = ctx['x'];
+      c_block6[i1] = withKey(block7(), key1);
+    }
+    ctx = ctx.__proto__;
+    b6 = list(c_block6);
+    ctx = Object.create(ctx);
+    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);
+    for (let i1 = 0; i1 < l_block8; i1++) {
+      ctx[\`commit_link\`] = v_block8[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;
+      c_block8[i1] = withKey(block9([d6, d7, d8, d9, d10], [b10, b11, b12, b13]), key1);
+    }
+    b8 = list(c_block8);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`value\`] = v_block2[i1];
+      ctx[\`value_first\`] = i1 === 0;
+      ctx[\`value_last\`] = i1 === v_block2.length - 1;
+      ctx[\`value_index\`] = i1;
+      ctx[\`value_value\`] = k_block2[i1];
+      let key1 = ctx['value'];
+      let d1 = ctx['value'];
+      let b4 = block4([d1]);
+      ctx = Object.create(ctx);
+      ctx[isBoundary] = 1;
+      ctx = Object.create(ctx);
+      ctx[isBoundary] = 1;
+      setContextValue(ctx, \\"foo\\", 'aaa');
+      let b6 = callTemplate_2.call(this, ctx, node, key + \`__1__\${key1}\`);
+      ctx = ctx.__proto__;
+      let b7 = callTemplate_4.call(this, ctx, node, key + \`__3__\${key1}\`);
+      setContextValue(ctx, \\"foo\\", 'bbb');
+      let b8 = callTemplate_6.call(this, ctx, node, key + \`__5__\${key1}\`);
+      let b5 = multi([b6, b7, b8]);
+      ctx[zero] = b5;
+      let b9 = callTemplate_8.call(this, ctx, node, key + \`__7__\${key1}\`);
+      ctx = ctx.__proto__;
+      c_block2[i1] = withKey(multi([b4, b9]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    let b10 = callTemplate_10.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_14 = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`project\`] = v_block2[i1];
+      let key1 = ctx['project'].id;
+      const v1 = ctx['selectProject'];
+      const v2 = ctx['project'];
+      let d3 = [v1(v2), ctx];
+      let d4 = ctx['project'].name;
+      c_block2[i1] = withKey(block3([d3, d4]), key1);
+    }
+    ctx = ctx.__proto__;
+    b2 = list(c_block2);
+    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]);
+    }
+    const v3 = ctx['toggleSettingsMenu'];
+    let d11 = [v3, ctx];
+    const v4 = ctx['toggleMore'];
+    let d12 = [v4, ctx];
+    if (ctx['categories']&&ctx['categories'].length>1) {
+      ctx = Object.create(ctx);
+      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);
+      for (let i1 = 0; i1 < l_block15; i1++) {
+        ctx[\`category\`] = v_block15[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;
+        c_block15[i1] = withKey(block16([d13, d14, d15]), key1);
+      }
+      ctx = ctx.__proto__;
+      let b15 = list(c_block15);
+      b14 = block14([], [b15]);
+    }
+    let d16 = ctx['search'].value;
+    const v5 = ctx['updateFilter'];
+    let d17 = [v5, ctx];
+    const v6 = ctx['updateFilter'];
+    let d18 = [v6, ctx];
+    let d19 = (el) => refs[\`search_input\`] = el;
+    const v7 = ctx['clearSearch'];
+    let d20 = [v7, ctx];
+    let d21 = (el) => refs[\`settings_menu\`] = el;
+    if (ctx['triggers']) {
+      ctx = Object.create(ctx);
+      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);
+      for (let i1 = 0; i1 < l_block18; i1++) {
+        ctx[\`trigger\`] = v_block18[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;
+          const v8 = ctx['updateTriggerDisplay'];
+          let d26 = [v8, ctx];
+          let d27 = \`trigger_\${ctx['trigger'].id}\`;
+          let d28 = ctx['trigger'].name;
+          b20 = block20([d22, d23, d24, d25, d26, d27, d28]);
+        }
+        c_block18[i1] = withKey(multi([b20]), key1);
+      }
+      ctx = ctx.__proto__;
+      let b18 = list(c_block18);
+      const v9 = ctx['triggerAll'];
+      let d29 = [v9, ctx];
+      const v10 = ctx['triggerNone'];
+      let d30 = [v10, ctx];
+      const v11 = ctx['triggerDefault'];
+      let d31 = [v11, ctx];
+      const v12 = ctx['toggleSettingsMenu'];
+      let d32 = [v12, ctx];
+      let b21 = block21([d29, d30, d31, d32]);
+      b17 = multi([b18, b21]);
+    }
+    if (ctx['load_infos']) {
+      b22 = callTemplate_14.call(this, ctx, node, key + \`__13\`);
+    }
+    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 + \`__15\`, node, ctx);
+      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__16\`, 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/compiler/__snapshots__/parser.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`qweb parser simple t-foreach expression, t-key mandatory 1`] = `"\\"Directive t-foreach should always be used with a t-key!\\" (expression: t-foreach=\\"list\\" t-as=\\"item\\")"`;

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`memory t-foreach does not leak stuff in global scope 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item_index\`] = i1;
+      let key1 = ctx['item_index'];
+      c_block2[i1] = withKey(text(ctx['item']), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,376 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static inline template string in 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`text\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static inline template string with content in 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"v\\", 1);
+    return text(\`text\${ctx['v']}\`);
+  }
+}"
+`;
+
+exports[`simple templates, mostly static inline template string with variable in context 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`text \${ctx['v']}\`);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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/compiler/__snapshots__/t_debug_log.test.ts.snap

@@ -0,0 +1,71 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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-debug on sub template 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<p>coucou</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    debugger;
+    return block1();
+  }
+}"
+`;
+
+exports[`debugging t-debug on sub template 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"foo\\", 42);
+    console.log(ctx['foo']+3);
+    return block1();
+  }
+}"
+`;

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

@@ -0,0 +1,202 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1;
+    let b2 = block2();
+    ctx[zero] = b2;
+    let b3 = callTemplate_2.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['var'];
+    return block1([d1]);
+  }
+}"
+`;

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

@@ -0,0 +1,527 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      let key1 = ctx['item'];
+      c_block2[i1] = withKey(text(ctx['item']), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      let key1 = ctx['item'];
+      let d1 = ctx['item'];
+      c_block2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block2[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(\`] \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block2[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(\`] \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem_first\`] = i1 === 0;
+      ctx[\`elem_last\`] = i1 === v_block2.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(\`) \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      let key1 = ctx['item'];
+      c_block2[i1] = withKey(text(ctx['item']), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      let key1 = ctx['item'];
+      c_block1[i1] = withKey(text(ctx['item']), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      let key1 = ctx['item'];
+      let d1 = ctx['item'];
+      let b3 = block3([d1]);
+      let d2 = ctx['item'];
+      let b4 = block4([d2]);
+      c_block1[i1] = withKey(multi([b3, b4]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a_first\`] = i1 === 0;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_index\`] = i1;
+      ctx[\`a_value\`] = k_block2[i1];
+      let key1 = ctx['a'];
+      ctx = Object.create(ctx);
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l_block4; i2++) {
+        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b_first\`] = i2 === 0;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_index\`] = i2;
+        ctx[\`b_value\`] = k_block4[i2];
+        let key2 = ctx['b'];
+        ctx = Object.create(ctx);
+        ctx[isBoundary] = 1;
+        setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
+        c_block4[i2] = withKey(callTemplate_2.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        ctx = ctx.__proto__;
+      }
+      ctx = ctx.__proto__;
+      let b4 = list(c_block4);
+      let d1 = ctx['c'];
+      let b6 = block6([d1]);
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a_first\`] = i1 === 0;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_index\`] = i1;
+      ctx[\`a_value\`] = k_block2[i1];
+      let key1 = ctx['a'];
+      ctx = Object.create(ctx);
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l_block4; i2++) {
+        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b_first\`] = i2 === 0;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_index\`] = i2;
+        ctx[\`b_value\`] = k_block4[i2];
+        let key2 = ctx['b'];
+        c_block4[i2] = withKey(callTemplate_2.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+      }
+      ctx = ctx.__proto__;
+      let b4 = list(c_block4);
+      let d1 = ctx['c'];
+      let b6 = block6([d1]);
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`number\`] = v_block2[i1];
+      let key1 = ctx['number'];
+      ctx = Object.create(ctx);
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);
+      for (let i2 = 0; i2 < l_block3; i2++) {
+        ctx[\`letter\`] = v_block3[i2];
+        let key2 = ctx['letter'];
+        let b5 = text(\` [\`);
+        let b6 = text(ctx['number']);
+        let b7 = text(ctx['letter']);
+        let b8 = text(\`] \`);
+        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
+      }
+      ctx = ctx.__proto__;
+      c_block2[i1] = withKey(list(c_block3), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
+      let key1 = ctx['elem'].id;
+      let b3;
+      if (ctx['elem'].id<3) {
+        let d1 = ctx['elem'].text;
+        b3 = block3([d1]);
+      }
+      c_block1[i1] = withKey(multi([b3]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
+      let key1 = ctx['elem'].id;
+      let b4;
+      if (ctx['elem'].id<3) {
+        let d1 = ctx['elem'].text;
+        b4 = block4([d1]);
+      }
+      c_block2[i1] = withKey(multi([b4]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-foreach t-key on 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`thing\`] = v_block2[i1];
+      let key1 = ctx['thing'];
+      c_block2[i1] = withKey(block3(), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['abc']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item_index\`] = i1;
+      let key1 = ctx['item'];
+      const tKey_1 = ctx['item_index'];
+      c_block2[i1] = withKey(block3(), tKey_1 + key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      let key1 = ctx['item'].id;
+      let memo1 = [ctx['item'].x]
+      let vnode1 = cache[key1];
+      if (vnode1) {
+        if (shallowEqual(vnode1.memo, memo1)) {
+          c_block2[i1] = vnode1;
+          nextCache[key1] = vnode1;
+          continue;
+        }
+      }
+      let d1 = ctx['item'].x;
+      let d2 = ctx['item'].y;
+      c_block2[i1] = withKey(block3([d1, d2]), key1);
+      nextCache[key1] = assign(c_block2[i1], {memo: memo1});
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,542 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 boolean value condition missing 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['condition']) {
+      b2 = text(\`fail\`);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let b2;
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    let b2;
+    setContextValue(ctx, \\"y\\", true);
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    let b2,b3;
+    setContextValue(ctx, \\"y\\", false);
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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/compiler/__snapshots__/t_key.test.ts.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-key can use t-key directive 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['beer'].id;
+    let d1 = ctx['beer'].name;
+    return toggler(tKey_1, block1([d1]));
+  }
+}"
+`;
+
+exports[`t-key can use t-key directive on a node 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['beer'].id;
+    let d1 = ctx['beer'].name;
+    return toggler(tKey_1, block1([d1]));
+  }
+}"
+`;
+
+exports[`t-key can use t-key directive on a node as a function 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['getKey'](ctx['beer']);
+    let d1 = ctx['beer'].name;
+    return toggler(tKey_1, block1([d1]));
+  }
+}"
+`;
+
+exports[`t-key t-key directive in a list 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block3 = createBlock(\`<li><block-text-0/></li>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['beers']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`beer\`] = v_block2[i1];
+      let key1 = ctx['beer'].id;
+      let d1 = ctx['beer'].name;
+      c_block2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,182 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1;
+    let b2 = block2();
+    ctx[zero] = b2;
+    let b3 = callTemplate_2.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = html(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,137 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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 [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
+      let key1 = ctx['item'];
+      const tKey_1 = ctx['item'];
+      const v2 = ctx['item'];
+      let d1 = (el) => refs[\`\${v2}\`] = el;
+      let d2 = ctx['item'];
+      c_block2[i1] = withKey(block3([d1, d2]), tKey_1 + key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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/compiler/__snapshots__/t_set.test.ts.snap

@@ -0,0 +1,598 @@
+// 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let b2;
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    setContextValue(ctx, \\"v1\\", 'before');
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = b2;
+    setContextValue(ctx, \\"v1\\", 'after');
+    let b3 = html(ctx['v2']);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set can't alter from within callee 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let d1 = ctx['iter'];
+    setContextValue(ctx, \\"iter\\", 'called');
+    let d2 = ctx['iter'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-set t-set can't alter from within callee 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"iter\\", 'source');
+    let d1 = ctx['iter'];
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    let d2 = ctx['iter'];
+    return block1([d1, d2], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set can't alter in t-call body 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let d1 = ctx['iter'];
+    setContextValue(ctx, \\"iter\\", 'called');
+    let d2 = ctx['iter'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-set t-set can't alter in t-call body 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"iter\\", 'source');
+    let d1 = ctx['iter'];
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    setContextValue(ctx, \\"iter\\", 'inCall');
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    ctx = ctx.__proto__;
+    let d2 = ctx['iter'];
+    return block1([d1, d2], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set does not modify render context existing key values 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"value\\", 35);
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"v\\", ctx['value']+' artois');
+    let d1 = ctx['v'];
+    let d2 = ctx['v'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-set t-set outside modified 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"iter\\", 0);
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
+      let key1 = ctx['val'];
+      let d1 = ctx['iter'];
+      c_block2[i1] = withKey(block3([d1]), key1);
+      setContextValue(ctx, \\"iter\\", ctx['iter']+1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    let d2 = ctx['iter'];
+    return block1([d2], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"iter\\", 0);
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
+      let key1 = ctx['val'];
+      let d1 = ctx['iter'];
+      c_block2[i1] = withKey(block3([d1]), key1);
+      setContextValue(ctx, \\"iter\\", ctx['iter']++);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    let d2 = ctx['iter'];
+    return block1([d2], [b2]);
+  }
+}"
+`;
+
+exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"iter\\", 0);
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
+      let key1 = ctx['val'];
+      let d1 = ctx['iter'];
+      c_block2[i1] = withKey(block3([d1]), key1);
+      setContextValue(ctx, \\"iter\\", ++ctx['iter']);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c_block2);
+    let d2 = ctx['iter'];
+    return block1([d2], [b2]);
+  }
+}"
+`;
+
+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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    setContextValue(ctx, \\"v\\", 1);
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem_index\`] = i1;
+      let key1 = ctx['elem_index'];
+      let d1 = ctx['v'];
+      setContextValue(ctx, \\"v\\", ctx['elem']);
+      c_block2[i1] = withKey(block3([d1]), key1);
+    }
+    let b2 = list(c_block2);
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    setContextValue(ctx, \\"v3\\", false);
+    setContextValue(ctx, \\"v1\\", 'before');
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = withDefault(ctx['v3'], b2);
+    setContextValue(ctx, \\"v1\\", 'after');
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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[isBoundary] = 1
+    setContextValue(ctx, \\"v3\\", 'Truthy');
+    setContextValue(ctx, \\"v1\\", 'before');
+    let d1 = ctx['v1'];
+    let b2 = block2([d1]);
+    ctx[\`v2\`] = withDefault(ctx['v3'], b2);
+    setContextValue(ctx, \\"v1\\", 'after');
+    setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"ourvar\\", \`1\`);
+    } else {
+      setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"ourvar\\", 1);
+    } else {
+      setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let b2;
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"ourvar\\", 1);
+    } else {
+      setContextValue(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, isBoundary, shallowEqual, setContextValue, toNumber } = 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);
+    ctx[isBoundary] = 1
+    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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"value\\", withDefault(1, \`2\`));
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;

tests/compiler/__snapshots__/t_tag.test.ts.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`qweb t-tag can fallback if falsy tag 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 'fallback'}/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['tag'];
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag can update 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['tag'];
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag simple usecases 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = 'div';
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag simple usecases 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'}>text</\${tag || 't'}>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['tag'];
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag with multiple attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'} class=\\"blueberry\\" taste=\\"raspberry\\">gooseberry</\${tag || 't'}>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['tag'];
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag with multiple child nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['tag'];
+    return toggler(tag1, block1(tag1)());
+  }
+}"
+`;
+
+exports[`qweb t-tag with multiple t-tag in same template 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = tag => createBlock(\`<\${tag || 't'}><block-child-0/></\${tag || 't'}>\`);
+  let block2 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['outer'];
+    let tag2 = ctx['inner'];
+    let b2 = toggler(tag2, block2(tag2)());
+    return toggler(tag1, block1(tag1)([], [b2]));
+  }
+}"
+`;
+
+exports[`qweb t-tag with multiple t-tag in same template, 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block2 = tag => createBlock(\`<\${tag || 't'}>bar</\${tag || 't'}>\`);
+  let block3 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let tag1 = ctx['brother'];
+    let b2 = toggler(tag1, block2(tag1)());
+    let tag2 = ctx['brother'];
+    let b3 = toggler(tag2, block3(tag2)());
+    return multi([b2, b3]);
+  }
+}"
+`;

tests/compiler/__snapshots__/translation.test.ts.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`translation support can set translatable attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"word\\">text</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`translation support can translate node content 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>mot</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`translation support does not translate node content if disabled 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`translation support some attributes are translated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><p label=\\"mot\\">mot</p><p title=\\"mot\\">mot</p><p placeholder=\\"mot\\">mot</p><p alt=\\"mot\\">mot</p><p something=\\"word\\">mot</p></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div> mot </div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/compiler/__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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = 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, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><span>abc</span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/compiler/attributes.test.ts

@@ -0,0 +1,425 @@
+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);
+  });
+
+  test("textarea with t-att-value", () => {
+    // render textarea with initial value
+    const template = `<textarea t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const elm = fixture.querySelector("textarea")!;
+    expect(elm.value).toBe("zucchini");
+
+    // change value manually in textarea, to simulate user textarea
+    elm.value = "tomato";
+    expect(elm.value).toBe("tomato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // textarea value was properly reset by owl
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(elm.value).toBe("potato");
+  });
+
+  test("select with t-att-value", () => {
+    const template = `
+      <select t-att-value="value">
+        <option value="potato">Potato</option>
+        <option value="tomato">Tomato</option>
+        <option value="onion">Onion</option>
+      </select>`;
+    const bnode1 = renderToBdom(template, { value: "tomato" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const elm = fixture.querySelector("select")!;
+    expect(elm.value).toBe("tomato");
+
+    elm.value = "potato";
+    expect(elm.value).toBe("potato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // select value was properly reset by owl
+    const bnode2 = renderToBdom(template, { value: "onion" });
+    patch(bnode1, bnode2);
+    expect(elm.value).toBe("onion");
+  });
+});

tests/compiler/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/compiler/error_handling.test.ts

@@ -0,0 +1,42 @@
+import { renderToString, snapshotEverything, TestContext } from "../helpers";
+
+snapshotEverything();
+
+describe("error handling", () => {
+  test("invalid xml", () => {
+    expect(() => renderToString("<div>")).toThrow("Invalid XML in template");
+  });
+
+  test("nice warning if no template with given name", () => {
+    const context = new TestContext();
+    expect(() => context.renderToString("invalidname")).toThrow("Missing template");
+  });
+
+  test("cannot add twice the same template", () => {
+    const context = new TestContext();
+    context.addTemplate("test", `<t></t>`);
+    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
+      "already defined"
+    );
+    expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
+  });
+
+  // test("addTemplates throw if parser error", () => {
+  //   const context = new TestContext();
+  //   expect(() => {
+  //     context.addTemplates("<templates><abc>></templates>");
+  //   }).toThrow("Invalid XML in template");
+  // });
+
+  test("nice error when t-on is evaluated with a missing event", () => {
+    expect(() => renderToString(`<div t-on="somemethod"></div>`)).toThrow(
+      "Missing event name with t-on directive"
+    );
+  });
+
+  test("error when unknown directive", () => {
+    expect(() => renderToString(`<div t-best-beer="rochefort 10">test</div>`)).toThrow(
+      "Unknown QWeb directive: 't-best-beer'"
+    );
+  });
+});

tests/compiler/event_handling.test.ts

@@ -0,0 +1,566 @@
+import { TemplateSet } from "../../src/compiler/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="() => this.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.call(owner, 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"
+    );
+  });
+
+  describe("t-on modifiers (native listener)", () => {
+    test("basic support for native listener", () => {
+      const template = `<div class="myClass" t-on-click="divClicked">
+        <button t-on-click="btnClicked">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+
+      const owner = {
+        divClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(div);
+          steps.push("divClicked");
+        },
+        btnClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(button);
+          steps.push("btnClicked");
+        },
+      };
+      const node = mountToFixture(template, owner);
+      const div = node.querySelector(".myClass");
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["btnClicked", "divClicked"]);
+    });
+
+    test("t-on with prevent and/or stop modifiers", async () => {
+      expect.assertions(7);
+      const template = `<div>
+      <button t-on-click.prevent="onClickPrevented">Button 1</button>
+      <button t-on-click.stop="onClickStopped">Button 2</button>
+      <button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
+      </div>`;
+
+      let owner = {
+        onClickPrevented(e: Event) {
+          expect(e.defaultPrevented).toBe(true);
+          expect(e.cancelBubble).toBe(false);
+        },
+        onClickStopped(e: Event) {
+          expect(e.defaultPrevented).toBe(false);
+          expect(e.cancelBubble).toBe(true);
+        },
+        onClickPreventedAndStopped(e: Event) {
+          expect(e.defaultPrevented).toBe(true);
+          expect(e.cancelBubble).toBe(true);
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+
+      const buttons = (<HTMLElement>node).getElementsByTagName("button");
+      buttons[0].click();
+      buttons[1].click();
+      buttons[2].click();
+    });
+
+    test("t-on with self modifier", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click="onClick"><span>Button</span></button>
+        <button t-on-click.self="onClickSelf"><span>Button</span></button>
+      </div>`;
+      let steps: string[] = [];
+      let owner = {
+        onClick(e: Event) {
+          steps.push("onClick");
+        },
+        onClickSelf(e: Event) {
+          steps.push("onClickSelf");
+        },
+      };
+      const node = mountToFixture(template, owner);
+
+      const buttons = (<HTMLElement>node).getElementsByTagName("button");
+      const spans = (<HTMLElement>node).getElementsByTagName("span");
+      spans[0].click();
+      spans[1].click();
+      buttons[0].click();
+      buttons[1].click();
+
+      expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);
+    });
+
+    test("t-on with self and prevent modifiers (order matters)", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.self.prevent="onClick"><span>Button</span></button>
+      </div>`;
+      let steps: boolean[] = [];
+      let owner = {
+        onClick() {},
+      };
+      const node = mountToFixture(template, owner);
+      (<HTMLElement>node).addEventListener("click", function (e) {
+        steps.push(e.defaultPrevented);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+      span.click();
+      button.click();
+
+      expect(steps).toEqual([false, true]);
+    });
+
+    test("t-on with prevent and self modifiers (order matters)", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.prevent.self="onClick"><span>Button</span></button>
+      </div>`;
+      let steps: boolean[] = [];
+      let owner = {
+        onClick() {},
+      };
+      const node = mountToFixture(template, owner);
+      (<HTMLElement>node).addEventListener("click", function (e) {
+        steps.push(e.defaultPrevented);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+      span.click();
+      button.click();
+
+      expect(steps).toEqual([true, true]);
+    });
+
+    test("t-on with prevent modifier in t-foreach", async () => {
+      expect.assertions(5);
+      const template = `<div>
+        <t t-foreach="projects" t-as="project" t-key="project">
+          <a href="#" t-on-click.prevent="ev => onEdit(project.id, ev)">
+            Edit <t t-esc="project.name"/>
+          </a>
+        </t>
+      </div>`;
+      const steps: string[] = [];
+      const owner = {
+        projects: [
+          { id: 1, name: "Project 1" },
+          { id: 2, name: "Project 2" },
+        ],
+
+        onEdit(projectId: string, ev: Event) {
+          expect(ev.defaultPrevented).toBe(true);
+          steps.push(projectId);
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(
+        `<div><a href="#"> Edit Project 1</a><a href="#"> Edit Project 2</a></div>`
+      );
+
+      const links = node.querySelectorAll("a")!;
+      links[0].click();
+      links[1].click();
+
+      expect(steps).toEqual([1, 2]);
+    });
+
+    test("t-on with empty handler (only modifiers)", () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.prevent="">Button</button>
+      </div>`;
+      const node = mountToFixture(template, {});
+
+      node.addEventListener("click", (e) => {
+        expect(e.defaultPrevented).toBe(true);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+    });
+
+    test("t-on combined with t-esc", async () => {
+      expect.assertions(3);
+      const template = `<div><button t-on-click="onClick" t-esc="text"/></div>`;
+      const steps: string[] = [];
+      const owner = {
+        text: "Click here",
+        onClick() {
+          steps.push("onClick");
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(`<div><button>Click here</button></div>`);
+
+      node.querySelector("button")!.click();
+
+      expect(steps).toEqual(["onClick"]);
+    });
+
+    test("t-on combined with t-raw", async () => {
+      expect.assertions(3);
+      const template = `<div><button t-on-click="onClick" t-raw="html"/></div>`;
+      const steps: string[] = [];
+      const owner = {
+        html: "Click <b>here</b>",
+        onClick() {
+          steps.push("onClick");
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(`<div><button>Click <b>here</b></button></div>`);
+
+      node.querySelector("button")!.click();
+
+      expect(steps).toEqual(["onClick"]);
+    });
+
+    test("t-on with .capture modifier", () => {
+      expect.assertions(2);
+      const template = `<div t-on-click.capture="onCapture">
+        <button t-on-click="doSomething">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+      const owner = {
+        onCapture() {
+          steps.push("captured");
+        },
+        doSomething() {
+          steps.push("normal");
+        },
+      };
+      const node = mountToFixture(template, owner);
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["captured", "normal"]);
+    });
+  });
+
+  describe("t-on modifiers (synthetic listener)", () => {
+    test("basic support for synthetic", () => {
+      const template = `<div t-on-click.synthetic="divClicked">
+        <button t-on-click.synthetic="btnClicked">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+
+      const owner = {
+        divClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(document);
+          steps.push("divClicked");
+        },
+        btnClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(document);
+          steps.push("btnClicked");
+        },
+      };
+      const node = mountToFixture(template, owner);
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["btnClicked", "divClicked"]);
+    });
+  });
+});

tests/compiler/inline_expressions.test.ts

@@ -0,0 +1,214 @@
+import { compileExpr, tokenize } from "../../src/compiler/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)"
+    );
+    expect(compileExpr("(ev => ev)(e)")).toBe("(ev=>ev)(ctx['e'])");
+  });
+  test.skip("arrow functions: not yet supported", () => {
+    // e is added to localvars in inline_expression but not removed after the arrow func body
+    expect(compileExpr("(e => e)(e)")).toBe("(e=>e)(ctx['e'])");
+  });
+
+  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/compiler/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/compiler/qweb_memory.test.ts

@@ -0,0 +1,12 @@
+import { renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+describe("memory", () => {
+  test("t-foreach does not leak stuff in global scope", () => {
+    const initialNumberOfGlobals = Object.keys(window).length;
+    const template = `<p><t t-foreach="[3, 2, 1]" t-as="item" t-key="item_index"><t t-esc="item"/></t></p>`;
+    expect(renderToString(template)).toBe("<p>321</p>");
+    expect(Object.keys(window).length).toBe(initialNumberOfGlobals);
+  });
+});

tests/compiler/simple_templates.test.ts

@@ -0,0 +1,188 @@
+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);
+  });
+
+  test("inline template string in t-esc", () => {
+    const template = '<t><t t-esc="`text`"/></t>';
+    expect(renderToString(template)).toBe("text");
+  });
+
+  test("inline template string with content in t-esc", () => {
+    const template = '<t><t t-set="v" t-value="1"/><t t-esc="`text${v}`"/></t>';
+    expect(renderToString(template)).toBe("text1");
+  });
+
+  test("inline template string with variable in context", () => {
+    const template = '<t><t t-esc="`text ${v}`"/></t>';
+    expect(renderToString(template, { v: "from context" })).toBe("text from context");
+  });
+});
+
+describe("loading templates", () => {
+  test.skip("can initialize qweb with a string", () => {
+    /*    const templates = `<?xml version="1.0" encoding="UTF-8"?>
+      <templates id="template" xml:space="preserve">
+        <div t-name="hey">jupiler</div>
+      </templates>`;
+    const qweb = new QWeb({ templates });
+    expect(renderToString(qweb, "hey")).toBe("<div>jupiler</div>");*/
+  });
+
+  test.skip("can load a few templates from a xml string", () => {
+    /*const data = `<?xml version="1.0" encoding="UTF-8"?>
+      <templates id="template" xml:space="preserve">
+
+        <t t-name="items"><li>ok</li><li>foo</li></t>
+
+        <ul t-name="main"><t t-call="items"/></ul>
+      </templates>`;
+    qweb.addTemplates(data);
+    const result = renderToString(qweb, "main");
+    expect(result).toBe("<ul><li>ok</li><li>foo</li></ul>");*/
+  });
+
+  test.skip("does not crash if string does not have templates", () => {
+    /*const data = "";
+    qweb.addTemplates(data);
+    expect(Object.keys(qweb.templates)).toEqual([]);*/
+  });
+});
+
+describe("global template registration", () => {
+  test.skip("can register template globally", () => {
+    //   expect.assertions(5);
+    //   let qweb = new QWeb();
+    //   try {
+    //     qweb.render("mytemplate");
+    //   } catch (e) {
+    //     expect(e.message).toMatch("Template mytemplate does not exist");
+    //   }
+    //   expect(qweb.templates.mytemplate).toBeUndefined();
+    //   QWeb.registerTemplate("mytemplate", "<div>global</div>");
+    //   expect(qweb.templates.mytemplate).toBeDefined();
+    //   const vnode = qweb.render("mytemplate");
+    //   expect(vnode.sel).toBe("div");
+    //   expect((vnode as any).children[0].text).toBe("global");
+  });
+});

tests/compiler/svg.test.ts

@@ -0,0 +1,22 @@
+describe("properly support svg", () => {
+  test.skip("add proper namespace to svg", () => {
+    // qweb.addTemplate(
+    //   "test",
+    //   `<svg width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </svg>`
+    // );
+    // expect(renderToString(qweb, "test")).toBe(
+    //   `<svg width=\"100px\" height=\"90px\"><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </svg>`
+    // );
+  });
+
+  test.skip("add proper namespace to g tags", () => {
+    // this is necessary if one wants to use components in a svg
+    // qweb.addTemplate(
+    //   "test",
+    //   `<g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </g>`
+    // );
+    // expect(renderToString(qweb, "test")).toBe(
+    //   `<g><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </g>`
+    // );
+  });
+});

tests/compiler/t_call.test.ts

@@ -0,0 +1,455 @@
+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.skip("t-call, global templates", () => {
+    // QWeb.registerTemplate("abcd", '<div><t t-call="john"/></div>');
+    // qweb.addTemplate("john", `<span>desk</span>`);
+    // const expected = "<div><span>desk</span></div>";
+    // expect(trim(renderToString(qweb, "abcd"))).toBe(expected);
+  });
+
+  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/compiler/t_debug_log.test.ts

@@ -0,0 +1,37 @@
+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-debug on sub template", () => {
+    let template = `<p t-debug="">coucou</p>`;
+    snapshotTemplateCode(template);
+    template = `<div><t t-call="sub"/></div>`;
+    snapshotTemplateCode(template);
+  });
+
+  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/compiler/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/compiler/t_foreach.test.ts

@@ -0,0 +1,246 @@
+import {
+  renderToBdom,
+  renderToString,
+  snapshotEverything,
+  TestContext,
+  makeTestFixture,
+} from "../helpers";
+import { mount, patch } from "../../src/blockdom";
+
+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("t-key on t-foreach", async () => {
+    const template = `
+        <div>
+          <t t-foreach="things" t-as="thing" t-key="thing">
+            <span/>
+          </t>
+        </div>`;
+
+    const fixture = makeTestFixture();
+
+    const vnode1 = renderToBdom(template, { things: [1, 2] });
+    mount(vnode1, fixture);
+    let elm = fixture;
+    expect(elm.innerHTML).toBe("<div><span></span><span></span></div>");
+    const first = elm.querySelectorAll("span")[0];
+    const second = elm.querySelectorAll("span")[1];
+
+    const vnode2 = renderToBdom(template, { things: [2, 1] });
+    patch(vnode1, vnode2);
+
+    expect(elm.innerHTML).toBe("<div><span></span><span></span></div>");
+    expect(first).toBe(elm.querySelectorAll("span")[1]);
+    expect(second).toBe(elm.querySelectorAll("span")[0]);
+  });
+
+  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("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/compiler/t_if.test.ts

@@ -0,0 +1,228 @@
+// 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("boolean value condition missing", () => {
+    const template = `<span><t t-if="condition">fail</t></span>`;
+    expect(renderToString(template)).toBe("<span></span>");
+  });
+
+  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/compiler/t_key.test.ts

@@ -0,0 +1,46 @@
+import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
+import { mount, patch } from "../../src/blockdom/index";
+
+snapshotEverything();
+
+describe("t-key", () => {
+  test("can use t-key directive on a node", () => {
+    const template = `<div t-key="beer.id"><t t-esc="beer.name"/></div>`;
+    expect(renderToString(template, { beer: { id: 12, name: "Chimay Rouge" } })).toBe(
+      "<div>Chimay Rouge</div>"
+    );
+  });
+
+  test("can use t-key directive on a node as a function", () => {
+    const template = `<div t-key="getKey(beer)"><t t-esc="beer.name"/></div>`;
+    const getKey = (arg: any) => arg.id;
+    expect(renderToString(template, { getKey, beer: { id: 12, name: "Chimay Rouge" } })).toBe(
+      "<div>Chimay Rouge</div>"
+    );
+  });
+
+  test("can use t-key directive on a node 2", async () => {
+    const template = `<div t-key="beer.id"><t t-esc="beer.name"/></div>`;
+    const bd = renderToBdom(template, { beer: { id: 12, name: "Chimay Rouge" } });
+    const fixture = makeTestFixture();
+    await mount(bd, fixture);
+    const div = fixture.firstChild;
+
+    expect((div as HTMLElement).outerHTML).toBe("<div>Chimay Rouge</div>");
+    const bd2 = renderToBdom(template, { beer: { id: 13, name: "Chimay Rouge" } });
+    await patch(bd, bd2);
+    expect(div !== fixture.firstChild).toBeTruthy();
+    expect((div as HTMLElement).outerHTML).toBe("<div>Chimay Rouge</div>");
+  });
+
+  test("t-key directive in a list", () => {
+    const template = `<ul>
+        <li t-foreach="beers" t-as="beer" t-key="beer.id"><t t-esc="beer.name"/></li>
+       </ul>`;
+    expect(
+      renderToString(template, {
+        beers: [{ id: 12, name: "Chimay Rouge" }],
+      })
+    ).toBe("<ul><li>Chimay Rouge</li></ul>");
+  });
+});

tests/compiler/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/compiler/t_ref.test.ts

@@ -0,0 +1,113 @@
+import { TemplateSet } from "../../src/compiler/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/compiler/t_set.test.ts

@@ -0,0 +1,277 @@
+import { renderToString, snapshotEverything, TestContext } 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("t-set does not modify render context existing key values", () => {
+    const template = `<div><t t-set="value" t-value="35"/><t t-esc="value"/></div>`;
+    const ctx = { value: 17 };
+    expect(renderToString(template, ctx)).toBe("<div>35</div>");
+    expect(ctx.value).toBe(17);
+  });
+
+  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>");
+  });
+
+  test("t-set outside modified in t-foreach", async () => {
+    const template = `
+      <div>
+        <t t-set="iter" t-value="0"/>
+        <t t-foreach="['a','b']" t-as="val" t-key="val">
+          <p>InLoop: <t t-esc="iter"/></p>
+          <t t-set="iter" t-value="iter + 1"/>
+        </t>
+        <p>EndLoop: <t t-esc="iter"/></p>
+      </div>
+    `;
+    expect(renderToString(template)).toBe(
+      "<div><p>InLoop: 0</p><p>InLoop: 1</p><p>EndLoop: 2</p></div>"
+    );
+  });
+
+  test("t-set outside modified in t-foreach increment-after operator", async () => {
+    const template = `
+      <div>
+        <t t-set="iter" t-value="0"/>
+        <t t-foreach="['a','b']" t-as="val" t-key="val">
+          <p>InLoop: <t t-esc="iter"/></p>
+          <t t-set="iter" t-value="iter++"/>
+        </t>
+        <p>EndLoop: <t t-esc="iter"/></p>
+      </div>
+    `;
+    expect(renderToString(template)).toBe(
+      "<div><p>InLoop: 0</p><p>InLoop: 0</p><p>EndLoop: 0</p></div>"
+    );
+  });
+
+  test("t-set outside modified in t-foreach increment-before operator", async () => {
+    const template = `
+      <div>
+        <t t-set="iter" t-value="0"/>
+        <t t-foreach="['a','b']" t-as="val" t-key="val">
+          <p>InLoop: <t t-esc="iter"/></p>
+          <t t-set="iter" t-value="++iter"/>
+        </t>
+        <p>EndLoop: <t t-esc="iter"/></p>
+      </div>
+    `;
+    expect(renderToString(template)).toBe(
+      "<div><p>InLoop: 0</p><p>InLoop: 1</p><p>EndLoop: 0</p></div>"
+    );
+  });
+
+  test("t-set can't alter from within callee", async () => {
+    const context = new TestContext();
+    const sub = `<div><t t-esc="iter"/><t t-set="iter" t-value="'called'"/><t t-esc="iter"/></div>`;
+    const main = `
+      <div>
+        <t t-set="iter" t-value="'source'"/>
+        <p><t t-esc="iter"/></p>
+        <t t-call="sub"/>
+        <p><t t-esc="iter"/></p>
+      </div>
+    `;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe(
+      "<div><p>source</p><div>sourcecalled</div><p>source</p></div>"
+    );
+  });
+
+  test("t-set can't alter in t-call body", async () => {
+    const context = new TestContext();
+    const sub = `<div><t t-esc="iter"/><t t-set="iter" t-value="'called'"/><t t-esc="iter"/></div>`;
+    const main = `
+      <div>
+        <t t-set="iter" t-value="'source'"/>
+        <p><t t-esc="iter"/></p>
+        <t t-call="sub">
+          <t t-set="iter" t-value="'inCall'"/>
+        </t>
+        <p><t t-esc="iter"/></p>
+      </div>
+    `;
+    context.addTemplate("sub", sub);
+    context.addTemplate("main", main);
+
+    expect(context.renderToString("main")).toBe(
+      "<div><p>source</p><div>inCallcalled</div><p>source</p></div>"
+    );
+  });
+});

tests/compiler/t_tag.test.ts

@@ -0,0 +1,69 @@
+import { mount, patch } from "../../src/blockdom";
+import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("qweb t-tag", () => {
+  test("simple usecases", () => {
+    expect(renderToString(`<t t-tag="'div'"></t>`)).toBe("<div></div>");
+    expect(renderToString(`<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(renderToString(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 class=\"blueberry\" taste=\"raspberry\">gooseberry</div>`;
+    expect(renderToString(template, { tag: "div" })).toBe(expected);
+  });
+
+  test("can fallback if falsy tag", () => {
+    const template = `<fallback t-tag="tag"/>`;
+    expect(renderToString(template, { tag: "div" })).toBe(`<div></div>`);
+    expect(renderToString(template, { tag: "" })).toBe(`<fallback></fallback>`);
+    expect(renderToString(template, { tag: undefined })).toBe(`<fallback></fallback>`);
+    expect(renderToString(template, { tag: null })).toBe(`<fallback></fallback>`);
+    expect(renderToString(template, { tag: false })).toBe(`<fallback></fallback>`);
+  });
+
+  test("with multiple t-tag in same template", () => {
+    const template = `<t t-tag="outer"><t t-tag="inner">baz</t></t>`;
+    expect(renderToString(template, { outer: "foo", inner: "bar" })).toBe(
+      `<foo><bar>baz</bar></foo>`
+    );
+  });
+
+  test("with multiple t-tag in same template, part 2", () => {
+    const template = `<t t-tag="brother">bar</t><t t-tag="brother">baz</t>`;
+    expect(renderToString(template, { brother: "foo" })).toBe(`<foo>bar</foo><foo>baz</foo>`);
+  });
+
+  test("can update", () => {
+    const template = `<t t-tag="tag"></t>`;
+    const bdom = renderToBdom(template, { tag: "yop" });
+    mount(bdom, fixture);
+    expect(fixture.innerHTML).toBe("<yop></yop>");
+    patch(bdom, renderToBdom(template, { tag: "gnap" }));
+    expect(fixture.innerHTML).toBe("<gnap></gnap>");
+  });
+});

tests/compiler/translation.test.ts

@@ -0,0 +1,116 @@
+import { App, Component } from "../../src";
+import { makeTestFixture, snapshotApp } from "../helpers";
+import { xml } from "../../src/tags";
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("translation support", () => {
+  test("can translate node content", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div>word</div>`;
+    }
+
+    const app = new App(SomeComponent);
+    app.configure({
+      translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
+    });
+    const comp = await app.mount(fixture);
+
+    const el = comp.el as HTMLElement;
+
+    expect(el.outerHTML).toBe("<div>mot</div>");
+    snapshotApp(app);
+  });
+
+  test("does not translate node content if disabled", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+          <span>word</span>
+          <span t-translation="off">word</span>
+        </div>
+      `;
+    }
+
+    const app = new App(SomeComponent);
+    app.configure({
+      translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
+    });
+    const comp = await app.mount(fixture);
+
+    const el = comp.el as HTMLElement;
+
+    expect(el.outerHTML).toBe("<div><span>mot</span><span>word</span></div>");
+    snapshotApp(app);
+  });
+
+  test("some attributes are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+          <p label="word">word</p>
+          <p title="word">word</p>
+          <p placeholder="word">word</p>
+          <p alt="word">word</p>
+          <p something="word">word</p>
+        </div>
+      `;
+    }
+
+    const app = new App(SomeComponent);
+    app.configure({
+      translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
+    });
+    const comp = await app.mount(fixture);
+
+    const el = comp.el as HTMLElement;
+
+    expect(el.outerHTML).toBe(
+      '<div><p label="mot">mot</p><p title="mot">mot</p><p placeholder="mot">mot</p><p alt="mot">mot</p><p something="word">mot</p></div>'
+    );
+    snapshotApp(app);
+  });
+
+  test("can set translatable attributes", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div tomato="word" potato="word" title="word">text</div>
+      `;
+    }
+
+    const app = new App(SomeComponent);
+    app.configure({
+      translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
+      translatableAttributes: ["potato"],
+    });
+    const comp = await app.mount(fixture);
+
+    const el = comp.el as HTMLElement;
+    expect(el.outerHTML).toBe('<div tomato="word" potato="mot" title="word">text</div>');
+    snapshotApp(app);
+  });
+
+  test("translation is done on the trimmed text, with extra spaces readded after", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div> word </div>
+      `;
+    }
+
+    const translateFn = jest.fn((expr: string) => (expr === "word" ? "mot" : expr));
+
+    const app = new App(SomeComponent);
+    app.configure({ translateFn });
+    const comp = await app.mount(fixture);
+
+    const el = comp.el as HTMLElement;
+
+    expect(el.outerHTML).toBe("<div> mot </div>");
+    expect(translateFn).toHaveBeenCalledWith("word");
+    snapshotApp(app);
+  });
+});

tests/compiler/validation.test.ts

@@ -0,0 +1,39 @@
+import { TemplateSet } from "../../src/compiler/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/compiler/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);
+  });
+});