@odoo/owl 2.0.9 → 2.1.1

package/README.md

@@ -113,6 +113,7 @@ Are you new to Owl? This is the place to start!
 - [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)
 - [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)
 - [Notes on compiled templates](doc/miscellaneous/compiled_template.md)
+- [Owl devtools extension](doc/tools/devtools.md)
 
 ## Installing Owl
 
@@ -121,8 +122,28 @@ Owl is available on `npm` and can be installed with the following command:
 ```
 npm install @odoo/owl
 ```
-
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
 - [owl](https://github.com/odoo/owl/releases/latest)
 
+## Installing Owl devtools
+
+The Owl devtools browser extension is also available in the [release](https://github.com/odoo/owl/releases/latest):
+Unzip the owl-devtools.zip file and follow the instructions depending on your browser:
+
+### Chrome
+
+Go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
+Select the devtools-chrome folder and that's it, your extension is active! 
+There is a convenient refresh button on the extension card (still on the same admin page) to update your code. 
+Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
+
+### Firefox 
+Go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
+Select any file in the devtools-firefox folder and that's it, your extension is active! 
+Here, you can use the reload button to refresh the extension.
+
+Note that you may have to open another window or reload your tab to see the extension working.
+Also note that the extension will only be active on pages that have a sufficient version of owl.
+
+

package/dist/owl.cjs.js

@@ -282,6 +282,96 @@ function updateClass(val, oldVal) {
     }
 }
 
+/**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+function batched(callback) {
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
+        }
+    };
+}
+/**
+ * Determine whether the given element is contained in its ownerDocument:
+ * either directly or with a shadow root in between.
+ */
+function inOwnerDocument(el) {
+    if (!el) {
+        return false;
+    }
+    if (el.ownerDocument.contains(el)) {
+        return true;
+    }
+    const rootNode = el.getRootNode();
+    return rootNode instanceof ShadowRoot && el.ownerDocument.contains(rootNode.host);
+}
+function validateTarget(target) {
+    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+    const document = target && target.ownerDocument;
+    if (document) {
+        const HTMLElement = document.defaultView.HTMLElement;
+        if (target instanceof HTMLElement || target instanceof ShadowRoot) {
+            if (!document.body.contains(target instanceof HTMLElement ? target : target.host)) {
+                throw new OwlError("Cannot mount a component on a detached dom node");
+            }
+            return;
+        }
+    }
+    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+}
+class EventBus extends EventTarget {
+    trigger(name, payload) {
+        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    }
+}
+function whenReady(fn) {
+    return new Promise(function (resolve) {
+        if (document.readyState !== "loading") {
+            resolve(true);
+        }
+        else {
+            document.addEventListener("DOMContentLoaded", resolve, false);
+        }
+    }).then(fn || function () { });
+}
+async function loadFile(url) {
+    const result = await fetch(url);
+    if (!result.ok) {
+        throw new OwlError("Error while fetching xml templates");
+    }
+    return await result.text();
+}
+/*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+class Markup extends String {
+}
+/*
+ * Marks a value as safe, that is, a value that can be injected as HTML directly.
+ * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
+ */
+function markup(value) {
+    return new Markup(value);
+}
+
 function createEventHandler(rawEvent) {
     const eventName = rawEvent.split(".")[0];
     const capture = rawEvent.includes(".capture");
@@ -301,7 +391,7 @@ function createElementHandler(evName, capture = false) {
     }
     function listener(ev) {
         const currentTarget = ev.currentTarget;
-        if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget))
+        if (!currentTarget || !inOwnerDocument(currentTarget))
             return;
         const data = currentTarget[eventKey];
         if (!data)
@@ -2166,82 +2256,6 @@ function collectionsProxyHandler(target, callback, targetRawType) {
     });
 }
 
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
- *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
- */
-function batched(callback) {
-    let called = false;
-    return async () => {
-        // This await blocks all calls to the callback here, then releases them sequentially
-        // in the next microtick. This line decides the granularity of the batch.
-        await Promise.resolve();
-        if (!called) {
-            called = true;
-            // wait for all calls in this microtick to fall through before resetting "called"
-            // so that only the first call to the batched function calls the original callback.
-            // Schedule this before calling the callback so that calls to the batched function
-            // within the callback will proceed only after resetting called to false, and have
-            // a chance to execute the callback again
-            Promise.resolve().then(() => (called = false));
-            callback();
-        }
-    };
-}
-function validateTarget(target) {
-    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-    const document = target && target.ownerDocument;
-    if (document) {
-        const HTMLElement = document.defaultView.HTMLElement;
-        if (target instanceof HTMLElement) {
-            if (!document.body.contains(target)) {
-                throw new OwlError("Cannot mount a component on a detached dom node");
-            }
-            return;
-        }
-    }
-    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
-}
-class EventBus extends EventTarget {
-    trigger(name, payload) {
-        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
-    }
-}
-function whenReady(fn) {
-    return new Promise(function (resolve) {
-        if (document.readyState !== "loading") {
-            resolve(true);
-        }
-        else {
-            document.addEventListener("DOMContentLoaded", resolve, false);
-        }
-    }).then(fn || function () { });
-}
-async function loadFile(url) {
-    const result = await fetch(url);
-    if (!result.ok) {
-        throw new OwlError("Error while fetching xml templates");
-    }
-    return await result.text();
-}
-/*
- * This class just transports the fact that a string is safe
- * to be injected as HTML. Overriding a JS primitive is quite painful though
- * so we need to redfine toString and valueOf.
- */
-class Markup extends String {
-}
-/*
- * Marks a value as safe, that is, a value that can be injected as HTML directly.
- * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
- */
-function markup(value) {
-    return new Markup(value);
-}
-
 let currentNode = null;
 function getCurrent() {
     if (!currentNode) {
@@ -2293,6 +2307,7 @@ class ComponentNode {
         this.bdom = null;
         this.status = 0 /* NEW */;
         this.forceNextRender = false;
+        this.nextProps = null;
         this.children = Object.create(null);
         this.refs = {};
         this.willStart = [];
@@ -2422,7 +2437,7 @@ class ComponentNode {
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
-        const rawProps = props;
+        this.nextProps = props;
         props = Object.assign({}, props);
         // update
         const fiber = makeChildFiber(this, parentFiber);
@@ -2446,7 +2461,6 @@ class ComponentNode {
             return;
         }
         component.props = props;
-        this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2521,6 +2535,7 @@ class ComponentNode {
             // by the component will be patched independently in the appropriate
             // fiber.complete
             this._patch();
+            this.props = this.nextProps;
         }
     }
     _patch() {
@@ -2871,14 +2886,27 @@ function validateType(key, value, descr) {
     if ("element" in descr) {
         result = validateArrayType(key, value, descr.element);
     }
-    else if ("shape" in descr && !result) {
+    else if ("shape" in descr) {
         if (typeof value !== "object" || Array.isArray(value)) {
             result = `'${key}' is not an object`;
         }
         else {
             const errors = validateSchema(value, descr.shape);
             if (errors.length) {
-                result = `'${key}' has not the correct shape (${errors.join(", ")})`;
+                result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+            }
+        }
+    }
+    else if ("values" in descr) {
+        if (typeof value !== "object" || Array.isArray(value)) {
+            result = `'${key}' is not an object`;
+        }
+        else {
+            const errors = Object.entries(value)
+                .map(([key, value]) => validateType(key, value, descr.values))
+                .filter(Boolean);
+            if (errors.length) {
+                result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
             }
         }
     }
@@ -5481,8 +5509,8 @@ function compile(template, options = {}) {
     return new Function("app, bdom, helpers", code);
 }
 
-// do not modify manually. This value is updated by the release script.
-const version = "2.0.9";
+// do not modify manually. This file is generated by the release script.
+const version = "2.1.1";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5775,7 +5803,7 @@ function useRef(name) {
     return {
         get el() {
             const el = refs[name];
-            return (el === null || el === void 0 ? void 0 : el.ownerDocument.contains(el)) ? el : null;
+            return inOwnerDocument(el) ? el : null;
         },
     };
 }
@@ -5925,10 +5953,11 @@ exports.useRef = useRef;
 exports.useState = useState;
 exports.useSubEnv = useSubEnv;
 exports.validate = validate;
+exports.validateType = validateType;
 exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.date = '2023-03-13T09:55:19.784Z';
-__info__.hash = '8893e02';
+__info__.date = '2023-04-17T09:09:34.568Z';
+__info__.hash = '4b9e6ba';
 __info__.url = 'https://github.com/odoo/owl';

package/dist/owl.es.js

@@ -278,6 +278,96 @@ function updateClass(val, oldVal) {
     }
 }
 
+/**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+function batched(callback) {
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
+        }
+    };
+}
+/**
+ * Determine whether the given element is contained in its ownerDocument:
+ * either directly or with a shadow root in between.
+ */
+function inOwnerDocument(el) {
+    if (!el) {
+        return false;
+    }
+    if (el.ownerDocument.contains(el)) {
+        return true;
+    }
+    const rootNode = el.getRootNode();
+    return rootNode instanceof ShadowRoot && el.ownerDocument.contains(rootNode.host);
+}
+function validateTarget(target) {
+    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+    const document = target && target.ownerDocument;
+    if (document) {
+        const HTMLElement = document.defaultView.HTMLElement;
+        if (target instanceof HTMLElement || target instanceof ShadowRoot) {
+            if (!document.body.contains(target instanceof HTMLElement ? target : target.host)) {
+                throw new OwlError("Cannot mount a component on a detached dom node");
+            }
+            return;
+        }
+    }
+    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+}
+class EventBus extends EventTarget {
+    trigger(name, payload) {
+        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    }
+}
+function whenReady(fn) {
+    return new Promise(function (resolve) {
+        if (document.readyState !== "loading") {
+            resolve(true);
+        }
+        else {
+            document.addEventListener("DOMContentLoaded", resolve, false);
+        }
+    }).then(fn || function () { });
+}
+async function loadFile(url) {
+    const result = await fetch(url);
+    if (!result.ok) {
+        throw new OwlError("Error while fetching xml templates");
+    }
+    return await result.text();
+}
+/*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+class Markup extends String {
+}
+/*
+ * Marks a value as safe, that is, a value that can be injected as HTML directly.
+ * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
+ */
+function markup(value) {
+    return new Markup(value);
+}
+
 function createEventHandler(rawEvent) {
     const eventName = rawEvent.split(".")[0];
     const capture = rawEvent.includes(".capture");
@@ -297,7 +387,7 @@ function createElementHandler(evName, capture = false) {
     }
     function listener(ev) {
         const currentTarget = ev.currentTarget;
-        if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget))
+        if (!currentTarget || !inOwnerDocument(currentTarget))
             return;
         const data = currentTarget[eventKey];
         if (!data)
@@ -2162,82 +2252,6 @@ function collectionsProxyHandler(target, callback, targetRawType) {
     });
 }
 
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
- *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
- */
-function batched(callback) {
-    let called = false;
-    return async () => {
-        // This await blocks all calls to the callback here, then releases them sequentially
-        // in the next microtick. This line decides the granularity of the batch.
-        await Promise.resolve();
-        if (!called) {
-            called = true;
-            // wait for all calls in this microtick to fall through before resetting "called"
-            // so that only the first call to the batched function calls the original callback.
-            // Schedule this before calling the callback so that calls to the batched function
-            // within the callback will proceed only after resetting called to false, and have
-            // a chance to execute the callback again
-            Promise.resolve().then(() => (called = false));
-            callback();
-        }
-    };
-}
-function validateTarget(target) {
-    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-    const document = target && target.ownerDocument;
-    if (document) {
-        const HTMLElement = document.defaultView.HTMLElement;
-        if (target instanceof HTMLElement) {
-            if (!document.body.contains(target)) {
-                throw new OwlError("Cannot mount a component on a detached dom node");
-            }
-            return;
-        }
-    }
-    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
-}
-class EventBus extends EventTarget {
-    trigger(name, payload) {
-        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
-    }
-}
-function whenReady(fn) {
-    return new Promise(function (resolve) {
-        if (document.readyState !== "loading") {
-            resolve(true);
-        }
-        else {
-            document.addEventListener("DOMContentLoaded", resolve, false);
-        }
-    }).then(fn || function () { });
-}
-async function loadFile(url) {
-    const result = await fetch(url);
-    if (!result.ok) {
-        throw new OwlError("Error while fetching xml templates");
-    }
-    return await result.text();
-}
-/*
- * This class just transports the fact that a string is safe
- * to be injected as HTML. Overriding a JS primitive is quite painful though
- * so we need to redfine toString and valueOf.
- */
-class Markup extends String {
-}
-/*
- * Marks a value as safe, that is, a value that can be injected as HTML directly.
- * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
- */
-function markup(value) {
-    return new Markup(value);
-}
-
 let currentNode = null;
 function getCurrent() {
     if (!currentNode) {
@@ -2289,6 +2303,7 @@ class ComponentNode {
         this.bdom = null;
         this.status = 0 /* NEW */;
         this.forceNextRender = false;
+        this.nextProps = null;
         this.children = Object.create(null);
         this.refs = {};
         this.willStart = [];
@@ -2418,7 +2433,7 @@ class ComponentNode {
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
-        const rawProps = props;
+        this.nextProps = props;
         props = Object.assign({}, props);
         // update
         const fiber = makeChildFiber(this, parentFiber);
@@ -2442,7 +2457,6 @@ class ComponentNode {
             return;
         }
         component.props = props;
-        this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2517,6 +2531,7 @@ class ComponentNode {
             // by the component will be patched independently in the appropriate
             // fiber.complete
             this._patch();
+            this.props = this.nextProps;
         }
     }
     _patch() {
@@ -2867,14 +2882,27 @@ function validateType(key, value, descr) {
     if ("element" in descr) {
         result = validateArrayType(key, value, descr.element);
     }
-    else if ("shape" in descr && !result) {
+    else if ("shape" in descr) {
         if (typeof value !== "object" || Array.isArray(value)) {
             result = `'${key}' is not an object`;
         }
         else {
             const errors = validateSchema(value, descr.shape);
             if (errors.length) {
-                result = `'${key}' has not the correct shape (${errors.join(", ")})`;
+                result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+            }
+        }
+    }
+    else if ("values" in descr) {
+        if (typeof value !== "object" || Array.isArray(value)) {
+            result = `'${key}' is not an object`;
+        }
+        else {
+            const errors = Object.entries(value)
+                .map(([key, value]) => validateType(key, value, descr.values))
+                .filter(Boolean);
+            if (errors.length) {
+                result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
             }
         }
     }
@@ -5477,8 +5505,8 @@ function compile(template, options = {}) {
     return new Function("app, bdom, helpers", code);
 }
 
-// do not modify manually. This value is updated by the release script.
-const version = "2.0.9";
+// do not modify manually. This file is generated by the release script.
+const version = "2.1.1";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5771,7 +5799,7 @@ function useRef(name) {
     return {
         get el() {
             const el = refs[name];
-            return (el === null || el === void 0 ? void 0 : el.ownerDocument.contains(el)) ? el : null;
+            return inOwnerDocument(el) ? el : null;
         },
     };
 }
@@ -5889,9 +5917,9 @@ 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 };
+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, validateType, whenReady, xml };
 
 
-__info__.date = '2023-03-13T09:55:19.784Z';
-__info__.hash = '8893e02';
+__info__.date = '2023-04-17T09:09:34.568Z';
+__info__.hash = '4b9e6ba';
 __info__.url = 'https://github.com/odoo/owl';