[REF] component: small improvement

and run prettier

doc/learning/environment.md

@@ -20,29 +20,28 @@ create a test environment with mock services.
 
 For example:
 
-
 ```js
 async function myEnv() {
-    const templates = await loadTemplates();
+  const templates = await loadTemplates();
-    const qweb = new QWeb({templates});
+  const qweb = new QWeb({ templates });
-    const session = getSession();
+  const session = getSession();
 
-    return {
+  return {
-        _t: myTranslateFunction,
+    _t: myTranslateFunction,
-        session: session,
+    session: session,
-        qweb: qweb,
+    qweb: qweb,
-        services: {
+    services: {
-            localStorage: localStorage,
+      localStorage: localStorage,
-            rpc: rpc,
+      rpc: rpc
-        },
+    },
-        debug: false,
+    debug: false,
-        inMobileMode: true,
+    inMobileMode: true
-    };
+  };
 }
 
 async function start() {
-    owl.config.env = await myEnv();
+  owl.config.env = await myEnv();
-    const app = new App();
+  const app = new App();
-    await app.mount(document.body);
+  await app.mount(document.body);
 }
-```
+```

doc/readme.md

@@ -1,6 +1,7 @@
 # 🦉 OWL Documentation 🦉
 
 ## Reference
+
 - [Animations](reference/animations.md)
 - [Component](reference/component.md)
 - [Configuration](reference/config.md)
@@ -43,7 +44,7 @@ and `EventBus` is exported as `owl.core.EventBus`):
 
 ```
 Component                               misc
-Context                                     AsyncRoot 
+Context                                     AsyncRoot
 QWeb                                    router
 Store                                       Link
 useState                                    RouteComponent
@@ -70,4 +71,3 @@ hooks                                       loadJS
 ```
 
 Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.
-

doc/reference/config.md

@@ -1,7 +1,7 @@
 # 🦉 Config 🦉
 
-The Owl framework is designed to work in many situations.  However, it is
+The Owl framework is designed to work in many situations. However, it is
-sometimes necessary to customize some behaviour.  This is done by using the
+sometimes necessary to customize some behaviour. This is done by using the
 global `config` object. It currently has two keys:
 
 - [`mode`](#mode),

doc/reference/environment.md

@@ -15,4 +15,3 @@ Note: some additional information can be found here:
 
 - [What should go into an environment?](../learning/environment.md)
 - [Customizing an environment](config.md#env)
-

src/component/component.ts

@@ -115,15 +115,16 @@ export class Component<T extends Env, Props extends {}> {
     Component.current = this;
 
     const id: number = nextId++;
+    let constr = this.constructor as any;
     let depth;
     if (parent) {
-      const defaultProps = (<any>this.constructor).defaultProps;
+      const defaultProps = constr.defaultProps;
       if (defaultProps) {
         props = this.__applyDefaultProps(props, defaultProps);
       }
       this.props = <Props>props;
       if (QWeb.dev) {
-        QWeb.utils.validateProps(this.constructor, this.props);
+        QWeb.utils.validateProps(constr, this.props);
       }
       this.env = parent.env;
       const __powl__ = parent.__owl__;
@@ -153,7 +154,7 @@ export class Component<T extends Env, Props extends {}> {
     }
 
     const qweb = this.env.qweb;
-
+    const template = constr.template || this.__getTemplate(qweb);
     this.__owl__ = {
       id: id,
       depth: depth,
@@ -173,7 +174,7 @@ export class Component<T extends Env, Props extends {}> {
       willStartCB: null,
       willUpdatePropsCB: null,
       observer: null,
-      renderFn: qweb.render.bind(qweb, this.__getTemplate(qweb)),
+      renderFn: qweb.render.bind(qweb, template),
       classObj: null,
       refs: null
     };
@@ -543,22 +544,18 @@ export class Component<T extends Env, Props extends {}> {
   __getTemplate(qweb: QWeb): string {
     let p = (<any>this).constructor;
     if (!p.hasOwnProperty("_template")) {
-      if (p.template) {
+      // here, the component and none of its superclasses defines a static `template`
-        p._template = p.template;
+      // key. So we fall back on looking for a template matching its name (or
-      } else {
+      // one of its subclass).
-        // here, the component and none of its superclasses defines a static `template`
-        // key. So we fall back on looking for a template matching its name (or
-        // one of its subclass).
 
-        let template: string;
+      let template: string;
-        while ((template = p.name) && !(template in qweb.templates) && p !== Component) {
+      while ((template = p.name) && !(template in qweb.templates) && p !== Component) {
-          p = p.__proto__;
+        p = p.__proto__;
-        }
+      }
-        if (p === Component) {
+      if (p === Component) {
-          throw new Error(`Could not find template for component "${this.constructor.name}"`);
+        throw new Error(`Could not find template for component "${this.constructor.name}"`);
-        } else {
+      } else {
-          p._template = template;
+        p._template = template;
-        }
       }
     }
     return p._template;

src/config.ts

@@ -26,5 +26,5 @@ Object.defineProperty(config, "mode", {
     } else {
       console.log(`Owl is now running in 'prod' mode.`);
     }
-  },
+  }
 });

tests/component/props_validation.test.ts

@@ -121,7 +121,7 @@ describe("props validation", () => {
       expect(error.message).toBe(`Missing props 'p' (component '_a')`);
 
       error = undefined;
-      props = {p: test.ok};
+      props = { p: test.ok };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -130,7 +130,7 @@ describe("props validation", () => {
       }
       expect(error).toBeUndefined();
 
-      props = {p: test.ko};
+      props = { p: test.ko };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -178,7 +178,7 @@ describe("props validation", () => {
       expect(error.message).toBe(`Missing props 'p' (component '_a')`);
 
       error = undefined;
-      props = {p: test.ok};
+      props = { p: test.ok };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -187,7 +187,7 @@ describe("props validation", () => {
       }
       expect(error).toBeUndefined();
 
-      props = {p: test.ko};
+      props = { p: test.ko };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -203,14 +203,14 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: [String, Boolean] };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -247,14 +247,14 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: String, optional: true } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -291,14 +291,14 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: Array, element: String } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -343,7 +343,7 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: Array, element: [String, Boolean] } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -398,7 +398,7 @@ describe("props validation", () => {
       static props = {
         p: { type: Object, shape: { id: Number, url: String } }
       };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -461,7 +461,7 @@ describe("props validation", () => {
           }
         }
       };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -677,7 +677,7 @@ describe("default props", () => {
 
     const w = new Parent();
     await w.mount(fixture);
-    expect(fixture.innerHTML).toBe('<div><div>4</div></div>');
+    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
 
   test("default values are also set whenever component is updated", async () => {