[IMP] utils: whenReady now returns a Promise

Closes #160

doc/utils.md

@@ -13,14 +13,23 @@ functions are all available in the `owl.utils` namespace.
 
 ## `whenReady`
 
-The function `whenReady` is useful to register some code that need to be executed
+The function `whenReady` returns a `Promise` resolved when the DOM is ready (if
-as soon as the document (page) is ready:
+not ready yet, resolved directly otherwise). If called with a callback as
+argument, it executes it as soon as the DOM ready (or directly).
+
+```js
+Promise.all([loadTemplates(), owl.utils.whenReady()]).then(function ([templates]) {
+    const qweb = new owl.QWeb(templates);
+    const app = new App({ qweb });
+    app.mount(document.body);
+});
+```
 
 ```js
 owl.utils.whenReady(function() {
-  const qweb = new owl.QWeb();
+    const qweb = new owl.QWeb();
-  const app = new App({ qweb });
+    const app = new App({ qweb });
-  app.mount(document.body);
+    app.mount(document.body);
 });
 ```
 

src/utils.ts

@@ -11,11 +11,13 @@
  */
 
 export function whenReady(fn) {
-  if (document.readyState !== "loading") {
+  return new Promise(function(resolve) {
-    fn();
+    if (document.readyState !== "loading") {
-  } else {
+      resolve();
-    document.addEventListener("DOMContentLoaded", fn, false);
+    } else {
-  }
+      document.addEventListener("DOMContentLoaded", resolve, false);
+    }
+  }).then(fn || function () {});
 }
 
 const loadedScripts: { [key: string]: Promise<void> } = {};

tools/playground/app.js

@@ -127,22 +127,22 @@ async function makeApp(js, css, xml) {
     .map(l => (l === "" ? "" : "  " + l))
     .join("\n");
 
-  const JS = `async function startApp() {
+  const JS = `
-  // Loading templates
+async function loadTemplates() {
-  let TEMPLATES;
   try {
-    TEMPLATES = await owl.utils.loadTemplates('app.xml');
+    return owl.utils.loadTemplates('app.xml');
   } catch(e) {
-    document.write(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
+    console.error(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
-    return;
   }
+}
 
+function start([TEMPLATES]) {
   // Application code
 ${processedJS}
 }
 
-// wait for DOM ready before starting
+Promise.all([loadTemplates(), owl.utils.whenReady()]).then(start);
-owl.utils.whenReady(startApp);`;
+`;
 
   zip.file("app.js", JS);
   zip.file("app.css", css);
@@ -354,13 +354,13 @@ class TabbedEditor extends owl.Component {
 //------------------------------------------------------------------------------
 async function start() {
   document.title = `${document.title} (v${owl.__info__.version})`;
-  const templates = await owl.utils.loadTemplates("templates.xml");
+  const [templates] = await Promise.all([
+    owl.utils.loadTemplates("templates.xml"),
+    owl.utils.whenReady()
+  ]);
   const qweb = new owl.QWeb(templates);
-  const env = { qweb };
+  const app = new App({ qweb });
-  owl.utils.whenReady(() => {
+  app.mount(document.body);
-    const app = new App(env);
-    app.mount(document.body);
-  });
 }
 
 start();