prototype for hydration

closes #850

.github/workflows/deploy.yml

@@ -5,7 +5,7 @@ name: Node.js CI
 
 on:
   pull_request:
-    branches: [ master, owl-next ]
+    branches: [ master ]
 
 jobs:
   build:

README.md

@@ -121,5 +121,5 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.7](https://github.com/odoo/owl/releases/tag/v1.4.7)
+- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 

doc/reference/component.md

@@ -352,7 +352,7 @@ cleaning operation, since the component may be destroyed before it has even been
 mounted. The `willDestroy` hook is useful in that situation, since it is always
 called.
 
-The `onWillDestroy` hook is used to register a function that will be executed at
+The `onWillUnmount` hook is used to register a function that will be executed at
 this moment:
 
 ```javascript

doc/reference/event_bus.md

@@ -1,25 +0,0 @@
-# 🦉 Event Bus 🦉
-
-It is sometimes useful to use a `Bus` to communicate informations between various
-parts of the code. Owl has a very simple bus class, which manages subscriptions,
-triggering events, and callbacks.
-
-```js
-const bus = new owl.core.EventBus();
-
-bus.on("some-event", null, function (...args) {
-  console.log(...args);
-});
-
-bus.trigger("some-event", 1, 2, 3);
-// [1,2,3] will be logged to the console
-```
-
-Its API is:
-
-| Method                           | Description                       |
-| -------------------------------- | --------------------------------- |
-| `on(eventType, owner, callback)` | add a listener                    |
-| `off(eventType, owner)`          | remove all listeners for an owner |
-| `trigger(eventType, ...args)`    | trigger an event                  |
-| `clear`                          | remove all subscriptions          |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.4.7
+- Current version: 1.4.10
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/app/app.ts

@@ -18,10 +18,14 @@ export interface AppConfig<P, E> extends TemplateSetConfig {
   test?: boolean;
 }
 
-export const DEV_MSG = `Owl is running in 'dev' mode.
+export const DEV_MSG = () => {
+  const hash = (window as any).owl ? (window as any).owl.__info__.hash : "master";
+
+  return `Owl is running in 'dev' mode.
 
 This is not suitable for production use.
-See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for more information.`;
+See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
+};
 
 export class App<
   T extends abstract new (...args: any) => any = any,
@@ -43,7 +47,7 @@ export class App<
       this.dev = true;
     }
     if (this.dev && !config.test) {
-      console.info(DEV_MSG);
+      console.info(DEV_MSG());
     }
     const descrs = Object.getOwnPropertyDescriptors(config.env || {});
     this.env = Object.freeze(Object.defineProperties({}, descrs)) as E;

src/blockdom/attributes.ts

@@ -139,7 +139,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
-    (this as any)[name] = value;
+    (this as any)[name] = value || "";
   };
 }
 

src/blockdom/block_compiler.ts

@@ -525,6 +525,54 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       this.parentEl = parent;
     }
     patch(other: Block, withBeforeRemove: boolean) {}
+
+    hydrate(parent: HTMLElement, el: HTMLElement) {
+      this.parentEl = parent;
+      this.el = el;
+      const refs: Node[] = new Array(refN);
+      this.refs = refs;
+      refs[0] = el;
+      for (let i = 0; i < colN; i++) {
+        const w = collectors[i];
+        refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
+      }
+
+      // applying data to all update points
+      if (locN) {
+        const data = this.data!;
+        for (let i = 0; i < locN; i++) {
+          const loc = locations[i];
+          loc.setData.call(refs[loc.refIdx], data[i]);
+        }
+      }
+
+      // preparing all children
+      if (childN) {
+        const children = this.children;
+        for (let i = 0; i < childN; i++) {
+          const child = children![i];
+          if (child) {
+            const loc = childrenLocs[i];
+            let target: HTMLElement;
+            if (loc.afterRefIdx) {
+              target = refs[loc.afterRefIdx] as HTMLElement;
+              const afterNode = document.createTextNode("");
+              target.parentElement!.insertBefore(afterNode, target.nextSibling);
+              refs[loc.afterRefIdx!] = afterNode;
+            } else {
+              target = refs[loc.parentRefIdx].firstChild! as HTMLElement;
+            }
+
+            // const target = (loc.afterRefIdx ? refs[loc.afterRefIdx] : null) as HTMLElement;
+            // const afterNode = document.createTextNode("");
+            // target.parentElement!.insertBefore(afterNode, target.nextSibling);
+            // refs[loc.afterRefIdx!] = afterNode;
+            child.isOnlyChild = loc.isOnlyChild;
+            (child as any).hydrate(target.parentElement, target);
+          }
+        }
+      }
+    }
   }
 
   if (isDynamic) {

src/blockdom/index.ts

@@ -42,3 +42,7 @@ export function withKey(vnode: VNode, key: any) {
   vnode.key = key;
   return vnode;
 }
+
+export function hydrate(vnode: VNode, target: HTMLElement) {
+  (vnode as any).hydrate(target.parentElement, target);
+}

src/blockdom/text.ts

@@ -23,6 +23,12 @@ abstract class VSimpleNode {
     this.el = node;
   }
 
+  hydrate(parent: HTMLElement, elem: Node) {
+    this.parentEl = parent;
+    this.el = elem;
+    // this.mountNode(elem, parent, elem.nextSibling);
+  }
+
   moveBefore(other: VText | null, afterNode: Node | null) {
     const target = other ? other.el! : afterNode;
     nodeInsertBefore.call(this.parentEl, this.el!, target);

src/component/component_node.ts

@@ -272,6 +272,15 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     this.fiber = null;
   }
 
+  hydrate(parent: HTMLElement, el: HTMLElement) {
+    const bdom = this.fiber!.bdom!;
+    this.bdom = bdom;
+    (bdom as any).hydrate(parent, el);
+    this.status = STATUS.MOUNTED;
+    this.fiber!.appliedToDom = true;
+    this.fiber = null;
+  }
+
   moveBefore(other: ComponentNode | null, afterNode: Node | null) {
     this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
   }

src/component/fibers.ts

@@ -1,4 +1,4 @@
-import { BDom, mount } from "../blockdom";
+import { BDom, hydrate, mount } from "../blockdom";
 import type { ComponentNode } from "./component_node";
 import { fibersInError, handleError } from "./error_handling";
 import { STATUS } from "./status";
@@ -144,15 +144,18 @@ type Position = "first-child" | "last-child";
 
 export interface MountOptions {
   position?: Position;
+  hydrate?: boolean;
 }
 
 export class MountFiber extends RootFiber {
   target: HTMLElement;
   position: Position;
+  hydrate?: boolean;
 
   constructor(node: ComponentNode, target: HTMLElement, options: MountOptions = {}) {
     super(node, null);
     this.target = target;
+    this.hydrate = options.hydrate;
     this.position = options.position || "last-child";
   }
   complete() {
@@ -168,7 +171,9 @@ export class MountFiber extends RootFiber {
         node.updateDom();
       } else {
         node.bdom = this.bdom;
-        if (this.position === "last-child" || this.target.childNodes.length === 0) {
+        if (this.hydrate) {
+          hydrate(node.bdom!, this.target);
+        } else if (this.position === "last-child" || this.target.childNodes.length === 0) {
           mount(node.bdom!, this.target);
         } else {
           const firstChild = this.target.childNodes[0];

src/component/lifecycle_hooks.ts

@@ -1,62 +1,97 @@
 import { getCurrent } from "./component_node";
 import { nodeErrorHandlers } from "./error_handling";
 
+function wrapError(fn: (...args: any[]) => any, hookName: string) {
+  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
+    cause: any;
+  };
+  return (...args: any[]) => {
+    try {
+      const result = fn(...args);
+      if (result instanceof Promise) {
+        return result.catch((cause) => {
+          error.cause = cause;
+          if (cause instanceof Error) {
+            error.message += `"${cause.message}"`;
+          }
+          throw error;
+        });
+      }
+      return result;
+    } catch (cause) {
+      if (cause instanceof Error) {
+        error.message += `"${cause.message}"`;
+      }
+      throw error;
+    }
+  };
+}
+
 // -----------------------------------------------------------------------------
 //  hooks
 // -----------------------------------------------------------------------------
 
 export function onWillStart(fn: () => Promise<void> | void | any) {
   const node = getCurrent();
-  node.willStart.push(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
 }
 
 export function onWillUpdateProps(fn: (nextProps: any) => Promise<void> | void | any) {
   const node = getCurrent();
-  node.willUpdateProps.push(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
 }
 
 export function onMounted(fn: () => void | any) {
   const node = getCurrent();
-  node.mounted.push(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
 }
 
 export function onWillPatch(fn: () => Promise<void> | any | void) {
   const node = getCurrent();
-  node.willPatch.unshift(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
 }
 
 export function onPatched(fn: () => void | any) {
   const node = getCurrent();
-  node.patched.push(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.patched.push(decorate(fn.bind(node.component), "onPatched"));
 }
 
 export function onWillUnmount(fn: () => Promise<void> | void | any) {
   const node = getCurrent();
-  node.willUnmount.unshift(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
 }
 
 export function onWillDestroy(fn: () => Promise<void> | void | any) {
   const node = getCurrent();
-  node.willDestroy.push(fn.bind(node.component));
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
 }
 
 export function onWillRender(fn: () => void | any) {
   const node = getCurrent();
   const renderFn = node.renderFn;
-  node.renderFn = () => {
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.renderFn = decorate(() => {
     fn.call(node.component);
     return renderFn();
-  };
+  }, "onWillRender");
 }
 
 export function onRendered(fn: () => void | any) {
   const node = getCurrent();
   const renderFn = node.renderFn;
-  node.renderFn = () => {
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.renderFn = decorate(() => {
     const result = renderFn();
     fn.call(node.component);
     return result;
-  };
+  }, "onRendered");
 }
 
 type OnErrorCallback = (error: any) => void | any;

tests/blockdom/block_attributes.test.ts

@@ -169,6 +169,15 @@ describe("properties", () => {
     expect(input.value).toBe("potato");
   });
 
+  test("input with value attribute, and undefined given", () => {
+    const block = createBlock(`<input block-attribute-0="value"/>`);
+
+    const tree = block([undefined]);
+    mount(tree, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+  });
+
   test("input type=checkbox with checked attribute", () => {
     // render input with initial value
     const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);

tests/blockdom/hydration.test.ts

@@ -0,0 +1,78 @@
+import { hydrate, patch, text, createBlock } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("hydration", () => {
+  test("simple text node", async () => {
+    fixture.innerHTML = "some text";
+    const target = fixture.firstChild as any;
+
+    const tree = text("some text");
+    expect(tree.el).toBe(undefined);
+    hydrate(tree, target);
+    expect(fixture.innerHTML).toBe("some text");
+    expect(tree.el).toBe(target);
+
+    patch(tree, text("checkmate"));
+    expect(fixture.innerHTML).toBe("checkmate");
+  });
+
+  test("simple static block", async () => {
+    fixture.innerHTML = "<div>some text</div>";
+    const target = fixture.firstChild as any;
+
+    const block = createBlock("<div>some text</div>");
+
+    const tree = block();
+    expect(tree.el).toBe(undefined);
+    hydrate(tree, target);
+    expect(fixture.innerHTML).toBe("<div>some text</div>");
+    expect(tree.el).toBe(target);
+  });
+
+  test("simple dynamic block", async () => {
+    fixture.innerHTML = "<div>some text</div>";
+    const target = fixture.firstChild as any;
+
+    const block = createBlock("<div><block-text-0/></div>");
+
+    const tree = block(["some text"]);
+    expect(tree.el).toBe(undefined);
+    hydrate(tree, target);
+    expect(fixture.innerHTML).toBe("<div>some text</div>");
+    expect(tree.el).toBe(target);
+
+    patch(tree, block(["giuoco piano"]));
+    expect(fixture.innerHTML).toBe("<div>giuoco piano</div>");
+  });
+
+  test("block with sub block", async () => {
+    fixture.innerHTML = "<div>queen<p>gambit</p></div>";
+    const target = fixture.firstChild as any;
+
+    const block1 = createBlock("<div><block-text-0/><block-child-0/></div>");
+    const block2 = createBlock("<p><block-text-0/></p>");
+
+    const tree = block1(["queen"], [block2(["gambit"])]);
+    expect(tree.el).toBe(undefined);
+    hydrate(tree, target);
+    expect(fixture.innerHTML).toBe("<div>queen<p>gambit</p></div>");
+    expect(tree.el).toBe(target);
+
+    patch(tree, block1(["king"], [block2(["pawn"])]));
+    expect(fixture.innerHTML).toBe("<div>king<p>pawn</p></div>");
+  });
+});

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

@@ -1092,6 +1092,19 @@ exports[`errors and promises an error in mounted call will reject the mount prom
 }"
 `;
 
+exports[`errors and promises an error in onMounted callback will have the component's setup in its stack trace 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`errors and promises an error in patched call will reject the render promise 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hydration can hydrate a component with a handler 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['inc'], ctx];
+    let txt1 = ctx['state'].value;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`hydration can hydrate a component with a sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Counter\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`hydration can hydrate a component with a sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['inc'], ctx];
+    let txt1 = ctx['state'].value;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`hydration can hydrate a simple static component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>giuoco pianissimo</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

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

@@ -410,6 +410,24 @@ exports[`t-model directive on an textarea 1`] = `
 }"
 `;
 
+exports[`t-model directive t-model on an input with an undefined value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { toNumber } = helpers;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const bExpr1 = ctx['state'];
+    const expr1 = 'text';
+    let attr1 = bExpr1[expr1];
+    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    return block1([attr1, hdlr1]);
+  }
+}"
+`;
+
 exports[`t-model directive t-model on select with static options 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/error_handling.test.ts

@@ -82,8 +82,6 @@ describe("basics", () => {
   });
 
   test("display a nice error if it cannot find component (in dev mode)", async () => {
-    const info = console.info;
-    console.info = jest.fn(() => {}); // dev mode message
     class SomeComponent extends Component {}
     class Parent extends Component {
       static template = xml`<SomeMispelledComponent />`;
@@ -91,7 +89,7 @@ describe("basics", () => {
     }
     let error: Error;
     try {
-      await mount(Parent, fixture, { dev: true });
+      await mount(Parent, fixture, { test: true });
     } catch (e) {
       error = e as Error;
     }
@@ -100,8 +98,6 @@ describe("basics", () => {
     expect(console.error).toBeCalledTimes(0);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
-    expect(console.info).toBeCalledTimes(1);
-    console.info = info;
   });
 
   test("simple catchError", async () => {
@@ -179,6 +175,30 @@ describe("errors and promises", () => {
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
+  test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
+    class App extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        onMounted(() => {
+          throw new Error("boom");
+        });
+      }
+    }
+
+    let error: Error;
+    try {
+      await mount(App, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.stack).toContain("App.setup");
+    expect(error!.stack).toContain("error_handling.test.ts");
+    expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleError).toBeCalledTimes(0);
+    expect(mockConsoleWarn).toBeCalledTimes(1);
+  });
+
   test("an error in willPatch call will reject the render promise", async () => {
     class Root extends Component {
       static template = xml`<div><t t-esc="val"/></div>`;
@@ -191,13 +211,13 @@ describe("errors and promises", () => {
       }
     }
 
-    const root = await mount(Root, fixture);
+    const root = await mount(Root, fixture, { test: true });
     root.val = 4;
     let error: Error;
     root.render();
     await nextTick();
     expect(error!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.message).toBe(`The following error occurred in onWillPatch: "boom"`);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -214,13 +234,13 @@ describe("errors and promises", () => {
       }
     }
 
-    const root = await mount(Root, fixture);
+    const root = await mount(Root, fixture, { test: true });
     root.val = 4;
     let error: Error;
     root.render();
     await nextTick();
     expect(error!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.message).toBe(`The following error occurred in onPatched: "boom"`);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -296,7 +316,6 @@ describe("errors and promises", () => {
   });
 
   test("errors in mounted and in willUnmount", async () => {
-    expect.assertions(4);
     class Example extends Component {
       static template = xml`<div/>`;
       val: any;
@@ -313,9 +332,11 @@ describe("errors and promises", () => {
     }
 
     try {
-      await mount(Example, fixture);
+      await mount(Example, fixture, { test: true });
     } catch (e) {
-      expect((e as Error).message).toBe("Error in mounted");
+      expect((e as Error).message).toBe(
+        `The following error occurred in onMounted: "Error in mounted"`
+      );
     }
     // 1 additional error is logged because the destruction of the app causes
     // the onWillUnmount hook to be called and to fail
@@ -385,14 +406,14 @@ describe("can catch errors", () => {
         });
       }
     }
-    let e: any = null;
+    let e: Error;
     try {
-      await mount(Root, fixture);
+      await mount(Root, fixture, { test: true });
     } catch (error) {
-      e = error;
+      e = error as Error;
     }
-    expect(e.message).toBe(
-      "No active component (a hook function should only be called in 'setup')"
+    expect(e!.message).toBe(
+      `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
     );
   });
 

tests/components/hydration.test.ts

@@ -0,0 +1,79 @@
+import { Component, mount, useState, xml } from "../../src";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("hydration", () => {
+  test("can hydrate a simple static component", async () => {
+    fixture.innerHTML = "<div>giuoco pianissimo</div>";
+    const target = fixture.firstChild as any;
+
+    class Test extends Component {
+      static template = xml`<div>giuoco pianissimo</div>`;
+    }
+
+    await mount(Test, target, { hydrate: true });
+
+    expect(fixture.innerHTML).toBe("<div>giuoco pianissimo</div>");
+    expect(fixture.firstChild).toBe(target);
+  });
+
+  test("can hydrate a component with a handler", async () => {
+    fixture.innerHTML = "<div>0</div>";
+    const target = fixture.firstChild as any;
+
+    class Counter extends Component {
+      static template = xml`<div t-on-click="inc"><t t-esc="state.value"/></div>`;
+
+      state = useState({ value: 0 });
+
+      inc() {
+        this.state.value++;
+      }
+    }
+
+    await mount(Counter, target, { hydrate: true });
+
+    expect(fixture.innerHTML).toBe("<div>0</div>");
+    expect(fixture.firstChild).toBe(target);
+
+    target.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>1</div>");
+  });
+
+  test("can hydrate a component with a sub component", async () => {
+    fixture.innerHTML = "<p><button>0</button></p>";
+    const target = fixture.firstChild as any;
+
+    class Counter extends Component {
+      static template = xml`<button t-on-click="inc"><t t-esc="state.value"/></button>`;
+
+      state = useState({ value: 0 });
+
+      inc() {
+        this.state.value++;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<p><Counter/></p>`;
+      static components = { Counter };
+    }
+
+    await mount(Parent, target, { hydrate: true });
+
+    expect(fixture.innerHTML).toBe("<p><button>0</button></p>");
+    expect(fixture.firstChild).toBe(target);
+
+    target.querySelector("button")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<p><button>1</button></p>");
+  });
+});

tests/components/props_validation.test.ts

@@ -12,7 +12,7 @@ let mockConsoleWarn: any;
 
 beforeAll(() => {
   console.info = (message: any) => {
-    if (message === DEV_MSG) {
+    if (message === DEV_MSG()) {
       return;
     }
     info(message);

tests/components/t_model.test.ts

@@ -30,6 +30,19 @@ describe("t-model directive", () => {
     expect(fixture.innerHTML).toBe("<div><input><span>test</span></div>");
   });
 
+  test("t-model on an input with an undefined value", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<input t-model="state.text"/>`;
+      state = useState({ text: undefined });
+    }
+    await mount(SomeComponent, fixture);
+
+    expect(fixture.innerHTML).toBe("<input>");
+
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+  });
+
   test("basic use, on an input with bracket expression", async () => {
     class SomeComponent extends Component {
       static template = xml`

tests/misc/portal.test.ts

@@ -29,7 +29,7 @@ snapshotEverything();
 
 beforeAll(() => {
   console.info = (message: any) => {
-    if (message === DEV_MSG) {
+    if (message === DEV_MSG()) {
       return;
     }
     info(message);

tools/playground/samples.js

@@ -24,8 +24,8 @@ class Root extends Component {
     }
 }
 
-// Application setup
-mount(Root, document.body, { templates: TEMPLATES, dev: true });`;
+// dev=false for benchmarking. we don't want to benchmark dev code!
+mount(Root, document.body, { templates: TEMPLATES, dev: false });`;
 
 const COMPONENTS_XML = /*xml*/`
 <templates>
@@ -1573,6 +1573,191 @@ class Root extends Component {
 mount(Root, document.body, { templates: TEMPLATES, dev: true});
 `;
 
+const BENCHMARK_JS = `
+const { Component, mount, xml, useState, onWillRender, onPatched} = owl;
+
+// -----------------------------------------------------------------------------
+// Data generation
+// -----------------------------------------------------------------------------
+
+let idCounter = 1;
+const adjectives = [
+    "pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain",
+    "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd",
+    "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
+const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+
+function _random (max) { return Math.round(Math.random() * 1000) % max; };
+
+function buildData(count) {
+    const data = new Array(count);
+    for (let i = 0; i < count; i++) {
+        const label = \`\${adjectives[_random(adjectives.length)]} \${colours[_random(colours.length)]} \${nouns[_random(nouns.length)]}\`;
+        data[i] = {
+            id: idCounter++,
+            label,
+        };
+    }
+    return data;
+}
+
+// -----------------------------------------------------------------------------
+// Components
+// -----------------------------------------------------------------------------
+class Button extends Component {
+  static template = xml\`
+      <div class='col-sm-6 smallpad'>
+          <button t-att-id="props.id" class='btn btn-primary btn-block' type='button' t-on-click="props.onClick">
+              <t t-esc="props.text"/>
+          </button>
+      </div>\`;
+}
+
+
+class Row extends Component {
+  static template = xml\`
+      <tr t-att-class="props.isSelected ? 'danger' : ''">
+          <td class="col-md-1" t-esc="props.row.id" />
+          <td class="col-md-4">
+              <a t-on-click="() => props.onSelect(props.row.id)" t-esc="props.row.label" />
+          </td>
+          <td class="col-md-1">
+              <a t-on-click="() =>  props.onRemove(props.row.id)" class="remove">[x]
+                <span class='glyphicon glyphicon-remove' aria-hidden="true" />
+              </a>
+          </td>
+          <td class='col-md-6'/>
+      </tr>\`
+}
+
+class Root extends Component {
+  static template = xml\`
+      <div class='container'>
+        <div class='jumbotron'>
+          <div class='row'>
+            <div class='col-md-6'>
+              <h1>Owl Keyed</h1>
+            </div>
+            <div class='col-md-6'>
+              <div class='row'>
+                <Button id="'run'" onClick.bind="run" text="'Create 1,000 rows'" />
+                <Button id="'runlots'" onClick.bind="runLots" text="'Create 10,000 rows'" />
+                <Button id="'add'" onClick.bind="add" text="'Append 1,000 rows'" />
+                <Button id="'update'" onClick.bind="update" text="'Update every 10th row'" />
+                <Button id="'clear'" onClick.bind="clear" text="'Clear'" />
+                <Button id="'swaprows'" onClick.bind="swapRows" text="'Swap Rows'" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <table class='table table-hover table-striped test-data'>
+          <tbody>
+            <t t-foreach="state.rows" t-as="row" t-key="row.id">
+                <Row row="row" isSelected="row.id === state.selectedRowId" onSelect.bind="selectRow" onRemove.bind="removeRow"/>
+            </t>
+          </tbody>
+        </table>
+        <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
+      </div>\`;
+
+  static components = { Button, Row };
+
+  setup() {
+      this.state = useState({
+          rows: [],
+          selectedRowId: null
+      });
+      this.benchmarking = false;
+      onPatched(() => {
+          if (this.benchmarking) {
+              this.stop();
+          }
+      });
+    }
+    
+    start(descr) {
+        this.benchmarking = \`[\${descr}]\`;
+        console.time(this.benchmarking);
+    }
+    stop() {
+        console.timeEnd(this.benchmarking);
+        this.benchmarking = false;  
+    }
+
+    run() {
+        this.start('add1000');
+        this.state.rows = buildData(1000);
+        this.state.selectedRowId = null;
+    }
+    
+    runLots() {
+        this.start('add10_000');
+        this.state.rows = buildData(10_000);
+        this.state.selectedRowId = null;
+    }
+    
+    add() {
+        this.start('append1000');
+        this.state.rows = this.state.rows.concat(buildData(1000));
+    }
+    
+    update() {
+        this.start('update1/10th');
+        let index = 0;
+        const rows = this.state.rows;
+        while (index < rows.length) {
+            rows[index].label = rows[index].label + " !!!";
+            index += 10;
+        }
+    }
+    
+    clear() {
+        this.start('clear');
+        this.state.rows = [];
+        this.state.selectedRowId = null;
+    }
+    
+    swapRows() {
+        this.start('swap');
+        const rows = this.state.rows;
+        if (rows.length > 998) {
+            let tmp = rows[1];
+            rows[1] = rows[998];
+            rows[998] = tmp;
+        }
+    }
+    
+    selectRow(id) {
+        this.start('select');
+        this.state.selectedRowId = id;
+    }
+    
+    removeRow(id) {
+        this.start('remove1');
+        const rows = this.state.rows;
+        rows.splice(rows.findIndex(row => row.id === id), 1);
+    }
+}
+
+
+mount(Root, document.body, { templates: TEMPLATES, dev: true });
+
+`;
+
+const BENCHMARK_CSS =  `
+tr.danger {
+  font-weight: bold;
+}
+
+.remove:hover {
+  font-weight: bold;
+}
+.remove {
+  cursor: pointer;
+}
+`;
+
 export const SAMPLES = [
   {
     description: "Components",
@@ -1625,4 +1810,9 @@ export const SAMPLES = [
     xml: WMS_XML,
     css: WMS_CSS,
   },
+  {
+    description: "Benchmark example",
+    code: BENCHMARK_JS,
+    css: BENCHMARK_CSS,
+  },
 ];