Merge pull request #296 from odoo/issue-293-owl-fibers

[MERGE] component: introduce owl fiber
2025-10-06 19:59:41 +07:00 · 2019-09-20 11:16:47 +02:00
parent 8edc637033 caa63628dc
commit bbbaf95c8e
16 changed files with 376 additions and 331 deletions
@@ -33,6 +33,28 @@ export interface Env {
  [key: string]: any;
 }
 /**
 * Fibers are small abstractions designed to contain all the internal state
 * associated to a "rendering work unit", relative to a specific component.
 *
 * A rendering will cause the creation of a fiber for each impacted components.
 */
 export interface Fiber<Props> {
  force: boolean;
  rootFiber: Fiber<any> | null;
  isCancelled: boolean;
  scope: any;
  vars: any;
  patchQueue: Fiber<any>[];
  component: Component<any, any, any>;
  vnode: VNode | null;
  willPatchResult: any;
  props: Props;
  promise: Promise<VNode> | null;
  //   handlers?: any;
  //   mountedHandlers?: any;
 }
 /**
 * This is mostly an internal detail of implementation. The Meta interface is
 * useful to typecheck and describe the internal keys used by Owl to manage the
@@ -55,13 +77,7 @@ interface Internal<T extends Env, Props> {
  // the component instance back whenever the template is rerendered.
  cmap: { [key: number]: number };
-  renderId: number;
+  currentFiber: Fiber<Props> | null;
  // the renderProps and renderPromise keys are only useful for the "prepare"
  // step of the lifecycle of a component.  Once a component has been rendered
  // and patched, it is no longer useful.
  renderProps: Props | null;
  renderPromise: Promise<VNode> | null;
  boundHandlers: { [key: number]: any };
  observer: Observer | null;
@@ -169,9 +185,7 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
      parent: p,
      children: {},
      cmap: {},
-      renderId: 1,
+      currentFiber: null,
      renderPromise: null,
      renderProps: props || null,
      boundHandlers: {},
      mountedHandlers: {},
      observer: null,
@@ -279,17 +293,20 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
    if (__owl__.isMounted) {
      return;
    }
    const fiber = this.__createFiber(false, undefined, undefined, undefined);
    if (!__owl__.vnode) {
-      const vnode = await this.__prepare();
+      fiber.promise = this.__prepareAndRender(fiber);
      const vnode = await fiber.promise;
      if (__owl__.isDestroyed) {
        // component was destroyed before we get here...
        return;
      }
      this.__patch(vnode);
    } else if (renderBeforeRemount) {
-      const patchQueue = [];
+      fiber.patchQueue.push(fiber);
-      await this.__render(false, patchQueue, undefined, undefined);
+      fiber.promise = this.__render(fiber);
-      this.__applyPatchQueue(<any[]>patchQueue);
+      await fiber.promise;
      this.__applyPatchQueue(fiber);
    }
    target.appendChild(this.el!);
@@ -323,18 +340,37 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
    if (!__owl__.isMounted) {
      return;
    }
-    const patchQueue = [];
+    const fiber = this.__createFiber(force, undefined, undefined, undefined);
    fiber.patchQueue.push(fiber);
    fiber.promise = this.__render(fiber);
    await fiber.promise;
-    const renderId = ++__owl__.renderId;
+    if (__owl__.isMounted && fiber === __owl__.currentFiber) {
    await this.__render(force, patchQueue, undefined, undefined);
    if (__owl__.isMounted && renderId === __owl__.renderId) {
      // we only update the vnode and the actual DOM if no other rendering
      // occurred between now and when the render method was initially called.
-      this.__applyPatchQueue(<any[]>patchQueue);
+      this.__applyPatchQueue(fiber);
    }
  }
  __createFiber(force, scope, vars, parent?: Fiber<any>): Fiber<Props> {
    const fiber: Fiber<Props> = {
      force,
      scope,
      vars,
      rootFiber: null,
      isCancelled: false,
      component: this,
      vnode: null,
      patchQueue: parent ? parent.patchQueue : [],
      willPatchResult: null,
      props: this.props,
      promise: null
    };
    fiber.rootFiber = parent ? parent.rootFiber : fiber;
    this.__owl__.currentFiber = fiber;
    return fiber;
  }
  /**
   * Destroy the component.  This operation is quite complex:
   *  - it recursively destroy all children
@@ -476,12 +512,11 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
   */
  async __updateProps(
    nextProps: Props,
-    forceUpdate: boolean = false,
+    parentFiber: Fiber<any>,
    patchQueue?: any[],
    scope?: any,
    vars?: any
  ): Promise<void> {
-    const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
+    const shouldUpdate = parentFiber.force || this.shouldUpdate(nextProps);
    if (shouldUpdate) {
      const defaultProps = (<any>this.constructor).defaultProps;
      if (defaultProps) {
@@ -489,7 +524,10 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
      }
      await this.willUpdateProps(nextProps);
      this.props = nextProps;
-      await this.__render(forceUpdate, patchQueue, scope, vars);
+      const fiber = this.__createFiber(parentFiber.force, scope, vars, parentFiber);
      fiber.patchQueue.push(fiber);
      await this.__render(fiber);
    }
  }
@@ -503,14 +541,18 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
    __owl__.vnode = patch(target, vnode);
  }
-  __prepare(scope?: Object, vars?: any): Promise<VNode> {
+  /**
-    const __owl__ = this.__owl__;
+   * The __prepare method is only called by the t-component directive, when a
-    __owl__.renderProps = this.props;
+   * subcomponent is created. It gets its scope and vars, if any, from the
-    __owl__.renderPromise = this.__prepareAndRender(scope, vars);
+   * parent template.
-    return __owl__.renderPromise;
+   */
  __prepare(parentFiber: Fiber<any>, scope: any, vars: any): Promise<VNode> {
    const fiber = this.__createFiber(parentFiber.force, scope, vars, parentFiber);
    fiber.promise = this.__prepareAndRender(fiber);
    return fiber.promise;
  }
-  async __prepareAndRender(scope?: Object, vars?: any): Promise<VNode> {
+  async __prepareAndRender(fiber: Fiber<Props>): Promise<VNode> {
    try {
      await this.willStart();
    } catch (e) {
@@ -545,20 +587,12 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
    }
    __owl__.render = qweb.render.bind(qweb, p._template);
    this.__observeState();
-
+    return this.__render(fiber);
    return this.__render(false, [], scope, vars);
  }
-  __render(
+  __render(fiber: Fiber<Props>): Promise<VNode> {
    force: boolean = false,
    patchQueue: any[] = [],
    scope?: Object,
    vars?: any
  ): Promise<VNode> {
    const __owl__ = this.__owl__;
    const promises: Promise<void>[] = [];
    const patch: any[] = [this];
    patchQueue.push(patch);
    if (__owl__.observer) {
      __owl__.observer.allowMutations = false;
    }
@@ -568,16 +602,13 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
        promises,
        handlers: __owl__.boundHandlers,
        mountedHandlers: __owl__.mountedHandlers,
-        forceUpdate: force,
+        fiber: fiber
        patchQueue,
        scope,
        vars
      });
    } catch (e) {
      vnode = __owl__.vnode || h("div");
      errorHandler(e, this);
    }
-    patch.push(vnode);
+    fiber.vnode = vnode;
    if (__owl__.observer) {
      __owl__.observer.allowMutations = true;
    }
@@ -655,29 +686,30 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
  }
  /**
-   * Apply the given patch queue. A patch is a pair [c, vn], where c is a
+   * Apply the given patch queue from a fiber.
   * Component instance and vn a VNode.
   *   1) Call 'willPatch' on the component of each patch
   *   2) Call '__patch' on the component of each patch
-   *   3) Call 'patched' on the component of each patch, in inverse order
+   *   3) Call 'patched' on the component of each patch, in reverse order
   */
-  __applyPatchQueue(patchQueue: any[]) {
+  __applyPatchQueue(fiber: Fiber<Props>) {
-    let component = this;
+    const patchQueue = fiber.patchQueue;
    let component: Component<any, any, any> = this;
    try {
      const patchLen = patchQueue.length;
      for (let i = 0; i < patchLen; i++) {
-        const patch = patchQueue[i];
+        const fiber = patchQueue[i];
-        component = patch[0];
+        component = fiber.component;
-        patch.push(patch[0].willPatch());
+        fiber.willPatchResult = component.willPatch();
      }
      for (let i = 0; i < patchLen; i++) {
-        const patch = patchQueue[i];
+        const fiber = patchQueue[i];
-        patch[0].__patch(patch[1]);
+        component = fiber.component;
        component.__patch(fiber.vnode);
      }
      for (let i = patchLen - 1; i >= 0; i--) {
-        const patch = patchQueue[i];
+        const fiber = patchQueue[i];
-        component = patch[0];
+        component = fiber.component;
-        patch[0].patched(patch[2]);
+        component.patched(fiber.willPatchResult);
      }
    } catch (e) {
      errorHandler(e, component);
@@ -356,8 +356,12 @@ QWeb.addDirective({
      ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`);
    }
    let shouldProxy = false;
    if (async || keepAlive) {
      ctx.addLine(
        `const fiber${componentID} = Object.assign(Object.create(extra.fiber), {patchQueue: []});`
      );
    }
    if (async) {
      ctx.addLine(`const patchQueue${componentID} = [];`);
      ctx.addLine(
        `c${ctx.parentNode}.push(w${componentID} && w${componentID}.__owl__.pvnode || null);`
      );
@@ -380,10 +384,12 @@ QWeb.addDirective({
      ctx.addLine(`let props${componentID} = {${propStr}};`);
    }
    ctx.addIf(
-      `w${componentID} && w${componentID}.__owl__.renderPromise && !w${componentID}.__owl__.vnode`
+      `w${componentID} && w${componentID}.__owl__.currentFiber && !w${componentID}.__owl__.vnode`
    );
-    ctx.addIf(`utils.shallowEqual(props${componentID}, w${componentID}.__owl__.renderProps)`);
+    ctx.addIf(
-    ctx.addLine(`def${defID} = w${componentID}.__owl__.renderPromise;`);
+      `utils.shallowEqual(props${componentID}, w${componentID}.__owl__.currentFiber.props)`
    );
    ctx.addLine(`def${defID} = w${componentID}.__owl__.currentFiber.promise;`);
    ctx.addElse();
    ctx.addLine(`w${componentID}.destroy();`);
    ctx.addLine(`w${componentID} = false;`);
@@ -441,14 +447,15 @@ QWeb.addDirective({
      }
    }
-    let scopeVars = "";
+    let scopeVars;
    if (hasSlots) {
-      scopeVars += ctx.scopeVars.length ? `Object.assign({}, scope)` : varDefs.length ? `{}` : "";
+      let scope = ctx.scopeVars.length ? `Object.assign({}, scope)` : `{}`;
-      if (varDefs.length) {
+      let vars = varDefs.length ? `{${varDefs.join(",")}}` : "undefined";
-        scopeVars += `, {${varDefs.join(",")}}`;
+      scopeVars = `${scope}, ${vars}`;
-      }
+    } else {
      scopeVars = "undefined, undefined";
    }
-    ctx.addLine(`def${defID} = w${componentID}.__prepare(${scopeVars});`);
+    ctx.addLine(`def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars});`);
    // hack: specify empty remove hook to prevent the node from being removed from the DOM
    let registerCode = `c${ctx.parentNode}[_${dummyID}_index]=pvnode;`;
    if (shouldProxy) {
@@ -460,19 +467,19 @@ QWeb.addDirective({
    ctx.addElse();
    // need to update component
-    let patchQueueCode = async ? `patchQueue${componentID}` : "extra.patchQueue";
+    let patchQueueCode = async || keepAlive ? `fiber${componentID}` : "extra.fiber";
    if (keepAlive) {
      // if we have t-keepalive="1", the component could be unmounted, but then
      // we __updateProps is called.  This is ok, but we do not want to call
      // the willPatch/patched hooks of the component in this case, so we
      // disable the patch queue
-      patchQueueCode = `w${componentID}.__owl__.isMounted ? ${patchQueueCode} : []`;
+      patchQueueCode = `w${componentID}.__owl__.isMounted ? extra.fiber : fiber${componentID}`;
    }
    if (QWeb.dev) {
      ctx.addLine(`utils.validateProps(w${componentID}.constructor, props${componentID})`);
    }
    ctx.addLine(
-      `def${defID} = def${defID} || w${componentID}.__updateProps(props${componentID}, extra.forceUpdate, ${patchQueueCode}${scopeVars &&
+      `def${defID} = def${defID} || w${componentID}.__updateProps(props${componentID}, ${patchQueueCode}${scopeVars &&
        ", " + scopeVars});`
    );
    let keepAliveCode = "";
@@ -492,7 +499,7 @@ QWeb.addDirective({
    if (async) {
      ctx.addLine(
-        `def${defID}.then(w${componentID}.__applyPatchQueue.bind(w${componentID}, patchQueue${componentID}));`
+        `def${defID}.then(w${componentID}.__applyPatchQueue.bind(w${componentID}, fiber${componentID}));`
      );
    } else {
      ctx.addLine(`extra.promises.push(def${defID});`);
@@ -244,7 +244,7 @@ QWeb.addDirective({
        varCode = `{${content}}`;
      }
      ctx.addLine(
-        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: ${varCode}, scope}));`
+        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, fiber: {vars: ${varCode}, scope}}));`
      );
      return true;
    }
@@ -244,7 +244,7 @@ export class QWeb extends EventBus {
    this._processTemplate(elem);
    const template = {
      elem,
-      fn: function (this: QWeb, context, extra) {
+      fn: function(this: QWeb, context, extra) {
        const compiledFunction = this._compile(name, elem);
        template.fn = compiledFunction;
        return compiledFunction.call(this, context, extra);
@@ -312,8 +312,8 @@ export class QWeb extends EventBus {
   * to render a full component tree, since this is an asynchronous operation.
   * This method can only render templates without components.
   */
-  renderToString(name: string, context: EvalContext = {}): string {
+  renderToString(name: string, context: EvalContext = {}, extra?: any): string {
-    const vnode = this.render(name, context);
+    const vnode = this.render(name, context, extra);
    if (vnode.sel === undefined) {
      return vnode.text!;
    }
@@ -357,12 +357,12 @@ export class QWeb extends EventBus {
      for (let v in parentContext.variables) {
        let variable = <any>parentContext.variables[v];
        if (variable.id) {
-          ctx.addLine(`let ${variable.id} = extra.vars.${variable.id}`);
+          ctx.addLine(`let ${variable.id} = extra.fiber.vars.${variable.id}`);
        }
      }
    }
    if (parentContext) {
-      ctx.addLine("    Object.assign(context, extra.scope);");
+      ctx.addLine("    Object.assign(context, extra.fiber.scope);");
    }
    this._compileNode(elem, ctx);
@@ -1,4 +1,5 @@
-import { Component, Env } from "../component/component";
+import { Component, Env, Fiber } from "../component/component";
 import { VNode } from "../vdom/index";
 //------------------------------------------------------------------------------
 // Connect function
@@ -46,10 +47,7 @@ export class ConnectedComponent<T extends Env, P, S> extends Component<T, P, S>
  /**
   * Need to do this here so 'deep' can be overrided by subcomponent easily
   */
-  async __prepareAndRender(
+  async __prepareAndRender(fiber: Fiber<P>): Promise<VNode> {
    scope?: Object,
    vars?: any
  ): ReturnType<Component<any, any, any>["__prepareAndRender"]> {
    const store = this.getStore(this.env);
    const ownProps = this.props || {};
    this.storeProps = (<any>this.constructor).mapStoreToProps(store.state, ownProps, store.getters);
@@ -62,7 +60,7 @@ export class ConnectedComponent<T extends Env, P, S> extends Component<T, P, S>
      prevStoreProps: this.storeProps
    });
    (this.__owl__ as any).rev = observer.rev;
-    return super.__prepareAndRender(scope, vars);
+    return super.__prepareAndRender(fiber);
  }
  /**
   * We do not use the mounted hook here for a subtle reason: we want the
@@ -107,9 +105,9 @@ export class ConnectedComponent<T extends Env, P, S> extends Component<T, P, S>
    return (this.__owl__ as any).renderPromise;
  }
-  async __updateProps(nextProps: P, f, p, s, v) {
+  async __updateProps(nextProps: P, f, s, v) {
    this.__updateStoreProps(nextProps);
-    return super.__updateProps(nextProps, f, p, s, v);
+    return super.__updateProps(nextProps, f, s, v);
  }
  __updateStoreProps(nextProps): boolean {
@@ -10,8 +10,6 @@ import { QWeb } from "./qweb/index";
 * The plan is to add a few other tags such as css, globalcss.
 */
 /**
 * XML tag helper for defining templates.  With this, one can simply define
 * an inline template with just the template xml:
@@ -17,9 +17,9 @@ exports[`animations t-transition combined with component 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -31,13 +31,13 @@ exports[`animations t-transition combined with component 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
          w4.destroy();
        };
        utils.transitionRemove(vn, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -63,9 +63,9 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
        let _2_index = c1.length;
        c1.push(null);
        let props4 = {};
-        if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-            if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-                def3 = w4.__owl__.renderPromise;
+                def3 = w4.__owl__.currentFiber.promise;
            } else {
                w4.destroy();
                w4 = false;
@@ -77,13 +77,13 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
            if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
            w4 = new W4(parent, props4);
            parent.__owl__.cmap[4] = w4.__owl__.id;
-            def3 = w4.__prepare();
+            def3 = w4.__prepare(extra.fiber, undefined, undefined);
            def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
          w4.destroy();
        };
        utils.transitionRemove(vn, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
        } else {
-            def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+            def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
            def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
        }
        extra.promises.push(def3);
@@ -30,9 +30,9 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
    let _6_index = c5.length;
    c5.push(null);
    let props8 = {val:context['state'].val};
-    if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
+    if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-        if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
+        if (utils.shallowEqual(props8, w8.__owl__.currentFiber.props)) {
-            def7 = w8.__owl__.renderPromise;
+            def7 = w8.__owl__.currentFiber.promise;
        } else {
            w8.destroy();
            w8 = false;
@@ -44,10 +44,10 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
        if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
        w8 = new W8(parent, props8);
        parent.__owl__.cmap[8] = w8.__owl__.id;
-        def7 = w8.__prepare();
+        def7 = w8.__prepare(extra.fiber, undefined, undefined);
        def7 = def7.then(vnode=>{if (w8.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
    } else {
-        def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, extra.patchQueue);
+        def7 = def7 || w8.__updateProps(props8, extra.fiber, undefined, undefined);
        def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
    }
    extra.promises.push(def7);
@@ -55,12 +55,12 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
    let def10;
    let w11 = 11 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[11]] : false;
    let _9_index = c5.length;
-    const patchQueue11 = [];
+    const fiber11 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
    c5.push(w11 && w11.__owl__.pvnode || null);
    let props11 = {val:context['state'].val};
-    if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
+    if (w11 && w11.__owl__.currentFiber && !w11.__owl__.vnode) {
-        if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
+        if (utils.shallowEqual(props11, w11.__owl__.currentFiber.props)) {
-            def10 = w11.__owl__.renderPromise;
+            def10 = w11.__owl__.currentFiber.promise;
        } else {
            w11.destroy();
            w11 = false;
@@ -72,13 +72,13 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
        if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
        w11 = new W11(parent, props11);
        parent.__owl__.cmap[11] = w11.__owl__.id;
-        def10 = w11.__prepare();
+        def10 = w11.__prepare(extra.fiber, undefined, undefined);
        def10 = def10.then(vnode=>{if (w11.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
    } else {
-        def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, patchQueue11);
+        def10 = def10 || w11.__updateProps(props11, fiber11, undefined, undefined);
        def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
    }
-    def10.then(w11.__applyPatchQueue.bind(w11, patchQueue11));
+    def10.then(w11.__applyPatchQueue.bind(w11, fiber11));
    return vn1;
 }"
 `;
@@ -111,12 +111,12 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
    let def7;
    let w8 = 8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[8]] : false;
    let _6_index = c5.length;
-    const patchQueue8 = [];
+    const fiber8 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
    c5.push(w8 && w8.__owl__.pvnode || null);
    let props8 = {val:context['state'].val};
-    if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
+    if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-        if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
+        if (utils.shallowEqual(props8, w8.__owl__.currentFiber.props)) {
-            def7 = w8.__owl__.renderPromise;
+            def7 = w8.__owl__.currentFiber.promise;
        } else {
            w8.destroy();
            w8 = false;
@@ -128,22 +128,22 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
        if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
        w8 = new W8(parent, props8);
        parent.__owl__.cmap[8] = w8.__owl__.id;
-        def7 = w8.__prepare();
+        def7 = w8.__prepare(extra.fiber, undefined, undefined);
        def7 = def7.then(vnode=>{if (w8.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
    } else {
-        def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, patchQueue8);
+        def7 = def7 || w8.__updateProps(props8, fiber8, undefined, undefined);
        def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
    }
-    def7.then(w8.__applyPatchQueue.bind(w8, patchQueue8));
+    def7.then(w8.__applyPatchQueue.bind(w8, fiber8));
    //COMPONENT
    let def10;
    let w11 = 11 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[11]] : false;
    let _9_index = c5.length;
    c5.push(null);
    let props11 = {val:context['state'].val};
-    if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
+    if (w11 && w11.__owl__.currentFiber && !w11.__owl__.vnode) {
-        if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
+        if (utils.shallowEqual(props11, w11.__owl__.currentFiber.props)) {
-            def10 = w11.__owl__.renderPromise;
+            def10 = w11.__owl__.currentFiber.promise;
        } else {
            w11.destroy();
            w11 = false;
@@ -155,10 +155,10 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
        if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
        w11 = new W11(parent, props11);
        parent.__owl__.cmap[11] = w11.__owl__.id;
-        def10 = w11.__prepare();
+        def10 = w11.__prepare(extra.fiber, undefined, undefined);
        def10 = def10.then(vnode=>{if (w11.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
    } else {
-        def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, extra.patchQueue);
+        def10 = def10 || w11.__updateProps(props11, extra.fiber, undefined, undefined);
        def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
    }
    extra.promises.push(def10);
@@ -196,9 +196,9 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
    let _6_index = c5.length;
    c5.push(null);
    let props8 = {val:context['state'].val};
-    if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
+    if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-        if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
+        if (utils.shallowEqual(props8, w8.__owl__.currentFiber.props)) {
-            def7 = w8.__owl__.renderPromise;
+            def7 = w8.__owl__.currentFiber.promise;
        } else {
            w8.destroy();
            w8 = false;
@@ -210,10 +210,10 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
        if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
        w8 = new W8(parent, props8);
        parent.__owl__.cmap[8] = w8.__owl__.id;
-        def7 = w8.__prepare();
+        def7 = w8.__prepare(extra.fiber, undefined, undefined);
        def7 = def7.then(vnode=>{if (w8.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
    } else {
-        def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, extra.patchQueue);
+        def7 = def7 || w8.__updateProps(props8, extra.fiber, undefined, undefined);
        def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
    }
    extra.promises.push(def7);
@@ -221,12 +221,12 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
    let def10;
    let w11 = 11 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[11]] : false;
    let _9_index = c5.length;
-    const patchQueue11 = [];
+    const fiber11 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
    c5.push(w11 && w11.__owl__.pvnode || null);
    let props11 = {val:context['state'].val};
-    if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
+    if (w11 && w11.__owl__.currentFiber && !w11.__owl__.vnode) {
-        if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
+        if (utils.shallowEqual(props11, w11.__owl__.currentFiber.props)) {
-            def10 = w11.__owl__.renderPromise;
+            def10 = w11.__owl__.currentFiber.promise;
        } else {
            w11.destroy();
            w11 = false;
@@ -238,13 +238,13 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
        if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
        w11 = new W11(parent, props11);
        parent.__owl__.cmap[11] = w11.__owl__.id;
-        def10 = w11.__prepare();
+        def10 = w11.__prepare(extra.fiber, undefined, undefined);
        def10 = def10.then(vnode=>{if (w11.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
    } else {
-        def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, patchQueue11);
+        def10 = def10 || w11.__updateProps(props11, fiber11, undefined, undefined);
        def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
    }
-    def10.then(w11.__applyPatchQueue.bind(w11, patchQueue11));
+    def10.then(w11.__applyPatchQueue.bind(w11, fiber11));
    return vn1;
 }"
 `;
@@ -267,9 +267,9 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -281,10 +281,10 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};w4.el.style=_5;let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -312,9 +312,9 @@ exports[`class and style attributes with t-component t-att-class is properly add
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -326,10 +326,10 @@ exports[`class and style attributes with t-component t-att-class is properly add
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;context.refs[ref5] = w4;},remove() {},destroy(vn) {w4.destroy();delete context.refs[ref5];}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    w4.__owl__.classObj=_6;
@@ -372,9 +372,9 @@ exports[`class and style attributes with t-component t-att-class is properly add
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -386,10 +386,10 @@ exports[`class and style attributes with t-component t-att-class is properly add
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;context.refs[ref5] = w4;},remove() {},destroy(vn) {w4.destroy();delete context.refs[ref5];}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    w4.__owl__.classObj=_6;
@@ -430,9 +430,9 @@ exports[`class and style attributes with t-component t-att-class is properly add
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -444,10 +444,10 @@ exports[`class and style attributes with t-component t-att-class is properly add
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    w4.__owl__.classObj=_5;
@@ -472,11 +472,12 @@ exports[`composition sub components dom state with t-keepalive is preserved 1`]
        let def3;
        let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
        let _2_index = c1.length;
        const fiber4 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
        c1.push(null);
        let props4 = {};
-        if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-            if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-                def3 = w4.__owl__.renderPromise;
+                def3 = w4.__owl__.currentFiber.promise;
            } else {
                w4.destroy();
                w4 = false;
@@ -488,10 +489,10 @@ exports[`composition sub components dom state with t-keepalive is preserved 1`]
            if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
            w4 = new W4(parent, props4);
            parent.__owl__.cmap[4] = w4.__owl__.id;
-            def3 = w4.__prepare();
+            def3 = w4.__prepare(extra.fiber, undefined, undefined);
            def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.unmount();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
        } else {
-            def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, w4.__owl__.isMounted ? extra.patchQueue : []);
+            def3 = def3 || w4.__updateProps(props4, w4.__owl__.isMounted ? extra.fiber : fiber4, undefined, undefined);
            def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w4.el,vn.elm);vn.elm=w4.el;w4.__remount();};c1[_2_index]=pvnode;});
        }
        extra.promises.push(def3);
@@ -534,9 +535,9 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
        let _5_index = c1.length;
        c1.push(null);
        let props7 = {};
-        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
+        if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) {
-            if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
+            if (utils.shallowEqual(props7, w7.__owl__.currentFiber.props)) {
-                def6 = w7.__owl__.renderPromise;
+                def6 = w7.__owl__.currentFiber.promise;
            } else {
                w7.destroy();
                w7 = false;
@@ -548,10 +549,10 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
            if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
            w7 = new W7(parent, props7);
            parent.__owl__.cmap[templateId9] = w7.__owl__.id;
-            def6 = w7.__prepare();
+            def6 = w7.__prepare(extra.fiber, undefined, undefined);
            def6 = def6.then(vnode=>{if (w7.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId9, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c1[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
        } else {
-            def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            def6 = def6 || w7.__updateProps(props7, extra.fiber, undefined, undefined);
            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c1[_5_index]=pvnode;});
        }
        extra.promises.push(def6);
@@ -577,9 +578,9 @@ exports[`composition t-component with dynamic value 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -591,10 +592,10 @@ exports[`composition t-component with dynamic value 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -619,9 +620,9 @@ exports[`composition t-component with dynamic value 2 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -633,10 +634,10 @@ exports[`composition t-component with dynamic value 2 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -661,9 +662,9 @@ exports[`dynamic t-props basic use 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = Object.assign({}, context['some'].obj);
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -675,10 +676,10 @@ exports[`dynamic t-props basic use 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -702,11 +703,12 @@ exports[`lifecycle hooks willPatch/patched hook with t-keepalive 1`] = `
        let def3;
        let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
        let _2_index = c1.length;
        const fiber4 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
        c1.push(null);
        let props4 = {v:context['state'].n};
-        if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-            if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-                def3 = w4.__owl__.renderPromise;
+                def3 = w4.__owl__.currentFiber.promise;
            } else {
                w4.destroy();
                w4 = false;
@@ -718,10 +720,10 @@ exports[`lifecycle hooks willPatch/patched hook with t-keepalive 1`] = `
            if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
            w4 = new W4(parent, props4);
            parent.__owl__.cmap[4] = w4.__owl__.id;
-            def3 = w4.__prepare();
+            def3 = w4.__prepare(extra.fiber, undefined, undefined);
            def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.unmount();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
        } else {
-            def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, w4.__owl__.isMounted ? extra.patchQueue : []);
+            def3 = def3 || w4.__updateProps(props4, w4.__owl__.isMounted ? extra.fiber : fiber4, undefined, undefined);
            def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w4.el,vn.elm);vn.elm=w4.el;w4.__remount();};c1[_2_index]=pvnode;});
        }
        extra.promises.push(def3);
@@ -747,9 +749,9 @@ exports[`other directives with t-component t-on with handler bound to argument 1
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -761,10 +763,10 @@ exports[`other directives with t-component t-on with handler bound to argument 1
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, 3));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -789,9 +791,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -803,10 +805,10 @@ exports[`other directives with t-component t-on with handler bound to empty obje
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -831,9 +833,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -845,10 +847,10 @@ exports[`other directives with t-component t-on with handler bound to empty obje
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -873,9 +875,9 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -887,10 +889,10 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {val:3}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -915,9 +917,9 @@ exports[`other directives with t-component t-on with prevent and self modifiers
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -929,10 +931,10 @@ exports[`other directives with t-component t-on with prevent and self modifiers
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -957,9 +959,9 @@ exports[`other directives with t-component t-on with self and prevent modifiers
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -971,10 +973,10 @@ exports[`other directives with t-component t-on with self and prevent modifiers
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -999,9 +1001,9 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -1013,10 +1015,10 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', owner['onEv1'].bind(owner));vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}owner['onEv2'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -1041,9 +1043,9 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -1055,10 +1057,10 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();owner['onEv1'].call(owner, e);});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();owner['onEv2'].call(owner, e);});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();owner['onEv3'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -1085,9 +1087,9 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {flag:context['state'].flag};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -1099,10 +1101,10 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[templateId6] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId6, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -1145,9 +1147,9 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
        let _5_index = c1.length;
        c1.push(null);
        let props7 = {};
-        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
+        if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) {
-            if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
+            if (utils.shallowEqual(props7, w7.__owl__.currentFiber.props)) {
-                def6 = w7.__owl__.renderPromise;
+                def6 = w7.__owl__.currentFiber.promise;
            } else {
                w7.destroy();
                w7 = false;
@@ -1159,10 +1161,10 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
            if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
            w7 = new W7(parent, props7);
            parent.__owl__.cmap[templateId9] = w7.__owl__.id;
-            def6 = w7.__prepare();
+            def6 = w7.__prepare(extra.fiber, undefined, undefined);
            def6 = def6.then(vnode=>{if (w7.__owl__.isDestroyed){return}vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, arg10));}};let pvnode=h(vnode.sel, {key: templateId9, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c1[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
        } else {
-            def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            def6 = def6 || w7.__updateProps(props7, extra.fiber, undefined, undefined);
            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c1[_5_index]=pvnode;});
        }
        extra.promises.push(def6);
@@ -1369,9 +1371,9 @@ exports[`t-slot directive can define and call slots 1`] = `
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -1384,10 +1386,10 @@ exports[`t-slot directive can define and call slots 1`] = `
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
        w4.__owl__.slotId = 1;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, {}, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, {}, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -1426,7 +1428,7 @@ exports[`t-slot directive can define and call slots 3`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('span', p2, c2);
    c1.push(vn2);
@@ -1439,7 +1441,7 @@ exports[`t-slot directive can define and call slots 4`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('span', p2, c2);
    c1.push(vn2);
@@ -1452,7 +1454,7 @@ exports[`t-slot directive content is the default slot 1`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('span', p2, c2);
    c1.push(vn2);
@@ -1465,7 +1467,7 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    c1.push({text: \`sts rocks\`});
 }"
 `;
@@ -1475,7 +1477,7 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('span', p2, c2);
    c1.push(vn2);
@@ -1492,7 +1494,7 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('span', p2, c2);
    c1.push(vn2);
@@ -1510,7 +1512,7 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
    let owner = context;
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2,on:{}};
    var vn2 = h('button', p2, c2);
    c1.push(vn2);
@@ -1535,7 +1537,7 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
    let owner = context;
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2,on:{}};
    var vn2 = h('button', p2, c2);
    c1.push(vn2);
@@ -1611,9 +1613,9 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
        let _7_index = c6.length;
        c6.push(null);
        let props9 = {to:'/user/'+context['user'].id};
-        if (w9 && w9.__owl__.renderPromise && !w9.__owl__.vnode) {
+        if (w9 && w9.__owl__.currentFiber && !w9.__owl__.vnode) {
-            if (utils.shallowEqual(props9, w9.__owl__.renderProps)) {
+            if (utils.shallowEqual(props9, w9.__owl__.currentFiber.props)) {
-                def8 = w9.__owl__.renderPromise;
+                def8 = w9.__owl__.currentFiber.promise;
            } else {
                w9.destroy();
                w9 = false;
@@ -1626,10 +1628,10 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
            w9 = new W9(parent, props9);
            parent.__owl__.cmap[templateId10] = w9.__owl__.id;
            w9.__owl__.slotId = 1;
-            def8 = w9.__prepare(Object.assign({}, scope));
+            def8 = w9.__prepare(extra.fiber, Object.assign({}, scope), undefined);
            def8 = def8.then(vnode=>{if (w9.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId10, hook: {insert(vn) {let nvn=w9.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w9.destroy();}}});c6[_7_index]=pvnode;w9.__owl__.pvnode = pvnode;});
        } else {
-            def8 = def8 || w9.__updateProps(props9, extra.forceUpdate, extra.patchQueue, Object.assign({}, scope));
+            def8 = def8 || w9.__updateProps(props9, extra.fiber, Object.assign({}, scope), undefined);
            def8 = def8.then(()=>{if (w9.__owl__.isDestroyed) {return};let pvnode=w9.__owl__.pvnode;c6[_7_index]=pvnode;});
        }
        extra.promises.push(def8);
@@ -1643,7 +1645,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
 ) {
    var h = this.h;
    let c6 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    c6.push({text: \`User \`});
    var _7 = context['user'].name;
    if (_7 || _7 === 0) {
@@ -1716,9 +1718,9 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
        let _8_index = c6.length;
        c6.push(null);
        let props10 = {to:'/user/'+context['user'].id};
-        if (w10 && w10.__owl__.renderPromise && !w10.__owl__.vnode) {
+        if (w10 && w10.__owl__.currentFiber && !w10.__owl__.vnode) {
-            if (utils.shallowEqual(props10, w10.__owl__.renderProps)) {
+            if (utils.shallowEqual(props10, w10.__owl__.currentFiber.props)) {
-                def9 = w10.__owl__.renderPromise;
+                def9 = w10.__owl__.currentFiber.promise;
            } else {
                w10.destroy();
                w10 = false;
@@ -1731,10 +1733,10 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
            w10 = new W10(parent, props10);
            parent.__owl__.cmap[templateId11] = w10.__owl__.id;
            w10.__owl__.slotId = 1;
-            def9 = w10.__prepare(Object.assign({}, scope), {_7});
+            def9 = w10.__prepare(extra.fiber, Object.assign({}, scope), {_7});
            def9 = def9.then(vnode=>{if (w10.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId11, hook: {insert(vn) {let nvn=w10.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});c6[_8_index]=pvnode;w10.__owl__.pvnode = pvnode;});
        } else {
-            def9 = def9 || w10.__updateProps(props10, extra.forceUpdate, extra.patchQueue, Object.assign({}, scope), {_7});
+            def9 = def9 || w10.__updateProps(props10, extra.fiber, Object.assign({}, scope), {_7});
            def9 = def9.then(()=>{if (w10.__owl__.isDestroyed) {return};let pvnode=w10.__owl__.pvnode;c6[_8_index]=pvnode;});
        }
        extra.promises.push(def9);
@@ -1748,8 +1750,8 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
 ) {
    var h = this.h;
    let c6 = extra.parentNode;
-    let _7 = extra.vars._7
+    let _7 = extra.fiber.vars._7
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    if (_7 || _7 === 0) {
        c6.push({text: _7});
    }
@@ -1774,9 +1776,9 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
    let _3_index = c1.length;
    c1.push(null);
    let props5 = {to:'/user/'+context['state'].user.id};
-    if (w5 && w5.__owl__.renderPromise && !w5.__owl__.vnode) {
+    if (w5 && w5.__owl__.currentFiber && !w5.__owl__.vnode) {
-        if (utils.shallowEqual(props5, w5.__owl__.renderProps)) {
+        if (utils.shallowEqual(props5, w5.__owl__.currentFiber.props)) {
-            def4 = w5.__owl__.renderPromise;
+            def4 = w5.__owl__.currentFiber.promise;
        } else {
            w5.destroy();
            w5 = false;
@@ -1789,10 +1791,10 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
        w5 = new W5(parent, props5);
        parent.__owl__.cmap[5] = w5.__owl__.id;
        w5.__owl__.slotId = 1;
-        def4 = w5.__prepare({}, {_2});
+        def4 = w5.__prepare(extra.fiber, {}, {_2});
        def4 = def4.then(vnode=>{if (w5.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 5, hook: {insert(vn) {let nvn=w5.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w5.destroy();}}});c1[_3_index]=pvnode;w5.__owl__.pvnode = pvnode;});
    } else {
-        def4 = def4 || w5.__updateProps(props5, extra.forceUpdate, extra.patchQueue, {}, {_2});
+        def4 = def4 || w5.__updateProps(props5, extra.fiber, {}, {_2});
        def4 = def4.then(()=>{if (w5.__owl__.isDestroyed) {return};let pvnode=w5.__owl__.pvnode;c1[_3_index]=pvnode;});
    }
    extra.promises.push(def4);
@@ -1805,8 +1807,8 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
 ) {
    var h = this.h;
    let c1 = extra.parentNode;
-    let _2 = extra.vars._2
+    let _2 = extra.fiber.vars._2
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    if (_2 || _2 === 0) {
        c1.push({text: _2});
    }
@@ -1828,9 +1830,9 @@ exports[`top level sub widgets basic use 1`] = `
    let vn4 = {};
    result = vn4;
    let props3 = {p:1};
-    if (w3 && w3.__owl__.renderPromise && !w3.__owl__.vnode) {
+    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-        if (utils.shallowEqual(props3, w3.__owl__.renderProps)) {
+        if (utils.shallowEqual(props3, w3.__owl__.currentFiber.props)) {
-            def2 = w3.__owl__.renderPromise;
+            def2 = w3.__owl__.currentFiber.promise;
        } else {
            w3.destroy();
            w3 = false;
@@ -1842,10 +1844,10 @@ exports[`top level sub widgets basic use 1`] = `
        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
        w3 = new W3(parent, props3);
        parent.__owl__.cmap[3] = w3.__owl__.id;
-        def2 = w3.__prepare();
+        def2 = w3.__prepare(extra.fiber, undefined, undefined);
        def2 = def2.then(vnode=>{if (w3.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 3, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn4, pvnode);w3.__owl__.pvnode = pvnode;});
    } else {
-        def2 = def2 || w3.__updateProps(props3, extra.forceUpdate, extra.patchQueue);
+        def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined);
        def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn4, pvnode);});
    }
    extra.promises.push(def2);
@@ -1869,9 +1871,9 @@ exports[`top level sub widgets can select a sub widget  1`] = `
        let vn4 = {};
        result = vn4;
        let props3 = {};
-        if (w3 && w3.__owl__.renderPromise && !w3.__owl__.vnode) {
+        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-            if (utils.shallowEqual(props3, w3.__owl__.renderProps)) {
+            if (utils.shallowEqual(props3, w3.__owl__.currentFiber.props)) {
-                def2 = w3.__owl__.renderPromise;
+                def2 = w3.__owl__.currentFiber.promise;
            } else {
                w3.destroy();
                w3 = false;
@@ -1883,10 +1885,10 @@ exports[`top level sub widgets can select a sub widget  1`] = `
            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
            w3 = new W3(parent, props3);
            parent.__owl__.cmap[3] = w3.__owl__.id;
-            def2 = w3.__prepare();
+            def2 = w3.__prepare(extra.fiber, undefined, undefined);
            def2 = def2.then(vnode=>{if (w3.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 3, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn4, pvnode);w3.__owl__.pvnode = pvnode;});
        } else {
-            def2 = def2 || w3.__updateProps(props3, extra.forceUpdate, extra.patchQueue);
+            def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined);
            def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn4, pvnode);});
        }
        extra.promises.push(def2);
@@ -1898,9 +1900,9 @@ exports[`top level sub widgets can select a sub widget  1`] = `
        let vn8 = {};
        result = vn8;
        let props7 = {};
-        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
+        if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) {
-            if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
+            if (utils.shallowEqual(props7, w7.__owl__.currentFiber.props)) {
-                def6 = w7.__owl__.renderPromise;
+                def6 = w7.__owl__.currentFiber.promise;
            } else {
                w7.destroy();
                w7 = false;
@@ -1912,10 +1914,10 @@ exports[`top level sub widgets can select a sub widget  1`] = `
            if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
            w7 = new W7(parent, props7);
            parent.__owl__.cmap[7] = w7.__owl__.id;
-            def6 = w7.__prepare();
+            def6 = w7.__prepare(extra.fiber, undefined, undefined);
            def6 = def6.then(vnode=>{if (w7.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 7, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});utils.defineProxy(vn8, pvnode);w7.__owl__.pvnode = pvnode;});
        } else {
-            def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            def6 = def6 || w7.__updateProps(props7, extra.fiber, undefined, undefined);
            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;utils.defineProxy(vn8, pvnode);});
        }
        extra.promises.push(def6);
@@ -21,9 +21,9 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
    let _2_index = c1.length;
    c1.push(null);
    let props4 = {message:1};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.renderPromise;
+            def3 = w4.__owl__.currentFiber.promise;
        } else {
            w4.destroy();
            w4 = false;
@@ -36,11 +36,11 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
        utils.validateProps(W4, props4)
        w4 = new W4(parent, props4);
        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare();
+        def3 = w4.__prepare(extra.fiber, undefined, undefined);
        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
    } else {
        utils.validateProps(w4.constructor, props4)
-        def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
    }
    extra.promises.push(def3);
@@ -137,9 +137,9 @@ describe("basic widget properties", () => {
      async willStart() {
        this.state.drinks++;
      }
-      async __render() {
+      async __render(f) {
        renderCalls++;
-        return super.__render();
+        return super.__render(f);
      }
    }
    const widget = new TestW(env);
@@ -251,7 +251,7 @@ describe("lifecycle hooks", () => {
    }
    class ParentWidget extends Widget {
-      static template = xml`<div><ChildWidget /></div>`
+      static template = xml`<div><ChildWidget /></div>`;
      static components = { ChildWidget };
      mounted() {
        steps.push("parent:mounted");
@@ -2143,9 +2143,9 @@ describe("random stuff/miscellaneous", () => {
      async willStart() {
        steps.push(`${this.name}:willStart`);
      }
-      __render(f, p) {
+      __render(f) {
        steps.push(`${this.name}:render`);
-        return super.__render(f, p);
+        return super.__render(f);
      }
      __patch(vnode) {
        steps.push(`${this.name}:__patch`);
@@ -2487,8 +2487,8 @@ describe("async rendering", () => {
        // __render)
        def = makeDeferred();
      }
-      async __render(f, p) {
+      async __render(f) {
-        const result = await super.__render(f, p);
+        const result = await super.__render(f);
        await def;
        return result;
      }
@@ -2779,9 +2779,9 @@ describe("updating environment", () => {
  test("updating widget env does not render widget (if not mounted)", async () => {
    let n = 0;
    class TestWidget extends Widget {
-      __render() {
+      __render(f) {
        n++;
-        return super.__render();
+        return super.__render(f);
      }
    }
@@ -3719,7 +3719,7 @@ describe("environment and plugins", () => {
  test("plugin works as expected", async () => {
    somePlugin(env);
    class App extends Widget {
-      static template=xml`
+      static template = xml`
        <div>
            <t t-if="env.someFlag">Red</t>
            <t t-else="1">Blue</t>
@@ -4185,9 +4185,9 @@ describe("unmounting and remounting", () => {
        <span><t t-esc="props.val"/><t t-esc="state.n"/></span>
      `;
      state = { n: 2 };
-      __render(a, b, c, d) {
+      __render(f) {
        steps.push("render");
-        return super.__render(a, b, c, d);
+        return super.__render(f);
      }
      willPatch() {
        steps.push("willPatch");
@@ -334,7 +334,8 @@ describe("default props", () => {
    const w = new TestWidget(env, { p: 1 });
    await w.mount(fixture);
    expect(fixture.innerHTML).toMatchSnapshot();
-    await w.__updateProps({});
+    const fiber = w.__createFiber(false, undefined, undefined, undefined);
    await w.__updateProps({}, fiber);
    await w.render();
    expect(w.props.p).toBe(4);
    expect(fixture.innerHTML).toMatchSnapshot();
@@ -99,10 +99,15 @@ export function renderToDOM(
 * Note that the result of renderToString is guaranteed to be the same as the
 * one from QWeb.
 */
-export function renderToString(qweb: QWeb, t: string, context: EvalContext = {}): string {
+export function renderToString(
-  const node = renderToDOM(qweb, t, context);
+  qweb: QWeb,
  t: string,
  context: EvalContext = {},
  extra?: any
 ): string {
  const node = renderToDOM(qweb, t, context, extra);
  const result = node instanceof Text ? node.textContent! : node.outerHTML;
-  if (result !== qweb.renderToString(t, context)) {
+  if (result !== qweb.renderToString(t, context, extra)) {
    throw new Error("HTML string returned by renderToString helper does not match QWeb render");
  }
  return result;
@@ -884,7 +884,7 @@ exports[`t-call (template calling recursive template, part 1 1`] = `
    c1.push(vn2);
    c2.push({text: \`hey\`});
    if (false) {
-        this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c1, vars: {}, scope}));
+        this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c1, fiber: {vars: {}, scope}}));
    }
    return vn1;
 }"
@@ -896,7 +896,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
    let owner = context;
    var h = this.h;
    let c1 = extra.parentNode;
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c2 = [], p2 = {key:2};
    var vn2 = h('div', p2, c2);
    c1.push(vn2);
@@ -905,7 +905,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
    c2.push(vn3);
    c3.push({text: \`hey\`});
    if (false) {
-        this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c2, vars: {}, scope}));
+        this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c2, fiber: {vars: {}, scope}}));
    }
 }"
 `;
@@ -951,7 +951,7 @@ exports[`t-call (template calling recursive template, part 2 1`] = `
            scope.subtree = context.subtree;
            context.subtree_value = _8[i];
            scope.subtree_value = context.subtree_value;
-            this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c3, vars: {_v0: context['subtree']}, scope}));
+            this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c3, fiber: {vars: {_v0: context['subtree']}, scope}}));
        }
    }
    return vn1;
@@ -966,8 +966,8 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
    const scope = Object.create(null);
    var h = this.h;
    let c3 = extra.parentNode;
-    let _v0 = extra.vars._v0
+    let _v0 = extra.fiber.vars._v0
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c4 = [], p4 = {key:4};
    var vn4 = h('div', p4, c4);
    c3.push(vn4);
@@ -997,7 +997,7 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
        scope.subtree = context.subtree;
        context.subtree_value = _9[i];
        scope.subtree_value = context.subtree_value;
-        this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, vars: {_v0: context['subtree']}, scope}));
+        this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, fiber: {vars: {_v0: context['subtree']}, scope}}));
    }
 }"
 `;
@@ -1043,7 +1043,7 @@ exports[`t-call (template calling recursive template, part 3 1`] = `
            scope.subtree = context.subtree;
            context.subtree_value = _8[i];
            scope.subtree_value = context.subtree_value;
-            this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c3, vars: {_v0: context['subtree']}, scope}));
+            this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c3, fiber: {vars: {_v0: context['subtree']}, scope}}));
        }
    }
    return vn1;
@@ -1058,8 +1058,8 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
    const scope = Object.create(null);
    var h = this.h;
    let c3 = extra.parentNode;
-    let _v0 = extra.vars._v0
+    let _v0 = extra.fiber.vars._v0
-        Object.assign(context, extra.scope);
+        Object.assign(context, extra.fiber.scope);
    let c4 = [], p4 = {key:4};
    var vn4 = h('div', p4, c4);
    c3.push(vn4);
@@ -1089,7 +1089,7 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
        scope.subtree = context.subtree;
        context.subtree_value = _9[i];
        scope.subtree_value = context.subtree_value;
-        this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, vars: {_v0: context['subtree']}, scope}));
+        this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, fiber: {vars: {_v0: context['subtree']}, scope}}));
    }
 }"
 `;
@@ -54,7 +54,6 @@ describe("static templates", () => {
    qweb.addTemplate("test", "<div>hello <!-- comment-->owl</div>");
    expect(renderToString(qweb, "test")).toBe("<div>hello owl</div>");
  });
 });
 describe("error handling", () => {
@@ -637,7 +636,9 @@ describe("t-call (template calling", () => {
    `);
    const root = { val: "a", children: [{ val: "b" }, { val: "c" }] };
    const expected = "<div><div><p>a</p><div><p>b</p></div><div><p>c</p></div></div></div>";
-    expect(renderToString(qweb, "Parent", { root })).toBe(expected);
+    expect(renderToString(qweb, "Parent", { root }, { fiber: { vars: {}, scope: {} } })).toBe(
      expected
    );
    const recursiveFn = Object.values(qweb.recursiveFns)[0];
    expect(recursiveFn.toString()).toMatchSnapshot();
  });
@@ -664,18 +665,17 @@ describe("t-call (template calling", () => {
    const root = { val: "a", children: [{ val: "b", children: [{ val: "d" }] }, { val: "c" }] };
    const expected =
      "<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
-    expect(renderToString(qweb, "Parent", { root })).toBe(expected);
+    expect(renderToString(qweb, "Parent", { root }, { fiber: {} })).toBe(expected);
    const recursiveFn = Object.values(qweb.recursiveFns)[0];
    expect(recursiveFn.toString()).toMatchSnapshot();
  });
  test("t-call, global templates", () => {
-    QWeb.registerTemplate('abcd', '<div><t t-call="john"/></div>')
+    QWeb.registerTemplate("abcd", '<div><t t-call="john"/></div>');
    qweb.addTemplate("john", `<span>desk</span>`);
    const expected = "<div><span>desk</span></div>";
    expect(trim(renderToString(qweb, "abcd"))).toBe(expected);
  });
 });
 describe("foreach", () => {
@@ -32,9 +32,9 @@ exports[`RouteComponent can render simple cases 1`] = `
            let vn8 = {};
            result = vn8;
            let props6 = Object.assign({}, context['env'].router.currentParams);
-            if (w6 && w6.__owl__.renderPromise && !w6.__owl__.vnode) {
+            if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
-                if (utils.shallowEqual(props6, w6.__owl__.renderProps)) {
+                if (utils.shallowEqual(props6, w6.__owl__.currentFiber.props)) {
-                    def5 = w6.__owl__.renderPromise;
+                    def5 = w6.__owl__.currentFiber.promise;
                } else {
                    w6.destroy();
                    w6 = false;
@@ -46,10 +46,10 @@ exports[`RouteComponent can render simple cases 1`] = `
                if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')}
                w6 = new W6(parent, props6);
                parent.__owl__.cmap[templateId7] = w6.__owl__.id;
-                def5 = w6.__prepare();
+                def5 = w6.__prepare(extra.fiber, undefined, undefined);
                def5 = def5.then(vnode=>{if (w6.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId7, hook: {insert(vn) {let nvn=w6.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w6.destroy();}}});utils.defineProxy(vn8, pvnode);w6.__owl__.pvnode = pvnode;});
            } else {
-                def5 = def5 || w6.__updateProps(props6, extra.forceUpdate, extra.patchQueue);
+                def5 = def5 || w6.__updateProps(props6, extra.fiber, undefined, undefined);
                def5 = def5.then(()=>{if (w6.__owl__.isDestroyed) {return};let pvnode=w6.__owl__.pvnode;utils.defineProxy(vn8, pvnode);});
            }
            extra.promises.push(def5);
@@ -698,9 +698,9 @@ describe("connecting a component to store", () => {
      editTodo() {
        this.env.store.dispatch("editTodo");
      }
-      __render(...args) {
+      __render(f) {
        renderCount++;
-        return super.__render(...args);
+        return super.__render(f);
      }
    }
    class TodoApp extends ConnectedComponent<any, any, any> {
@@ -776,9 +776,9 @@ describe("connecting a component to store", () => {
      removeTodo() {
        this.env.store.dispatch("removeTodo");
      }
-      __render(...args) {
+      __render(f) {
        renderCount++;
-        return super.__render(...args);
+        return super.__render(f);
      }
    }
@@ -910,11 +910,12 @@ describe("connected components and default values", () => {
    await app.mount(fixture);
    expect(fixture.innerHTML).toBe("<div><div>Hello, John</div></div>");
-    await app.__updateProps({ initialRecipient: "James" }, true);
+    const fiber = app.__createFiber(true, undefined, undefined, undefined);
    await app.__updateProps({ initialRecipient: "James" }, fiber);
    await app.render();
    expect(fixture.innerHTML).toBe("<div><div>Hello, James</div></div>");
-    await app.__updateProps({ initialRecipient: undefined }, true);
+    await app.__updateProps({ initialRecipient: undefined }, fiber);
    await app.render();
    expect(fixture.innerHTML).toBe("<div><div>Hello, John</div></div>");
  });
@@ -997,7 +998,8 @@ describe("connected components and default values", () => {
      "<div><div><div>100Message100</div><div>101Message101</div></div></div>"
    );
-    await app.__updateProps({ threadId: 2 }, true);
+    const fiber = app.__createFiber(true, undefined, undefined, undefined);
    await app.__updateProps({ threadId: 2 }, fiber);
    await app.render();
    expect(fixture.innerHTML).toBe("<div><div><div>200Message200</div></div></div>");