[IMP] owl: update library, and update examples

libs/owl.js

@@ -802,7 +802,7 @@
         }
     }
 
-    var utils = /*#__PURE__*/Object.freeze({
+    var _utils = /*#__PURE__*/Object.freeze({
         escape: escape,
         htmlTrim: htmlTrim,
         idGenerator: idGenerator,
@@ -1166,23 +1166,6 @@
             }
         }
     }
-    class PureComponent extends Component {
-        shouldUpdate(nextProps) {
-            for (let k in nextProps) {
-                if (nextProps[k] !== this.props[k]) {
-                    return true;
-                }
-            }
-            return false;
-        }
-        async updateState(nextState) {
-            for (let k in nextState) {
-                if (nextState[k] !== this.state[k]) {
-                    return super.updateState(nextState);
-                }
-            }
-        }
-    }
 
     const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,typeof,eval,void,Math,RegExp,Array,Object,Date".split(",");
     const WORD_REPLACEMENT = {
@@ -1831,11 +1814,16 @@
             const variable = node.getAttribute("t-set");
             let value = node.getAttribute("t-value");
             if (value) {
-                const varName = `_${ctx.generateID()}`;
                 const formattedValue = ctx.formatExpression(value);
-                ctx.addLine(`var ${varName} = ${formattedValue}`);
-                ctx.definedVariables[varName] = formattedValue;
-                ctx.variables[variable] = varName;
+                if (ctx.variables.hasOwnProperty(variable)) {
+                    ctx.addLine(`${ctx.variables[variable]} = ${formattedValue}`);
+                }
+                else {
+                    const varName = `_${ctx.generateID()}`;
+                    ctx.addLine(`var ${varName} = ${formattedValue};`);
+                    ctx.definedVariables[varName] = formattedValue;
+                    ctx.variables[variable] = varName;
+                }
             }
             else {
                 ctx.variables[variable] = node.childNodes;
@@ -2078,35 +2066,44 @@
         }
     };
 
-    /**
-     * The registry is basically a simple hashmap. It is only a little safer and
-     * more structured than a simple object.
-     */
-    class Registry {
-        constructor() {
-            this.map = {};
-        }
-        /**
-         * Add an element to the registry.  Note that the add method returns the
-         * registry, to it can be chained.
-         */
-        add(key, item) {
-            if (key in this.map) {
-                throw new Error(`Key ${key} already exists!`);
+    const methodsToPatch = [
+        "push",
+        "pop",
+        "shift",
+        "unshift",
+        "splice",
+        "sort",
+        "reverse"
+    ];
+    const ArrayProto = Array.prototype;
+    const ModifiedArrayProto = Object.create(ArrayProto);
+    for (let method of methodsToPatch) {
+        const initialMethod = ArrayProto[method];
+        ModifiedArrayProto[method] = function (...args) {
+            this.__observer__.rev++;
+            this.__owl__.rev++;
+            let parent = this;
+            do {
+                parent.__owl__.deepRev++;
+            } while ((parent = parent.__owl__.parent));
+            let inserted;
+            switch (method) {
+                case "push":
+                case "unshift":
+                    inserted = args;
+                    break;
+                case "splice":
+                    inserted = args.slice(2);
+                    break;
             }
-            this.map[key] = item;
-            return this;
-        }
-        /**
-         * Returns the element corresponding to the key
-         *
-         * Nothing is done to check that the key actually exists.
-         */
-        get(key) {
-            return this.map[key];
-        }
+            if (inserted) {
+                for (let elem of inserted) {
+                    this.__observer__.observe(elem, this);
+                }
+            }
+            return initialMethod.call(this, ...args);
+        };
     }
-
     function makeObserver() {
         const observer = {
             rev: 1,
@@ -2152,48 +2149,11 @@
                 addProp(obj, key, obj[key]);
             }
         }
-        const ArrayProto = Array.prototype;
-        const ModifiedArrayProto = Object.create(ArrayProto);
-        const methodsToPatch = [
-            "push",
-            "pop",
-            "shift",
-            "unshift",
-            "splice",
-            "sort",
-            "reverse"
-        ];
-        for (let method of methodsToPatch) {
-            const initialMethod = ArrayProto[method];
-            ModifiedArrayProto[method] = function (...args) {
-                observer.rev++;
-                this.__owl__.rev++;
-                let parent = this;
-                do {
-                    parent.__owl__.deepRev++;
-                } while ((parent = parent.__owl__.parent));
-                let inserted;
-                switch (method) {
-                    case "push":
-                    case "unshift":
-                        inserted = args;
-                        break;
-                    case "splice":
-                        inserted = args.slice(2);
-                        break;
-                }
-                if (inserted) {
-                    for (let elem of inserted) {
-                        observe(elem, this);
-                    }
-                }
-                return initialMethod.call(this, ...args);
-            };
-        }
         function observeArr(arr, parent) {
             arr.__owl__ = { rev: 1, deepRev: 1, parent };
             Object.defineProperty(arr, "__owl__", { enumerable: false });
-            arr.__proto__ = ModifiedArrayProto;
+            arr.__proto__ = Object.create(ModifiedArrayProto);
+            arr.__proto__.__observer__ = observer;
             for (let i = 0; i < arr.length; i++) {
                 observe(arr[i], arr);
             }
@@ -2396,24 +2356,18 @@
         };
     }
 
-    const core = {
-        QWeb,
-        EventBus,
-        Component,
-        PureComponent,
-        utils
-    };
-    const extras = {
-        Store,
-        connect,
-        Registry
-    };
+    const utils = _utils;
 
-    exports.core = core;
-    exports.extras = extras;
+    exports.utils = utils;
+    exports.Component = Component;
+    exports.EventBus = EventBus;
+    exports.QWeb = QWeb;
+    exports.connect = connect;
+    exports.Store = Store;
 
     exports._version = '0.6.0';
-    exports._date = '2019-04-16T12:48:20.169Z';
-    exports._hash = '0ca4cc1';
+    exports._date = '2019-04-16T15:27:25.412Z';
+    exports._hash = 'e19540f';
+    exports._url = 'https://github.com/odoo/owl';
 
 }(this.owl = this.owl || {}));

src/app.js

@@ -1,6 +1,6 @@
 import { SAMPLES } from "./samples.js";
 
-const { QWeb, Component } = owl.core;
+const { QWeb, Component } = owl;
 
 const MODES = {
   js: "ace/mode/javascript",
@@ -157,7 +157,7 @@ class App extends Component {
 
   async runCode() {
     // check templates
-    var qweb = new owl.core.QWeb();
+    var qweb = new owl.QWeb();
     var error = false;
     try {
       qweb.loadTemplates(this.state.xml);

src/samples.js

@@ -1,6 +1,6 @@
-const HELLO_WORLD = `const {Component, QWeb} = owl.core;
+const HELLO_WORLD = `const {Component, QWeb} = owl;
 
-class HelloWorld extends Component {
+class App extends Component {
   constructor() {
     super(...arguments);
     this.template = "demo.hello";
@@ -8,8 +8,8 @@ class HelloWorld extends Component {
 }
 
 const qweb = new QWeb(TEMPLATES);
-const hello = new HelloWorld({qweb}, { name: "World" });
-hello.mount(document.body);
+const app = new App({qweb}, { name: "World" });
+app.mount(document.body);
 `;
 
 const HELLO_WORLD_XML = `<templates>
@@ -24,7 +24,7 @@ const HELLO_WORLD_CSS = `.hello {
 }`;
 
 const HELLO_WORLD_ESNEXT = `// This example will not work if your browser does not support ESNext Class Fields
-const {Component, QWeb} = owl.core;
+const {Component, QWeb} = owl;
 
 class HelloWorld extends Component {
   template = "demo.hello";
@@ -34,7 +34,7 @@ const qweb = new QWeb(TEMPLATES);
 const hello = new HelloWorld({qweb}, { name: "World" });
 hello.mount(document.body);`;
 
-const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl.core;
+const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl;
 
 function HelloWorld(env, props) {
   var obj = new Component(env, props);
@@ -63,7 +63,7 @@ const HELLO_WORLD_ES5_XML = `<templates>
   </div>
 </templates>`;
 
-const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
+const WIDGET_COMPOSITION = `class Counter extends owl.Component {
   constructor(parent, props) {
     super(parent, props);
     this.template="counter";
@@ -77,7 +77,7 @@ const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
   }
 }
 
-class App extends owl.core.Component {
+class App extends owl.Component {
   constructor() {
     super(...arguments);
     this.template="app";
@@ -86,7 +86,7 @@ class App extends owl.core.Component {
 }
 
 const env = {
-  qweb: new owl.core.QWeb(TEMPLATES)
+  qweb: new owl.QWeb(TEMPLATES)
 };
 
 const app = new App(env);
@@ -105,7 +105,7 @@ const WIDGET_COMPOSITION_XML = `<templates>
   </div>
 </templates>`;
 
-const LIFECYCLE_DEMO = `const { Component, QWeb } = owl.core;
+const LIFECYCLE_DEMO = `const { Component, QWeb } = owl;
 
 class HookWidget extends Component {
   constructor() {
@@ -196,7 +196,7 @@ for (let i = 1; i < 16000; i++) {
 //------------------------------------------------------------------------------
 // Counter Widget
 //------------------------------------------------------------------------------
-class Counter extends owl.core.Component {
+class Counter extends owl.Component {
   constructor(parent, props) {
     super(parent, props);
     this.template = "counter";
@@ -213,7 +213,7 @@ class Counter extends owl.core.Component {
 //------------------------------------------------------------------------------
 // Message Widget
 //------------------------------------------------------------------------------
-class Message extends owl.core.Component {
+class Message extends owl.Component {
   constructor() {
     super(...arguments);
     this.template = "message";
@@ -230,7 +230,7 @@ class Message extends owl.core.Component {
 //------------------------------------------------------------------------------
 // Root Widget
 //------------------------------------------------------------------------------
-class App extends owl.core.Component {
+class App extends owl.Component {
   constructor() {
     super(...arguments);
     this.template = "root";
@@ -263,7 +263,7 @@ class App extends owl.core.Component {
 // Application initialization
 //------------------------------------------------------------------------------
 const env = {
-  qweb: new owl.core.QWeb(TEMPLATES)
+  qweb: new owl.QWeb(TEMPLATES)
 };
 
 const app = new App(env);
@@ -355,8 +355,7 @@ const BENCHMARK_APP_XML = `<templates>
 
 </templates>`;
 
-const STATE_MANAGEMENT = `const { Component, QWeb } = owl.core;
-const { Store, connect } = owl.extras;
+const STATE_MANAGEMENT = `const { Component, QWeb, Store, connect } = owl;
 
 //------------------------------------------------------------------------------
 // Store Definition
@@ -461,7 +460,7 @@ const STATE_MANAGEMENT_CSS = `.action {
 }
 `;
 
-const RESPONSIVE = `const { Component, QWeb, utils } = owl.core;
+const RESPONSIVE = `const { Component, QWeb, utils } = owl;
 
 class SubWidget extends Component {
   constructor() {
@@ -530,7 +529,7 @@ const RESPONSIVE_CSS = `.info {
     margin: 30px;
 }`;
 
-const EMPTY = `const {Component, QWeb} = owl.core;
+const EMPTY = `const {Component, QWeb} = owl;
 class Widget extends Component {
 }