[IMP] owl: update to v0.16.0

playground/app.js

@@ -97,10 +97,7 @@ function makeCodeIframe(js, css, xml, errorHandler) {
       setTimeout(function() {
         if (iframe.contentWindow) {
           iframe.contentWindow.removeEventListener("error", errorHandler);
-          iframe.contentWindow.removeEventListener(
-            "unhandledrejection",
-            errorHandler
-          );
+          iframe.contentWindow.removeEventListener("unhandledrejection", errorHandler);
         }
       }, 200);
       doc.body.appendChild(script);
@@ -200,6 +197,8 @@ class App extends owl.Component {
     } catch (e) {
       //probably problem with the templates
       error = e;
+      // we still log the error, always useful to have it available
+      console.error(e);
     }
     if (error) {
       this.displayError(error.message);
@@ -284,15 +283,7 @@ class TabbedEditor extends owl.Component {
     this.setTab = owl.utils.debounce(this.setTab, 250, true);
 
     this.sessions = {};
-    for (let tab of ["js", "xml", "css"]) {
-      if (props[tab]) {
-        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
-        this.sessions[tab].setOption("useWorker", false);
-        const tabSize = tab === "xml" ? 2 : 4;
-        this.sessions[tab].setOption("tabSize", tabSize);
-        this.sessions[tab].setUndoManager(new ace.UndoManager());
-      }
-    }
+    this._setupSessions(props);
     this.editor = null;
   }
 
@@ -317,9 +308,19 @@ class TabbedEditor extends owl.Component {
     });
   }
 
+  willUpdateProps(nextProps) {
+    this._setupSessions(nextProps);
+  }
+
   patched() {
     const session = this.sessions[this.state.currentTab];
-    session.setValue(this.props[this.state.currentTab], -1);
+    let content = this.props[this.state.currentTab];
+    if (content === false) {
+      const tab = this.props.js ? "js" : this.props.xml ? "xml" : "css";
+      content = this.props[tab];
+      this.state.currentTab = tab;
+    }
+    session.setValue(content, -1);
     this.editor.setSession(session);
     this.editor.resize();
   }
@@ -347,6 +348,18 @@ class TabbedEditor extends owl.Component {
       });
     }
   }
+
+  _setupSessions(props) {
+    for (let tab of ["js", "xml", "css"]) {
+      if (props[tab] && !this.sessions[tab]) {
+        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
+        this.sessions[tab].setOption("useWorker", false);
+        const tabSize = tab === "xml" ? 2 : 4;
+        this.sessions[tab].setOption("tabSize", tabSize);
+        this.sessions[tab].setUndoManager(new ace.UndoManager());
+      }
+    }
+  }
 }
 
 //------------------------------------------------------------------------------

playground/samples.js

@@ -942,31 +942,30 @@ class App extends owl.Component {
 }
 
 //------------------------------------------------------------------------------
-// Application Startup
+// Responsive plugin
 //------------------------------------------------------------------------------
-function isMobile() {
-    return window.innerWidth <= 768;
+function setupResponsivePlugin(env) {
+    const isMobile = () => window.innerWidth <= 768;
+    env.isMobile = isMobile();
+    const updateEnv = owl.utils.debounce(() => {
+        if (env.isMobile !== isMobile()) {
+            env.isMobile = !env.isMobile;
+            env.qweb.trigger('update');
+        }
+    }, 15);
+    window.addEventListener("resize", updateEnv);
 }
 
+//------------------------------------------------------------------------------
+// Application Startup
+//------------------------------------------------------------------------------
 const env = {
     qweb: new owl.QWeb(TEMPLATES),
-    isMobile: isMobile()
 };
-
+setupResponsivePlugin(env);
 
 const app = new App(env);
 app.mount(document.body);
-
-function updateEnv() {
-    const _isMobile = isMobile();
-    if (_isMobile !== env.isMobile) {
-        app.updateEnv({
-            isMobile: _isMobile
-        });
-    }
-}
-
-window.addEventListener("resize", owl.utils.debounce(updateEnv, 20));
 `;
 
 const RESPONSIVE_XML = `<templates>
@@ -1133,10 +1132,10 @@ const SLOTS_XML = `<templates>
       <t t-set="footer"><button t-on-click="inc('a', 1)">Increment A</button></t>
     </Card>
     <Card title="'Title card B'">
-      <div t-set="content">
+      <t t-set="content">
         <div>Card 2... [<t t-esc="state.b"/>]</div>
         <Counter />
-      </div>
+      </t>
       <t t-set="footer"><button t-on-click="inc('b', -1)">Decrement B</button></t>
     </Card>
   </div>
@@ -1352,7 +1351,7 @@ export const SAMPLES = [
     description: "Lifecycle demo",
     code: LIFECYCLE_DEMO,
     xml: LIFECYCLE_DEMO_XML,
-    css: LIFECYCLE_CSS,
+    css: LIFECYCLE_CSS
   },
   {
     description: "Todo List App (with store)",

playground/templates.xml

@@ -27,7 +27,7 @@
         <TabbedEditor
             js="state.js"
             css="!state.splitLayout and state.css"
-            xml="!state.splitLayout and state.js"
+            xml="!state.splitLayout and state.xml"
             t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
           <div class="separator horizontal"/>