add possibility to deep rendering

This commit is contained in:
Géry Debongnie
2021-11-18 21:58:43 +01:00
parent dfead2836e
commit d8201b8955
5 changed files with 69 additions and 4 deletions
+2 -2
View File
@@ -28,7 +28,7 @@ export class Component {
setup() {} setup() {}
render(): Promise<void> { render(deep: boolean = false): Promise<void> {
return this.__owl__.render(); return this.__owl__.render(deep);
} }
} }
+3 -2
View File
@@ -48,7 +48,7 @@ export function component(
const parentFiber = ctx.fiber!; const parentFiber = ctx.fiber!;
if (node) { if (node) {
if (hasSlots || arePropsDifferent(node.component.props, props)) { if (hasSlots || parentFiber.deep || arePropsDifferent(node.component.props, props)) {
node.updateAndRender(props, parentFiber); node.updateAndRender(props, parentFiber);
} }
} else { } else {
@@ -148,7 +148,7 @@ export class ComponentNode<T extends typeof Component = typeof Component>
} }
} }
async render() { async render(deep: boolean = false) {
let fiber = this.fiber; let fiber = this.fiber;
if (fiber && !fiber.bdom && !fibersInError.has(fiber)) { if (fiber && !fiber.bdom && !fibersInError.has(fiber)) {
return fiber.root.promise; return fiber.root.promise;
@@ -158,6 +158,7 @@ export class ComponentNode<T extends typeof Component = typeof Component>
return; return;
} }
fiber = makeRootFiber(this); fiber = makeRootFiber(this);
fiber.deep = deep;
this.app.scheduler.addFiber(fiber); this.app.scheduler.addFiber(fiber);
await Promise.resolve(); await Promise.resolve();
if (this.status === STATUS.DESTROYED) { if (this.status === STATUS.DESTROYED) {
+1
View File
@@ -67,6 +67,7 @@ export class Fiber {
parent: Fiber | null; parent: Fiber | null;
children: Fiber[] = []; children: Fiber[] = [];
appliedToDom = false; appliedToDom = false;
deep: boolean = false;
constructor(node: ComponentNode, parent: Fiber | null) { constructor(node: ComponentNode, parent: Fiber | null) {
this.node = node; this.node = node;
@@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering semantics can force a render to update sub tree 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
return text(\`child\`);
}
}"
`;
exports[`rendering semantics can force a render to update sub tree 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
let b2 = text(ctx['state'].value);
let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
return multi([b2, b3]);
}
}"
`;
exports[`rendering semantics can render a parent without rendering child 1`] = ` exports[`rendering semantics can render a parent without rendering child 1`] = `
"function anonymous(bdom, helpers "function anonymous(bdom, helpers
) { ) {
+37
View File
@@ -46,4 +46,41 @@ describe("rendering semantics", () => {
expect(parentN).toBe(2); expect(parentN).toBe(2);
expect(childN).toBe(1); expect(childN).toBe(1);
}); });
test("can force a render to update sub tree", async () => {
let childN = 0;
let parentN = 0;
class Child extends Component {
static template = xml`child`;
setup() {
onRender(() => childN++);
}
}
class Parent extends Component {
static template = xml`
<t t-esc="state.value"/>
<Child/>
`;
static components = { Child };
state = { value: "A" };
setup() {
onRender(() => parentN++);
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("Achild");
expect(parentN).toBe(1);
expect(childN).toBe(1);
parent.state.value = "B";
parent.render(true);
await nextTick();
expect(fixture.innerHTML).toBe("Bchild");
expect(parentN).toBe(2);
expect(childN).toBe(2);
});
}); });