[REF] initial prototype of owl 2

tests/components/__snapshots__/app.test.ts.snap

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

tests/components/__snapshots__/basics.test.ts.snap

@@ -0,0 +1,929 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics Multi root component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<span>1</span>\`);
+  let block4 = createBlock(\`<span>2</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = text(\`text\`);
+    let b4 = block4();
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
+exports[`basics a class component inside a class component, no external dom 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a class component inside a class component, no external dom 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics a component cannot be mounted in a detached node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a component inside a component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a component inside a component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics can be clicked on and updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].counter;
+    const v1 = ctx['state'];
+    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`basics can handle empty props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics can handle empty props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics can mount a component with just some text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`just text\`);
+  }
+}"
+`;
+
+exports[`basics can mount a component with no text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
+exports[`basics can mount a simple component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can mount a simple component with multiple roots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<span/>\`);
+  let block3 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = block3();
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics can mount a simple component with props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics cannot mount on a documentFragment 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics child can be updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
+exports[`basics child can be updated 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics class component with dynamic text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics class parent, class child component with props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics class parent, class child component with props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics component with dynamic content can be updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics do not remove previously rendered dom if not necessary 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics do not remove previously rendered dom if not necessary, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics has no el after creation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>a</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['props'].child==='a') {
+      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
+    } else {
+      b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics props is set on root component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics reconciliation alg is not confused in some specific situation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics same t-keys in two different places 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].blip;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics same t-keys in two different places 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {blip: '1'}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {blip: '2'}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics simple component with a dynamic text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics simple component, useState 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics some simple sanity checks (el/status) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-elif works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-elif works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else if (!ctx['state'].flag) {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-else with empty string works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-else with empty string works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-else works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-else works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-if works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-if works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (false) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics text after a conditional component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p>simple vnode</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics text after a conditional component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    let d1 = ctx['state'].text;
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics throws if mounting on target=null 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics two child components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics two child components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics updating a component with t-foreach as root 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`item\`] = v1[i1];
+      let key1 = ctx['item'];
+      c1[i1] = withKey(text(ctx['item']), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`basics widget after a t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics widget after a t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(Array(2));
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`elem\`] = v2[i1];
+      ctx[\`elem_index\`] = i1;
+      let key1 = ctx['elem_index'];
+      c2[i1] = withKey(text(\`txt\`), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c2);
+    let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2, b4]);
+  }
+}"
+`;
+
+exports[`basics zero or one child components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics zero or one child components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;

tests/components/__snapshots__/error_handling.test.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics no component catching error lead to full app destruction 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics no component catching error lead to full app destruction 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`event handling can set handler on sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`event handling can set handler on sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let h2 = [\`click\`, ctx, 'inc'];
+    let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
+    let b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`event handling handler receive the event as argument 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`event handling handler receive the event as argument 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let h2 = [\`click\`, ctx, 'inc'];
+    let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
+    let b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`event handling support for callable expression in event handler 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    const v1 = ctx['obj'];
+    let d2 = (e) => {const res = (() => { return v1.onInput })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1, d2]);
+  }
+}"
+`;

tests/components/__snapshots__/higher_order_component.test.ts.snap

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics basic use 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics basic use 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>CHILD 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>CHILD 2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['env'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    if (!ctx['env'].flag) {
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>CHILD 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>CHILD 2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    if (!ctx['state'].flag) {
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics sub widget is interactive 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'inc'];
+    let d2 = ctx['state'].val;
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`basics sub widget is interactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>Hello</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`ComponentC\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/__snapshots__/lifecycle.test.ts.snap

@@ -0,0 +1,641 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lifecycle hooks basic checks for a component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>test</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].ok) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].n;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+      b2 = block2([], [b3]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 3 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 3 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks onRender 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'increment'];
+    let d2 = ctx['state'].value;
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks onRender 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks patched hook is called after updating State 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].n;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart is called 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart is called with component as this 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block3 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].ok) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    } else {
+      b3 = block3();
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].n;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+  }
+}"
+`;

tests/components/__snapshots__/props.test.ts.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].greetings;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics explicit object prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].someval;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics explicit object prop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics t-set with a body expression can be passed in props, and then t-raw 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    let b2 = html(ctx['props'].val);
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`basics t-set with a body expression can be passed in props, and then t-raw 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>43</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b2 = block2();
+    ctx[\`abc\`] = b2;
+    let b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`basics t-set with a body expression can be used as textual prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics t-set with a body expression can be used as textual prop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`abc\`] = \`42\`;
+    let b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics t-set works  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics t-set works  2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[\`val\`] = 42;
+    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/__snapshots__/refs.test.ts.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`refs refs are properly bound in slots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'footer');
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`refs refs are properly bound in slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
+  
+  const slot3 = ctx => node => {
+    const refs = ctx.__owl__.refs
+    let d2 = [ctx, 'doSomething'];
+    let d3 = (el) => refs[\`myButton\`] = el;
+    return block2([d2, d3]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    let d1 = ctx['state'].val;
+    const ctx2 = capture(ctx);
+    let b3 = assign(component(\`Dialog\`, {}, key + \`__1\`, node, ctx), {slots: {'footer': slot3(ctx2)}});
+    return block1([d1], [b3]);
+  }
+}"
+`;

tests/components/__snapshots__/style_class.test.ts.snap

@@ -0,0 +1,395 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`style and class handling can set class on multi root component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<div>a</div>\`);
+  let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let d1 = ctx['props'].class;
+    let b3 = block3([d1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on multi root component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on sub component, as prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on sub component, as prop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on sub sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on sub sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on sub sub component 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set more than one class on sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling can set more than one class on sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set style and class inside component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`style and class handling class on sub component, which is switched to another 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling class on sub component, which is switched to another 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling class on sub component, which is switched to another 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['props'].child==='a') {
+      b2 = component(\`ChildA\`, {class: ctx['props'].class}, key + \`__1\`, node, ctx);
+    } else {
+      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`style and class handling class on sub component, which is switched to another 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling class with extra whitespaces (variation) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling class with extra whitespaces (variation) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`style and class handling class with extra whitespaces 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling class with extra whitespaces 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling component class and parent class combine together 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling component class and parent class combine together 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`style and class handling no class is set is child ignores it 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`style and class handling no class is set is child ignores it 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'hey'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {d:ctx['state'].d,...ctx['props'].class};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/__snapshots__/t_call.test.ts.snap

@@ -0,0 +1,292 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-call dynamic t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    let b1 = text(\` owl \`);
+    ctx[zero] = b1;
+    const template2 = (ctx['current'].template);
+    return call(template2, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>foo</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`bar\`);
+  }
+}"
+`;
+
+exports[`t-call handlers are properly bound through a t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'update'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call handlers are properly bound through a t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__9\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    let d1 = ctx['counter'];
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const arg1 = [ctx['a']];
+    let d1 = [ctx, 'update', arg1];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__9\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>lucas</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__9\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call with no parentNode 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call with no parentNode 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>lucas</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call with no parentNode 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__9\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_2(ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call sub components in two t-calls 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call sub components in two t-calls 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  const callTemplate_4 = getTemplate(\`sub\`);
+  
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].val===1) {
+      b2 = callTemplate_2(ctx, node, key + \`__1\`);
+    } else {
+      let b4 = callTemplate_4(ctx, node, key + \`__3\`);
+      b3 = block3([], [b4]);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call sub components in two t-calls 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-call t-call in t-foreach and children component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-call t-call in t-foreach and children component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call t-call in t-foreach and children component 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__9\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(['a','b','c']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`val\`] = v2[i1];
+      ctx[\`val_first\`] = i1 === 0;
+      ctx[\`val_last\`] = i1 === v2.length - 1;
+      ctx[\`val_index\`] = i1;
+      ctx[\`val_value\`] = k2[i1];
+      let key1 = ctx['val'];
+      c2[i1] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}\`), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/__snapshots__/t_call_block.test.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-call-block simple t-call-block with static text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = ctx['myBlock']();
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/__snapshots__/t_component.test.ts.snap

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child a</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['constructor'].components[ctx['state'].child];
+    let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child a</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>child b</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['myComponent'];
+    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child a</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['myComponent'];
+    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+  }
+}"
+`;
+
+exports[`t-component modifying a sub widget 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].counter;
+    const v1 = ctx['state'];
+    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-component modifying a sub widget 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['Counter'];
+    let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-component switching dynamic component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>child a</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component switching dynamic component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child b\`);
+  }
+}"
+`;
+
+exports[`t-component switching dynamic component 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['Child'];
+    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+  }
+}"
+`;
+
+exports[`t-component t-component works in simple case 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>child</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component t-component works in simple case 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['Child'];
+    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+  }
+}"
+`;

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

@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`list of components components in a node in a t-foreach  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].item;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components components in a node in a t-foreach  2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
+  let block3 = createBlock(\`<li><block-child-0/></li>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`item\`] = v2[i1];
+      let key1 = 'li_'+ctx['item'];
+      let b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
+      c2[i1] = withKey(block3([], [b4]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].blip;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['state'].s);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`section\`] = v2[i1];
+      ctx[\`section_index\`] = i1;
+      let key1 = ctx['section_index'];
+      ctx = Object.create(ctx);
+      const [k3, v3, l3, c3] = prepareList(ctx['section'].blips);
+      for (let i2 = 0; i2 < l3; i2++) {
+        ctx[\`blip\`] = v3[i2];
+        ctx[\`blip_index\`] = i2;
+        let key2 = ctx['blip_index'];
+        c3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
+      }
+      ctx = ctx.__proto__;
+      c2[i1] = withKey(list(c3), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].row+'_'+ctx['props'].col;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<p><block-child-0/></p>\`);
+  let block5 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['state'].rows);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`row\`] = v2[i1];
+      let key1 = ctx['row'];
+      ctx = Object.create(ctx);
+      const [k4, v4, l4, c4] = prepareList(ctx['state'].cols);
+      for (let i2 = 0; i2 < l4; i2++) {
+        ctx[\`col\`] = v4[i2];
+        let key2 = ctx['col'];
+        let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
+        c4[i2] = withKey(block5([], [b6]), key2);
+      }
+      ctx = ctx.__proto__;
+      let b4 = list(c4);
+      c2[i1] = withKey(block3([], [b4]), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`list of components simple list 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components simple list 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList(ctx['state'].elems);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`elem\`] = v1[i1];
+      let key1 = ctx['elem'].id;
+      c1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`list of components sub components rendered in a loop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].n;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components sub components rendered in a loop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['state'].numbers);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`number\`] = v2[i1];
+      let key1 = ctx['number'];
+      c2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`list of components sub components with some state rendered in a loop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].n;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`list of components sub components with some state rendered in a loop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(ctx['state'].numbers);
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`number\`] = v2[i1];
+      let key1 = ctx['number'];
+      c2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    let b2 = list(c2);
+    return block1([], [b2]);
+  }
+}"
+`;

tests/components/app.test.ts

@@ -0,0 +1,28 @@
+import { App, Component } from "../../src";
+import { status } from "../../src/component/status";
+import { xml } from "../../src/tags";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("app", () => {
+  test("destroy remove the widget from the DOM", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div/>`;
+    }
+
+    const app = new App(SomeComponent);
+    const comp = await app.mount(fixture);
+    const el = comp.el!;
+    expect(document.contains(el)).toBe(true);
+    app.destroy();
+    expect(document.contains(el)).toBe(false);
+    expect(status(comp)).toBe("destroyed");
+  });
+});

tests/components/basics.test.ts

@@ -0,0 +1,657 @@
+import { App, Component, mount, status, useState } from "../../src";
+import { xml } from "../../src/tags";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("basics", () => {
+  test("can mount a simple component", async () => {
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>simple vnode</span>");
+    expect(component.el).toEqual(fixture.querySelector("span"));
+  });
+
+  test("has no el after creation", async () => {
+    let el: any = null;
+    class Test extends Component {
+      static template = xml`<span>simple</span>`;
+      setup() {
+        el = this.el;
+      }
+    }
+
+    await mount(Test, fixture);
+    expect(el).toBeUndefined();
+  });
+
+  test("cannot mount on a documentFragment", async () => {
+    class SomeWidget extends Component {
+      static template = xml`<div>content</div>`;
+    }
+    let error;
+    try {
+      await mount(SomeWidget, document.createDocumentFragment() as any);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot mount component: the target is not a valid DOM element");
+  });
+
+  test("can mount a simple component with props", async () => {
+    class Test extends Component {
+      static template = xml`<span><t t-esc="props.value"/></span>`;
+    }
+
+    const app = new App(Test, { value: 3 });
+    const component = await app.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<span>3</span>");
+    expect(component.el).toEqual(fixture.querySelector("span"));
+  });
+
+  test("can mount a component with just some text", async () => {
+    class Test extends Component {
+      static template = xml`just text`;
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("just text");
+    expect(component.el).toBeInstanceOf(Text);
+  });
+
+  test("can mount a component with no text", async () => {
+    class Test extends Component {
+      static template = xml`<t></t>`;
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("");
+    expect(component.el).toBeInstanceOf(Text);
+  });
+
+  test("can mount a simple component with multiple roots", async () => {
+    class Test extends Component {
+      static template = xml`<span></span><div></div>`;
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("<span></span><div></div>");
+    expect((component.el as any).tagName).toBe("SPAN");
+  });
+
+  test("component with dynamic content can be updated", async () => {
+    class Test extends Component {
+      static template = xml`<span><t t-esc="value"/></span>`;
+      value = 1;
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>1</span>");
+
+    component.value = 2;
+    await component.render();
+    expect(fixture.innerHTML).toBe("<span>2</span>");
+  });
+
+  test("updating a component with t-foreach as root", async () => {
+    class Test extends Component {
+      static template = xml`
+        <t t-foreach="items" t-as="item" t-key="item">
+          <t t-esc="item"/>
+        </t>`;
+      items = ["one", "two", "three"];
+    }
+
+    const component = await mount(Test, fixture);
+
+    expect(fixture.innerHTML).toBe("onetwothree");
+    component.items = ["two", "three", "one"];
+    await component.render();
+    expect(fixture.innerHTML).toBe("twothreeone");
+  });
+
+  test("props is set on root component", async () => {
+    expect.assertions(2);
+    const p = {};
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+      setup() {
+        expect(this.props).toBe(p);
+      }
+    }
+
+    const app = new App(Test, p);
+    await app.mount(fixture);
+  });
+
+  test("some simple sanity checks (el/status)", async () => {
+    expect.assertions(4);
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+      setup() {
+        expect(this.el).toBe(undefined);
+        expect(status(this)).toBe("new");
+      }
+    }
+
+    const test = await mount(Test, fixture);
+    expect(status(test)).toBe("mounted");
+  });
+
+  test("throws if mounting on target=null", async () => {
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+    }
+
+    let error;
+    try {
+      await mount(Test, null as any);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot mount component: the target is not a valid DOM element");
+  });
+
+  test("a component cannot be mounted in a detached node", async () => {
+    class Test extends Component {
+      static template = xml`<div/>`;
+    }
+    let error;
+    try {
+      await mount(Test, document.createElement("div"));
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot mount a component on a detached dom node");
+  });
+
+  test("crashes if it cannot find a template", async () => {
+    class Test extends Component {
+      static template = "wrongtemplate";
+    }
+
+    let error;
+    try {
+      await mount(Test, fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe('Missing template: "wrongtemplate"');
+  });
+
+  test("class component with dynamic text", async () => {
+    class Test extends Component {
+      static template = xml`<span>My value: <t t-esc="value"/></span>`;
+
+      value = 42;
+    }
+
+    await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("<span>My value: 42</span>");
+  });
+
+  test("Multi root component", async () => {
+    class Test extends Component {
+      static template = xml`<span>1</span>text<span>2</span>`;
+
+      value = 42;
+    }
+
+    await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe(`<span>1</span>text<span>2</span>`);
+  });
+
+  test("a component inside a component", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<span><Child/></span>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span><div>simple vnode</div></span>");
+  });
+
+  test("a class component inside a class component, no external dom", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child/>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>");
+  });
+
+  test("simple component with a dynamic text", async () => {
+    class Test extends Component {
+      static template = xml`<div><t t-esc="value" /></div>`;
+      value = 3;
+    }
+
+    const test = await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("<div>3</div>");
+    test.value = 5;
+    await test.render();
+    expect(fixture.innerHTML).toBe("<div>5</div>");
+  });
+
+  test("simple component, useState", async () => {
+    class Test extends Component {
+      static template = xml`<div><t t-esc="state.value" /></div>`;
+      state = useState({ value: 3 });
+    }
+
+    const test = await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("<div>3</div>");
+    test.state.value = 5;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>5</div>");
+  });
+
+  test("two child components", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child/><Child/>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div><div>simple vnode</div>");
+  });
+
+  test("class parent, class child component with props", async () => {
+    class Child extends Component {
+      static template = xml`<div><t t-esc="props.value" /></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child value="42" />`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>42</div>");
+  });
+
+  test("parent, child and grandchild", async () => {
+    class GrandChild extends Component {
+      static template = xml`<div>hey</div>`;
+    }
+
+    class Child extends Component {
+      static template = xml`<GrandChild />`;
+      static components = { GrandChild };
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child/>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>hey</div>");
+  });
+
+  test("zero or one child components", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.hasChild"/>`;
+      static components = { Child };
+      state = useState({ hasChild: false });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("");
+    parent.state.hasChild = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>");
+  });
+
+  test("text after a conditional component", async () => {
+    class Child extends Component {
+      static template = xml`<p>simple vnode</p>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child t-if="state.hasChild"/>
+          <span t-esc="state.text"/>
+        </div>`;
+      static components = { Child };
+      state = useState({ hasChild: false, text: "1" });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasChild = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p>simple vnode</p><span>1</span></div>");
+
+    parent.state.hasChild = false;
+    parent.state.text = "2";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
+  });
+
+  test("can be clicked on and updated", async () => {
+    class Counter extends Component {
+      static template = xml`
+      <div><t t-esc="state.counter"/><button t-on-click="state.counter++">Inc</button></div>`;
+      state = useState({
+        counter: 0,
+      });
+    }
+
+    const counter = await mount(Counter, fixture);
+    expect(fixture.innerHTML).toBe("<div>0<button>Inc</button></div>");
+    const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
+    button.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>1<button>Inc</button></div>");
+  });
+
+  test("can handle empty props", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Child val=""/></div>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span></span></div>");
+  });
+
+  test("child can be updated", async () => {
+    class Child extends Component {
+      static template = xml`<t t-esc="props.value"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child value="state.counter"/>`;
+      static components = { Child };
+      state = useState({
+        counter: 0,
+      });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("0");
+
+    parent.state.counter = 1;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("1");
+  });
+
+  test("higher order components parent and child", async () => {
+    class ChildA extends Component {
+      static template = xml`<div>a</div>`;
+    }
+    class ChildB extends Component {
+      static template = xml`<span>b</span>`;
+    }
+    class Child extends Component {
+      static template = xml`<ChildA t-if="props.child==='a'"/><ChildB t-else=""/>`;
+      static components = { ChildA, ChildB };
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child child="state.child" />`;
+      static components = { Child };
+
+      state = useState({ child: "a" });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div>a</div>`);
+    parent.state.child = "b";
+    await nextTick();
+    expect(fixture.innerHTML).toBe(`<span>b</span>`);
+  });
+
+  test("three level of components with collapsing root nodes", async () => {
+    class GrandChild extends Component {
+      static template = xml`<div>2</div>`;
+    }
+    class Child extends Component {
+      static components = { GrandChild };
+      static template = xml`<GrandChild/>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<Child></Child>`;
+    }
+
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div>2</div>");
+  });
+
+  test("do not remove previously rendered dom if not necessary", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div/>`;
+    }
+    const widget = await mount(SomeComponent, fixture);
+    expect(fixture.innerHTML).toBe(`<div></div>`);
+    widget.el!.appendChild(document.createElement("span"));
+    expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
+    await widget.render();
+    expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
+  });
+
+  test("do not remove previously rendered dom if not necessary, variation", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div><h1>h1</h1><span><t t-esc="state.value"/></span></div>`;
+      state = useState({ value: 1 });
+    }
+    const comp = await mount(SomeComponent, fixture);
+    expect(fixture.innerHTML).toBe(`<div><h1>h1</h1><span>1</span></div>`);
+    (comp.el! as any).querySelector("h1")!.appendChild(document.createElement("p"));
+    expect(fixture.innerHTML).toBe("<div><h1>h1<p></p></h1><span>1</span></div>");
+
+    comp.state.value++;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><h1>h1<p></p></h1><span>2</span></div>");
+  });
+
+  test("reconciliation alg is not confused in some specific situation", async () => {
+    // in this test, we set t-key to 4 because it was in conflict with the
+    // template id corresponding to the first child.
+    class Child extends Component {
+      static template = xml`<span>child</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+            <Child />
+            <Child t-key="4"/>
+        </div>
+      `;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>child</span><span>child</span></div>");
+  });
+
+  test("same t-keys in two different places", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.blip"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+            <div><Child t-key="1" blip="'1'"/></div>
+            <div><Child t-key="1" blip="'2'"/></div>
+        </div>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><div><span>1</span></div><div><span>2</span></div></div>");
+  });
+
+  test("t-key on a component with t-if, and a sibling component", async () => {
+    class Child extends Component {
+      static template = xml`<span>child</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child t-if="false" t-key="'str'"/>
+          <Child/>
+        </div>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>child</span></div>");
+  });
+
+  test("widget after a t-foreach", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div/>`;
+    }
+
+    class Test extends Component {
+      static template = xml`<div><t t-foreach="Array(2)" t-as="elem" t-key="elem_index">txt</t><SomeComponent/></div>`;
+      static components = { SomeComponent };
+    }
+
+    await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("<div>txttxt<div></div></div>");
+  });
+
+  test("t-if works with t-component", async () => {
+    class Child extends Component {
+      static template = xml`<span>hey</span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Child t-if="state.flag"/></div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div></div>");
+
+    parent.state.flag = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+
+  test("t-else works with t-component", async () => {
+    class Child extends Component {
+      static template = xml`<span>hey</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <div t-if="state.flag">somediv</div>
+          <Child t-else=""/>
+        </div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
+
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+
+  test("t-elif works with t-component", async () => {
+    class Child extends Component {
+      static template = xml`<span>hey</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <div t-if="state.flag">somediv</div>
+          <Child t-elif="!state.flag" />
+        </div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
+
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+
+  test("t-else with empty string works with t-component", async () => {
+    class Child extends Component {
+      static template = xml`<span>hey</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <div t-if="state.flag">somediv</div>
+          <Child t-else="" />
+        </div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
+
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+});

tests/components/env.test.ts

@@ -0,0 +1,51 @@
+import { App, Component, mount, xml } from "../../src";
+import { makeTestFixture } from "../helpers";
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("env handling", () => {
+  test("keeps a reference to env", async () => {
+    const env = {};
+    class Test extends Component {
+      static template = xml`<div/>`;
+    }
+    const app = new App(Test);
+    app.configure({ env });
+    const component = await app.mount(fixture);
+    expect(component.env).toBe(env);
+  });
+
+  test("has an env by default", async () => {
+    class Test extends Component {
+      static template = xml`<div/>`;
+    }
+    const component = await mount(Test, fixture);
+    expect(component.env).toEqual({});
+  });
+
+  test("parent env is propagated to child components", async () => {
+    const env = {};
+    let child: any = null;
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        child = this;
+      }
+    }
+
+    class Test extends Component {
+      static template = xml`<Child/>`;
+      static components = { Child };
+    }
+
+    const app = new App(Test);
+    app.configure({ env });
+    await app.mount(fixture);
+    expect(child.env).toBe(env);
+  });
+});

tests/components/error_handling.test.ts

@@ -0,0 +1,42 @@
+import { Component, mount } from "../../src";
+import { status } from "../../src/component/status";
+import { xml } from "../../src/tags";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("basics", () => {
+  test("no component catching error lead to full app destruction", async () => {
+    class ErrorComponent extends Component {
+      static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><ErrorComponent flag="state.flag"/></div>`;
+      static components = { ErrorComponent };
+      state = { flag: false };
+    }
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
+    parent.state.flag = true;
+
+    let error;
+    try {
+      await parent.render();
+    } catch (e) {
+      error = e;
+    }
+    expect(fixture.innerHTML).toBe("");
+    expect(status(parent)).toBe("destroyed");
+    expect(error).toBeDefined();
+    const regexp =
+      /Cannot read properties of undefined \(reading 'this'\)|Cannot read property 'this' of undefined/g;
+    expect(error.message).toMatch(regexp);
+  });
+});

tests/components/event_handling.test.ts

@@ -0,0 +1,75 @@
+import { makeTestFixture, snapshotEverything, nextTick } from "../helpers";
+import { mount, Component, useState, xml } from "../../src/index";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("event handling", () => {
+  test("can set handler on sub component", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      inc() {
+        this.state.value++;
+      }
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
+
+    fixture.querySelector("div")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
+  });
+
+  test("handler receive the event as argument", async () => {
+    class Child extends Component {
+      static template = xml`<div>simple vnode</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      inc(ev: any) {
+        this.state.value++;
+        expect(ev.type).toBe("click");
+      }
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
+
+    fixture.querySelector("div")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
+  });
+
+  test("support for callable expression in event handler", async () => {
+    class Counter extends Component {
+      static template = xml`
+      <div><t t-esc="state.value"/><input type="text" t-on-input="obj.onInput"/></div>`;
+      state = useState({ value: "" });
+      obj = { onInput: (ev: any) => (this.state.value = ev.target.value) };
+    }
+
+    const counter = await mount(Counter, fixture);
+    await nextTick();
+    expect(fixture.innerHTML).toBe(`<div><input type="text"></div>`);
+    const input = (<HTMLElement>counter.el).getElementsByTagName("input")[0];
+    input.value = "test";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(fixture.innerHTML).toBe(`<div>test<input type="text"></div>`);
+  });
+});

tests/components/higher_order_component.test.ts

@@ -0,0 +1,119 @@
+import { App, Component, mount, useState } from "../../src";
+import { xml } from "../../src/tags";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("basics", () => {
+  test("basic use", async () => {
+    class Child extends Component {
+      static template = xml`<span>child<t t-esc="props.p"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child p="1"/>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>child1</span>");
+  });
+
+  test("sub widget is interactive", async () => {
+    class Child extends Component {
+      static template = xml`
+            <span>
+                <button t-on-click="inc">click</button>child<t t-esc="state.val"/>
+            </span>`;
+      state = useState({ val: 1 });
+      inc() {
+        this.state.val++;
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child p="1"/>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span><button>click</button>child1</span>");
+    const button = fixture.querySelector("button")!;
+    button.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span><button>click</button>child2</span>");
+  });
+
+  test("can select a sub widget ", async () => {
+    class Child extends Component {
+      static template = xml`<span>CHILD 1</span>`;
+    }
+    class OtherChild extends Component {
+      static template = xml`<div>CHILD 2</div>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+            <t>
+              <t t-if="env.flag"><Child /></t>
+              <t t-if="!env.flag"><OtherChild /></t>
+            </t>
+          `;
+      static components = { Child, OtherChild };
+    }
+    const env = { flag: true };
+    const app = new App(Parent);
+    app.configure({ env });
+    const parent = await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
+
+    env.flag = false;
+    await parent.render();
+    expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
+  });
+
+  test("can select a sub widget, part 2", async () => {
+    class Child extends Component {
+      static template = xml`<span>CHILD 1</span>`;
+    }
+    class OtherChild extends Component {
+      static template = xml`<div>CHILD 2</div>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+            <t>
+              <t t-if="state.flag"><Child /></t>
+              <t t-if="!state.flag"><OtherChild /></t>
+            </t>
+          `;
+      state = useState({ flag: true });
+      static components = { Child, OtherChild };
+    }
+    let parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
+  });
+
+  test("top level sub widget with a parent", async () => {
+    class ComponentC extends Component {
+      static template = xml`<span>Hello</span>`;
+    }
+    class ComponentB extends Component {
+      static template = xml`<ComponentC />`;
+      static components = { ComponentC };
+    }
+    class ComponentA extends Component {
+      static template = xml`<div><ComponentB/></div>`;
+      static components = { ComponentB };
+    }
+
+    await mount(ComponentA, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>Hello</span></div>");
+  });
+});

tests/components/lifecycle.test.ts

@@ -0,0 +1,912 @@
+import { App, Component, mount, onMounted, onWillStart, useState } from "../../src";
+import {
+  onWillPatch,
+  onWillUnmount,
+  onPatched,
+  onWillUpdateProps,
+  onRender,
+} from "../../src/lifecycle_hooks";
+import { status } from "../../src/component/status";
+import { xml } from "../../src/tags";
+import {
+  makeDeferred,
+  makeTestFixture,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
+} from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("lifecycle hooks", () => {
+  test("basic checks for a component", async () => {
+    expect.assertions(6); // 1 for snapshots
+    class Test extends Component {
+      static template = xml`<span>test</span>`;
+
+      setup() {
+        expect(status(this)).toBe("new");
+      }
+    }
+
+    const app = new App(Test);
+
+    const component = await app.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<span>test</span>");
+    expect(status(component)).toBe("mounted");
+
+    app.destroy();
+
+    expect(fixture.innerHTML).toBe("");
+    expect(status(component)).toBe("destroyed");
+  });
+
+  test("willStart is called", async () => {
+    let willstart = false;
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+      setup() {
+        onWillStart(() => {
+          willstart = true;
+        });
+      }
+    }
+
+    await mount(Test, fixture);
+    expect(willstart).toBe(true);
+  });
+
+  test("willStart hook is called on sub component", async () => {
+    let ok = false;
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        onWillStart(() => {
+          ok = true;
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(ok).toBe(true);
+  });
+
+  test("willStart is called with component as this", async () => {
+    expect.assertions(3);
+    let comp: any;
+
+    class Test extends Component {
+      static template = xml`<span>simple vnode</span>`;
+      setup() {
+        comp = this;
+        onWillStart(this.willStart);
+      }
+
+      willStart() {
+        expect(this).toBeInstanceOf(Test);
+        expect(this).toBe(comp);
+      }
+    }
+
+    await mount(Test, fixture);
+  });
+
+  test("mounted hook is called if mounted in DOM", async () => {
+    let mounted = false;
+    class Test extends Component {
+      static template = xml`<div/>`;
+
+      setup() {
+        onMounted(() => {
+          mounted = true;
+        });
+      }
+    }
+    await mount(Test, fixture);
+    expect(mounted).toBe(true);
+  });
+
+  test("mounted hook is called on subcomponents, in proper order", async () => {
+    const steps: any[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        onMounted(() => {
+          expect(document.body.contains(this.el!)).toBe(true);
+          steps.push("child:mounted");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><Child /></div>`;
+      static components = { Child };
+      setup() {
+        onMounted(() => {
+          steps.push("parent:mounted");
+        });
+      }
+    }
+    await mount(Parent, fixture);
+    expect(steps).toEqual(["child:mounted", "parent:mounted"]);
+    Object.freeze(steps);
+  });
+
+  test("mounted hook is called on subsubcomponents, in proper order", async () => {
+    const steps: any[] = [];
+
+    class ChildChild extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        onMounted(() => {
+          steps.push("childchild:mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("childchild:willUnmount");
+        });
+      }
+    }
+
+    class Child extends Component {
+      static template = xml`<div><ChildChild /></div>`;
+      static components = { ChildChild };
+      setup() {
+        onMounted(() => {
+          steps.push("child:mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("child:willUnmount");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><t t-if="state.flag"><Child/></t></div>`;
+      static components = { Child };
+      state = useState({ flag: false });
+      setup() {
+        onMounted(() => {
+          steps.push("parent:mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("parent:willUnmount");
+        });
+      }
+    }
+
+    const app = new App(Parent);
+    const widget = await app.mount(fixture);
+    expect(steps).toEqual(["parent:mounted"]);
+    widget.state.flag = true;
+    await nextTick();
+    app.destroy();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "childchild:mounted",
+      "child:mounted",
+      "parent:willUnmount",
+      "child:willUnmount",
+      "childchild:willUnmount",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("willPatch, patched hook are called on subsubcomponents, in proper order", async () => {
+    const steps: any[] = [];
+
+    class ChildChild extends Component {
+      static template = xml`
+        <div><t t-esc="props.n"/></div>
+      `;
+
+      setup() {
+        onWillPatch(() => {
+          steps.push("childchild:willPatch");
+        });
+        onPatched(() => {
+          steps.push("childchild:patched");
+        });
+      }
+    }
+
+    class Child extends Component {
+      static template = xml`
+        <div><ChildChild n="props.n"/></div>
+      `;
+      static components = { ChildChild };
+
+      setup() {
+        onWillPatch(() => {
+          steps.push("child:willPatch");
+        });
+        onPatched(() => {
+          steps.push("child:patched");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div><Child n="state.n"/></div>
+      `;
+      static components = { Child };
+
+      state = useState({ n: 1 });
+
+      setup() {
+        onWillPatch(() => {
+          steps.push("parent:willPatch");
+        });
+        onPatched(() => {
+          steps.push("parent:patched");
+        });
+      }
+    }
+
+    const app = new App(Parent);
+    const parent = await app.mount(fixture);
+    expect(steps).toEqual([]);
+    parent.state.n = 2;
+    await nextTick();
+    app.destroy();
+    expect(steps).toEqual([
+      "parent:willPatch",
+      "child:willPatch",
+      "childchild:willPatch",
+      "childchild:patched",
+      "child:patched",
+      "parent:patched",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
+    const steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+
+      setup() {
+        onWillStart(() => {
+          steps.push("child:willStart");
+        });
+        onMounted(() => {
+          steps.push("child:mounted");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      // the t-else part in the template is important. This is
+      // necessary to have a situation that could confuse the vdom
+      // patching algorithm
+      static template = xml`
+        <div>
+          <t t-if="state.ok">
+            <Child />
+          </t>
+          <t t-else="">
+            <div/>
+          </t>
+        </div>`;
+
+      static components = { Child };
+      state = useState({ ok: false });
+    }
+    const parent = await mount(Parent, fixture);
+    expect(steps).toEqual([]);
+    parent.state.ok = true;
+    await nextTick();
+    expect(steps).toEqual(["child:willStart", "child:mounted"]);
+    Object.freeze(steps);
+    Object.freeze(steps);
+  });
+
+  test("components are unmounted and destroyed if no longer in DOM", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        steps.push("setup");
+        onWillStart(() => {
+          steps.push("willstart");
+        });
+        onMounted(() => {
+          steps.push("mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("willunmount");
+        });
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<t t-if="state.ok"><Child /></t>`;
+      static components = { Child };
+      state = useState({ ok: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(steps).toEqual(["setup", "willstart", "mounted"]);
+    parent.state.ok = false;
+    await nextTick();
+    expect(steps).toEqual(["setup", "willstart", "mounted", "willunmount"]);
+    Object.freeze(steps);
+  });
+
+  test("components are unmounted and destroyed if no longer in DOM, even after updateprops", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.n"/></span>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+          <div t-if="state.flag">
+            <Child n="state.n"/>
+          </div>
+      `;
+      static components = { Child };
+      setup() {
+        useLogLifecycle(steps);
+      }
+      state = useState({ n: 0, flag: true });
+      increment() {
+        this.state.n += 1;
+      }
+      toggleSubWidget() {
+        this.state.flag = !this.state.flag;
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
+    parent.increment();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    parent.toggleSubWidget();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("");
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+      "Parent:render",
+      "Child:willUpdateProps",
+      "Child:render",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+      "Parent:render",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:destroyed",
+      "Parent:patched",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("hooks are called in proper order in widget creation/destruction", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        steps.push("c init");
+        onWillStart(() => {
+          steps.push("c willstart");
+        });
+        onMounted(() => {
+          steps.push("c mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("c willunmount");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><Child/></div>`;
+      static components = { Child };
+      setup() {
+        steps.push("p init");
+        onWillStart(() => {
+          steps.push("p willstart");
+        });
+        onMounted(() => {
+          steps.push("p mounted");
+        });
+        onWillUnmount(() => {
+          steps.push("p willunmount");
+        });
+      }
+    }
+
+    const app = new App(Parent);
+    await app.mount(fixture);
+    app.destroy();
+    expect(steps).toEqual([
+      "p init",
+      "p willstart",
+      "c init",
+      "c willstart",
+      "c mounted",
+      "p mounted",
+      "p willunmount",
+      "c willunmount",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("willUpdateProps hook is called", async () => {
+    let def = makeDeferred();
+
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.n"/></span>`;
+
+      setup() {
+        onWillUpdateProps((nextProps) => {
+          expect(nextProps.n).toBe(2);
+          return def;
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child n="state.n"/>`;
+      static components = { Child };
+      state = useState({ n: 1 });
+    }
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>1</span>");
+    parent.state.n = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>1</span>");
+    def.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>2</span>");
+  });
+
+  test("patched hook is called after updating State", async () => {
+    let n = 0;
+
+    class Test extends Component {
+      static template = xml`<div/>`;
+      state = useState({ a: 1 });
+
+      setup() {
+        onPatched(() => n++);
+      }
+    }
+    const widget = await mount(Test, fixture);
+    expect(n).toBe(0);
+
+    widget.state.a = 1; // empty update, should do nothing
+    await nextTick();
+    expect(n).toBe(0);
+
+    widget.state.a = 3;
+    await nextTick();
+    expect(n).toBe(1);
+  });
+
+  test("patched hook is called after updateProps", async () => {
+    let n = 0;
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        onWillUpdateProps(() => {
+          n++;
+        });
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<div><Child a="state.a"/></div>`;
+      state = useState({ a: 1 });
+      static components = { Child };
+    }
+
+    const widget = await mount(Parent, fixture);
+    expect(n).toBe(0);
+
+    widget.state.a = 2;
+    await nextTick();
+    expect(n).toBe(1);
+  });
+
+  test("lifecycle semantics", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<div><Child a="state.a"/></div>`;
+      static components = { Child };
+      state = useState({ a: 1 });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const app = new App(Parent);
+    await app.mount(fixture);
+
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+    ]);
+
+    steps.splice(0);
+    app.destroy();
+    expect(steps).toEqual([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "Child:destroyed",
+      "Parent:destroyed",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("lifecycle semantics, part 2", async () => {
+    let steps: string[] = [];
+
+    class GrandChild extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+    class Child extends Component {
+      static template = xml`<GrandChild/>`;
+      static components = { GrandChild };
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.hasChild"/>`;
+      static components = { Child };
+      state = useState({ hasChild: false });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const app = new App(Parent);
+    const parent = await app.mount(fixture);
+
+    expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
+
+    steps.splice(0);
+
+    parent.state.hasChild = true;
+    await nextTick();
+    expect(steps).toEqual([
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "GrandChild:setup",
+      "GrandChild:willStart",
+      "GrandChild:render",
+      "Parent:willPatch",
+      "GrandChild:mounted",
+      "Child:mounted",
+      "Parent:patched",
+    ]);
+
+    steps.splice(0);
+
+    app.destroy();
+    expect(steps).toEqual([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "GrandChild:willUnmount",
+      "GrandChild:destroyed",
+      "Child:destroyed",
+      "Parent:destroyed",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("lifecycle semantics, part 3", async () => {
+    let steps: string[] = [];
+
+    class GrandChild extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+    class Child extends Component {
+      static template = xml`<GrandChild/>`;
+      static components = { GrandChild };
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.hasChild"/>`;
+      static components = { Child };
+      state = useState({ hasChild: false });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const app = new App(Parent);
+    const parent = await app.mount(fixture);
+
+    expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
+
+    steps.splice(0);
+
+    parent.state.hasChild = true;
+
+    // immediately destroy everything
+    app.destroy();
+    await nextTick();
+    expect(steps).toEqual(["Parent:willUnmount", "Parent:destroyed"]);
+    Object.freeze(steps);
+  });
+
+  test("lifecycle semantics, part 4", async () => {
+    let def = makeDeferred();
+
+    let steps: string[] = [];
+
+    class GrandChild extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+        onWillStart(() => def);
+      }
+    }
+    class Child extends Component {
+      static template = xml`<GrandChild/>`;
+      static components = { GrandChild };
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.hasChild"/>`;
+      static components = { Child };
+      state = useState({ hasChild: false });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const app = new App(Parent);
+    const parent = await app.mount(fixture);
+
+    expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
+
+    steps.splice(0);
+
+    parent.state.hasChild = true;
+
+    await nextTick();
+    expect(steps).toEqual([
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "GrandChild:setup",
+      "GrandChild:willStart",
+    ]);
+
+    steps.splice(0);
+
+    app.destroy();
+    expect(steps).toEqual([
+      "Parent:willUnmount",
+      "GrandChild:destroyed",
+      "Child:destroyed",
+      "Parent:destroyed",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("lifecycle semantics, part 5", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.hasChild"/>`;
+      static components = { Child };
+      state = useState({ hasChild: true });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+    ]);
+
+    steps.splice(0);
+
+    parent.state.hasChild = false;
+
+    await nextTick();
+    expect(steps).toEqual([
+      "Parent:render",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:destroyed",
+      "Parent:patched",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("lifecycle semantics, part 6", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div/>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child value="state.value" />`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+    ]);
+
+    steps.splice(0);
+
+    parent.state.value = 2;
+
+    await nextTick();
+    expect(steps).toEqual([
+      "Parent:render",
+      "Child:willUpdateProps",
+      "Child:render",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]);
+    Object.freeze(steps);
+  });
+
+  test("onRender", async () => {
+    let steps: string[] = [];
+    const def = makeDeferred();
+
+    class Child extends Component {
+      static template = xml`<button t-on-click="increment"><t t-esc="state.value"/></button>`;
+      state = useState({ value: 1 });
+      visibleState = this.state.value;
+      setup() {
+        useLogLifecycle(steps);
+        onWillUpdateProps(() => def);
+        onRender(() => (this.visibleState = this.state.value));
+      }
+      increment() {
+        this.state.value++;
+        steps.push(`inc:${this.visibleState}`);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child />`;
+      static components = { Child };
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<button>1</button>");
+
+    parent.render(); // to block child render
+    await nextTick();
+
+    fixture.querySelector("button")!.click();
+
+    await nextTick();
+    fixture.querySelector("button")!.click();
+
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe("<button>1</button>");
+
+    def.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<button>3</button>");
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+      "Parent:render",
+      "Child:willUpdateProps",
+      "inc:1",
+      "inc:1",
+      "Child:render",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]);
+    Object.freeze(steps);
+  });
+});

tests/components/props.test.ts

@@ -0,0 +1,105 @@
+import { Component, mount, useState } from "../../src";
+import { xml } from "../../src/tags";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("basics", () => {
+  test("explicit object prop", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="state.someval"/></span>`;
+      state: any;
+      setup() {
+        this.state = useState({ someval: this.props.value });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><Child value="state.val"/></div>`;
+      static components = { Child };
+      state = useState({ val: 42 });
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
+  });
+
+  test("accept ES6-like syntax for props (with getters)", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.greetings"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><Child greetings="greetings"/></div>`;
+      static components = { Child };
+      get greetings() {
+        const name = "aaron";
+        return `hello ${name}`;
+      }
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>hello aaron</span></div>");
+  });
+
+  test("t-set works ", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+            <div>
+                <t t-set="val" t-value="42"/>
+                <Child val="val"/>
+            </div>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
+  });
+
+  test("t-set with a body expression can be used as textual prop", async () => {
+    class Child extends Component {
+      static template = xml`<span t-esc="props.val"/>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-set="abc">42</t>
+          <Child val="abc"/>
+        </div>`;
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
+  });
+
+  test("t-set with a body expression can be passed in props, and then t-raw", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span>
+          <t t-esc="props.val"/>
+          <t t-raw="props.val"/>
+        </span>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-set="abc"><p>43</p></t>
+          <Child val="abc"/>
+        </div>`;
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>&lt;p&gt;43&lt;/p&gt;<p>43</p></span></div>");
+  });
+});

tests/components/refs.test.ts

@@ -0,0 +1,47 @@
+import { Component, mount, useRef, useState } from "../../src/index";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { xml } from "../../src/index";
+
+snapshotEverything();
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("refs", () => {
+  test("refs are properly bound in slots", async () => {
+    class Dialog extends Component {
+      static template = xml`<span><t t-slot="footer"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+            <div>
+              <span class="counter"><t t-esc="state.val"/></span>
+              <Dialog>
+                <t t-set-slot="footer"><button t-ref="myButton" t-on-click="doSomething">do something</button></t>
+              </Dialog>
+            </div>
+          `;
+      static components = { Dialog };
+      state = useState({ val: 0 });
+      button = useRef("myButton");
+      doSomething() {
+        this.state.val++;
+      }
+    }
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">0</span><span><button>do something</button></span></div>'
+    );
+
+    parent.button.el!.click();
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">1</span><span><button>do something</button></span></div>'
+    );
+  });
+});

tests/components/style_class.test.ts

@@ -0,0 +1,237 @@
+import { Component, mount, useState, xml } from "../../src";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("style and class handling", () => {
+  test("can set style and class inside component", async () => {
+    class Test extends Component {
+      static template = xml`
+          <div style="font-weight:bold;" class="some-class">world</div>
+        `;
+    }
+    await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe(`<div style="font-weight:bold;" class="some-class">world</div>`);
+  });
+
+  test("can set class on sub component, as prop", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class">child</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'some-class'" />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="some-class">child</div>`);
+  });
+
+  test("no class is set is parent does not give it as prop", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class">child</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div>child</div>`);
+  });
+
+  test("no class is set is child ignores it", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'hey'"/>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div>child</div>`);
+  });
+
+  test("empty class attribute is not added on widget root el", async () => {
+    class Child extends Component {
+      static template = xml`<span t-att-class="props.class"/>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Child class=""/></div>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
+  });
+
+  test("can set more than one class on sub component", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class">child</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'a  b'" />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="a b">child</div>`);
+  });
+
+  test("component class and parent class combine together", async () => {
+    class Child extends Component {
+      static template = xml`<div class="child" t-att-class="props.class">child</div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'from parent'" />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="child from parent">child</div>`);
+  });
+
+  test("can set class on sub sub component", async () => {
+    class ChildChild extends Component {
+      static template = xml`<div t-att-class="props.class">childchild</div>`;
+    }
+
+    class Child extends Component {
+      static template = xml`<ChildChild class="(props.class || '') + ' fromchild'" />`;
+      static components = { ChildChild };
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'fromparent'" />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="fromparent fromchild">childchild</div>`);
+  });
+
+  test("can set class on multi root component", async () => {
+    class Child extends Component {
+      static template = xml`<div>a</div><span t-att-class="props.class">b</span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'fromparent'" />`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div>a</div><span class="fromparent">b</span>`);
+  });
+
+  test("class on sub component, which is switched to another", async () => {
+    class ChildA extends Component {
+      static template = xml`<div t-att-class="props.class">a</div>`;
+    }
+    class ChildB extends Component {
+      static template = xml`<span t-att-class="props.class">b</span>`;
+    }
+    class Child extends Component {
+      static template = xml`<ChildA class="props.class" t-if="props.child==='a'"/><ChildB class="props.class" t-else=""/>`;
+      static components = { ChildA, ChildB };
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child class="'someclass'" child="state.child" />`;
+      static components = { Child };
+
+      state = useState({ child: "a" });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="someclass">a</div>`);
+    parent.state.child = "b";
+    await nextTick();
+    expect(fixture.innerHTML).toBe(`<span class="someclass">b</span>`);
+  });
+
+  // test("t-att-class is properly added/removed on widget root el", async () => {
+  //   class Child extends Component {
+  //     static template = xml`<div class="c"/>`;
+  //   }
+  //   class Parent extends Component {
+  //     static template = xml`<div><Child t-att-class="{a:state.a, b:state.b}"/></div>`;
+  //     static components = { Child };
+  //     state = useState({ a: true, b: false });
+  //   }
+  //   const widget = await mount(Parent, fixture);
+  //   expect(fixture.innerHTML).toBe(`<div><div class="c a"></div></div>`);
+
+  //   widget.state.a = false;
+  //   widget.state.b = true;
+  //   await nextTick();
+  //   expect(fixture.innerHTML).toBe(`<div><div class="c b"></div></div>`);
+  // });
+
+  test("class with extra whitespaces", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class"/>`;
+    }
+    class Parent extends Component {
+      static template = xml`<Child class="'a  b c   d'"/>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<div class="a b c d"></div>`);
+  });
+
+  test("class with extra whitespaces (variation)", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class"/>`;
+    }
+    class Parent extends Component {
+      static template = xml`<p><Child class="'a  b c   d'"/></p>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(`<p><div class="a b c d"></div></p>`);
+  });
+
+  test("t-att-class is properly added/removed on widget root el (v2)", async () => {
+    let child: any = null;
+    class Child extends Component {
+      static template = xml`<span class="c" t-att-class="{ d: state.d, ...props.class }"/>`;
+      state = useState({ d: true });
+      setup() {
+        child = this;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child class="{ b: state.b }" />
+        </div>`;
+      static components = { Child };
+      state = useState({ b: true });
+    }
+    const widget = await mount(Parent, fixture);
+
+    const span = fixture.querySelector("span")!;
+    expect(span.className).toBe("c d b");
+
+    widget.state.b = false;
+    await nextTick();
+    expect(span.className).toBe("c d");
+
+    child.state.d = false;
+    await nextTick();
+    expect(span.className).toBe("c");
+
+    widget.state.b = true;
+    await nextTick();
+    expect(span.className).toBe("c b");
+
+    child.state.d = true;
+    await nextTick();
+    expect(span.className).toBe("c b d");
+  });
+});

tests/components/t_call.test.ts

@@ -0,0 +1,165 @@
+import { App, Component, mount, useState, xml } from "../../src/index";
+import {
+  addTemplate,
+  isDirectChildOf,
+  makeTestFixture,
+  nextTick,
+  snapshotEverything,
+} from "../helpers";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("t-call", () => {
+  test("dynamic t-call", async () => {
+    class App extends Component {
+      static template = xml`
+          <t t-call="{{current.template}}">
+            owl
+          </t>`;
+      current = useState({ template: "foo" });
+    }
+    addTemplate("foo", "<div>foo</div>");
+    addTemplate("bar", "bar");
+
+    const app = await mount(App, fixture);
+    expect(fixture.innerHTML).toBe("<div>foo</div>");
+
+    app.current.template = "bar";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("bar");
+  });
+
+  test("sub components in two t-calls", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+          <t t-if="state.val===1">
+            <t t-call="sub"/>
+          </t>
+          <div t-else=""><t t-call="sub"/></div>`;
+      static components = { Child };
+      state = useState({ val: 1 });
+    }
+    const app = new App(Parent);
+    app.addTemplate("sub", `<Child val="state.val"/>`);
+
+    const parent = await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>1</span>");
+    parent.state.val = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
+  });
+
+  test("handlers are properly bound through a t-call", async () => {
+    let parent: any;
+
+    const subTemplate = xml`<p t-on-click="update">lucas</p>`;
+    class Parent extends Component {
+      static template = xml`
+        <div><t t-call="${subTemplate}"/><t t-esc="counter"/></div>`;
+      counter = 0;
+
+      update() {
+        expect(this).toBe(parent);
+        this.counter++;
+        this.render();
+      }
+    }
+    parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><p>lucas</p>0</div>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p>lucas</p>1</div>");
+  });
+
+  test("parent is set within t-call", async () => {
+    const sub = xml`<Child/>`;
+    let child: any = null;
+    class Child extends Component {
+      static template = xml`<span>lucas</span>`;
+      setup() {
+        child = this;
+      }
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<div><t t-call="${sub}"/></div>`;
+    }
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>lucas</span></div>");
+    expect(isDirectChildOf(child, parent)).toBeTruthy();
+  });
+
+  test("t-call in t-foreach and children component", async () => {
+    const sub = xml`<Child val="val"/>`;
+
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-foreach="['a', 'b', 'c']" t-as="val" t-key="val">
+            <t t-call="${sub}"/>
+          </t>
+        </div>`;
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>a</span><span>b</span><span>c</span></div>");
+  });
+
+  test("parent is set within t-call with no parentNode", async () => {
+    const sub = xml`<Child />`;
+
+    let child: any = null;
+
+    class Child extends Component {
+      setup() {
+        child = this;
+      }
+      static template = xml`<span>lucas</span>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<t t-call="${sub}"/>`;
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>lucas</span>");
+    expect(isDirectChildOf(child, parent)).toBe(true);
+  });
+
+  test("handlers with arguments are properly bound through a t-call", async () => {
+    const sub = xml`<p t-on-click="update(a)">lucas</p>`;
+
+    let value: any = null;
+
+    class Parent extends Component {
+      static template = xml`<div><t t-call="${sub}"/></div>`;
+      update(a: any) {
+        expect(this).toBe(parent);
+        value = a;
+      }
+      a = 3;
+    }
+    const parent = await mount(Parent, fixture);
+
+    fixture.querySelector("p")!.click();
+    expect(value).toBe(3);
+  });
+});

tests/components/t_call_block.test.ts

@@ -0,0 +1,25 @@
+import { text } from "../../src/blockdom";
+import { Component, mount, xml } from "../../src/index";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("t-call-block", () => {
+  test("simple t-call-block with static text", async () => {
+    class Test extends Component {
+      static template = xml`<div><t t-call-block="myBlock()"/></div>`;
+      myBlock() {
+        return text("hello");
+      }
+    }
+
+    await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("<div>hello</div>");
+  });
+});

tests/components/t_component.test.ts

@@ -0,0 +1,193 @@
+import { Component, mount, useState } from "../../src";
+import { xml } from "../../src/tags";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("t-component", () => {
+  test("t-component works in simple case", async () => {
+    let steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<t t-component="Child"/>`;
+      Child = Child;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div>child</div>");
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:mounted",
+      "Parent:mounted",
+    ]);
+  });
+
+  test("switching dynamic component", async () => {
+    let steps: string[] = [];
+
+    class ChildA extends Component {
+      static template = xml`<div>child a</div>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class ChildB extends Component {
+      static template = xml`child b`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<t t-component="Child"/>`;
+      Child = ChildA;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div>child a</div>");
+
+    parent.Child = ChildB;
+    parent.render();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("child b");
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "ChildA:setup",
+      "ChildA:willStart",
+      "ChildA:render",
+      "ChildA:mounted",
+      "Parent:mounted",
+      "Parent:render",
+      "ChildB:setup",
+      "ChildB:willStart",
+      "ChildB:render",
+      "Parent:willPatch",
+      "ChildA:willUnmount",
+      "ChildA:destroyed",
+      "ChildB:mounted",
+      "Parent:patched",
+    ]);
+  });
+
+  test("can switch between dynamic components without the need for a t-key", async () => {
+    class A extends Component {
+      static template = xml`<span>child a</span>`;
+    }
+    class B extends Component {
+      static template = xml`<span>child b</span>`;
+    }
+    class App extends Component {
+      static template = xml`
+        <div>
+            <t t-component="constructor.components[state.child]"/>
+        </div>`;
+      static components = { A, B };
+
+      state = useState({ child: "A" });
+    }
+    const app = await mount(App, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>child a</span></div>");
+    app.state.child = "B";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>child b</span></div>");
+  });
+
+  test("can use dynamic components (the class) if given", async () => {
+    class A extends Component {
+      static template = xml`<span>child a</span>`;
+    }
+    class B extends Component {
+      static template = xml`<span>child b</span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+      state = useState({
+        child: "a",
+      });
+      get myComponent() {
+        return this.state.child === "a" ? A : B;
+      }
+    }
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>child a</span>");
+    parent.state.child = "b";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>child b</span>");
+  });
+
+  test("can use dynamic components (the class) if given (with different root tagname)", async () => {
+    class A extends Component {
+      static template = xml`<span>child a</span>`;
+    }
+    class B extends Component {
+      static template = xml`<div>child b</div>`;
+    }
+    class Parent extends Component {
+      static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+      state = useState({
+        child: "a",
+      });
+      get myComponent() {
+        return this.state.child === "a" ? A : B;
+      }
+    }
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>child a</span>");
+    parent.state.child = "b";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>child b</div>");
+  });
+
+  test("modifying a sub widget", async () => {
+    class Counter extends Component {
+      static template = xml`
+      <div><t t-esc="state.counter"/><button t-on-click="state.counter++">Inc</button></div>`;
+      state = useState({
+        counter: 0,
+      });
+    }
+
+    class ParentWidget extends Component {
+      static template = xml`<div><t t-component="Counter"/></div>`;
+
+      get Counter() {
+        return Counter;
+      }
+    }
+    await mount(ParentWidget, fixture);
+    expect(fixture.innerHTML).toBe("<div><div>0<button>Inc</button></div></div>");
+    const button = fixture.getElementsByTagName("button")[0];
+    await button.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div>1<button>Inc</button></div></div>");
+  });
+});

tests/components/t_foreach.test.ts

@@ -0,0 +1,200 @@
+import { Component, mount, useState, xml } from "../../src/index";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("list of components", () => {
+  test("simple list", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-esc="props.value"/></span>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+            <t t-foreach="state.elems" t-as="elem" t-key="elem.id">
+                <Child value="elem.value"/>
+            </t>`;
+      static components = { Child };
+
+      state = useState({
+        elems: [
+          { id: 1, value: "a" },
+          { id: 2, value: "b" },
+        ],
+      });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
+    parent.state.elems.push({ id: 4, value: "d" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span><span>d</span>");
+
+    parent.state.elems.pop();
+
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
+  });
+
+  test("components in a node in a t-foreach ", async () => {
+    const steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div><t t-esc="props.item"/></div>`;
+      setup() {
+        useLogLifecycle(steps);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+              <div>
+                  <ul>
+                      <t t-foreach="items" t-as="item" t-key="'li_'+item">
+                          <li>
+                              <Child item="item"/>
+                          </li>
+                      </t>
+                  </ul>
+              </div>`;
+      static components = { Child };
+
+      setup() {
+        useLogLifecycle(steps);
+      }
+
+      get items() {
+        return [1, 2];
+      }
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<div><ul><li><div>1</div></li><li><div>2</div></li></ul></div>"
+    );
+    expect(steps).toEqual([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:render",
+      "Child:setup",
+      "Child:willStart",
+      "Child:setup",
+      "Child:willStart",
+      "Child:render",
+      "Child:render",
+      "Child:mounted",
+      "Child:mounted",
+      "Parent:mounted",
+    ]);
+  });
+
+  test("reconciliation alg works for t-foreach in t-foreach", async () => {
+    class Child extends Component {
+      static template = xml`<div><t t-esc="props.blip"/></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+            <t t-foreach="state.s" t-as="section" t-key="section_index">
+                <t t-foreach="section.blips" t-as="blip" t-key="blip_index">
+                  <Child blip="blip"/>
+                </t>
+            </t>
+        </div>`;
+      static components = { Child };
+      state = { s: [{ blips: ["a1", "a2"] }, { blips: ["b1"] }] };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><div>a1</div><div>a2</div><div>b1</div></div>");
+  });
+
+  test("reconciliation alg works for t-foreach in t-foreach, 2", async () => {
+    class Child extends Component {
+      static template = xml`<div><t t-esc="props.row + '_' + props.col"/></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <p t-foreach="state.rows" t-as="row" t-key="row">
+            <p t-foreach="state.cols" t-as="col" t-key="col">
+                <Child row="row" col="col"/>
+              </p>
+            </p>
+        </div>`;
+      static components = { Child };
+      state = useState({ rows: [1, 2], cols: ["a", "b"] });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<div><p><p><div>1_a</div></p><p><div>1_b</div></p></p><p><p><div>2_a</div></p><p><div>2_b</div></p></p></div>"
+    );
+    parent.state.rows = [2, 1];
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><p><p><div>2_a</div></p><p><div>2_b</div></p></p><p><p><div>1_a</div></p><p><div>1_b</div></p></p></div>"
+    );
+  });
+
+  test("sub components rendered in a loop", async () => {
+    class Child extends Component {
+      static template = xml`<p><t t-esc="props.n"/></p>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <t t-foreach="state.numbers" t-as="number" t-key="number" >
+            <Child n="number"/>
+          </t>
+        </div>`;
+      static components = { Child };
+
+      state = useState({ numbers: [1, 2, 3] });
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe(`<div><p>1</p><p>2</p><p>3</p></div>`);
+  });
+
+  test("sub components with some state rendered in a loop", async () => {
+    let n = 1;
+
+    class Child extends Component {
+      static template = xml`<p><t t-esc="state.n"/></p>`;
+      state: any;
+      setup() {
+        this.state = useState({ n });
+        n++;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <t t-foreach="state.numbers" t-as="number" t-key="number">
+            <Child/>
+          </t>
+        </div>`;
+      static components = { Child };
+
+      state = useState({
+        numbers: [1, 2, 3],
+      });
+    }
+    const parent = await mount(Parent, fixture);
+
+    parent.state.numbers = [1, 3];
+    await nextTick();
+    expect(fixture.innerHTML).toBe(`<div><p>1</p><p>3</p></div>`);
+  });
+});