mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REM] component: remove t-keepalive directive
We don't see any usecase for it, it makes the code more complex, and there were still potential unresolved concurrency issues with it. Part of task #295
This commit is contained in:
Aaron Bohy
committed by
Géry Debongnie
Géry Debongnie
parent
7d249d6f09
commit
08cb83149e
@@ -234,51 +234,6 @@ exports[`class and style attributes with t-component t-att-class is properly add
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`composition sub components dom state with t-keepalive is preserved 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let owner = context;
|
||||
let sibling = null;
|
||||
var h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
if (context['state'].ok) {
|
||||
//COMPONENT
|
||||
let templateId3 = \`__4__\`;
|
||||
let w3 = templateId3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId3]] : false;
|
||||
const fiber3 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
|
||||
let props3 = {};
|
||||
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
|
||||
w3.destroy();
|
||||
w3 = false;
|
||||
}
|
||||
if (w3) {
|
||||
w3.__updateProps(props3, w3.__owl__.isMounted ? extra.fiber : fiber3, undefined, undefined, sibling);
|
||||
let pvnode = w3.__owl__.pvnode;
|
||||
pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w3.el,vn.elm);vn.elm=w3.el;w3.__remount();};
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey3 = \`InputWidget\`;
|
||||
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['InputWidget'];
|
||||
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
|
||||
w3 = new W3(parent, props3);
|
||||
parent.__owl__.cmap[templateId3] = w3.__owl__.id;
|
||||
let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
|
||||
let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.unmount();}}});
|
||||
const fiber = w3.__owl__.currentFiber;
|
||||
def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
c1.push(pvnode);
|
||||
w3.__owl__.pvnode = pvnode;
|
||||
}
|
||||
sibling = w3.__owl__.currentFiber || sibling;
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`composition sub components with some state rendered in a loop 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
@@ -460,51 +415,6 @@ exports[`dynamic t-props basic use 1`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willPatch/patched hook with t-keepalive 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let owner = context;
|
||||
let sibling = null;
|
||||
var h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
if (context['state'].flag) {
|
||||
//COMPONENT
|
||||
let templateId3 = \`__4__\`;
|
||||
let w3 = templateId3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId3]] : false;
|
||||
const fiber3 = Object.assign(Object.create(extra.fiber), {patchQueue: []});
|
||||
let props3 = {v:context['state'].n};
|
||||
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
|
||||
w3.destroy();
|
||||
w3 = false;
|
||||
}
|
||||
if (w3) {
|
||||
w3.__updateProps(props3, w3.__owl__.isMounted ? extra.fiber : fiber3, undefined, undefined, sibling);
|
||||
let pvnode = w3.__owl__.pvnode;
|
||||
pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w3.el,vn.elm);vn.elm=w3.el;w3.__remount();};
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey3 = \`ChildWidget\`;
|
||||
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['ChildWidget'];
|
||||
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
|
||||
w3 = new W3(parent, props3);
|
||||
parent.__owl__.cmap[templateId3] = w3.__owl__.id;
|
||||
let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
|
||||
let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.unmount();}}});
|
||||
const fiber = w3.__owl__.currentFiber;
|
||||
def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
c1.push(pvnode);
|
||||
w3.__owl__.pvnode = pvnode;
|
||||
}
|
||||
sibling = w3.__owl__.currentFiber || sibling;
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`other directives with t-component t-on with getter as handler 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
|
||||
@@ -836,48 +836,6 @@ describe("lifecycle hooks", () => {
|
||||
"parent:patched"
|
||||
]);
|
||||
});
|
||||
|
||||
test("willPatch/patched hook with t-keepalive", async () => {
|
||||
// we make sure here that willPatch/patched is only called if widget is in
|
||||
// dom, mounted
|
||||
const steps: string[] = [];
|
||||
|
||||
class ChildWidget extends Widget {
|
||||
willPatch() {
|
||||
steps.push("child:willPatch");
|
||||
}
|
||||
patched() {
|
||||
steps.push("child:patched");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("child:willUnmount");
|
||||
}
|
||||
mounted() {
|
||||
steps.push("child:mounted");
|
||||
}
|
||||
}
|
||||
class ParentWidget extends Widget {
|
||||
static template = xml`
|
||||
<div>
|
||||
<ChildWidget t-if="state.flag" v="state.n" t-keepalive="1"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { ChildWidget };
|
||||
state = useState({ n: 1, flag: true });
|
||||
}
|
||||
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
|
||||
expect(env.qweb.templates[ParentWidget.template].fn.toString()).toMatchSnapshot();
|
||||
expect(steps).toEqual(["child:mounted"]);
|
||||
widget.state.flag = false;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["child:mounted", "child:willUnmount"]);
|
||||
widget.state.flag = true;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["child:mounted", "child:willUnmount", "child:mounted"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("destroy method", () => {
|
||||
@@ -1287,97 +1245,6 @@ describe("composition", () => {
|
||||
expect(fixture.innerHTML).toBe("<div><div>0<button>Inc</button></div></div>");
|
||||
});
|
||||
|
||||
test("sub components with t-keepalive are not destroyed if no longer in dom", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
`<div><t t-if="state.ok"><Counter t-keepalive="1"/></t></div>`
|
||||
);
|
||||
class ParentWidget extends Widget {
|
||||
state = useState({ ok: true });
|
||||
static components = { Counter };
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
const button = fixture.getElementsByTagName("button")[0];
|
||||
await button.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>1<button>Inc</button></div></div>");
|
||||
const counter = children(widget)[0];
|
||||
expect(counter.__owl__.isMounted).toBe(true);
|
||||
|
||||
widget.state.ok = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(counter.__owl__.isMounted).toBe(false);
|
||||
|
||||
widget.state.ok = true;
|
||||
await nextTick();
|
||||
expect(counter.__owl__.isMounted).toBe(true);
|
||||
expect(fixture.innerHTML).toBe("<div><div>1<button>Inc</button></div></div>");
|
||||
});
|
||||
|
||||
test("sub components dom state with t-keepalive is preserved", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
`<div><t t-if="state.ok"><InputWidget t-keepalive="1"/></t></div>`
|
||||
);
|
||||
class InputWidget extends Widget {}
|
||||
class ParentWidget extends Widget {
|
||||
state = useState({ ok: true });
|
||||
static components = { InputWidget };
|
||||
}
|
||||
env.qweb.addTemplate("InputWidget", "<input/>");
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
const input = fixture.getElementsByTagName("input")[0];
|
||||
input.value = "test";
|
||||
widget.state.ok = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
widget.state.ok = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><input></div>");
|
||||
const input2 = fixture.getElementsByTagName("input")[0];
|
||||
expect(input).toBe(input2);
|
||||
expect(input2.value).toBe("test");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("sub widget with t-ref and t-keepalive", async () => {
|
||||
class ChildWidget extends Widget {
|
||||
static template = xml`<span>Hello</span>`;
|
||||
}
|
||||
class ParentWidget extends Widget {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.ok"><ChildWidget t-ref="child" t-keepalive="1"/></t>
|
||||
</div>
|
||||
`;
|
||||
static components = { ChildWidget };
|
||||
state = useState({ ok: true });
|
||||
child = useRef("child");
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
let child = children(widget)[0];
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>Hello</span></div>");
|
||||
expect(widget.child.comp).toEqual(child);
|
||||
|
||||
widget.state.ok = false;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(widget.child.comp).toEqual(child);
|
||||
|
||||
widget.state.ok = true;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>Hello</span></div>");
|
||||
expect(widget.child.comp).toEqual(child);
|
||||
});
|
||||
|
||||
test("sub components rendered in a loop", async () => {
|
||||
env.qweb.addTemplate("ChildWidget", `<span><t t-esc="props.n"/></span>`);
|
||||
class ChildWidget extends Widget {}
|
||||
|
||||
Reference in New Issue
Block a user