wip: try to create new root fiber instead of reusing it

This reverts commit 989b0d6709.

package.json

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

src/app/app.ts

@@ -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) {

src/compiler/code_generator.ts

@@ -1234,7 +1234,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})`;
       }

src/component/component_node.ts

@@ -79,8 +79,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 +114,12 @@ 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));
+
+    node.initiateRender(makeChildFiber(node, parentFiber));
   }
-  parentFiber.childrenMap[key] = node;
+  parentFiber.root!.reachedChildren.add(node);
   return node;
 }
 
@@ -131,7 +137,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 +153,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;
@@ -195,7 +193,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
 
   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 +215,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) {
@@ -257,14 +254,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;
   }
@@ -335,7 +326,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;
   }
 
@@ -344,6 +334,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   }
 
   patch() {
+    debugger
     if (this.fiber && this.fiber.parent) {
       // we only patch here renderings coming from above. renderings initiated
       // by the component will be patched independently in the appropriate
@@ -353,8 +344,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 +360,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
   // ---------------------------------------------------------------------------

src/component/error_handling.ts

@@ -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,23 @@ 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) {
+        const root = fiber.root!;
+        root.setCounter(root.counter - 1);
+      }
       return true;
     }
   }
@@ -51,7 +55,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 {

src/component/fibers.ts

@@ -1,6 +1,6 @@
 import { BDom, mount } from "../blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, handleError } from "./error_handling";
+import { handleError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -9,30 +9,72 @@ export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
     cancelFibers(current.children);
     current.root = null;
   }
-  return new Fiber(node, parent);
+  let fiber = new Fiber(node);
+  fiber.deep = parent.deep;
+  const root = parent.root!;
+  fiber.root = root;
+  parent.children.push(fiber);
+  fiber.parent = parent;
+  root.setCounter(root.counter + 1);
+  return fiber;
 }
 
 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;
-    current.children = [];
-    current.childrenMap = {};
-    current.bdom = null;
-    if (fibersInError.has(current)) {
-      fibersInError.delete(current);
-      fibersInError.delete(root);
-      current.appliedToDom = false;
+    debugger;
+    let parent = current.parent;
+    let n = cancelFibers(current.children);
+    current.root = null;
+    // current.bdom = null;
+    if (parent) {
+      let fiber = new Fiber(node);
+      fiber.deep = parent.deep;
+      const root = parent.root!;
+      fiber.root = root;
+      let index = parent.children.indexOf(current);
+      parent.children[index] = fiber;
+      // parent.children.push(fiber);
+      fiber.parent = parent;
+      // node.fiber = 
+      root.setCounter(root.counter + 1 - n);
+      if (node.willPatch.length) {
+        let index = root.willPatch.indexOf(current);
+        if (index >= 0) {
+          root.willPatch[index] = fiber;
+        }
+      }
+      if (node.patched.length) {
+        let index = root.patched.indexOf(current);
+        if (index >= 0) {
+          root.patched[index] = fiber;
+        }
+      }
+    
+      return fiber;
     }
-    return current;
+    // let parent = current.parent;
+    // let fiber = new Fiber(node);
+    // return fiber;
+
+    // cancelFibers(current.children);
+    // current.root = null;
+    // let root = current.root!;
+    // root.setCounter(root.counter + 1 - cancelFibers(current.children));
+    // current.children = [];
+    // current.bdom = null;
+    // if (current === root) {
+    //   root.reachedChildren = new WeakSet();
+    // }
+    // if (fibersInError.has(current)) {
+    //   fibersInError.delete(current);
+    //   fibersInError.delete(root);
+    //   current.appliedToDom = false;
+    // }
+    // return current;
   }
-  const fiber = new RootFiber(node, null);
+  const fiber = new RootFiber(node);
+  fiber.root = fiber;
   if (node.willPatch.length) {
     fiber.willPatch.push(fiber);
   }
@@ -48,11 +90,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 +98,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++;
     }
@@ -69,28 +107,20 @@ function cancelFibers(fibers: Fiber[]): number {
   return result;
 }
 
+(window as any).fibers = [];
+
 export class Fiber {
   node: ComponentNode;
   bdom: BDom | null = null;
-  root: RootFiber | null; // A Fiber that has been replaced by another has no root
-  parent: Fiber | null;
+  root: RootFiber | null = null; // A Fiber that has been replaced by another has no root
+  parent: Fiber | null = null;
   children: Fiber[] = [];
   appliedToDom = false;
   deep: boolean = false;
-  childrenMap: ComponentNode["children"] = {};
 
-  constructor(node: ComponentNode, parent: Fiber | null) {
+  constructor(node: ComponentNode) {
     this.node = node;
-    this.parent = parent;
-    if (parent) {
-      this.deep = parent.deep;
-      const root = parent.root!;
-      root.setCounter(root.counter + 1);
-      this.root = root;
-      parent.children.push(this);
-    } else {
-      this.root = this as any;
-    }
+    (window as any).fibers.push(this);
   }
 
   render() {
@@ -101,11 +131,16 @@ export class Fiber {
     while (current) {
       if (current.fiber) {
         let root = current.fiber.root!;
-        if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
-          current = root.node;
-        } else {
+        if (root.counter) {
           scheduler.delayedRenders.push(this);
           return;
+        } else {
+          if (!root.reachedChildren.has(prev)) {
+            // is dead. but we keep the render around just in case
+            scheduler.delayedRenders.push(this);
+            return;
+          }
+          current = root.node;
         }
       }
       prev = current;
@@ -121,12 +156,11 @@ export class Fiber {
     const root = this.root;
     if (root) {
       try {
-        (this.bdom as any) = true;
         this.bdom = node.renderFn();
+        root.setCounter(root.counter - 1);
       } catch (e) {
         handleError({ node, error: e });
       }
-      root.setCounter(root.counter - 1);
     }
   }
 }
@@ -142,6 +176,8 @@ export class RootFiber extends Fiber {
   // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
   locked: boolean = false;
 
+  reachedChildren: WeakSet<ComponentNode> = new WeakSet();
+
   complete() {
     const node = this.node;
     this.locked = true;
@@ -194,6 +230,7 @@ export class RootFiber extends Fiber {
   }
 
   setCounter(newValue: number) {
+    debugger;
     this.counter = newValue;
     if (newValue === 0) {
       this.node.app.scheduler.flush();
@@ -212,15 +249,15 @@ export class MountFiber extends RootFiber {
   position: Position;
 
   constructor(node: ComponentNode, target: HTMLElement, options: MountOptions = {}) {
-    super(node, null);
+    super(node);
     this.target = target;
+    this.root = this;
     this.position = options.position || "last-child";
   }
   complete() {
     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

src/component/scheduler.ts

@@ -32,7 +32,7 @@ export class Scheduler {
       let renders = this.delayedRenders;
       this.delayedRenders = [];
       for (let f of renders) {
-        if (f.root && f.node.status !== STATUS.DESTROYED) {
+        if (f.root) {
           f.render();
         }
       }

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

@@ -1164,69 +1164,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 }"
 `;
 
-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
 ) {
@@ -1352,46 +1289,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
 }"
 `;
 
-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 +1466,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
 ) {

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

@@ -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
 ) {

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

@@ -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,45 +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
 ) {
@@ -1793,7 +1754,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]);
   }
 }"

tests/components/concurrency.test.ts

@@ -4,7 +4,6 @@ import {
   mount,
   onMounted,
   onRendered,
-  onWillDestroy,
   onWillStart,
   onWillUnmount,
   onWillUpdateProps,
@@ -115,8 +114,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 +172,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 +244,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 +696,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",
@@ -876,6 +870,7 @@ test("concurrent renderings scenario 2", async () => {
     "ComponentB:rendered",
   ]).toBeLogged();
 
+  debugger; 
   stateB.fromB = "c";
   await nextTick();
   expect(fixture.innerHTML).toBe("<div>1<p><span>1b</span></p></div>");
@@ -887,7 +882,7 @@ test("concurrent renderings scenario 2", async () => {
 
   defs[1].resolve(); // resolve rendering initiated in B
   await nextTick();
-  expect(fixture.innerHTML).toBe("<div>2<p><span>2c</span></p></div>");
+  debugger
   expect([
     "ComponentC:willRender",
     "ComponentC:rendered",
@@ -898,6 +893,7 @@ test("concurrent renderings scenario 2", async () => {
     "ComponentB:patched",
     "ComponentA:patched",
   ]).toBeLogged();
+  expect(fixture.innerHTML).toBe("<div>2<p><span>2c</span></p></div>");
 
   defs[0].resolve(); // resolve rendering initiated in A
   await nextTick();
@@ -1731,7 +1727,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 +1737,7 @@ test("concurrent renderings scenario 10", async () => {
   expect(rendered).toBe(1);
   expect([
     "ComponentB:willRender",
+    "ComponentC:willDestroy",
     "ComponentC:setup",
     "ComponentC:willStart",
     "ComponentB:rendered",
@@ -2281,11 +2277,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",
@@ -2996,13 +2992,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 +3050,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 +3109,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();
 });
@@ -3696,294 +3692,6 @@ test("another scenario with delayed rendering", async () => {
   ]).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 };
 

tests/components/error_handling.test.ts

@@ -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");
-  });
 });

tests/components/slots.test.ts

@@ -74,35 +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>`;