[IMP] owl: update to v1.0.0-alpha

playground/app.js

@@ -90,7 +90,14 @@ function makeCodeIframe(js, css, xml, errorHandler) {
     owlScript.addEventListener("load", () => {
       const script = doc.createElement("script");
       script.type = "text/javascript";
-      const content = `owl.__info__.mode = 'dev';\nwindow.TEMPLATES = \`${sanitizedXML}\`\n${js}`;
+      const content = `
+        {
+          owl.__info__.mode = 'dev';
+          let templates = \`${sanitizedXML}\`;
+          const qweb = new owl.QWeb({ templates });
+          owl.config.env = { qweb };
+        }
+        ${js}`;
       script.innerHTML = content;
       iframe.contentWindow.addEventListener("error", errorHandler);
       iframe.contentWindow.addEventListener("unhandledrejection", errorHandler);
@@ -429,12 +436,15 @@ App.components = { TabbedEditor };
 //------------------------------------------------------------------------------
 async function start() {
   document.title = `${document.title} (v${owl.__info__.version})`;
+  const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
+  console.info(`This application is using Owl built with the following commit:`, commit);
   const [templates] = await Promise.all([
     owl.utils.loadFile("templates.xml"),
     owl.utils.whenReady()
   ]);
-  const qweb = new owl.QWeb(templates);
-  const app = new App({ qweb });
+  const qweb = new owl.QWeb({ templates });
+  owl.config.env = { qweb };
+  const app = new App();
   app.mount(document.body);
 }
 

playground/samples.js

@@ -16,9 +16,7 @@ class App extends Component {
 App.components = { Greeter };
 
 // Application setup
-// Note that the xml templates are injected into the global TEMPLATES variable.
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({ qweb });
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -70,8 +68,7 @@ class App extends Component {
 }
 App.components = { Counter };
 
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({qweb});
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -228,8 +225,7 @@ class App extends Component {
 }
 App.components = { DemoComponent };
 
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({ qweb });
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -298,8 +294,7 @@ class App extends owl.Component {
 }
 
 // Application setup
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({ qweb });
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -349,11 +344,9 @@ const themeContext = new Context({
    background: '#000',
    foreground: '#fff',
 });
-const env = {
-    qweb: new owl.QWeb(TEMPLATES),
-    themeContext: themeContext,
-};
-const app = new App(env);
+// Add the themeContext the environment to make it available to all components
+owl.config.env.themeContext = themeContext;
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -534,26 +527,25 @@ TodoApp.components = { TodoItem };
 //------------------------------------------------------------------------------
 // App Initialization
 //------------------------------------------------------------------------------
-function saveState(state) {
-    const str = JSON.stringify(state);
-    window.localStorage.setItem(LOCALSTORAGE_KEY, str);
-}
 
-function loadState() {
-    const localState = window.localStorage.getItem(LOCALSTORAGE_KEY);
-    return localState ? JSON.parse(localState) : initialState;
-}
+function makeStore() {
+    function saveState(state) {
+        const str = JSON.stringify(state);
+        window.localStorage.setItem(LOCALSTORAGE_KEY, str);
+    }
+    function loadState() {
+        const localState = window.localStorage.getItem(LOCALSTORAGE_KEY);
+        return localState ? JSON.parse(localState) : initialState;
+    }
 
-function makeEnv() {
     const state = loadState();
     const store = new owl.Store({ state, actions });
     store.on("update", null, () => saveState(store.state));
-    const qweb = new owl.QWeb(TEMPLATES);
-    return { qweb, store };
+    return store;
 }
 
-const env = makeEnv();
-const app = new TodoApp(env);
+owl.config.env.store = makeStore();
+const app = new TodoApp();
 app.mount(document.body);
 `;
 
@@ -1040,12 +1032,9 @@ function setupResponsivePlugin(env) {
 //------------------------------------------------------------------------------
 // Application Startup
 //------------------------------------------------------------------------------
-const env = {
-    qweb: new owl.QWeb(TEMPLATES),
-};
-setupResponsivePlugin(env);
+setupResponsivePlugin(owl.config.env);
 
-const app = new App(env);
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -1187,8 +1176,7 @@ class App extends Component {
 App.components = {Card, Counter};
 
 // Application setup
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({ qweb });
+const app = new App();
 app.mount(document.body);`;
 
 const SLOTS_XML = `<templates>
@@ -1301,10 +1289,9 @@ class App extends Component {
         }, 3000);
     }
 }
-App.components = {SlowComponent, NotificationList};
+App.components = {SlowComponent, NotificationList, AsyncRoot};
 
-const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({ qweb });
+const app = new App();
 app.mount(document.body);
 `;
 
@@ -1373,8 +1360,7 @@ class Form extends Component {
 }
 
 // Application setup
-const qweb = new owl.QWeb(TEMPLATES);
-const form = new Form({ qweb });
+const form = new Form();
 form.mount(document.body);
 `;
 
@@ -1540,7 +1526,6 @@ class App extends Component {
 }
 App.components = { WindowManager };
 
-const qweb = new owl.QWeb(TEMPLATES);
 const windows = [
   {
     name: "Hello",
@@ -1558,8 +1543,8 @@ const windows = [
   }
 ];
 
-const env = { qweb, windows };
-const app = new App(env);
+owl.config.env.windows = windows;
+const app = new App();
 app.mount(document.body);
 `;
 

playground/templates.xml

@@ -31,7 +31,7 @@
             t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
           <div class="separator horizontal"/>
-          <TabbedEditor t-keepalive="1"
+          <TabbedEditor
              js="false"
              css="state.css"
              xml="state.xml"