@odoo/owl 2.0.0-beta-4 → 2.0.0-beta-7

package/dist/owl.cjs.js

@@ -1916,7 +1916,7 @@ xml.nextId = 1;
 // Maps fibers to thrown errors
 const fibersInError = new WeakMap();
 const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error, isFirstRound = false) {
+function _handleError(node, error) {
     if (!node) {
         return false;
     }
@@ -1926,23 +1926,19 @@ function _handleError(node, error, isFirstRound = false) {
     }
     const errorHandlers = nodeErrorHandlers.get(node);
     if (errorHandlers) {
-        let stopped = false;
+        let handled = false;
         // execute in the opposite order
         for (let i = errorHandlers.length - 1; i >= 0; i--) {
             try {
                 errorHandlers[i](error);
-                stopped = true;
+                handled = true;
                 break;
             }
             catch (e) {
                 error = e;
             }
         }
-        if (stopped) {
-            if (isFirstRound && fiber && fiber.node.fiber) {
-                const root = fiber.root;
-                root.setCounter(root.counter - 1);
-            }
+        if (handled) {
             return true;
         }
     }
@@ -1960,7 +1956,7 @@ function handleError(params) {
         current = current.parent;
     } while (current);
     fibersInError.set(fiber.root, error);
-    const handled = _handleError(node, error, true);
+    const handled = _handleError(node, error);
     if (!handled) {
         console.warn(`[Owl] Unhandled error. Destroying the root component`);
         try {
@@ -1977,10 +1973,6 @@ function makeChildFiber(node, parent) {
     if (current) {
         cancelFibers(current.children);
         current.root = null;
-        if (current instanceof RootFiber && current.delayedRenders.length) {
-            let root = parent.root;
-            root.delayedRenders = root.delayedRenders.concat(current.delayedRenders);
-        }
     }
     return new Fiber(node, parent);
 }
@@ -1988,12 +1980,15 @@ function makeRootFiber(node) {
     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 (current === root) {
-            root.reachedChildren = new WeakSet();
-        }
         if (fibersInError.has(current)) {
             fibersInError.delete(current);
             fibersInError.delete(root);
@@ -2010,13 +2005,21 @@ function makeRootFiber(node) {
     }
     return fiber;
 }
+function throwOnRender() {
+    throw new Error("Attempted to render cancelled fiber");
+}
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
 function cancelFibers(fibers) {
     let result = 0;
     for (let fiber of fibers) {
-        fiber.node.fiber = null;
+        let node = fiber.node;
+        fiber.render = throwOnRender;
+        if (node.status === 0 /* NEW */) {
+            node.destroy();
+        }
+        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
@@ -2024,7 +2027,7 @@ function cancelFibers(fibers) {
             // 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.
-            fiber.node.forceNextRender = true;
+            node.forceNextRender = true;
         }
         else {
             result++;
@@ -2039,6 +2042,7 @@ class Fiber {
         this.children = [];
         this.appliedToDom = false;
         this.deep = false;
+        this.childrenMap = {};
         this.node = node;
         this.parent = parent;
         if (parent) {
@@ -2055,21 +2059,17 @@ class Fiber {
     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) {
-                    root.delayedRenders.push(this);
-                    return;
+                if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
+                    current = root.node;
                 }
                 else {
-                    if (!root.reachedChildren.has(prev)) {
-                        // is dead
-                        this.node.app.scheduler.shouldClear = true;
-                        return;
-                    }
-                    current = root.node;
+                    scheduler.delayedRenders.push(this);
+                    return;
                 }
             }
             prev = current;
@@ -2083,12 +2083,13 @@ class Fiber {
         const root = this.root;
         if (root) {
             try {
+                this.bdom = true;
                 this.bdom = node.renderFn();
-                root.setCounter(root.counter - 1);
             }
             catch (e) {
                 handleError({ node, error: e });
             }
+            root.setCounter(root.counter - 1);
         }
     }
 }
@@ -2103,8 +2104,6 @@ class RootFiber extends Fiber {
         // A fiber is typically locked when it is completing and the patch has not, or is being applied.
         // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
         this.locked = false;
-        this.delayedRenders = [];
-        this.reachedChildren = new WeakSet();
     }
     complete() {
         const node = this.node;
@@ -2157,14 +2156,6 @@ class RootFiber extends Fiber {
     setCounter(newValue) {
         this.counter = newValue;
         if (newValue === 0) {
-            if (this.delayedRenders.length) {
-                for (let f of this.delayedRenders) {
-                    if (f.root) {
-                        f.render();
-                    }
-                }
-                this.delayedRenders = [];
-            }
             this.node.app.scheduler.flush();
         }
     }
@@ -2179,6 +2170,7 @@ class MountFiber extends RootFiber {
         let current = this;
         try {
             const node = this.node;
+            node.children = this.childrenMap;
             node.app.constructor.validateTarget(this.target);
             if (node.bdom) {
                 // this is a complicated situation: if we mount a fiber with an existing
@@ -2384,7 +2376,7 @@ function useState(state) {
     const node = getCurrent();
     let render = batchedRenderFunctions.get(node);
     if (!render) {
-        render = batched(node.render.bind(node));
+        render = batched(node.render.bind(node, false));
         batchedRenderFunctions.set(node, render);
         // manual implementation of onWillDestroy to break cyclic dependency
         node.willDestroy.push(clearReactivesForCallback.bind(null, render));
@@ -2402,14 +2394,8 @@ function arePropsDifferent(props1, props2) {
 function component(name, props, key, ctx, parent) {
     let node = ctx.children[key];
     let isDynamic = typeof name !== "string";
-    if (node) {
-        if (node.status < 1 /* MOUNTED */) {
-            node.destroy();
-            node = undefined;
-        }
-        else if (node.status === 2 /* DESTROYED */) {
-            node = undefined;
-        }
+    if (node && node.status === 2 /* DESTROYED */) {
+        node = undefined;
     }
     if (isDynamic && node && node.component.constructor !== name) {
         node = undefined;
@@ -2440,15 +2426,15 @@ function component(name, props, key, ctx, parent) {
                 throw new Error(`Cannot find the definition of component "${name}"`);
             }
         }
-        node = new ComponentNode(C, props, ctx.app, ctx);
+        node = new ComponentNode(C, props, ctx.app, ctx, key);
         ctx.children[key] = node;
         node.initiateRender(new Fiber(node, parentFiber));
     }
-    parentFiber.root.reachedChildren.add(node);
+    parentFiber.childrenMap[key] = node;
     return node;
 }
 class ComponentNode {
-    constructor(C, props, app, parent) {
+    constructor(C, props, app, parent, parentKey) {
         this.fiber = null;
         this.bdom = null;
         this.status = 0 /* NEW */;
@@ -2464,7 +2450,8 @@ class ComponentNode {
         this.willDestroy = [];
         currentNode = this;
         this.app = app;
-        this.parent = parent || null;
+        this.parent = parent;
+        this.parentKey = parentKey;
         this.level = parent ? parent.level + 1 : 0;
         applyDefaultProps(props, C);
         const env = (parent && parent.childEnv) || app.env;
@@ -2497,9 +2484,9 @@ class ComponentNode {
             fiber.render();
         }
     }
-    async render(deep = false) {
+    async render(deep) {
         let current = this.fiber;
-        if (current && current.root.locked) {
+        if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
             // situation may have changed after the microtask tick
             current = this.fiber;
@@ -2558,8 +2545,15 @@ class ComponentNode {
         for (let child of Object.values(this.children)) {
             child._destroy();
         }
-        for (let cb of this.willDestroy) {
-            cb.call(component);
+        if (this.willDestroy.length) {
+            try {
+                for (let cb of this.willDestroy) {
+                    cb.call(component);
+                }
+            }
+            catch (e) {
+                handleError({ error: e, node: this });
+            }
         }
         this.status = 2 /* DESTROYED */;
     }
@@ -2625,6 +2619,7 @@ class ComponentNode {
         bdom.mount(parent, anchor);
         this.status = 1 /* MOUNTED */;
         this.fiber.appliedToDom = true;
+        this.children = this.fiber.childrenMap;
         this.fiber = null;
     }
     moveBefore(other, afterNode) {
@@ -2640,10 +2635,8 @@ class ComponentNode {
     }
     _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;
     }
@@ -2653,19 +2646,6 @@ class ComponentNode {
     remove() {
         this.bdom.remove();
     }
-    cleanOutdatedChildren() {
-        const children = this.children;
-        for (const key in children) {
-            const node = children[key];
-            const status = node.status;
-            if (status !== 1 /* MOUNTED */) {
-                delete children[key];
-                if (status !== 2 /* DESTROYED */) {
-                    node.destroy();
-                }
-            }
-        }
-    }
     // ---------------------------------------------------------------------------
     // Some debug helpers
     // ---------------------------------------------------------------------------
@@ -2685,7 +2665,7 @@ class Scheduler {
     constructor() {
         this.tasks = new Set();
         this.frame = 0;
-        this.shouldClear = false;
+        this.delayedRenders = [];
         this.requestAnimationFrame = Scheduler.requestAnimationFrame;
     }
     addFiber(fiber) {
@@ -2696,16 +2676,22 @@ 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 !== 2 /* DESTROYED */ && f.node.fiber === f) {
+                    f.render();
+                }
+            }
+        }
         if (this.frame === 0) {
             this.frame = this.requestAnimationFrame(() => {
                 this.frame = 0;
                 this.tasks.forEach((fiber) => this.processFiber(fiber));
-                if (this.shouldClear) {
-                    this.shouldClear = false;
-                    for (let task of this.tasks) {
-                        if (task.node.status === 2 /* DESTROYED */) {
-                            this.tasks.delete(task);
-                        }
+                for (let task of this.tasks) {
+                    if (task.node.status === 2 /* DESTROYED */) {
+                        this.tasks.delete(task);
                     }
                 }
             });
@@ -4019,8 +4005,11 @@ class CodeGenerator {
             let slotStr = [];
             for (let slotName in ast.slots) {
                 const slotAst = ast.slots[slotName];
-                const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-                const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+                const params = [];
+                if (slotAst.content) {
+                    const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+                    params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+                }
                 const scope = ast.slots[slotName].scope;
                 if (scope) {
                     params.push(`__scope: "${scope}"`);
@@ -4122,7 +4111,7 @@ 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})`;
@@ -4663,28 +4652,26 @@ function parseComponent(node, ctx) {
             slotNode.removeAttribute("t-set-slot");
             slotNode.remove();
             const slotAst = parseNode(slotNode, ctx);
-            if (slotAst) {
-                let on = null;
-                let attrs = null;
-                let scope = 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;
-                    }
+            let on = null;
+            let attrs = null;
+            let scope = 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
         const defaultContent = parseChildNodes(clone, ctx);
@@ -5030,7 +5017,7 @@ class Component {
     }
     setup() { }
     render(deep = false) {
-        this.__owl__.render(deep);
+        this.__owl__.render(deep === true);
     }
 }
 Component.template = "";
@@ -5327,13 +5314,19 @@ class TemplateSet {
         }
         this.helpers = makeHelpers(this.getTemplate.bind(this));
     }
-    addTemplate(name, template, options = {}) {
-        if (name in this.rawTemplates && !options.allowDuplicate) {
-            throw new Error(`Template ${name} already defined`);
+    addTemplate(name, template) {
+        if (name in this.rawTemplates) {
+            const rawTemplate = this.rawTemplates[name];
+            const currentAsString = typeof rawTemplate === "string" ? rawTemplate : rawTemplate.outerHTML;
+            const newAsString = typeof template === "string" ? template : template.outerHTML;
+            if (currentAsString === newAsString) {
+                return;
+            }
+            throw new Error(`Template ${name} already defined with different content`);
         }
         this.rawTemplates[name] = template;
     }
-    addTemplates(xml, options = {}) {
+    addTemplates(xml) {
         if (!xml) {
             // empty string
             return;
@@ -5341,7 +5334,7 @@ class TemplateSet {
         xml = xml instanceof Document ? xml : parseXML(xml);
         for (const template of xml.querySelectorAll("[t-name]")) {
             const name = template.getAttribute("t-name");
-            this.addTemplate(name, template, options);
+            this.addTemplate(name, template);
         }
     }
     getTemplate(name) {
@@ -5412,7 +5405,7 @@ class App extends TemplateSet {
         return prom;
     }
     makeNode(Component, props) {
-        return new ComponentNode(Component, props, this);
+        return new ComponentNode(Component, props, this, null, null);
     }
     mountNode(node, target, options) {
         const promise = new Promise((resolve, reject) => {
@@ -5618,7 +5611,7 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.version = '2.0.0-beta-4';
-__info__.date = '2022-03-29T13:50:04.545Z';
-__info__.hash = '55dbc01';
+__info__.version = '2.0.0-beta-7';
+__info__.date = '2022-04-27T09:08:40.703Z';
+__info__.hash = '0cd66c8';
 __info__.url = 'https://github.com/odoo/owl';