@odoo/owl 2.0.1 → 2.0.3

package/dist/owl.es.js

@@ -1740,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;
@@ -1760,7 +1756,7 @@ const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
  * @returns the raw type of the object
  */
 function rawType(obj) {
-    return objectToString.call(obj).slice(8, -1);
+    return objectToString.call(toRaw(obj)).slice(8, -1);
 }
 /**
  * Checks whether a given value can be made into a reactive object.
@@ -1784,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
  *
@@ -1791,7 +1788,7 @@ function possiblyReactive(val, cb) {
  * @returns the object itself
  */
 function markRaw(value) {
-    value[SKIP] = true;
+    skipped.add(value);
     return value;
 }
 /**
@@ -1801,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();
 /**
@@ -1883,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
@@ -1898,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.
@@ -1915,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());
@@ -1933,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);
 }
@@ -1944,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;
@@ -2142,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];
             }
@@ -2305,12 +2301,13 @@ 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);
             }
         }
         this.component = new C(props, env, this);
-        this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
+        const ctx = Object.assign(Object.create(this.component), { this: this.component });
+        this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
         this.component.setup();
         currentNode = null;
     }
@@ -2423,7 +2420,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);
             }
         }
@@ -2501,6 +2498,7 @@ class ComponentNode {
     }
     _patch() {
         let hasChildren = false;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         for (let _k in this.children) {
             hasChildren = true;
             break;
@@ -2881,7 +2879,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;
@@ -2889,15 +2887,14 @@ 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;
-    const result = ObjectCreate(component);
+    const result = ObjectCreate(ctx);
     for (let k in ctx) {
         result[k] = ctx[k];
     }
@@ -3006,8 +3003,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();
@@ -3235,7 +3231,7 @@ TemplateSet.registerTemplate("__portal__", portalTemplate);
 //------------------------------------------------------------------------------
 // Misc types, constants and helpers
 //------------------------------------------------------------------------------
-const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(",");
+const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(",");
 const WORD_REPLACEMENT = Object.assign(Object.create(null), {
     and: "&&",
     or: "||",
@@ -3621,7 +3617,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};`);
@@ -3713,7 +3709,7 @@ class CodeGenerator {
             for (let block of this.blocks) {
                 if (block.dom) {
                     let xmlString = block.asXmlString();
-                    xmlString = xmlString.replace(/`/g, "\\`");
+                    xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
                     if (block.dynamicTagName) {
                         xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
                         xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -4006,39 +4002,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) {
@@ -4072,6 +4035,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 === "")) {
@@ -4480,7 +4476,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");
@@ -4519,7 +4515,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) {
@@ -4630,7 +4626,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) {
@@ -4678,7 +4674,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);
         }
@@ -5653,7 +5649,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}"`);
                     }
@@ -5820,7 +5820,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.1';
-__info__.date = '2022-10-21T08:41:01.873Z';
-__info__.hash = '9fe8e93';
+__info__.version = '2.0.3';
+__info__.date = '2023-01-20T10:27:02.171Z';
+__info__.hash = '316eb06';
 __info__.url = 'https://github.com/odoo/owl';