[IMP] hooks/component: remove updateEnv, add useSubEnv

closes #182

tests/component/component.test.ts

@@ -625,24 +625,6 @@ describe("lifecycle hooks", () => {
     expect(n).toBe(1);
   });
 
-  test("patched hook is called after updateEnv", async () => {
-    let n = 0;
-
-    class TestWidget extends Widget {
-      state = useState({ a: 1 });
-
-      patched() {
-        n++;
-      }
-    }
-    const widget = new TestWidget(env);
-    await widget.mount(fixture);
-    expect(n).toBe(0);
-
-    await widget.updateEnv({ isMobile: true });
-    expect(n).toBe(1);
-  });
-
   test("shouldUpdate hook prevent rerendering", async () => {
     let shouldUpdate = false;
     class TestWidget extends Widget {
@@ -2815,107 +2797,6 @@ describe("async rendering", () => {
   });
 });
 
-describe("updating environment", () => {
-  test("can update widget env", async () => {
-    const widget = new Widget(env);
-    expect(widget.env).toBe(env);
-    await widget.updateEnv(<any>{ somekey: 4 });
-    expect(widget.env).toBe(env);
-    expect((<any>widget).env.somekey).toBe(4);
-  });
-
-  test("updating widget env does not render widget (if not mounted)", async () => {
-    let n = 0;
-    class TestWidget extends Widget {
-      __render(f) {
-        n++;
-        return super.__render(f);
-      }
-    }
-
-    const widget = new TestWidget(env);
-    expect(n).toBe(0);
-    await widget.updateEnv(<any>{ somekey: 4 });
-    expect(n).toBe(0);
-    await widget.mount(fixture);
-    expect(n).toBe(1);
-    await widget.updateEnv(<any>{ somekey: 5 });
-    expect(n).toBe(2);
-    widget.unmount();
-    expect(n).toBe(2);
-    await widget.updateEnv(<any>{ somekey: 5 });
-    expect(n).toBe(2);
-  });
-
-  test("updating child env does not modify parent env", async () => {
-    env.qweb.addTemplate("ParentWidget", `<div><t t-component="child"/></div>`);
-    class ParentWidget extends Widget {
-      static components = { child: Widget };
-    }
-    const parent = new ParentWidget(env);
-    await parent.mount(fixture);
-    const child = children(parent)[0];
-    expect(child.env).toBe(parent.env);
-    await child.updateEnv(<any>{ somekey: 4 });
-    expect(child.env).not.toBe(parent.env);
-    expect((<any>parent).env.somekey).toBeUndefined();
-  });
-
-  test("updating parent env does modify child env", async () => {
-    env.qweb.addTemplate("ParentWidget", `<div><t t-component="child"/></div>`);
-    class ParentWidget extends Widget {
-      static components = { child: Widget };
-    }
-    const parent = new ParentWidget(env);
-    await parent.mount(fixture);
-    const child = children(parent)[0];
-    expect(child.env.somekey).toBeUndefined();
-    await parent.updateEnv({ somekey: 4 });
-    expect(child.env.somekey).toBe(4);
-  });
-
-  test("updating parent env does modify child env, part 2", async () => {
-    env.qweb.addTemplate("ParentWidget", `<div><Child/></div>`);
-    class ParentWidget extends Widget {
-      static components = { Child: Widget };
-    }
-    const parent = new ParentWidget(env);
-    await parent.mount(fixture);
-    const child = children(parent)[0];
-    expect(child.env.somekey).toBeUndefined();
-    await child.updateEnv({ somekey: 4 });
-    await parent.updateEnv({ someotherkey: 4 });
-    expect(child.env.someotherkey).toBe(4);
-  });
-
-  test("updating env force a rerender", async () => {
-    env.qweb.addTemplate("TestWidget", `<div><t t-esc="env.someKey"/></div>`);
-    class TestWidget extends Widget {}
-    (<any>env).someKey = "hey";
-    const widget = new TestWidget(env);
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>hey</div>");
-    await widget.updateEnv(<any>{ someKey: "rerendered" });
-    expect(fixture.innerHTML).toBe("<div>rerendered</div>");
-  });
-
-  test("updating env force rerendering children", async () => {
-    env.qweb.addTemplate("Parent", `<div><Child /></div>`);
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child };
-    }
-    env.qweb.addTemplate("Child", `<div><t t-esc="env.someKey"/></div>`);
-    (<any>env).someKey = "hey";
-    const widget = new Parent(env);
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>hey</div></div>");
-    await widget.updateEnv(<any>{ someKey: "rerendered" });
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>rerendered</div></div>");
-  });
-});
-
 describe("widget and observable state", () => {
   test("widget is rerendered when its state is changed", async () => {
     env.qweb.addTemplate("TestWidget", `<div><t t-esc="state.drink"/></div>`);

tests/hooks.test.ts

@@ -1,6 +1,14 @@
 import { makeTestEnv, makeTestFixture, nextTick } from "./helpers";
 import { Component, Env } from "../src/component/component";
-import { useState, onMounted, onWillUnmount, useRef, onPatched, onWillPatch } from "../src/hooks";
+import {
+  useState,
+  onMounted,
+  onWillUnmount,
+  useRef,
+  onPatched,
+  onWillPatch,
+  useSubEnv
+} from "../src/hooks";
 import { xml } from "../src/tags";
 
 //------------------------------------------------------------------------------
@@ -245,12 +253,7 @@ describe("hooks", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>hey2</div>");
 
-    expect(steps).toEqual([
-      "hook:willPatch2",
-      "hook:willPatch1",
-      "hook:patched1",
-      "hook:patched2"
-    ]);
+    expect(steps).toEqual(["hook:willPatch2", "hook:willPatch1", "hook:patched1", "hook:patched2"]);
   });
 
   describe("autofocus hook", () => {
@@ -316,4 +319,41 @@ describe("hooks", () => {
       expect(input2).toBe(document.activeElement);
     });
   });
+
+  test("can use sub env", async () => {
+    class TestComponent extends Component<any, any> {
+      static template = xml`<div><t t-esc="env.val"/></div>`;
+      constructor(env) {
+        super(env);
+        useSubEnv({ val: 3 });
+      }
+    }
+    const component = new TestComponent(env);
+    await component.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>3</div>");
+    expect(env).not.toHaveProperty("val");
+    expect(component.env).toHaveProperty("val");
+  });
+
+  test("parent and child env", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<div><t t-esc="env.val"/></div>`;
+      constructor(env) {
+        super(env);
+        useSubEnv({ val: 5 });
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`<div><t t-esc="env.val"/><Child/></div>`;
+      static components = { Child}
+      constructor(env) {
+        super(env);
+        useSubEnv({ val: 3 });
+      }
+    }
+    const component = new Parent(env);
+    await component.mount(fixture);
+    expect(fixture.innerHTML).toBe( "<div>3<div>5</div></div>");
+  });
 });