[REF] component: improve render method

src/component/component.ts

@@ -273,7 +273,7 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
     if (this.__owl__.isMounted) {
       return;
     }
-    if (!this.__owl__.vnode ) {
+    if (!this.__owl__.vnode) {
       // we use the fact that renderId === 1 as a way to determine that the
       // component is mounted for the first time
       const vnode = await this.__prepare();
@@ -297,20 +297,17 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
     }
   }
 
-  async render(force: boolean = false, patchQueue?: any[], scope?: any, vars?: any): Promise<void> {
+  async render(force: boolean = false): Promise<void> {
     const __owl__ = this.__owl__;
     if (!__owl__.isMounted) {
       return;
     }
-    const shouldPatch: boolean = !patchQueue;
-    if (shouldPatch) {
-      patchQueue = [];
-    }
-    __owl__.renderId++
-    const renderId = __owl__.renderId;
-    await this.__render(force, patchQueue, scope, vars);
+    const patchQueue = [];
 
-    if (shouldPatch && __owl__.isMounted && renderId === __owl__.renderId) {
+    const renderId = ++__owl__.renderId;
+    await this.__render(force, patchQueue, undefined, undefined);
+
+    if (__owl__.isMounted && renderId === __owl__.renderId) {
       // we only update the vnode and the actual DOM if no other rendering
       // occurred between now and when the render method was initially called.
       this.__applyPatchQueue(<any[]>patchQueue);
@@ -456,7 +453,7 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
       }
       await this.willUpdateProps(nextProps);
       this.props = nextProps;
-      await this.render(forceUpdate, patchQueue, scope, vars);
+      await this.__render(forceUpdate, patchQueue, scope, vars);
     }
   }
 
@@ -513,6 +510,7 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
     }
     __owl__.render = qweb.render.bind(qweb, this.template);
     this.__observeState();
+
     return this.__render(false, [], scope, vars);
   }
 

tests/component/__snapshots__/props_validation.test.ts.snap

@@ -1,5 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`default props default values are also set whenever component is updated 1`] = `"<div>1</div>"`;
+
+exports[`default props default values are also set whenever component is updated 2`] = `"<div>4</div>"`;
+
 exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
 "function anonymous(context,extra
 ) {

tests/component/props_validation.test.ts

@@ -327,9 +327,17 @@ describe("default props", () => {
     class TestWidget extends Widget {
       static defaultProps = { p: 4 };
     }
+    env.qweb.addTemplates(`
+        <templates>
+            <div t-name="TestWidget"><t t-esc="props.p"/></div>
+        </templates>`);
 
     const w = new TestWidget(env, { p: 1 });
+    await w.mount(fixture);
+    expect(fixture.innerHTML).toMatchSnapshot();
     await w.__updateProps({});
+    await w.render();
     expect(w.props.p).toBe(4);
+    expect(fixture.innerHTML).toMatchSnapshot();
   });
 });

tests/store/connected_component.test.ts

@@ -818,9 +818,11 @@ describe("connected components and default values", () => {
     expect(fixture.innerHTML).toBe("<div><div>Hello, John</div></div>");
 
     await app.__updateProps({ initialRecipient: "James" }, true);
+    await app.render();
     expect(fixture.innerHTML).toBe("<div><div>Hello, James</div></div>");
 
     await app.__updateProps({ initialRecipient: undefined }, true);
+    await app.render();
     expect(fixture.innerHTML).toBe("<div><div>Hello, John</div></div>");
   });
 
@@ -903,6 +905,7 @@ describe("connected components and default values", () => {
     );
 
     await app.__updateProps({ threadId: 2 }, true);
+    await app.render();
     expect(fixture.innerHTML).toBe("<div><div><div>200Message200</div></div></div>");
 
     store.commit("changeMessageContent", 200, "UpdatedMessage200");