PROTOTYPE: batch renders in animation frame instead of microtick

closes #850

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          |

doc/reference/reactivity.md

@@ -117,3 +117,10 @@ rawState.value = 3; // will NOT be picked up by the reactivity system!!!
 Here again, this is useful in some situations where we want to explicitely bypass
 Owl, but using this function means that the responsability of coordinating
 state update is given to the user code, instead of Owl. Subtle bugs may arise!
+
+Also, normal (non-reactive objects) will be directly returned by `toRaw`:
+
+```js
+const obj = { a: 1 };
+console.log(toRaw(obj) === obj); // true
+```

doc/reference/templates.md

@@ -21,6 +21,7 @@
 - [Fragments](#fragments)
 - [Inline templates](#inline-templates)
 - [Rendering svg](#rendering-svg)
+- [Restrictions](#restrictions)
 
 ## Overview
 
@@ -680,3 +681,13 @@ if a template is supposed to be included in a svg namespace or not. Therefore,
 Owl depends on a heuristic: if a tag is either `svg`, `g` or `path`, then it will
 be considered as svg. In practice, this means that each component or each sub
 templates (included with `t-call`) should have one of these tag as root tag.
+
+## Restrictions
+
+Note that Owl templates forbid the use of tag and or attributes starting with
+the `block-` string. This restriction prevents name collision with the internal
+code of Owl.
+
+```xml
+<div><block-1>this will not be accepted by Owl</block-1></div>
+```

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/app/template_set.ts

@@ -1,6 +1,6 @@
 import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
 import { compile, Template } from "../compiler";
-import { component } from "../component/component_node";
+import { component, getCurrent } from "../component/component_node";
 import { UTILS } from "./template_helpers";
 
 const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
@@ -94,7 +94,12 @@ export class TemplateSet {
     if (!(name in this.templates)) {
       const rawTemplate = this.rawTemplates[name];
       if (rawTemplate === undefined) {
-        throw new Error(`Missing template: "${name}"`);
+        let extraInfo = "";
+        try {
+          const componentName = getCurrent().component.constructor.name;
+          extraInfo = ` (for component "${componentName}")`;
+        } catch {}
+        throw new Error(`Missing template: "${name}"${extraInfo}`);
       }
       const templateFn = this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a

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/compiler/parser.ts

@@ -305,6 +305,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
   if (tagName === "t" && !dynamicTag) {
     return null;
   }
+  if (tagName.startsWith("block-")) {
+    throw new Error(`Invalid tag name: '${tagName}'`);
+  }
   ctx = Object.assign({}, ctx);
   if (tagName === "pre") {
     ctx.inPreTag = true;
@@ -371,6 +374,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         ctx = Object.assign({}, ctx);
         ctx.tModelInfo = model;
       }
+    } else if (attr.startsWith("block-")) {
+      throw new Error(`Invalid attribute: '${attr}'`);
     } else if (attr !== "t-name") {
       if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
         throw new Error(`Unknown QWeb directive: '${attr}'`);

src/component/component_node.ts

@@ -120,20 +120,30 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     this.initiateRender(fiber);
   }
 
-  async initiateRender(fiber: Fiber | MountFiber) {
+  initiateRender(fiber: Fiber | MountFiber) {
     this.fiber = fiber;
     if (this.mounted.length) {
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
+    const finish = () => {
+      if (this.status === STATUS.NEW && this.fiber === fiber) {
+        this._render(fiber);
+      }
+    }
+    let willStartResults;
     try {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
+      willStartResults = this.willStart.map((f) => f.call(component));
     } catch (e) {
       handleError({ node: this, error: e });
       return;
     }
-    if (this.status === STATUS.NEW && this.fiber === fiber) {
-      this._render(fiber);
+    if (willStartResults.some(result => result instanceof Promise)) {
+      Promise.all(willStartResults)
+        .then(finish)
+        .catch(e => handleError({ node: this, error: e }));
+    } else {
+      finish();
     }
   }
 
@@ -153,25 +163,27 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
 
     const fiber = makeRootFiber(this);
     this.fiber = fiber;
+    debugger;
+    window.requestAnimationFrame(() => {
+      if (this.status === STATUS.DESTROYED) {
+        return;
+      }
+      // We only want to actually render the component if the following two
+      // conditions are true:
+      // * this.fiber: it could be null, in which case the render has been cancelled
+      // * (current || !fiber.parent): if current is not null, this means that the
+      //   render function was called when a render was already occurring. In this
+      //   case, the pending rendering was cancelled, and the fiber needs to be
+      //   rendered to complete the work.  If current is null, we check that the
+      //   fiber has no parent.  If that is the case, the fiber was downgraded from
+      //   a root fiber to a child fiber in the previous microtick, because it was
+      //   embedded in a rendering coming from above, so the fiber will be rendered
+      //   in the next microtick anyway, so we should not render it again.
+      if (this.fiber === fiber && (current || !fiber.parent)) {
+        this._render(fiber);
+      }
+    });
     this.app.scheduler.addFiber(fiber);
-    await Promise.resolve();
-    if (this.status === STATUS.DESTROYED) {
-      return;
-    }
-    // We only want to actually render the component if the following two
-    // conditions are true:
-    // * this.fiber: it could be null, in which case the render has been cancelled
-    // * (current || !fiber.parent): if current is not null, this means that the
-    //   render function was called when a render was already occurring. In this
-    //   case, the pending rendering was cancelled, and the fiber needs to be
-    //   rendered to complete the work.  If current is null, we check that the
-    //   fiber has no parent.  If that is the case, the fiber was downgraded from
-    //   a root fiber to a child fiber in the previous microtick, because it was
-    //   embedded in a rendering coming from above, so the fiber will be rendered
-    //   in the next microtick anyway, so we should not render it again.
-    if (this.fiber === fiber && (current || !fiber.parent)) {
-      this._render(fiber);
-    }
   }
 
   _render(fiber: Fiber | RootFiber) {
@@ -207,25 +219,32 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     this.status = STATUS.DESTROYED;
   }
 
-  async updateAndRender(props: any, parentFiber: Fiber) {
+  updateAndRender(props: any, parentFiber: Fiber) {
     // update
     const fiber = makeChildFiber(this, parentFiber);
     this.fiber = fiber;
     const component = this.component;
     applyDefaultProps(props, component.constructor as any);
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
-    await prom;
-    if (fiber !== this.fiber) {
-      return;
+
+    const finish = () => {
+      if (fiber !== this.fiber) {
+        return;
+      }
+      component.props = props;
+      this._render(fiber);
+      const parentRoot = parentFiber.root!;
+      if (this.willPatch.length) {
+        parentRoot.willPatch.push(fiber);
+      }
+      if (this.patched.length) {
+        parentRoot.patched.push(fiber);
+      }
     }
-    component.props = props;
-    this._render(fiber);
-    const parentRoot = parentFiber.root!;
-    if (this.willPatch.length) {
-      parentRoot.willPatch.push(fiber);
-    }
-    if (this.patched.length) {
-      parentRoot.patched.push(fiber);
+    const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
+    if (willUpdatePropsResults.some(res => res instanceof Promise)) {
+      Promise.all(willUpdatePropsResults).then(finish);
+    } else {
+      finish();
     }
   }
 

src/component/fibers.ts

@@ -6,8 +6,7 @@ import { STATUS } from "./status";
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   let current = node.fiber;
   if (current) {
-    let root = parent.root;
-    cancelFibers(root, current.children);
+    cancelFibers(current.children);
     current.root = null;
   }
   return new Fiber(node, parent);
@@ -17,7 +16,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   let current = node.fiber;
   if (current) {
     let root = current.root!;
-    root.counter -= cancelFibers(root, current.children);
+    root.counter -= cancelFibers(current.children);
     current.children = [];
     root.counter++;
     current.bdom = null;
@@ -42,15 +41,14 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
-function cancelFibers(root: any, fibers: Fiber[]): number {
+function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
     fiber.node.fiber = null;
-    fiber.root = root;
     if (!fiber.bdom) {
       result++;
     }
-    result += cancelFibers(root, fiber.children);
+    result += cancelFibers(fiber.children);
   }
   return result;
 }

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;

src/reactivity.ts

@@ -57,7 +57,7 @@ export function markRaw<T extends Target>(value: T): NonReactive<T> {
  * @returns the underlying value
  */
 export function toRaw<T extends object>(value: Reactive<T>): T {
-  return value[TARGET];
+  return value[TARGET] || value;
 }
 
 const targetToKeysToCallbacks = new WeakMap<Target, Map<ObjectKey, Set<Callback>>>();

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

@@ -0,0 +1,13 @@
+import { renderToString } from "../helpers";
+
+describe("blacklisted tags and attributes", () => {
+  test("template with block-text tag", () => {
+    const template = `<div><block-text-0/>hello</div>`;
+    expect(() => renderToString(template)).toThrow("Invalid tag name: 'block-text-0'");
+  });
+
+  test("template with block-handler tag", () => {
+    const template = `<div block-handler-0="click">hello</div>`;
+    expect(() => renderToString(template)).toThrow("Invalid attribute: 'block-handler-0'");
+  });
+});

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__/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/basics.test.ts

@@ -204,7 +204,7 @@ describe("basics", () => {
       error = e as Error;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toBe('Missing template: "wrongtemplate"');
+    expect(error!.message).toBe('Missing template: "wrongtemplate" (for component "Test")');
   });
 
   test("class component with dynamic text", async () => {

tests/components/concurrency.test.ts

@@ -97,17 +97,14 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   expect(["W:setup", "W:willStart", "W:willRender", "W:rendered", "W:mounted"]).toBeLogged();
 
   expect(n).toBe(0);
-
   w.state.val = 2;
-  await nextMicroTick();
-  await nextMicroTick();
+  await new Promise(requestAnimationFrame); // calls to _render are batched per animation frame
   expect(n).toBe(1);
 
   expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
 
   w.state.val = 3;
-  await nextMicroTick();
-  await nextMicroTick();
+  await new Promise(requestAnimationFrame);
   expect(n).toBe(2);
 
   expect([

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/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);

tests/reactivity.test.ts

@@ -1131,6 +1131,11 @@ describe("toRaw", () => {
     expect(reactiveObj).not.toBe(obj);
     expect(toRaw(reactiveObj as Reactive<typeof obj>)).toBe(obj);
   });
+
+  test("giving a non reactive to toRaw return the object itself", () => {
+    const obj = { value: 1 };
+    expect(toRaw(obj as Reactive<typeof obj>)).toBe(obj);
+  });
 });
 
 describe("Reactivity: useState", () => {

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>