mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
add possibility to deep rendering
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
) {
|
) {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user