@odoo/owl 2.0.0 → 2.0.2

package/dist/owl.es.js

@@ -38,8 +38,11 @@ class VToggler {
         this.parentEl = parent;
         this.child.mount(parent, afterNode);
     }
-    moveBefore(other, afterNode) {
-        this.child.moveBefore(other ? other.child : null, afterNode);
+    moveBeforeDOMNode(node, parent) {
+        this.child.moveBeforeDOMNode(node, parent);
+    }
+    moveBeforeVNode(other, afterNode) {
+        this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
     }
     patch(other, withBeforeRemove) {
         if (this === other) {
@@ -415,7 +418,22 @@ class VMulti {
         this.anchors = anchors;
         this.parentEl = parent;
     }
-    moveBefore(other, afterNode) {
+    moveBeforeDOMNode(node, parent = this.parentEl) {
+        this.parentEl = parent;
+        const children = this.children;
+        const anchors = this.anchors;
+        for (let i = 0, l = children.length; i < l; i++) {
+            let child = children[i];
+            if (child) {
+                child.moveBeforeDOMNode(node, parent);
+            }
+            else {
+                const anchor = anchors[i];
+                nodeInsertBefore$3.call(parent, anchor, node);
+            }
+        }
+    }
+    moveBeforeVNode(other, afterNode) {
         if (other) {
             const next = other.children[0];
             afterNode = (next ? next.firstNode() : other.anchors[0]) || null;
@@ -426,7 +444,7 @@ class VMulti {
         for (let i = 0, l = children.length; i < l; i++) {
             let child = children[i];
             if (child) {
-                child.moveBefore(null, afterNode);
+                child.moveBeforeVNode(null, afterNode);
             }
             else {
                 const anchor = anchors[i];
@@ -524,9 +542,12 @@ class VSimpleNode {
         nodeInsertBefore$2.call(parent, node, afterNode);
         this.el = node;
     }
-    moveBefore(other, afterNode) {
-        const target = other ? other.el : afterNode;
-        nodeInsertBefore$2.call(this.parentEl, this.el, target);
+    moveBeforeDOMNode(node, parent = this.parentEl) {
+        this.parentEl = parent;
+        nodeInsertBefore$2.call(parent, this.el, node);
+    }
+    moveBeforeVNode(other, afterNode) {
+        nodeInsertBefore$2.call(this.parentEl, this.el, other ? other.el : afterNode);
     }
     beforeRemove() { }
     remove() {
@@ -968,9 +989,12 @@ function createBlockClass(template, ctx) {
         firstNode() {
             return this.el;
         }
-        moveBefore(other, afterNode) {
-            const target = other ? other.el : afterNode;
-            nodeInsertBefore.call(this.parentEl, this.el, target);
+        moveBeforeDOMNode(node, parent = this.parentEl) {
+            this.parentEl = parent;
+            nodeInsertBefore.call(parent, this.el, node);
+        }
+        moveBeforeVNode(other, afterNode) {
+            nodeInsertBefore.call(this.parentEl, this.el, other ? other.el : afterNode);
         }
         toString() {
             const div = document.createElement("div");
@@ -1107,14 +1131,22 @@ class VList {
         }
         this.parentEl = parent;
     }
-    moveBefore(other, afterNode) {
+    moveBeforeDOMNode(node, parent = this.parentEl) {
+        this.parentEl = parent;
+        const children = this.children;
+        for (let i = 0, l = children.length; i < l; i++) {
+            children[i].moveBeforeDOMNode(node, parent);
+        }
+        parent.insertBefore(this.anchor, node);
+    }
+    moveBeforeVNode(other, afterNode) {
         if (other) {
             const next = other.children[0];
             afterNode = (next ? next.firstNode() : other.anchor) || null;
         }
         const children = this.children;
         for (let i = 0, l = children.length; i < l; i++) {
-            children[i].moveBefore(null, afterNode);
+            children[i].moveBeforeVNode(null, afterNode);
         }
         this.parentEl.insertBefore(this.anchor, afterNode);
     }
@@ -1129,7 +1161,7 @@ class VList {
         }
         this.children = ch2;
         const proto = ch2[0] || ch1[0];
-        const { mount: cMount, patch: cPatch, remove: cRemove, beforeRemove, moveBefore: cMoveBefore, firstNode: cFirstNode, } = proto;
+        const { mount: cMount, patch: cPatch, remove: cRemove, beforeRemove, moveBeforeVNode: cMoveBefore, firstNode: cFirstNode, } = proto;
         const _anchor = this.anchor;
         const isOnlyChild = this.isOnlyChild;
         const parent = this.parentEl;
@@ -1311,13 +1343,16 @@ class VHtml {
             nodeInsertBefore.call(parent, textNode, afterNode);
         }
     }
-    moveBefore(other, afterNode) {
-        const target = other ? other.content[0] : afterNode;
-        const parent = this.parentEl;
+    moveBeforeDOMNode(node, parent = this.parentEl) {
+        this.parentEl = parent;
         for (let elem of this.content) {
-            nodeInsertBefore.call(parent, elem, target);
+            nodeInsertBefore.call(parent, elem, node);
         }
     }
+    moveBeforeVNode(other, afterNode) {
+        const target = other ? other.content[0] : afterNode;
+        this.moveBeforeDOMNode(target);
+    }
     patch(other) {
         if (this === other) {
             return;
@@ -1395,7 +1430,7 @@ function createCatcher(eventsSpec) {
                     const target = ev.target;
                     let currentNode = self.child.firstNode();
                     const afterNode = self.afterNode;
-                    while (currentNode !== afterNode) {
+                    while (currentNode && currentNode !== afterNode) {
                         if (currentNode.contains(target)) {
                             return origFn.call(this, ev);
                         }
@@ -1404,8 +1439,17 @@ function createCatcher(eventsSpec) {
                 };
             }
         }
-        moveBefore(other, afterNode) {
-            this.child.moveBefore(other ? other.child : null, afterNode);
+        moveBeforeDOMNode(node, parent = this.parentEl) {
+            this.parentEl = parent;
+            this.child.moveBeforeDOMNode(node, parent);
+            parent.insertBefore(this.afterNode, node);
+        }
+        moveBeforeVNode(other, afterNode) {
+            if (other) {
+                // check this with @ged-odoo for use in foreach
+                afterNode = other.firstNode() || afterNode;
+            }
+            this.child.moveBeforeVNode(other ? other.child : null, afterNode);
             this.parentEl.insertBefore(this.afterNode, afterNode);
         }
         patch(other, withBeforeRemove) {
@@ -1696,10 +1740,6 @@ class MountFiber extends RootFiber {
     }
 }
 
-// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
-const TARGET = Symbol("Target");
-// Escape hatch to prevent reactivity system to turn something into a reactive
-const SKIP = Symbol("Skip");
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
 const objectToString = Object.prototype.toString;
@@ -1740,6 +1780,7 @@ function canBeMadeReactive(value) {
 function possiblyReactive(val, cb) {
     return canBeMadeReactive(val) ? reactive(val, cb) : val;
 }
+const skipped = new WeakSet();
 /**
  * Mark an object or array so that it is ignored by the reactivity system
  *
@@ -1747,7 +1788,7 @@ function possiblyReactive(val, cb) {
  * @returns the object itself
  */
 function markRaw(value) {
-    value[SKIP] = true;
+    skipped.add(value);
     return value;
 }
 /**
@@ -1757,7 +1798,7 @@ function markRaw(value) {
  * @returns the underlying value
  */
 function toRaw(value) {
-    return value[TARGET] || value;
+    return targets.has(value) ? targets.get(value) : value;
 }
 const targetToKeysToCallbacks = new WeakMap();
 /**
@@ -1839,6 +1880,8 @@ function getSubscriptions(callback) {
         };
     });
 }
+// Maps reactive objects to the underlying target
+const targets = new WeakMap();
 const reactiveCache = new WeakMap();
 /**
  * Creates a reactive proxy for an object. Reading data on the reactive object
@@ -1854,7 +1897,7 @@ const reactiveCache = new WeakMap();
  * Subscriptions:
  * + Reading a property on an object will subscribe you to changes in the value
  *    of that property.
- * + Accessing an object keys (eg with Object.keys or with `for..in`) will
+ * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
  *    subscribe you to the creation/deletion of keys. Checking the presence of a
  *    key on the object with 'in' has the same effect.
  * - getOwnPropertyDescriptor does not currently subscribe you to the property.
@@ -1871,12 +1914,12 @@ function reactive(target, callback = () => { }) {
     if (!canBeMadeReactive(target)) {
         throw new OwlError(`Cannot make the given value reactive`);
     }
-    if (SKIP in target) {
+    if (skipped.has(target)) {
         return target;
     }
-    const originalTarget = target[TARGET];
-    if (originalTarget) {
-        return reactive(originalTarget, callback);
+    if (targets.has(target)) {
+        // target is reactive, create a reactive on the underlying object instead
+        return reactive(targets.get(target), callback);
     }
     if (!reactiveCache.has(target)) {
         reactiveCache.set(target, new WeakMap());
@@ -1889,6 +1932,7 @@ function reactive(target, callback = () => { }) {
             : basicProxyHandler(callback);
         const proxy = new Proxy(target, handler);
         reactivesForTarget.set(callback, proxy);
+        targets.set(proxy, target);
     }
     return reactivesForTarget.get(callback);
 }
@@ -1900,29 +1944,27 @@ function reactive(target, callback = () => { }) {
  */
 function basicProxyHandler(callback) {
     return {
-        get(target, key, proxy) {
-            if (key === TARGET) {
-                return target;
-            }
+        get(target, key, receiver) {
             // 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);
+                return Reflect.get(target, key, receiver);
             }
             observeTargetKey(target, key, callback);
-            return possiblyReactive(Reflect.get(target, key, proxy), callback);
+            return possiblyReactive(Reflect.get(target, key, receiver), callback);
         },
-        set(target, key, value, proxy) {
-            const isNewKey = !objectHasOwnProperty.call(target, key);
-            const originalValue = Reflect.get(target, key, proxy);
-            const ret = Reflect.set(target, key, value, proxy);
-            if (isNewKey) {
+        set(target, key, value, receiver) {
+            const hadKey = objectHasOwnProperty.call(target, key);
+            const originalValue = Reflect.get(target, key, receiver);
+            const ret = Reflect.set(target, key, value, receiver);
+            if (!hadKey && objectHasOwnProperty.call(target, key)) {
                 notifyReactives(target, KEYCHANGES);
             }
             // While Array length may trigger the set trap, it's not actually set by this
             // method but is updated behind the scenes, and the trap is not called with the
             // new value. We disable the "same-value-optimization" for it because of that.
-            if (originalValue !== value || (Array.isArray(target) && key === "length")) {
+            if (originalValue !== Reflect.get(target, key, receiver) ||
+                (key === "length" && Array.isArray(target))) {
                 notifyReactives(target, key);
             }
             return ret;
@@ -2098,10 +2140,8 @@ function collectionsProxyHandler(target, callback, targetRawType) {
     // property is read.
     const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
     return Object.assign(basicProxyHandler(callback), {
+        // FIXME: probably broken when part of prototype chain since we ignore the receiver
         get(target, key) {
-            if (key === TARGET) {
-                return target;
-            }
             if (objectHasOwnProperty.call(specialHandlers, key)) {
                 return specialHandlers[key];
             }
@@ -2261,7 +2301,7 @@ class ComponentNode {
         this.childEnv = env;
         for (const key in props) {
             const prop = props[key];
-            if (prop && typeof prop === "object" && prop[TARGET]) {
+            if (prop && typeof prop === "object" && targets.has(prop)) {
                 props[key] = useState(prop);
             }
         }
@@ -2379,7 +2419,7 @@ class ComponentNode {
         currentNode = this;
         for (const key in props) {
             const prop = props[key];
-            if (prop && typeof prop === "object" && prop[TARGET]) {
+            if (prop && typeof prop === "object" && targets.has(prop)) {
                 props[key] = useState(prop);
             }
         }
@@ -2441,8 +2481,11 @@ class ComponentNode {
         this.children = this.fiber.childrenMap;
         this.fiber = null;
     }
-    moveBefore(other, afterNode) {
-        this.bdom.moveBefore(other ? other.bdom : null, afterNode);
+    moveBeforeDOMNode(node, parent) {
+        this.bdom.moveBeforeDOMNode(node, parent);
+    }
+    moveBeforeVNode(other, afterNode) {
+        this.bdom.moveBeforeVNode(other ? other.bdom : null, afterNode);
     }
     patch() {
         if (this.fiber && this.fiber.parent) {
@@ -2659,7 +2702,7 @@ class Portal extends Component {
             if (!portal.target) {
                 const target = document.querySelector(this.props.target);
                 if (target) {
-                    portal.content.moveBefore(target, null);
+                    portal.content.moveBeforeDOMNode(target.firstChild, target);
                 }
                 else {
                     throw new OwlError("invalid portal target");
@@ -2834,7 +2877,7 @@ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
     if (__scope) {
         slotScope[__scope] = extra;
     }
-    const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+    const slotBDom = __render ? __render(slotScope, parent, key) : null;
     if (defaultContent) {
         let child1 = undefined;
         let child2 = undefined;
@@ -2842,14 +2885,13 @@ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
             child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
         }
         else {
-            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+            child2 = defaultContent(ctx, parent, key);
         }
         return multi([child1, child2]);
     }
     return slotBDom || text("");
 }
-function capture(ctx) {
-    const component = ctx.__owl__.component;
+function capture(ctx, component) {
     const result = ObjectCreate(component);
     for (let k in ctx) {
         result[k] = ctx[k];
@@ -2905,7 +2947,7 @@ function shallowEqual(l1, l2) {
 class LazyValue {
     constructor(fn, ctx, component, node, key) {
         this.fn = fn;
-        this.ctx = capture(ctx);
+        this.ctx = capture(ctx, component);
         this.component = component;
         this.node = node;
         this.key = key;
@@ -2959,8 +3001,7 @@ function safeOutput(value, defaultValue) {
 let boundFunctions = new WeakMap();
 const WeakMapGet = WeakMap.prototype.get;
 const WeakMapSet = WeakMap.prototype.set;
-function bind(ctx, fn) {
-    let component = ctx.__owl__.component;
+function bind(component, fn) {
     let boundFnMap = WeakMapGet.call(boundFunctions, component);
     if (!boundFnMap) {
         boundFnMap = new WeakMap();
@@ -3574,7 +3615,7 @@ class CodeTarget {
         let result = [];
         result.push(`function ${this.name}(ctx, node, key = "") {`);
         if (this.hasRef) {
-            result.push(`  const refs = ctx.__owl__.refs;`);
+            result.push(`  const refs = this.__owl__.refs;`);
             for (let name in this.refInfo) {
                 const [id, expr] = this.refInfo[name];
                 result.push(`  const ${id} = ${expr};`);
@@ -3959,39 +4000,6 @@ class CodeGenerator {
                 attrs[`block-attribute-${selectedId}`] = "selected";
             }
         }
-        // event handlers
-        for (let ev in ast.on) {
-            const name = this.generateHandlerCode(ev, ast.on[ev]);
-            const idx = block.insertData(name, "hdlr");
-            attrs[`block-handler-${idx}`] = ev;
-        }
-        // t-ref
-        if (ast.ref) {
-            this.target.hasRef = true;
-            const isDynamic = INTERP_REGEXP.test(ast.ref);
-            if (isDynamic) {
-                const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-                const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
-                attrs["block-ref"] = String(idx);
-            }
-            else {
-                let name = ast.ref;
-                if (name in this.target.refInfo) {
-                    // ref has already been defined
-                    this.helpers.add("multiRefSetter");
-                    const info = this.target.refInfo[name];
-                    const index = block.data.push(info[0]) - 1;
-                    attrs["block-ref"] = String(index);
-                    info[1] = `multiRefSetter(refs, \`${name}\`)`;
-                }
-                else {
-                    let id = generateId("ref");
-                    this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
-                    const index = block.data.push(id) - 1;
-                    attrs["block-ref"] = String(index);
-                }
-            }
-        }
         // t-model
         let tModelSelectedExpr;
         if (ast.model) {
@@ -4025,6 +4033,39 @@ class CodeGenerator {
             idx = block.insertData(handler, "hdlr");
             attrs[`block-handler-${idx}`] = eventType;
         }
+        // event handlers
+        for (let ev in ast.on) {
+            const name = this.generateHandlerCode(ev, ast.on[ev]);
+            const idx = block.insertData(name, "hdlr");
+            attrs[`block-handler-${idx}`] = ev;
+        }
+        // t-ref
+        if (ast.ref) {
+            this.target.hasRef = true;
+            const isDynamic = INTERP_REGEXP.test(ast.ref);
+            if (isDynamic) {
+                const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+                const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
+                attrs["block-ref"] = String(idx);
+            }
+            else {
+                let name = ast.ref;
+                if (name in this.target.refInfo) {
+                    // ref has already been defined
+                    this.helpers.add("multiRefSetter");
+                    const info = this.target.refInfo[name];
+                    const index = block.data.push(info[0]) - 1;
+                    attrs["block-ref"] = String(index);
+                    info[1] = `multiRefSetter(refs, \`${name}\`)`;
+                }
+                else {
+                    let id = generateId("ref");
+                    this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
+                    const index = block.data.push(id) - 1;
+                    attrs["block-ref"] = String(index);
+                }
+            }
+        }
         const dom = xmlDoc.createElement(ast.tag);
         for (const [attr, val] of Object.entries(attrs)) {
             if (!(attr === "class" && val === "")) {
@@ -4215,8 +4256,8 @@ class CodeGenerator {
         if (this.dev) {
             // Throw error on duplicate keys in dev mode
             this.helpers.add("OwlError");
-            this.addLine(`if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
-            this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
+            this.addLine(`if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
+            this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
         }
         let id;
         if (ast.memo) {
@@ -4433,7 +4474,7 @@ class CodeGenerator {
             if (suffix === "bind") {
                 this.helpers.add("bind");
                 name = _name;
-                value = `bind(ctx, ${value || undefined})`;
+                value = `bind(this, ${value || undefined})`;
             }
             else {
                 throw new OwlError("Invalid prop suffix");
@@ -4464,7 +4505,7 @@ class CodeGenerator {
             if (this.target.loopLevel || !this.hasSafeContext) {
                 ctxStr = generateId("ctx");
                 this.helpers.add("capture");
-                this.define(ctxStr, `capture(ctx)`);
+                this.define(ctxStr, `capture(ctx, this)`);
             }
             let slotStr = [];
             for (let slotName in ast.slots) {
@@ -4472,7 +4513,7 @@ class CodeGenerator {
                 const params = [];
                 if (slotAst.content) {
                     const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-                    params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+                    params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
                 }
                 const scope = ast.slots[slotName].scope;
                 if (scope) {
@@ -4583,7 +4624,7 @@ class CodeGenerator {
         const scope = this.getPropString(props, dynProps);
         if (ast.defaultContent) {
             const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-            blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+            blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
         }
         else {
             if (dynamic) {
@@ -4623,7 +4664,7 @@ class CodeGenerator {
         if (this.target.loopLevel || !this.hasSafeContext) {
             ctxStr = generateId("ctx");
             this.helpers.add("capture");
-            this.define(ctxStr, `capture(ctx)`);
+            this.define(ctxStr, `capture(ctx, this)`);
         }
         let id = generateId("comp");
         this.staticDefs.push({
@@ -4631,7 +4672,7 @@ class CodeGenerator {
             expr: `app.createComponent(null, false, true, false, false)`,
         });
         const target = compileExpr(ast.target);
-        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
@@ -5164,8 +5205,9 @@ function parseComponent(node, ctx) {
         }
         // default slot
         const defaultContent = parseChildNodes(clone, ctx);
-        if (defaultContent) {
-            slots = slots || {};
+        slots = slots || {};
+        // t-set-slot="default" has priority over content
+        if (defaultContent && !slots.default) {
             slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
         }
     }
@@ -5605,7 +5647,11 @@ class App extends TemplateSet {
             else {
                 // new component
                 if (isStatic) {
-                    C = parent.constructor.components[name];
+                    const components = parent.constructor.components;
+                    if (!components) {
+                        throw new OwlError(`Cannot find the definition of component "${name}", missing static components key in parent`);
+                    }
+                    C = components[name];
                     if (!C) {
                         throw new OwlError(`Cannot find the definition of component "${name}"`);
                     }
@@ -5772,7 +5818,7 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, whenReady, xml };
 
 
-__info__.version = '2.0.0';
-__info__.date = '2022-10-07T13:28:10.216Z';
-__info__.hash = 'a1f2282';
+__info__.version = '2.0.2';
+__info__.date = '2022-11-29T14:11:11.260Z';
+__info__.hash = 'ef8baa2';
 __info__.url = 'https://github.com/odoo/owl';