imp: add willPatch hook

This commit is contained in:
Géry Debongnie
2019-04-05 16:30:35 +02:00
parent ca73ed07a6
commit 14d3eb83eb
2 changed files with 53 additions and 4 deletions
+14 -4
View File
@@ -149,6 +149,14 @@ export class Component<
*/
mounted() {}
/**
* The willPatch hook is called just before the DOM patching process starts.
* It is not called on the initial render. This is useful to get some
* information which are in the DOM. For example, the current position of the
* scrollbar
*/
willPatch() {}
/**
* This hook is called whenever a component did actually update its props,
* state or env.
@@ -340,10 +348,12 @@ export class Component<
_patch(vnode) {
this.__widget__.renderPromise = null;
this.__widget__.vnode = patch(
this.__widget__.vnode || document.createElement(vnode.sel!),
vnode
);
if (this.__widget__.vnode) {
this.willPatch();
this.__widget__.vnode = patch(this.__widget__.vnode, vnode);
} else {
this.__widget__.vnode = patch(document.createElement(vnode.sel!), vnode);
}
}
async _start(): Promise<VNode> {
this.__widget__.renderProps = this.props;
+39
View File
@@ -498,6 +498,45 @@ describe("lifecycle hooks", () => {
await widget.updateState({ flag: false });
expect(destroyed).toBe(true);
});
test("willPatch/updated hook", async () => {
const steps: string[] = [];
class ParentWidget extends Widget {
inlineTemplate = `
<div>
<t t-widget="child" t-props="{v: state.n}"/>
</div>`;
widgets = { child: ChildWidget };
state = { n: 1 };
willPatch() {
steps.push("parent:willPatch");
}
componentDidUpdate() {
steps.push("parent:updated");
}
}
class ChildWidget extends Widget {
willPatch() {
steps.push("child:willPatch");
}
componentDidUpdate() {
steps.push("child:updated");
}
}
const widget = new ParentWidget(env);
await widget.mount(fixture);
expect(steps).toEqual([]);
await widget.updateState({ n: 2 });
// Not sure about this order. If you disagree, feel free to open an issue...
expect(steps).toEqual([
"child:willPatch",
"child:updated",
"parent:willPatch",
"parent:updated"
]);
});
});
describe("destroy method", () => {