NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] runtime, compiler: fix refs getting set or unset incorrectly

Browse Source 
Previously, refs could get set to null incorrectly, or could stay set
when they shouldn't. This was caused by the fact that singleRefSetter
and multiRefSetters are created on every render, meaning that any render
that did not affect the status of the ref (mounted or not), would
overwrite the previous ref setter, including its closure, causing the
captured `_el` or `count` to be lost. This means that on a subsequent
render that did affect the status of the ref, the singleRefSetter would
consider that it did not set the ref, and so shouldn't unset it, causing
it to incorrectly stay keep the element, while in multiRefSetter, the
opposite problem occured: the count would be 0 on removal, causing it to
believe that it was the first call in the corresponding patch that
affected the ref, when in fact, the closure is already stale, because it
was created from the previous render, and the fresh multiRefSetter from
the latest render may already have been called by an element with that
ref that came earlier in the template.

This commit changes the ref setting strategy to work around the issue of
stale closures: we define a setRef method on ComponentNode that is
always called, this method ignores calls with `null`, meaning that the
refs object on the ComponentNode never reverts to a null value for any
key. Instead, the useRef hook will check whether the element that the
ref points to is still mounted, and return null if not.
This commit is contained in:
Samuel Degueldre
2023-03-06 13:24:39 +01:00
committed by Géry Debongnie
parent 7ac81ed5fe
commit 975ed32f0b
13 changed files with 177 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/compiler/__snapshots__/misc.test.ts.snap
+3 -4
View File
@@ -182,7 +182,7 @@ exports[`misc other complex template 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey, singleRefSetter } = helpers;
let { prepareList, withKey } = helpers;
const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
@@ -217,9 +217,6 @@ exports[`misc other complex template 1`] = `
let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const ref1 = singleRefSetter(refs, \`search_input\`);
const ref2 = singleRefSetter(refs, \`settings_menu\`);
let b2,b4,b14,b17,b22,b23,b24,b25;
let attr1 = \`/runbot/\${ctx['project'].slug}\`;
let txt1 = ctx['project'].name;
@@ -280,7 +277,9 @@ exports[`misc other complex template 1`] = `
let prop2 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
let hdlr4 = [ctx['updateFilter'], ctx];
let hdlr5 = [ctx['updateFilter'], ctx];
let ref1 = (el) => this.__owl__.setRef((\`search_input\`), el);
let hdlr6 = [ctx['clearSearch'], ctx];
let ref2 = (el) => this.__owl__.setRef((\`settings_menu\`), el);
if (ctx['triggers']) {
ctx = Object.create(ctx);
const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
tests/compiler/__snapshots__/t_ref.test.ts.snap
+9 -22
View File
@@ -4,14 +4,12 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const v1 = ctx['id'];
let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
return block1([ref1]);
}
}"
@@ -21,14 +19,12 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const v1 = ctx['id'];
let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
return block1([ref1]);
}
}"
@@ -38,13 +34,11 @@ exports[`t-ref can get a ref on a node 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const ref1 = singleRefSetter(refs, \`myspan\`);
let ref1 = (el) => this.__owl__.setRef((\`myspan\`), el);
return block1([ref1]);
}
}"
@@ -69,13 +63,11 @@ exports[`t-ref ref in a t-call 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const ref1 = singleRefSetter(refs, \`name\`);
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
return block1([ref1]);
}
}"
@@ -85,16 +77,14 @@ exports[`t-ref ref in a t-if 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const ref1 = singleRefSetter(refs, \`name\`);
let b2;
if (ctx['condition']) {
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
b2 = block2([ref1]);
}
return block1([], [b2]);
@@ -106,13 +96,12 @@ exports[`t-ref refs in a loop 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, singleRefSetter, withKey } = helpers;
let { prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block2; i1++) {
@@ -120,7 +109,7 @@ exports[`t-ref refs in a loop 1`] = `
const key1 = ctx['item'];
const tKey_1 = ctx['item'];
const v1 = ctx['item'];
let ref1 = singleRefSetter(refs, (v1));
let ref1 = (el) => this.__owl__.setRef(((v1)), el);
let txt1 = ctx['item'];
c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
}
@@ -134,19 +123,17 @@ exports[`t-ref two refs, one in a t-if 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { singleRefSetter } = helpers;
let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = this.__owl__.refs;
const ref1 = singleRefSetter(refs, \`name\`);
const ref2 = singleRefSetter(refs, \`p\`);
let b2;
if (ctx['condition']) {
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
b2 = block2([ref1]);
}
let ref2 = (el) => this.__owl__.setRef((\`p\`), el);
return block1([ref2], [b2]);
}
}"
tests/compiler/t_ref.test.ts
+49 -36
View File
@@ -2,6 +2,17 @@ import { TemplateSet } from "../../src/runtime/template_set";
import { mount } from "../../src/runtime/blockdom";
import { renderToBdom, snapshotEverything } from "../helpers";
function mockNode() {
return {
refs: {} as { [key: string]: HTMLElement | null },
setRef(name: string, value: HTMLElement | null) {
if (value) {
this.refs[name] = value;
}
},
};
}
snapshotEverything();
// -----------------------------------------------------------------------------
@@ -11,29 +22,29 @@ snapshotEverything();
describe("t-ref", () => {
test("can get a ref on a node", () => {
const template = `<div><span t-ref="myspan"/></div>`;
const refs: any = {};
const bdom = renderToBdom(template, { __owl__: { refs } });
expect(refs).toEqual({});
const node = mockNode();
const bdom = renderToBdom(template, { __owl__: node });
expect(node.refs).toEqual({});
mount(bdom, document.createElement("div"));
expect(refs.myspan.tagName).toBe("SPAN");
expect(node.refs.myspan!.tagName).toBe("SPAN");
});
test("can get a dynamic ref on a node", () => {
const template = `<div><span t-ref="myspan{{id}}"/></div>`;
const refs: any = {};
const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
expect(refs).toEqual({});
const node = mockNode();
const bdom = renderToBdom(template, { id: 3, __owl__: node });
expect(node.refs).toEqual({});
mount(bdom, document.createElement("div"));
expect(refs.myspan3.tagName).toBe("SPAN");
expect(node.refs.myspan3!.tagName).toBe("SPAN");
});
test("can get a dynamic ref on a node, alternate syntax", () => {
const template = `<div><span t-ref="myspan#{id}"/></div>`;
const refs: any = {};
const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
expect(refs).toEqual({});
const node = mockNode();
const bdom = renderToBdom(template, { id: 3, __owl__: node });
expect(node.refs).toEqual({});
mount(bdom, document.createElement("div"));
expect(refs.myspan3.tagName).toBe("SPAN");
expect(node.refs.myspan3!.tagName).toBe("SPAN");
});
test("refs in a loop", () => {
@@ -42,11 +53,11 @@ describe("t-ref", () => {
<div t-ref="{{item}}" t-key="item"><t t-esc="item"/></div>
</t>
</div>`;
const refs: any = {};
const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: { refs } });
expect(refs).toEqual({});
const node = mockNode();
const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: node });
expect(node.refs).toEqual({});
mount(bdom, document.createElement("div"));
expect(Object.keys(refs)).toEqual(["1", "2", "3"]);
expect(Object.keys(node.refs)).toEqual(["1", "2", "3"]);
});
test("ref in a t-if", () => {
@@ -57,22 +68,23 @@ describe("t-ref", () => {
</t>
</div>`;
const refs: any = {};
const node = mockNode();
// false
const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
expect(refs).toEqual({});
const bdom = renderToBdom(template, { condition: false, __owl__: node });
expect(node.refs).toEqual({});
mount(bdom, document.createElement("div"));
expect(refs).toEqual({});
expect(node.refs).toEqual({});
// true now
const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
bdom.patch(bdom2, true);
expect(refs.name.tagName).toBe("SPAN");
expect(node.refs.name!.tagName).toBe("SPAN");
// false again
const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
bdom.patch(bdom3, true);
expect(refs).toEqual({ name: null });
const span = node.refs.name;
expect(span!.ownerDocument.contains(span)).toBe(false);
});
test("two refs, one in a t-if", () => {
@@ -84,40 +96,41 @@ describe("t-ref", () => {
<p t-ref="p"/>
</div>`;
const refs: any = {};
const node = mockNode();
// false
const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
expect(Object.keys(refs)).toEqual([]);
const bdom = renderToBdom(template, { condition: false, __owl__: node });
expect(Object.keys(node.refs)).toEqual([]);
mount(bdom, document.createElement("div"));
expect(Object.keys(refs)).toEqual(["p"]);
expect(Object.keys(node.refs)).toEqual(["p"]);
// true now
const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
bdom.patch(bdom2, true);
expect(Object.keys(refs)).toEqual(["p", "name"]);
expect(Object.keys(node.refs)).toEqual(["p", "name"]);
// false again
const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
bdom.patch(bdom3, true);
expect(Object.keys(refs)).toEqual(["p", "name"]);
expect(refs.name).toBeNull();
expect(Object.keys(node.refs)).toEqual(["p", "name"]);
const span = node.refs.name;
expect(span!.ownerDocument.contains(span)).toBe(false);
});
test("ref in a t-call", () => {
const main = `<div><t t-call="sub"/></div>`;
const sub = `<div>1<span t-ref="name"/>2</div>`;
const refs: any = {};
const node = mockNode();
const app = new TemplateSet();
app.addTemplate("main", main);
app.addTemplate("sub", sub);
const comp = { __owl__: { refs } };
const comp = { __owl__: node };
const bdom = app.getTemplate("main").call(comp, comp, {});
mount(bdom, document.createElement("div"));
expect(refs.name.tagName).toBe("SPAN");
expect(node.refs.name!.tagName).toBe("SPAN");
});
});