add doc

2025-10-06 19:59:41 +07:00 · 2022-03-11 15:33:07 +01:00
35 changed files with 571 additions and 2061 deletions
@@ -74,6 +74,7 @@ Are you new to Owl? This is the place to start!
 - [Tutorial: create a TodoList application](doc/learning/tutorial_todoapp.md)
 - [How to start an Owl project](doc/learning/quick_start.md)
 - [How to test Components](doc/learning/how_to_test.md)
+- [How to organize Owl code](doc/miscellaneous/organizing_code.md)

 ### Reference

@@ -240,7 +240,7 @@ class Task extends Component {
  static template = xml /* xml */`
    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
      <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.text"/></span>
+      <span><t t-esc="props.task.title"/></span>
    </div>`;
  static props = ["task"];
 }
@@ -743,7 +743,7 @@ the user experience.
 ```xml
 <input type="checkbox" t-att-checked="props.task.isCompleted"
    t-att-id="props.task.id"
-    t-on-click="() => store.toggleTask(props.task)"/>
+    t-on-click="dispatch('toggleTask', props.task.id)"/>
 <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
 ```

@@ -0,0 +1,380 @@
+# 🦉 Organising Owl code 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Reactivity](#reactivity)
+- [Asynchrony](#asynchrony)
+- [Basic design: Components and Props](#basic-design-components-and-props)
+- [More advanced design: using the environment](#more-advanced-design-using-the-environment)
+- [Even more advanced: completely separating model management](#even-more-advanced-completely-separating-model-management)
+- [Special case: bypassing reactivity](#special-case-bypassing-reactivity)
+
+## Overview
+
+The topic of this document is to discuss how one could organize an Owl
+application/component/feature/codebase. Clearly, good practices for a system depends
+on its properties/semantics. For Owl 2.x applications, the most important
+ideas to have in mind are the following:
+
+- Owl provides a way to structure a component tree,
+- communication between a parent and a child component is mostly done with props
+  (and callback props to go from child to parent),
+- there is an additional communication channel: information can be propagated
+  through the environment,
+- Owl implements a reactivity system, which tracks each components and values,
+  so that it is able to only rerender the relevant subset of components,
+- asynchrony: owl components can delay renderings with `onWillStart`/`onWillUpdateProps`
+- renderings are batched (10 calls to render in the same call stack will only
+  result in 1 actual rendering)
+
+## Reactivity
+
+With the reactivity system, each value created with the `useState` or the `reactive`
+function is a proxy that allows Owl to trask which keys/values have been read
+by which components. This means that Owl can then only update the components that
+are impacted by a state change.
+
+There are two important reactivity primitives:
+
+- `useState`: a hook to turn a value into a reactive value, linked to a component
+  (so, each time the value is updated, the component is rerendered)
+- `reactive`: a function to create a "standalone" reactive value
+
+Also, it is good to know that one can call `useState` on a reactive value: this will
+create another reactive value, connected to the same source, but linked to a
+different component.
+
+Let us consider the following component tree:
+
+```mermaid
+graph TD
+    A-->B
+    A-->C
+    B-->D
+    B-->E
+    B-->F
+    C-->G
+    C-->H
+```
+
+It is important to know how renderings are applied by Owl:
+
+- if a render is initiated in A, it will render its template
+- whenever it encounter a child component (here, B and C), it will shallow
+  compare the before and after props. If they are different, Owl will render the
+  corresponding child component, otherwise it will stop.
+- each props object received by a (child) component is turned into a reactive
+  object.
+
+Each (non primitive) value given by `A` to `B` and `C` will be transformed into
+a reactive object.
+basically, owl does a useState on props at each level, and compare
+shallowly values
+
+Notes:
+
+- each component can be independently rendered (so, for example, only B and D)
+- one can create reactive objects (just like useState, but not linked to any
+  component) with the `reactive` function
+- escape hatch: one can mark an object as "raw" (non reactive) with `markRaw`, and get the target
+  object (with `toRaw`)
+- note that it is bad practice to keep reference to the raw object: doing so means
+  that some => may miss
+  rendering
+
+- note: reactivity is not free. It may be expensive for some large objects.
+
+## Asynchrony
+
+explain: onWillStart and onWillUpdateProps are async => can delay render
+
+good usecase for lazyloading libs
+
+note: most of the time, update should be done in an atomic way:
+
+```js
+// bad => will cause extra rendering, possibly corrupt
+this.state.something = someValue;
+const otherValue = await this.fetchSomething();
+this.state.otherValue = otherValue;
+```
+
+```js
+// good
+const otherValue = await this.fetchSomething();
+this.state.something = someValue;
+this.state.otherValue = otherValue;
+```
+
+```js
+// bad => will cause extra rendering, possibly corrupt
+const someValue = getsomeValue();
+const otherValue = await this.fetchSomething();
+Object.assign(this.state, {
+  someValue,
+  otherValue,
+});
+```
+
+other note: minimize async stuff
+
+```js
+setup() {
+    // strategy 1: have a loading screen
+    this.state = useState({loading: true});
+}
+```
+
+```xml
+<t t-if="state.loading">
+</t>
+...
+```
+
+// other strategy: not display a loading indicator, and update the UI atomically
+
+```js
+setup() {
+    onWillStart(() => this.loadData());
+    onWillUpdateProps(() => this.updateData());
+}
+```
+
+## Baseline design: Components and props
+
+Here is what I suppose many Owl systems will look like: `useState` in some components,
+state is propagated down the tree with props, and potentially callbacks as well
+(to communicate from child to parent)
+
+     A
+
+/ \
+ B C
+/ | \ | \
+D E F G H
+
+```js
+// in A (and maybe some/all other components)
+this.state = useState(...);
+```
+
+```xml
+<!-- in A -->
+<div>
+    <t t-if="state.message">
+        <span t-esc="state.message"/>
+    </t>
+    <B record="state.records[3]" updateValue.bind="updateValue">
+</div>
+```
+
+Notice the `.bind` suffix here, very convenient.
+
+```xml
+<!-- in B. It is now subscribed to the 'some_field' value -->
+<span t-esc="props.record.some_field"/>
+```
+
+With reactivity, any update to the state will only rerender the affected components.
+So, if some code in `A` update the value of `some_field` (without reading it!),
+only B will be rerendered.
+
+## More advanced design: passing stuff through the environment
+
+It may be tedious/impractical to pass props all along the tree when we have a deep
+component tree.
+
+One can then use the environment to communicate to children. Only issue with that
+is that stuff in the environment bypass the reactivity system: if it comes from
+a `useState` in `A` => only `A` will react to state changes, not the children that
+reads it.
+
+To solve that, one need to use `useState` on it:
+
+```js
+// in root component A
+class A extends Component {
+  setup() {
+    this.posModel = {
+      state: useState(this.state),
+      updateSomeValue: () => this.updateSomeValue(),
+      doSomethingElse: () => this.doSomethingElse(),
+    };
+    useSubEnv({ posModel: this.posModel });
+  }
+}
+
+// in some child component D
+class D extends Component {
+  setup() {
+    // this one is wrong! this.posModel.state is stated
+    this.posModel = this.env.posModel;
+
+    // this.posModel.state === the one in A, linked to the component A
+
+    // this one is ok!
+    this.posModel = useState(this.env.posModel);
+  }
+}
+```
+
+Note that we can slightly simplify the use of the model by a hook:
+
+```js
+function usePosModel() {
+  const env = useEnv();
+  const model = env.posModel;
+  return useState(model);
+}
+```
+
+This is not much simpler, but it makes sure that one does not forget to call
+`useState` on the model from the environment.
+
+## Even more advanced: completely separating model management
+
+The baseline design above it nice for many usecases, but we sometimes may want
+to separate the "model" management from the UI, especially as the model is doing
+more complicated stuff. Useful to code some complex transitions.
+
+Here is how we could use the environment and reactive object to organize code:
+
+```js
+// in my_model.js
+class MyModel {
+    ...
+    constructor() {
+        this.complicatedCacheObject = {};
+
+        markRaw(this.complicatedCacheObject);
+    }
+
+    async load(...) {
+
+    }
+
+    async update(...) {
+
+    }
+
+    async doSomeComplexThing() {
+        this.loading = true;
+
+        // coordinate here some thing
+        // fetch stuff...
+
+        this.loading = false;
+        this.data = ...;
+        ...
+    }
+    ...
+}
+
+// in root component A:
+
+class A extends Component {
+    setup() {
+        const model = useState(new MyModel(...));
+        useSubEnv({ model });
+    }
+}
+
+// in some child component:
+class D extends Component {
+    setup() {
+        // notice the useState: this is necessary to bind model changes to the
+        // component D
+        this.model = useState(this.env.model);
+    }
+}
+
+```
+
+Notes:
+
+- model could be created elsewhere, in a service, in the start code, ...
+- one may want to mark some internal stuff as 'raw'...
+- if created elsewhere, it should probably be done with `reactive`
+- the call to `reactive` could be done in the model constructor directly:
+
+  ```js
+  class MyModel {
+      constructor() {
+          ...
+          return reactive(this);
+      }
+  }
+  ```
+
+- one could slightly simplify the model use with a hook:
+
+```js
+function useModel() {
+  const env = useEnv();
+  const model = env.model;
+  return useState(model);
+}
+```
+
+This can be simply used like this in a child component:
+
+```js
+setup() {
+    this.model = useModel();
+}
+```
+
+## Special case: bypassing reactivity
+
+Sometimes, reactivity is not what we want. For example, the o_spreadsheet
+library has a huge extremely complex model, and each state transition may
+potentially update the full UI, so it needs to be fast anyway, and reactivity
+has a cost that may outweight the benefits.
+
+The strategy here is:
+
+- mark the model as raw (not necessary in all cases, but potentially important
+  if model is passed through some props)
+- find a way to be notified on update change (for example, by an event triggered
+  by an event bus)
+- perform a deep rendering: render(true), at the root component.
+
+Here is how one could organize the code then:
+
+```js
+class MainModel extends EventBus{
+    constructor() {
+        markRaw(this); // make sure this object will never be turned into a reactive
+    }
+
+    doSomething() {
+        ...
+        // need to notify the outside world that a change occurred
+        this.trigger("UPDATE");
+    }
+    ...
+}
+
+// in root component:
+class A extends Component {
+    setup() {
+        const model = new MainModel();
+
+        // notice the 'render(true)', to do a deep render
+        model.addEventListener("UPDATE", () => this.render(true));
+        useSubEnv({ model });
+    }
+}
+
+// in child components:
+class E extends Component {
+    setup() {
+        this.model = this.env.model; // not really necessary, but maybe nice
+    }
+
+    onClick() {
+        this.model.doSomething();
+    }
+}
+```
@@ -117,5 +117,3 @@ Dev mode activates some additional checks and developer amenities:
 - [Props validation](./props.md#props-validation) is performed
 - [t-foreach](./templates.md#loops) loops check for key unicity
 - Lifecycle hooks are wrapped to report their errors in a more developer-friendly way
- onWillStart and onWillUpdateProps will emit a warning in the console when they
-  take longer than 3 seconds in an effort to ease debugging the presence of deadlocks
@@ -76,8 +76,7 @@ The `Component` class has a very small API.

  By default, the render initiated by this method will stop at each child
  component if their props are (shallow) equal. To force a render to update
-  all child components, one can use the optional `deep` argument. Note that the
-  value of the `deep` argument needs to be a boolean, not a truthy value.
+  all child components, one can use the optional `deep` argument.

 ## Static Properties

@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.0.0-beta-6",
+  "version": "2.0.0-beta.3",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
  "browser": "dist/owl.iife.js",
@@ -67,7 +67,7 @@ export class App<
  }

  makeNode(Component: ComponentConstructor, props: any): ComponentNode {
-    return new ComponentNode(Component, props, this, null, null);
+    return new ComponentNode(Component, props, this);
  }

  mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
@@ -101,7 +101,6 @@ export class App<

  destroy() {
    if (this.root) {
-      this.scheduler.flush();
      this.root.destroy();
    }
  }
@@ -139,8 +139,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {

 export function makePropSetter(name: string): Setter<HTMLElement> {
  return function setProp(this: HTMLElement, value: any) {
-    // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value || "";
+    (this as any)[name] = value || "";
  };
 }

@@ -1115,11 +1115,8 @@ export class CodeGenerator {
      let slotStr: string[] = [];
      for (let slotName in ast.slots) {
        const slotAst = ast.slots[slotName];
-        const params = [];
-        if (slotAst.content) {
-          const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
-        }
+        const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+        const params = [`__render: ${name}, __ctx: ${ctxStr}`];
        const scope = ast.slots[slotName].scope;
        if (scope) {
          params.push(`__scope: "${scope}"`);
@@ -1234,7 +1231,7 @@ export class CodeGenerator {
      if (dynamic) {
        let name = this.generateId("slot");
        this.define(name, slotName);
-        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
      } else {
        blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
      }
@@ -118,7 +118,7 @@ export interface ASTTCall {
 }

 interface SlotDefinition {
-  content: AST | null;
+  content: AST;
  scope: string | null;
  on: EventHandlers | null;
  attrs: Attrs | null;
@@ -749,24 +749,26 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
      slotNode.removeAttribute("t-set-slot");
      slotNode.remove();
      const slotAst = parseNode(slotNode, ctx);
-      let on: SlotDefinition["on"] = null;
-      let attrs: Attrs | null = null;
-      let scope: string | null = null;
-      for (let attributeName of slotNode.getAttributeNames()) {
-        const value = slotNode.getAttribute(attributeName)!;
-        if (attributeName === "t-slot-scope") {
-          scope = value;
-          continue;
-        } else if (attributeName.startsWith("t-on-")) {
-          on = on || {};
-          on[attributeName.slice(5)] = value;
-        } else {
-          attrs = attrs || {};
-          attrs[attributeName] = value;
+      if (slotAst) {
+        let on: SlotDefinition["on"] = null;
+        let attrs: Attrs | null = null;
+        let scope: string | null = null;
+        for (let attributeName of slotNode.getAttributeNames()) {
+          const value = slotNode.getAttribute(attributeName)!;
+          if (attributeName === "t-slot-scope") {
+            scope = value;
+            continue;
+          } else if (attributeName.startsWith("t-on-")) {
+            on = on || {};
+            on[attributeName.slice(5)] = value;
+          } else {
+            attrs = attrs || {};
+            attrs[attributeName] = value;
+          }
        }
+        slots = slots || {};
+        slots[name] = { content: slotAst, on, attrs, scope };
      }
-      slots = slots || {};
-      slots[name] = { content: slotAst, on, attrs, scope };
    }

    // default slot
@@ -37,6 +37,6 @@ export class Component<Props = any, Env = any> {
  setup() {}

  render(deep: boolean = false) {
-    this.__owl__.render(deep === true);
+    this.__owl__.render(deep);
  }
 }
@@ -2,16 +2,23 @@ import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import {
  clearReactivesForCallback,
-  getSubscriptions,
-  NonReactive,
  Reactive,
  reactive,
  TARGET,
+  NonReactive,
+  getSubscriptions,
 } from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
-import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
+import {
+  Fiber,
+  makeChildFiber,
+  makeRootFiber,
+  MountFiber,
+  MountOptions,
+  RootFiber,
+} from "./fibers";
 import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";

@@ -47,7 +54,7 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
  const node = getCurrent();
  let render = batchedRenderFunctions.get(node)!;
  if (!render) {
-    render = batched(node.render.bind(node, false));
+    render = batched(node.render.bind(node));
    batchedRenderFunctions.set(node, render);
    // manual implementation of onWillDestroy to break cyclic dependency
    node.willDestroy.push(clearReactivesForCallback.bind(null, render));
@@ -79,8 +86,13 @@ export function component<P extends object>(
  let node: any = ctx.children[key];
  let isDynamic = typeof name !== "string";

-  if (node && node.status === STATUS.DESTROYED) {
-    node = undefined;
+  if (node) {
+    if (node.status < STATUS.MOUNTED) {
+      node.destroy();
+      node = undefined;
+    } else if (node.status === STATUS.DESTROYED) {
+      node = undefined;
+    }
  }
  if (isDynamic && node && node.component.constructor !== name) {
    node = undefined;
@@ -109,11 +121,11 @@ export function component<P extends object>(
        throw new Error(`Cannot find the definition of component "${name}"`);
      }
    }
-    node = new ComponentNode(C, props, ctx.app, ctx, key);
+    node = new ComponentNode(C, props, ctx.app, ctx);
    ctx.children[key] = node;
+
    node.initiateRender(new Fiber(node, parentFiber));
  }
-  parentFiber.childrenMap[key] = node;
  return node;
 }

@@ -131,7 +143,6 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
  bdom: BDom | null = null;
  status: STATUS = STATUS.NEW;
  forceNextRender: boolean = false;
-  parentKey: string | null;

  renderFn: Function;
  parent: ComponentNode | null;
@@ -148,17 +159,10 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
  patched: LifecycleHook[] = [];
  willDestroy: LifecycleHook[] = [];

-  constructor(
-    C: ComponentConstructor<P, E>,
-    props: P,
-    app: App,
-    parent: ComponentNode | null,
-    parentKey: string | null
-  ) {
+  constructor(C: ComponentConstructor<P, E>, props: P, app: App, parent?: ComponentNode) {
    currentNode = this;
    this.app = app;
-    this.parent = parent;
-    this.parentKey = parentKey;
+    this.parent = parent || null;
    this.level = parent ? parent.level + 1 : 0;
    applyDefaultProps(props, C);
    const env = (parent && parent.childEnv) || app.env;
@@ -189,13 +193,13 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
      return;
    }
    if (this.status === STATUS.NEW && this.fiber === fiber) {
-      fiber.render();
+      this._render(fiber);
    }
  }

-  async render(deep: boolean) {
+  async render(deep: boolean = false) {
    let current = this.fiber;
-    if (current && (current.root!.locked || (current as any).bdom === true)) {
+    if (current && current.root!.locked) {
      await Promise.resolve();
      // situation may have changed after the microtask tick
      current = this.fiber;
@@ -217,7 +221,6 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
    const fiber = makeRootFiber(this);
    fiber.deep = deep;
    this.fiber = fiber;
-
    this.app.scheduler.addFiber(fiber);
    await Promise.resolve();
    if (this.status === STATUS.DESTROYED) {
@@ -235,7 +238,16 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
    //   embedded in a rendering coming from above, so the fiber will be rendered
    //   in the next microtick anyway, so we should not render it again.
    if (this.fiber === fiber && (current || !fiber.parent)) {
-      fiber.render();
+      this._render(fiber);
+    }
+  }
+
+  _render(fiber: Fiber | RootFiber) {
+    try {
+      fiber.bdom = this.renderFn();
+      fiber.root!.counter--;
+    } catch (e) {
+      handleError({ node: this, error: e });
    }
  }

@@ -257,14 +269,8 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
    for (let child of Object.values(this.children)) {
      child._destroy();
    }
-    if (this.willDestroy.length) {
-      try {
-        for (let cb of this.willDestroy) {
-          cb.call(component);
-        }
-      } catch (e) {
-        handleError({ error: e, node: this });
-      }
+    for (let cb of this.willDestroy) {
+      cb.call(component);
    }
    this.status = STATUS.DESTROYED;
  }
@@ -285,7 +291,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
      return;
    }
    component.props = props;
-    fiber.render();
+    this._render(fiber);
    const parentRoot = parentFiber.root!;
    if (this.willPatch.length) {
      parentRoot.willPatch.push(fiber);
@@ -335,7 +341,6 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
    bdom.mount(parent, anchor);
    this.status = STATUS.MOUNTED;
    this.fiber!.appliedToDom = true;
-    this.children = this.fiber!.childrenMap;
    this.fiber = null;
  }

@@ -353,8 +358,10 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
  }
  _patch() {
    const hasChildren = Object.keys(this.children).length > 0;
-    this.children = this.fiber!.childrenMap;
    this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
+    if (hasChildren) {
+      this.cleanOutdatedChildren();
+    }
    this.fiber!.appliedToDom = true;
    this.fiber = null;
  }
@@ -367,6 +374,20 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
    this.bdom!.remove();
  }

+  cleanOutdatedChildren() {
+    const children = this.children;
+    for (const key in children) {
+      const node = children[key];
+      const status = node.status;
+      if (status !== STATUS.MOUNTED) {
+        delete children[key];
+        if (status !== STATUS.DESTROYED) {
+          node.destroy();
+        }
+      }
+    }
+  }
+
  // ---------------------------------------------------------------------------
  // Some debug helpers
  // ---------------------------------------------------------------------------
@@ -5,7 +5,7 @@ import type { Fiber } from "./fibers";
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();

-function _handleError(node: ComponentNode | null, error: any): boolean {
+function _handleError(node: ComponentNode | null, error: any, isFirstRound = false): boolean {
  if (!node) {
    return false;
  }
@@ -16,19 +16,22 @@ function _handleError(node: ComponentNode | null, error: any): boolean {

  const errorHandlers = nodeErrorHandlers.get(node);
  if (errorHandlers) {
-    let handled = false;
+    let stopped = false;
    // execute in the opposite order
    for (let i = errorHandlers.length - 1; i >= 0; i--) {
      try {
        errorHandlers[i](error);
-        handled = true;
+        stopped = true;
        break;
      } catch (e) {
        error = e;
      }
    }

-    if (handled) {
+    if (stopped) {
+      if (isFirstRound && fiber && fiber.node.fiber) {
+        fiber.root!.counter--;
+      }
      return true;
    }
  }
@@ -51,7 +54,7 @@ export function handleError(params: ErrorParams) {

  fibersInError.set(fiber.root!, error);

-  const handled = _handleError(node, error);
+  const handled = _handleError(node, error, true);
  if (!handled) {
    console.warn(`[Owl] Unhandled error. Destroying the root component`);
    try {
@@ -16,14 +16,8 @@ export function makeRootFiber(node: ComponentNode): Fiber {
  let current = node.fiber;
  if (current) {
    let root = current.root!;
-    // lock root fiber because canceling children fibers may destroy components,
-    // which means any arbitrary code can be run in onWillDestroy, which may
-    // trigger new renderings
-    root.locked = true;
-    root.setCounter(root.counter + 1 - cancelFibers(current.children));
-    root.locked = false;
+    root.counter = root.counter + 1 - cancelFibers(current.children);
    current.children = [];
-    current.childrenMap = {};
    current.bdom = null;
    if (fibersInError.has(current)) {
      fibersInError.delete(current);
@@ -48,11 +42,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 function cancelFibers(fibers: Fiber[]): number {
  let result = 0;
  for (let fiber of fibers) {
-    let node = fiber.node;
-    if (node.status === STATUS.NEW) {
-      node.destroy();
-    }
-    node.fiber = null;
+    fiber.node.fiber = null;
    if (fiber.bdom) {
      // if fiber has been rendered, this means that the component props have
      // been updated. however, this fiber will not be patched to the dom, so
@@ -60,7 +50,7 @@ function cancelFibers(fibers: Fiber[]): number {
      // the same props, and skip the render completely. With the next line,
      // we kindly request the component code to force a render, so it works as
      // expected.
-      node.forceNextRender = true;
+      fiber.node.forceNextRender = true;
    } else {
      result++;
    }
@@ -77,7 +67,6 @@ export class Fiber {
  children: Fiber[] = [];
  appliedToDom = false;
  deep: boolean = false;
-  childrenMap: ComponentNode["children"] = {};

  constructor(node: ComponentNode, parent: Fiber | null) {
    this.node = node;
@@ -85,50 +74,13 @@ export class Fiber {
    if (parent) {
      this.deep = parent.deep;
      const root = parent.root!;
-      root.setCounter(root.counter + 1);
+      root.counter++;
      this.root = root;
      parent.children.push(this);
    } else {
      this.root = this as any;
    }
  }
-
-  render() {
-    // if some parent has a fiber => register in followup
-    let prev = this.root!.node;
-    let scheduler = prev.app.scheduler;
-    let current = prev.parent;
-    while (current) {
-      if (current.fiber) {
-        let root = current.fiber.root!;
-        if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
-          current = root.node;
-        } else {
-          scheduler.delayedRenders.push(this);
-          return;
-        }
-      }
-      prev = current;
-      current = current.parent;
-    }
-
-    // there are no current rendering from above => we can render
-    this._render();
-  }
-
-  _render() {
-    const node = this.node;
-    const root = this.root;
-    if (root) {
-      try {
-        (this.bdom as any) = true;
-        this.bdom = node.renderFn();
-      } catch (e) {
-        handleError({ node, error: e });
-      }
-      root.setCounter(root.counter - 1);
-    }
-  }
 }

 export class RootFiber extends Fiber {
@@ -192,13 +144,6 @@ export class RootFiber extends Fiber {
      handleError({ fiber: current || this, error: e });
    }
  }
-
-  setCounter(newValue: number) {
-    this.counter = newValue;
-    if (newValue === 0) {
-      this.node.app.scheduler.flush();
-    }
-  }
 }

 type Position = "first-child" | "last-child";
@@ -220,7 +165,6 @@ export class MountFiber extends RootFiber {
    let current: Fiber | undefined = this;
    try {
      const node = this.node;
-      node.children = this.childrenMap;
      (node.app.constructor as any).validateTarget(this.target);
      if (node.bdom) {
        // this is a complicated situation: if we mount a fiber with an existing
@@ -1,28 +1,14 @@
 import { getCurrent } from "./component_node";
 import { nodeErrorHandlers } from "./error_handling";

-const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
    cause: any;
  };
-  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
-  const node = getCurrent();
  return (...args: any[]) => {
    try {
      const result = fn(...args);
      if (result instanceof Promise) {
-        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
-          const fiber = node.fiber;
-          Promise.race([
-            result,
-            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
-          ]).then((res) => {
-            if (res === TIMEOUT && node.fiber === fiber) {
-              console.warn(timeoutError);
-            }
-          });
-        }
        return result.catch((cause) => {
          error.cause = cause;
          if (cause instanceof Error) {
@@ -11,16 +11,27 @@ export class Scheduler {
  // interactions with other code, such as test frameworks that override them
  static requestAnimationFrame = window.requestAnimationFrame.bind(window);
  tasks: Set<RootFiber> = new Set();
+  isRunning: boolean = false;
  requestAnimationFrame: Window["requestAnimationFrame"];
-  frame: number = 0;
-  delayedRenders: Fiber[] = [];

  constructor() {
    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
  }

+  start() {
+    this.isRunning = true;
+    this.scheduleTasks();
+  }
+
+  stop() {
+    this.isRunning = false;
+  }
+
  addFiber(fiber: Fiber) {
    this.tasks.add(fiber.root!);
+    if (!this.isRunning) {
+      this.start();
+    }
  }

  /**
@@ -28,49 +39,39 @@ export class Scheduler {
   * Other tasks are left unchanged.
   */
  flush() {
-    if (this.delayedRenders.length) {
-      let renders = this.delayedRenders;
-      this.delayedRenders = [];
-      for (let f of renders) {
-        if (f.root && f.node.status !== STATUS.DESTROYED) {
-          f.render();
-        }
+    this.tasks.forEach((fiber) => {
+      if (fiber.root !== fiber) {
+        this.tasks.delete(fiber);
+        return;
+      }
+      const hasError = fibersInError.has(fiber);
+      if (hasError && fiber.counter !== 0) {
+        this.tasks.delete(fiber);
+        return;
+      }
+      if (fiber.node.status === STATUS.DESTROYED) {
+        this.tasks.delete(fiber);
+        return;
      }
-    }

-    if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => {
-        this.frame = 0;
-        this.tasks.forEach((fiber) => this.processFiber(fiber));
-        for (let task of this.tasks) {
-          if (task.node.status === STATUS.DESTROYED) {
-            this.tasks.delete(task);
-          }
+      if (fiber.counter === 0) {
+        if (!hasError) {
+          fiber.complete();
        }
-      });
+        this.tasks.delete(fiber);
+      }
+    });
+    if (this.tasks.size === 0) {
+      this.stop();
    }
  }

-  processFiber(fiber: RootFiber) {
-    if (fiber.root !== fiber) {
-      this.tasks.delete(fiber);
-      return;
-    }
-    const hasError = fibersInError.has(fiber);
-    if (hasError && fiber.counter !== 0) {
-      this.tasks.delete(fiber);
-      return;
-    }
-    if (fiber.node.status === STATUS.DESTROYED) {
-      this.tasks.delete(fiber);
-      return;
-    }
-
-    if (fiber.counter === 0) {
-      if (!hasError) {
-        fiber.complete();
+  scheduleTasks() {
+    this.requestAnimationFrame(() => {
+      this.flush();
+      if (this.isRunning) {
+        this.scheduleTasks();
      }
-      this.tasks.delete(fiber);
-    }
+    });
  }
 }
@@ -232,11 +232,6 @@ function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T
      if (key === TARGET) {
        return target;
      }
-      // non-writable non-configurable properties cannot be made reactive
-      const desc = Object.getOwnPropertyDescriptor(target, key);
-      if (desc && !desc.writable && !desc.configurable) {
-        return Reflect.get(target, key, proxy);
-      }
      observeTargetKey(target, key, callback);
      return possiblyReactive(Reflect.get(target, key, proxy), callback);
    },
@@ -15,13 +15,11 @@ export function batched(callback: Callback): Callback {
    await Promise.resolve();
    if (!called) {
      called = true;
-      // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback.
-      // Schedule this before calling the callback so that calls to the batched function
-      // within the callback will proceed only after resetting called to false, and have
-      // a chance to execute the callback again
-      Promise.resolve().then(() => (called = false));
      callback();
+      // wait for all calls in this microtick to fall through before resetting "called"
+      // so that only the first call to the batched function calls the original callback
+      await Promise.resolve();
+      called = false;
    }
  };
 }
@@ -169,25 +169,13 @@ describe("properties", () => {
    expect(input.value).toBe("potato");
  });

-  test("input with value attribute, and falsy value given", () => {
+  test("input with value attribute, and undefined given", () => {
    const block = createBlock(`<input block-attribute-0="value"/>`);

    const tree = block([undefined]);
    mount(tree, fixture);
    const input = fixture.querySelector("input")!;
    expect(input.value).toBe("");
-
-    patch(tree, block([null]));
-    expect(input.value).toBe("");
-
-    patch(tree, block([0]));
-    expect(input.value).toBe("0");
-
-    patch(tree, block([""]));
-    expect(input.value).toBe("");
-
-    patch(tree, block([false]));
-    expect(input.value).toBe("");
  });

  test("input type=checkbox with checked attribute", () => {
@@ -1370,25 +1370,6 @@ describe("qweb parser", () => {
    });
  });

-  test("a component with an empty named slot", async () => {
-    expect(parse(`<MyComponent><t t-set-slot="mySlot"></t></MyComponent>`)).toEqual({
-      dynamicProps: null,
-      isDynamic: false,
-      name: "MyComponent",
-      on: null,
-      props: null,
-      slots: {
-        mySlot: {
-          attrs: null,
-          content: null,
-          on: null,
-          scope: null,
-        },
-      },
-      type: 11,
-    });
-  });
-
  test("a component with a named slot", async () => {
    expect(parse(`<MyComponent><t t-set-slot="name">foo</t></MyComponent>`)).toEqual({
      type: ASTType.TComponent,
@@ -52,50 +52,6 @@ exports[`Cascading renders after microtaskTick 3`] = `
 }"
 `;

-exports[`another scenario with delayed rendering 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].value<15) {
-      b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`another scenario with delayed rendering 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['props'].value);
-    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`another scenario with delayed rendering 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
-  }
-}"
-`;
-
 exports[`async rendering destroying a widget before start is over 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1111,287 +1067,6 @@ exports[`delay willUpdateProps with rendering grandchild 4`] = `
 }"
 `;

-exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`delayed rendering, but then initial rendering is cancelled by yet another render 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`C\`, {value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`delayed rendering, but then initial rendering is cancelled by yet another render 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block3 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
-    let txt1 = ctx['props'].value;
-    const b3 = block3([txt1]);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, but then initial rendering is cancelled by yet another render 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
-  }
-}"
-`;
-
-exports[`delayed rendering, destruction, stuff happens 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`A\`);
-    const b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, destruction, stuff happens 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`B\`);
-    if (ctx['state'].hasChild) {
-      b3 = component(\`C\`, {value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, destruction, stuff happens 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block4 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`C\`);
-    const b3 = component(\`D\`, {}, key + \`__1\`, node, ctx);
-    let txt1 = ctx['props'].value;
-    const b4 = block4([txt1]);
-    return multi([b2, b3, b4]);
-  }
-}"
-`;
-
-exports[`delayed rendering, destruction, stuff happens 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block3 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`D\`);
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    const b3 = block3([hdlr1, txt1]);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber and stuff 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber and stuff 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['props'].value);
-    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber and stuff 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].value<15) {
-      b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['props'].value);
-    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
-  }
-}"
-`;
-
-exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(ctx['props'].value);
-    if (ctx['props'].value<10) {
-      b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
-  }
-}"
-`;
-
-exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\` A \`);
-    if (ctx['state'].flag) {
-      const b4 = component(\`B\`, {value: ctx['state'].valueB}, key + \`__1\`, node, ctx);
-      const b5 = component(\`C\`, {value: ctx['state'].valueC}, key + \`__2\`, node, ctx);
-      b3 = multi([b4, b5]);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
-  }
-}"
-`;
-
-exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].val+ctx['props'].value);
-  }
-}"
-`;
-
 exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1569,70 +1244,6 @@ exports[`rendering parent twice, with different props on child and stuff 2`] = `
 }"
 `;

-exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`A\`);
-    const b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    const b4 = component(\`D\`, {}, key + \`__2\`, node, ctx);
-    return multi([b2, b3, b4]);
-  }
-}"
-`;
-
-exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`B\`);
-    if (ctx['props'].value===33) {
-      b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`D\`);
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    const b3 = block3([hdlr1, txt1]);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`C\`);
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
-    const b3 = block3([hdlr1, txt1]);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
 exports[`t-foreach with dynamic async component 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -85,64 +85,6 @@ exports[`basics simple catchError 2`] = `
 }"
 `;

-exports[`can catch errors an error in onWillDestroy 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(ctx['state'].value);
-    if (ctx['state'].hasChild) {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`can catch errors an error in onWillDestroy 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>abc</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`can catch errors an error in onWillDestroy, variation 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(ctx['state'].value);
-    if (ctx['state'].hasChild) {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`can catch errors an error in onWillDestroy, variation 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>abc</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`can catch errors calling a hook outside setup should crash 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -658,43 +658,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;

-exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, ctx);
-    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
-  }
-}"
-`;
-
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1,31 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].renderChild) {
-      b2 = component(\`Child\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
-  }
-}"
-`;
-
-exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].state.content.a);
-  }
-}"
-`;
-
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -127,30 +127,6 @@ exports[`rendering semantics props are reactive 2`] = `
 }"
 `;

-exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].value);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`child\`);
-  }
-}"
-`;
-
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -626,7 +626,7 @@ exports[`slots dynamic t-slot call 2`] = `
  return function template(ctx, node, key = \\"\\") {
    let hdlr1 = [ctx['toggle'], ctx];
    const slot1 = (ctx['current'].slot);
-    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, null));
+    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1), true, null);
    return block1([hdlr1], [b2]);
  }
 }"
@@ -1444,110 +1444,6 @@ exports[`slots simple default slot, variation 2`] = `
 }"
 `;

-exports[`slots simple dynamic slot with slot scope 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  
-  function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['slotScope'].bool) {
-      b2 = text(\`some text\`);
-    } else {
-      b3 = text(\`other text\`);
-    }
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`slots simple dynamic slot with slot scope 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const slot1 = ('slotName');
-    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {bool: ctx['state'].bool}));
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots simple named and empty slot -- 2 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: markRaw({'myEmptySlot': {myProp: 'myProp text'}})}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`slots simple named and empty slot -- 2 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  function defaultContent1(ctx, node, key = \\"\\") {
-    return text(\`default empty\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, null, defaultContent1);
-    return block1([], [b3]);
-  }
-}"
-`;
-
-exports[`slots simple named and empty slot 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return text(\`some text\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`slots simple named and empty slot 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = callSlot(ctx, node, key, 'default', false, null);
-    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, null);
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
 exports[`slots simple slot with slot scope 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1793,7 +1689,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
  return function template(ctx, node, key = \\"\\") {
    const b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx);
    const slot1 = (ctx['slotName']);
-    const b3 = toggler(slot1, callSlot(ctx, node, key, slot1, true, null));
+    const b3 = toggler(slot1, callSlot(ctx, node, key, slot1), true, null);
    return multi([b2, b3]);
  }
 }"
@@ -3,8 +3,6 @@ import {
  Component,
  mount,
  onMounted,
-  onRendered,
-  onWillDestroy,
  onWillStart,
  onWillUnmount,
  onWillUpdateProps,
@@ -115,8 +113,8 @@ test("destroying/recreating a subwidget with different props (if start is not ov
  expect(n).toBe(2);

  expect([
-    "Child:willDestroy",
    "W:willRender",
+    "Child:willDestroy",
    "Child:setup",
    "Child:willStart",
    "W:rendered",
@@ -173,11 +171,6 @@ test("destroying/recreating a subcomponent, other scenario", async () => {

  await nextTick();
  expect([
-    "Parent:willRender",
-    "Child:setup",
-    "Child:willStart",
-    "Parent:rendered",
-    "Child:willDestroy",
    "Parent:willRender",
    "Child:setup",
    "Child:willStart",
@@ -250,8 +243,8 @@ test("creating two async components, scenario 1", async () => {
  await nextTick();
  expect(fixture.innerHTML).toBe("");
  expect([
-    "ChildA:willDestroy",
    "Parent:willRender",
+    "ChildA:willDestroy",
    "ChildA:setup",
    "ChildA:willStart",
    "ChildB:setup",
@@ -702,8 +695,8 @@ test("rendering component again in next microtick", async () => {
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
-    "Child:willDestroy",
    "Parent:willRender",
+    "Child:willDestroy",
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
@@ -1086,7 +1079,11 @@ test("concurrent renderings scenario 3", async () => {
  stateC.fromC = "d";
  await nextTick();
  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect([]).toBeLogged();
+  expect([
+    "ComponentC:willRender",
+    "ComponentD:willUpdateProps",
+    "ComponentC:rendered",
+  ]).toBeLogged();

  defB.resolve(); // resolve rendering initiated in A (still blocked in D)
  await nextTick();
@@ -1102,7 +1099,14 @@ test("concurrent renderings scenario 3", async () => {

  defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
  await nextTick();
+  expect(ComponentD.prototype.someValue).toBeCalledTimes(1);
+  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
+  expect([]).toBeLogged();
+
+  defsD[1].resolve(); // completely resolve rendering initiated in A
+  await nextTick();
  expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
+  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
  expect([
    "ComponentD:willRender",
    "ComponentD:rendered",
@@ -1115,7 +1119,6 @@ test("concurrent renderings scenario 3", async () => {
    "ComponentB:patched",
    "ComponentA:patched",
  ]).toBeLogged();
-  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
 });

 test("concurrent renderings scenario 4", async () => {
@@ -1204,7 +1207,11 @@ test("concurrent renderings scenario 4", async () => {
  stateC.fromC = "d";
  await nextTick();
  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect([]).toBeLogged();
+  expect([
+    "ComponentC:willRender",
+    "ComponentD:willUpdateProps",
+    "ComponentC:rendered",
+  ]).toBeLogged();

  defB.resolve(); // resolve rendering initiated in A (still blocked in D)
  await nextTick();
@@ -1220,12 +1227,6 @@ test("concurrent renderings scenario 4", async () => {

  defsD[1].resolve(); // completely resolve rendering initiated in A
  await nextTick();
-  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect(ComponentD.prototype.someValue).toBeCalledTimes(1);
-  expect([]).toBeLogged();
-
-  defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
-  await nextTick();
  expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
  expect([
@@ -1240,6 +1241,12 @@ test("concurrent renderings scenario 4", async () => {
    "ComponentB:patched",
    "ComponentA:patched",
  ]).toBeLogged();
+
+  defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
+  await nextTick();
+  expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
+  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
+  expect([]).toBeLogged();
 });

 test("concurrent renderings scenario 5", async () => {
@@ -1731,7 +1738,6 @@ test("concurrent renderings scenario 10", async () => {
  expect(fixture.innerHTML).toBe("<div><p></p></div>");
  expect([
    "ComponentA:willRender",
-    "ComponentC:willDestroy",
    "ComponentB:willUpdateProps",
    "ComponentA:rendered",
  ]).toBeLogged();
@@ -1742,6 +1748,7 @@ test("concurrent renderings scenario 10", async () => {
  expect(rendered).toBe(1);
  expect([
    "ComponentB:willRender",
+    "ComponentC:willDestroy",
    "ComponentC:setup",
    "ComponentC:willStart",
    "ComponentB:rendered",
@@ -2281,11 +2288,11 @@ test("concurrent renderings scenario 16", async () => {
    "D:setup",
    "D:willStart",
    "C:rendered",
-    "D:willDestroy",
    "B:willRender",
    "C:willUpdateProps",
    "B:rendered",
    "C:willRender",
+    "D:willDestroy",
    "D:setup",
    "D:willStart",
    "C:rendered",
@@ -2707,7 +2714,13 @@ test("delay willUpdateProps", async () => {
  parent.render();
  await nextTick();
  expect(fixture.innerHTML).toBe("0_0");
-  expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
+  expect([
+    "Child:willRender",
+    "Child:rendered",
+    "Parent:willRender",
+    "Child:willUpdateProps",
+    "Parent:rendered",
+  ]).toBeLogged();

  promise = makeDeferred();
  const prom2 = promise;
@@ -2824,9 +2837,13 @@ test("delay willUpdateProps with rendering grandchild", async () => {
  await nextTick();
  expect(fixture.innerHTML).toBe("0_0<div></div>");
  expect([
+    "DelayedChild:willRender",
+    "DelayedChild:rendered",
    "GrandParent:willRender",
    "Parent:willUpdateProps",
    "GrandParent:rendered",
+    "ReactiveChild:willRender",
+    "ReactiveChild:rendered",
    "Parent:willRender",
    "DelayedChild:willUpdateProps",
    "ReactiveChild:willUpdateProps",
@@ -2847,6 +2864,8 @@ test("delay willUpdateProps with rendering grandchild", async () => {
    "GrandParent:willRender",
    "Parent:willUpdateProps",
    "GrandParent:rendered",
+    "ReactiveChild:willRender",
+    "ReactiveChild:rendered",
    "Parent:willRender",
    "DelayedChild:willUpdateProps",
    "ReactiveChild:willUpdateProps",
@@ -2996,13 +3015,13 @@ test("t-key on dom node having a component", async () => {

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
-    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
+    "Child (2):willDestroy",
    "Child (3):mounted",
  ]).toBeLogged();
 });
@@ -3054,13 +3073,13 @@ test("t-key on dynamic async component (toggler is never patched)", async () =>

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
-    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
+    "Child (2):willDestroy",
    "Child (3):mounted",
  ]).toBeLogged();
 });
@@ -3113,13 +3132,13 @@ test("t-foreach with dynamic async component", async () => {

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
-    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
+    "Child (2):willDestroy",
    "Child (3):mounted",
  ]).toBeLogged();
 });
@@ -3235,755 +3254,6 @@ test("rendering parent twice, with different props on child and stuff", async ()
  ]).toBeLogged();
 });

-test("delayed rendering, but then initial rendering is cancelled by yet another render", async () => {
-  const promC = makeDeferred();
-  let stateB: any = null;
-
-  class D extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class C extends Component {
-    static template = xml`<D/><p><t t-esc="props.value"/></p>`;
-    static components = { D };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => promC);
-    }
-  }
-
-  class B extends Component {
-    static template = xml`<C value="state.someValue + props.value"/>`;
-    static components = { C };
-    state = useState({ someValue: 3 });
-    setup() {
-      useLogLifecycle();
-      stateB = this.state;
-    }
-  }
-
-  class A extends Component {
-    static template = xml`<B value="state.value"/>`;
-    static components = { B };
-    state = useState({ value: 33 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("<button>1</button><p>36</p>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "D:setup",
-    "D:willStart",
-    "C:rendered",
-    "D:willRender",
-    "D:rendered",
-    "D:mounted",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // update B and C, but render is blocked by C willupdateProps
-  stateB.someValue = 5;
-  await nextTick();
-  expect(["B:willRender", "C:willUpdateProps", "B:rendered"]).toBeLogged();
-
-  // update D => render should be delayed, because B is currently rendering
-  fixture.querySelector("button")!.click();
-  await nextTick();
-  expect([]).toBeLogged();
-
-  // update A => render should go to B and cancel it
-  parent.state.value = 34;
-  await nextTick();
-  expect([
-    "A:willRender",
-    "B:willUpdateProps",
-    "A:rendered",
-    "B:willRender",
-    "C:willUpdateProps",
-    "B:rendered",
-  ]).toBeLogged();
-
-  promC.resolve();
-  await nextTick();
-  expect([
-    "C:willRender",
-    "C:rendered",
-    "D:willRender",
-    "D:rendered",
-    "D:willPatch",
-    "D:patched",
-    "A:willPatch",
-    "B:willPatch",
-    "C:willPatch",
-    "C:patched",
-    "B:patched",
-    "A:patched",
-  ]).toBeLogged();
-  expect(fixture.innerHTML).toBe("<button>2</button><p>39</p>");
-});
-
-test("delayed rendering, reusing fiber and stuff", async () => {
-  let prom1 = makeDeferred();
-  let prom2 = makeDeferred();
-
-  class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class B extends Component {
-    static template = xml`<t t-esc="props.value"/><C />`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      let flag = false;
-      onWillUpdateProps(() => {
-        flag = true;
-        return prom1;
-      });
-      onRendered(async () => {
-        if (flag) {
-          await nextMicroTick();
-          prom2.resolve();
-        }
-      });
-    }
-  }
-
-  class A extends Component {
-    static template = xml`<B value="state.value"/>`;
-    static components = { B };
-    state = useState({ value: 33 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("33<button>1</button>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // initiate a render in A, but is blocked in B
-  parent.state.value = 34;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  // initiate a render in C => delayed because of render in A
-  fixture.querySelector("button")!.click();
-  await nextTick();
-  expect([]).toBeLogged();
-
-  // wait for render in A to be completed
-  prom1.resolve();
-  await prom2;
-  expect(["B:willRender", "B:rendered", "C:willRender", "C:rendered"]).toBeLogged();
-
-  // initiate a new render in A => fiber will be reused
-  parent.state.value = 355;
-  await nextTick();
-  expect(fixture.innerHTML).toBe("355<button>2</button>");
-  expect([
-    "A:willRender",
-    "B:willUpdateProps",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "A:willPatch",
-    "B:willPatch",
-    "B:patched",
-    "A:patched",
-    "C:willPatch",
-    "C:patched",
-  ]).toBeLogged();
-});
-
-test("delayed rendering, then component is destroyed and  stuff", async () => {
-  let prom1 = makeDeferred();
-
-  class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class B extends Component {
-    static template = xml`<t t-esc="props.value"/><t t-if="props.value lt 10"><C /></t>`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => prom1);
-    }
-  }
-
-  class A extends Component {
-    static template = xml`<B value="state.value"/>`;
-    static components = { B };
-    state = useState({ value: 3 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("3<button>1</button>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // initiate a render in C (so will be first task)
-  fixture.querySelector("button")!.click();
-  // initiate a render in A, but is blocked in B. the render will destroy c. also,
-  // it blocks the render C
-  parent.state.value = 34;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  // wait for render in A to be completed
-  prom1.resolve();
-  await nextTick();
-  expect(fixture.innerHTML).toBe("34");
-  expect([
-    "B:willRender",
-    "B:rendered",
-    "A:willPatch",
-    "B:willPatch",
-    "C:willUnmount",
-    "C:willDestroy",
-    "B:patched",
-    "A:patched",
-  ]).toBeLogged();
-
-  await nextTick();
-});
-
-test("delayed rendering, reusing fiber then component is destroyed and  stuff", async () => {
-  let prom1 = makeDeferred();
-
-  class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class B extends Component {
-    static template = xml`<t t-esc="props.value"/><C />`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => prom1);
-    }
-  }
-
-  class A extends Component {
-    static template = xml`A<t t-if="state.value lt 15"><B value="state.value"/></t>`;
-    static components = { B };
-    state = useState({ value: 3 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("A3<button>1</button>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // initiate a render in A, but is blocked in B
-  parent.state.value = 5;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  // initiate a render in C (will be delayed because of render in A)
-  fixture.querySelector("button")!.click();
-  await nextTick();
-  expect([]).toBeLogged();
-
-  // initiate a render in A, that will destroy B
-  parent.state.value = 23;
-  await nextTick();
-  expect(fixture.innerHTML).toBe("A");
-  expect([
-    "A:willRender",
-    "A:rendered",
-    "A:willPatch",
-    "B:willUnmount",
-    "C:willUnmount",
-    "C:willDestroy",
-    "B:willDestroy",
-    "A:patched",
-  ]).toBeLogged();
-});
-
-test("another scenario with delayed rendering", async () => {
-  let prom1 = makeDeferred();
-  let onSecondRenderA = makeDeferred();
-
-  class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class B extends Component {
-    static template = xml`<t t-esc="props.value"/><C />`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => prom1);
-    }
-  }
-
-  class A extends Component {
-    static template = xml`A<t t-if="state.value lt 15"><B value="state.value"/></t>`;
-    static components = { B };
-    state = useState({ value: 3 });
-    setup() {
-      useLogLifecycle();
-      let n = 0;
-      onRendered(() => {
-        n++;
-        if (n === 2) {
-          onSecondRenderA.resolve();
-        }
-      });
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("A3<button>1</button>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // initiate a render in A, but is blocked in B
-  parent.state.value = 5;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  // initiate a render in C (will be delayed because of render in A)
-  fixture.querySelector("button")!.click();
-  await nextTick();
-  expect([]).toBeLogged();
-
-  // initiate a render in A, that will destroy B
-  parent.state.value = 23;
-  await onSecondRenderA;
-  await nextMicroTick();
-  expect(["A:willRender", "A:rendered"]).toBeLogged();
-
-  // rerender A, but without destroying B
-  parent.state.value = 7;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  prom1.resolve();
-  await nextTick();
-  expect(fixture.innerHTML).toBe("A7<button>2</button>");
-
-  expect([
-    "B:willRender",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "A:willPatch",
-    "B:willPatch",
-    "B:patched",
-    "A:patched",
-    "C:willPatch",
-    "C:patched",
-  ]).toBeLogged();
-});
-
-test("destroyed component causes other soon to be destroyed component to rerender, weird stuff happens", async () => {
-  let def = makeDeferred();
-  let c: any = null;
-
-  class B extends Component {
-    static template = xml`<t t-esc="props.value"/>`;
-    setup() {
-      useLogLifecycle();
-      onRendered(() => {
-        def.resolve();
-      });
-      onWillDestroy(() => {
-        c.state.val++;
-        c.render();
-      });
-    }
-  }
-  class C extends Component {
-    static template = xml`<t t-esc="state.val + props.value"/>`;
-    state = useState({ val: 0 });
-    setup() {
-      c = this;
-      useLogLifecycle();
-    }
-  }
-
-  class A extends Component {
-    static template = xml`
-      A
-      <t t-if="state.flag">
-        <B value="state.valueB"/>
-        <C value="state.valueC"/>
-      </t>`;
-    static components = { B, C };
-    state = useState({ flag: false, valueB: 1, valueC: 2 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe(" A ");
-  expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
-
-  // initiate a render in A, but is blocked in B
-  parent.state.flag = true;
-
-  await def;
-  await nextMicroTick();
-  expect([
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "C:setup",
-    "C:willStart",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-  ]).toBeLogged();
-
-  // initiate render in A => will cancel renders in B/C and restarts
-  parent.state.valueB = 2;
-  await nextTick();
-  expect([
-    "B:willDestroy",
-    "C:willDestroy",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "C:setup",
-    "C:willStart",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    "A:willPatch",
-    "C:mounted",
-    "B:mounted",
-    "A:patched",
-  ]).toBeLogged();
-
-  expect(fixture.innerHTML).toBe(" A 22");
-});
-
-test("delayed rendering, destruction, stuff happens", async () => {
-  const promC = makeDeferred();
-  let stateB: any = null;
-
-  class D extends Component {
-    static template = xml`D<button t-on-click="increment"><t t-esc="state.val"/></button>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class C extends Component {
-    static template = xml`C<D/><p><t t-esc="props.value"/></p>`;
-    static components = { D };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => promC);
-    }
-  }
-
-  class B extends Component {
-    static template = xml`B<t t-if="state.hasChild"><C value="state.someValue + props.value"/></t>`;
-    static components = { C };
-    state = useState({ someValue: 3, hasChild: true });
-    setup() {
-      useLogLifecycle();
-      stateB = this.state;
-    }
-  }
-
-  class A extends Component {
-    static template = xml`A<B value="state.value"/>`;
-    static components = { B };
-    state = useState({ value: 33 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("ABCD<button>1</button><p>36</p>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "D:setup",
-    "D:willStart",
-    "C:rendered",
-    "D:willRender",
-    "D:rendered",
-    "D:mounted",
-    "C:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // render in A, it updates B and C, but render is blocked in C
-  parent.state.value = 50;
-  await nextTick();
-  expect([
-    "A:willRender",
-    "B:willUpdateProps",
-    "A:rendered",
-    "B:willRender",
-    "C:willUpdateProps",
-    "B:rendered",
-  ]).toBeLogged();
-
-  // update B => removes child C
-  stateB.hasChild = false;
-  // update D => render should be delayed, because AB is currently rendering
-  fixture.querySelector("button")!.click();
-  await nextTick();
-  expect([
-    "B:willRender",
-    "B:rendered",
-    "A:willPatch",
-    "B:willPatch",
-    "C:willUnmount",
-    "D:willUnmount",
-    "D:willDestroy",
-    "C:willDestroy",
-    "B:patched",
-    "A:patched",
-  ]).toBeLogged();
-  expect(fixture.innerHTML).toBe("AB");
-});
-
-test("renderings, destruction, patch, stuff, ... yet another variation", async () => {
-  const promB = makeDeferred();
-
-  class D extends Component {
-    static template = xml`D<p t-on-click="increment"><t t-esc="state.val"/></p>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  // almost the same as D
-  class C extends Component {
-    static template = xml`C<span t-on-click="increment"><t t-esc="state.val"/></span>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle();
-    }
-    increment() {
-      this.state.val++;
-    }
-  }
-
-  class B extends Component {
-    static template = xml`B<t t-if="props.value === 33"><C/></t>`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillUpdateProps(() => promB);
-    }
-  }
-
-  class A extends Component {
-    static template = xml`A<B value="state.value"/><D/>`;
-    static components = { B, D };
-    state = useState({ value: 33 });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-
-  const parent = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("ABC<span>1</span>D<p>1</p>");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "D:setup",
-    "D:willStart",
-    "A:rendered",
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "D:willRender",
-    "D:rendered",
-    "C:willRender",
-    "C:rendered",
-    "C:mounted",
-    "D:mounted",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  // render in A, it updates B, will remove C, stopped in B
-  parent.state.value = 50;
-  await nextTick();
-  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
-
-  // update C => render should be delayed, because AB is currently rendering
-  fixture.querySelector("span")!.click();
-  await nextTick();
-  expect([]).toBeLogged();
-
-  // resolve prom B => render is done, component C is destroyed
-  promB.resolve();
-  await nextTick();
-  expect([
-    "B:willRender",
-    "B:rendered",
-    "A:willPatch",
-    "B:willPatch",
-    "C:willUnmount",
-    "C:willDestroy",
-    "B:patched",
-    "A:patched",
-  ]).toBeLogged();
-  expect(fixture.innerHTML).toBe("ABD<p>1</p>");
-
-  // update D => should just render completely independently
-  fixture.querySelector("p")!.click();
-  await nextTick();
-  expect(["D:willRender", "D:rendered", "D:willPatch", "D:patched"]).toBeLogged();
-  expect(fixture.innerHTML).toBe("ABD<p>2</p>");
-});
-
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };

@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { Component, mount } from "../../src";
 import {
  onError,
  onMounted,
@@ -1197,126 +1197,4 @@ describe("can catch errors", () => {
    expect(fixture.innerHTML).toBe("<div>Child 2</div>");
    expect(steps).toEqual(["Error Component"]);
  });
-
-  test("an error in onWillDestroy", async () => {
-    class Child extends Component {
-      static template = xml`<div>abc</div>`;
-      setup() {
-        useLogLifecycle();
-        onWillDestroy(() => {
-          throw new Error("boom");
-        });
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-esc="state.value"/>
-        <t t-if="state.hasChild"><Child/></t>`;
-      static components = { Child };
-
-      state = useState({ value: 1, hasChild: true });
-      setup() {
-        useLogLifecycle();
-        onError(() => {
-          this.state.value++;
-        });
-      }
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("1<div>abc</div>");
-    expect([
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:mounted",
-      "Parent:mounted",
-    ]).toBeLogged();
-    parent.state.hasChild = false;
-    await nextTick();
-    await nextTick();
-    await nextTick();
-    await nextTick();
-    expect([
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Child:willUnmount",
-      "Child:willDestroy",
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]).toBeLogged();
-    expect(fixture.innerHTML).toBe("2");
-  });
-
-  test("an error in onWillDestroy, variation", async () => {
-    class Child extends Component {
-      static template = xml`<div>abc</div>`;
-      setup() {
-        useLogLifecycle();
-        onWillDestroy(() => {
-          throw new Error("boom");
-        });
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-esc="state.value"/>
-        <t t-if="state.hasChild"><Child/></t>`;
-      static components = { Child };
-
-      state = useState({ value: 1, hasChild: false });
-      setup() {
-        useLogLifecycle();
-        onError(() => {
-          this.state.value++;
-        });
-      }
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("1");
-
-    expect([
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:mounted",
-    ]).toBeLogged();
-
-    parent.state.hasChild = true;
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    expect([
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-    ]).toBeLogged();
-    parent.state.hasChild = false;
-    await nextTick();
-    expect([
-      "Child:willDestroy",
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]).toBeLogged();
-    expect(fixture.innerHTML).toBe("2");
-  });
 });
@@ -14,7 +14,6 @@ import {
  logStep,
  makeDeferred,
  makeTestFixture,
-  nextMicroTick,
  nextTick,
  snapshotEverything,
  useLogLifecycle,
@@ -105,83 +104,6 @@ describe("lifecycle hooks", () => {
    await mount(Test, fixture);
  });

-  test("timeout in onWillStart emits a warning", async () => {
-    const { warn } = console;
-    let warnArgs: any[];
-    console.warn = jest.fn((...args) => (warnArgs = args));
-    const { setTimeout } = window;
-    let timeoutCbs: any = {};
-    let timeoutId = 0;
-    window.setTimeout = ((cb: any) => {
-      timeoutCbs[++timeoutId] = cb;
-      return timeoutId;
-    }) as any;
-    class Test extends Component {
-      static template = xml`<span/>`;
-      setup() {
-        onWillStart(() => new Promise(() => {}));
-      }
-    }
-    mount(Test, fixture, { test: true });
-    nextTick();
-    for (const id in timeoutCbs) {
-      timeoutCbs[id]();
-      delete timeoutCbs[id];
-    }
-    await nextMicroTick();
-    await nextMicroTick();
-    expect(console.warn).toHaveBeenCalledTimes(1);
-    expect(warnArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
-    console.warn = warn;
-    window.setTimeout = setTimeout;
-  });
-
-  test("timeout in onWillUpdateProps emits a warning", async () => {
-    class Child extends Component {
-      static template = xml``;
-      setup() {
-        onWillUpdateProps(() => new Promise(() => {}));
-      }
-    }
-    class Parent extends Component {
-      static template = xml`<Child prop="state.prop"/>`;
-      static components = { Child };
-      state = useState({ prop: 1 });
-    }
-    const parent = await mount(Parent, fixture, { test: true });
-
-    const { warn } = console;
-    let warnArgs: any[];
-    console.warn = jest.fn((...args) => (warnArgs = args));
-    const { setTimeout } = window;
-    let timeoutCbs: any = {};
-    let timeoutId = 0;
-    window.setTimeout = ((cb: any) => {
-      timeoutCbs[++timeoutId] = cb;
-      return timeoutId;
-    }) as any;
-
-    parent.state.prop = 2;
-    let tick = nextTick();
-    for (const id in timeoutCbs) {
-      timeoutCbs[id]();
-      delete timeoutCbs[id];
-    }
-    await tick;
-    tick = nextTick();
-    for (const id in timeoutCbs) {
-      timeoutCbs[id]();
-      delete timeoutCbs[id];
-    }
-    await tick;
-    expect(console.warn).toHaveBeenCalledTimes(1);
-    expect(warnArgs![0]!.message).toBe(
-      "onWillUpdateProps's promise hasn't resolved after 3 seconds"
-    );
-    console.warn = warn;
-    window.setTimeout = setTimeout;
-  });
-
  test("mounted hook is called if mounted in DOM", async () => {
    let mounted = false;
    class Test extends Component {
@@ -8,7 +8,7 @@ import {
  useState,
  xml,
 } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";

 let fixture: HTMLElement;

@@ -155,48 +155,4 @@ describe("reactivity in lifecycle", () => {
    expect(steps).toEqual([2]);
    expect(fixture.innerHTML).toBe("<div>2</div>");
  });
-
-  test("Child component doesn't render when state they depend on changes but their parent is about to unmount them", async () => {
-    class Child extends Component {
-      static template = xml`<t t-esc="props.state.content.a"/>`;
-      setup() {
-        useLogLifecycle();
-      }
-    }
-    class Parent extends Component {
-      static template = xml`<Child t-if="state.renderChild" state="state"/>`;
-      static components = { Child };
-      state: any = useState({ renderChild: true, content: { a: 2 } });
-      setup() {
-        useLogLifecycle();
-      }
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("2");
-    expect([
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:mounted",
-      "Parent:mounted",
-    ]).toBeLogged();
-
-    parent.state.content = null;
-    parent.state.renderChild = false;
-    await nextTick();
-    expect([
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Child:willUnmount",
-      "Child:willDestroy",
-      "Parent:patched",
-    ]).toBeLogged();
-  });
 });
@@ -102,43 +102,6 @@ describe("rendering semantics", () => {
    expect(childN).toBe(2);
  });

-  test("render need a boolean = true to be 'deep'", async () => {
-    let childN = 0;
-    let parentN = 0;
-    class Child extends Component {
-      static template = xml`child`;
-      setup() {
-        onRendered(() => childN++);
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-esc="state.value"/>
-        <Child/>
-      `;
-      static components = { Child };
-
-      state = { value: "A" };
-      setup() {
-        onRendered(() => parentN++);
-      }
-    }
-
-    const parent = await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe("Achild");
-    expect(parentN).toBe(1);
-    expect(childN).toBe(1);
-
-    parent.state.value = "B";
-    parent.render("true" as any as boolean);
-    await nextTick();
-    expect(fixture.innerHTML).toBe("Bchild");
-    expect(parentN).toBe(2);
-    expect(childN).toBe(1);
-  });
-
  test("render with deep=true followed by render with deep=false work as expected", async () => {
    class Child extends Component {
      static template = xml`child<t t-esc="env.getValue()"/>`;
@@ -74,72 +74,6 @@ describe("slots", () => {
    expect(fixture.innerHTML).toBe("<span>other text</span>");
  });

-  test("simple dynamic slot with slot scope", async () => {
-    let child: any;
-    class Child extends Component {
-      static template = xml`<span><t t-slot="{{ 'slotName' }}" bool="state.bool"/></span>`;
-      state = useState({ bool: true });
-      setup() {
-        child = this;
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <Child>
-          <t t-set-slot="slotName" t-slot-scope="slotScope">
-            <t t-if="slotScope.bool">some text</t>
-            <t t-else="slotScope.bool">other text</t>
-          </t>
-        </Child>`;
-      static components = { Child };
-    }
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<span>some text</span>");
-
-    child.state.bool = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<span>other text</span>");
-  });
-
-  test("simple named and empty slot", async () => {
-    class Child extends Component {
-      static template = xml`<span><t t-slot="default" /><t t-slot="myEmptySlot"/></span>`;
-
-      setup() {
-        expect(this.props.slots["myEmptySlot"]).toBeTruthy();
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`<Child>some text<t t-set-slot="myEmptySlot" /></Child>`;
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe("<span>some text</span>");
-  });
-
-  test("simple named and empty slot -- 2", async () => {
-    class Child extends Component {
-      static template = xml`<span><t t-slot="myEmptySlot">default empty</t></span>`;
-
-      setup() {
-        expect(this.props.slots["myEmptySlot"]).toBeTruthy();
-        expect(this.props.slots["myEmptySlot"].myProp).toBe("myProp text");
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`<Child><t t-set-slot="myEmptySlot" myProp="'myProp text'" /></Child>`;
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe("<span>default empty</span>");
-  });
-
  test("default slot with slot scope: shorthand syntax", async () => {
    let child: any;
    class Child extends Component {
@@ -49,7 +49,7 @@ export async function nextTick(): Promise<void> {

 interface Deferred extends Promise<any> {
  resolve(val?: any): void;
-  reject(val?: any): void;
+  reject(): void;
 }

 export function makeDeferred(): Deferred {
@@ -208,46 +208,6 @@ describe("Reactivity", () => {
    expect(n).toBe(1); // two operations but only one notification
  });

-  test("batched: modifying the reactive in the callback doesn't break reactivity", async () => {
-    let n = 0;
-    let obj = { a: 1 };
-    const state = createReactive(
-      obj,
-      batched(() => {
-        state.a; // subscribe to a
-        state.a = 2;
-        n++;
-      })
-    );
-    expect(n).toBe(0);
-    state.a = 2;
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(0); // key has not be read yet
-    state.a = state.a + 5; // key is read and then modified
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(1);
-    // the write a = 2 inside the batched callback triggered another notification, wait for it
-    await nextMicroTick();
-    expect(n).toBe(2);
-    // Should now be stable as we're writing the same value again
-    await nextMicroTick();
-    expect(n).toBe(2);
-
-    // Do it again to check it's not broken
-    state.a = state.a + 5; // key is read and then modified
-    expect(n).toBe(2);
-    await nextMicroTick();
-    expect(n).toBe(3);
-    // the write a = 2 inside the batched callback triggered another notification, wait for it
-    await nextMicroTick();
-    expect(n).toBe(4);
-    // Should now be stable as we're writing the same value again
-    await nextMicroTick();
-    expect(n).toBe(4);
-  });
-
  test("setting property to same value does not trigger callback", async () => {
    let n = 0;
    const state = createReactive({ a: 1 }, () => n++);
@@ -1135,13 +1095,6 @@ describe("Reactivity", () => {
    expect(n).toBe(1);
    expect(state.k).toEqual({ n: 2 });
  });
-
-  test("can access properties on reactive of frozen objects", async () => {
-    const obj = Object.freeze({ a: {} });
-    const state = createReactive(obj);
-    expect(() => state.a).not.toThrow();
-    expect(state.a).toBe(obj.a);
-  });
 });

 describe("Collections", () => {
@@ -50,24 +50,4 @@ describe("batched", () => {
    await nextMicroTick();
    expect(n).toBe(1);
  });
-
-  test("calling batched function from within the callback is not treated as part of the original batch", async () => {
-    let n = 0;
-    let fn = batched(() => {
-      n++;
-      if (n === 1) {
-        fn();
-      }
-    });
-
-    expect(n).toBe(0);
-    fn();
-    expect(n).toBe(0);
-    await nextMicroTick(); // First batch
-    expect(n).toBe(1);
-    await nextMicroTick(); // Second batch initiated from within the callback
-    expect(n).toBe(2);
-    await nextMicroTick();
-    expect(n).toBe(2);
-  });
 });