mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
wip
This commit is contained in:
@@ -12,7 +12,7 @@ import {
|
||||
TARGET,
|
||||
} from "./reactivity";
|
||||
import { STATUS } from "./status";
|
||||
import { batched, Callback } from "./utils";
|
||||
import { Callback } from "./utils";
|
||||
|
||||
let currentNode: ComponentNode | null = null;
|
||||
|
||||
@@ -56,7 +56,7 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
|
||||
const node = getCurrent();
|
||||
let render = batchedRenderFunctions.get(node)!;
|
||||
if (!render) {
|
||||
render = batched(node.render.bind(node, false));
|
||||
render = node.render.bind(node, false);
|
||||
batchedRenderFunctions.set(node, render);
|
||||
// manual implementation of onWillDestroy to break cyclic dependency
|
||||
node.willDestroy.push(clearReactivesForCallback.bind(null, render));
|
||||
@@ -140,11 +140,22 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
fiber.root!.mounted.push(fiber);
|
||||
}
|
||||
const component = this.component;
|
||||
try {
|
||||
await Promise.all(this.willStart.map((f) => f.call(component)));
|
||||
} catch (e) {
|
||||
handleError({ node: this, error: e });
|
||||
return;
|
||||
if (this.willStart.length) {
|
||||
let willStartResults;
|
||||
try {
|
||||
willStartResults = this.willStart.map((f) => f.call(component));
|
||||
} catch (e) {
|
||||
handleError({ node: this, error: e });
|
||||
return;
|
||||
}
|
||||
if (willStartResults.some((result) => result instanceof Promise)) {
|
||||
try {
|
||||
await Promise.all(willStartResults);
|
||||
} catch (e) {
|
||||
handleError({ node: this, error: e });
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.status === STATUS.NEW && this.fiber === fiber) {
|
||||
fiber.render();
|
||||
@@ -153,7 +164,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
|
||||
async render(deep: boolean) {
|
||||
let current = this.fiber;
|
||||
if (current && (current.root!.locked || (current as any).bdom === true)) {
|
||||
if (current && (current.root!.locked )) {
|
||||
await Promise.resolve();
|
||||
// situation may have changed after the microtask tick
|
||||
current = this.fiber;
|
||||
@@ -175,26 +186,28 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
const fiber = makeRootFiber(this);
|
||||
fiber.deep = deep;
|
||||
this.fiber = fiber;
|
||||
const scheduler = this.app.scheduler;
|
||||
|
||||
this.app.scheduler.addFiber(fiber);
|
||||
await Promise.resolve();
|
||||
if (this.status === STATUS.DESTROYED) {
|
||||
return;
|
||||
}
|
||||
// We only want to actually render the component if the following two
|
||||
// conditions are true:
|
||||
// * this.fiber: it could be null, in which case the render has been cancelled
|
||||
// * (current || !fiber.parent): if current is not null, this means that the
|
||||
// render function was called when a render was already occurring. In this
|
||||
// case, the pending rendering was cancelled, and the fiber needs to be
|
||||
// rendered to complete the work. If current is null, we check that the
|
||||
// fiber has no parent. If that is the case, the fiber was downgraded from
|
||||
// a root fiber to a child fiber in the previous microtick, because it was
|
||||
// embedded in a rendering coming from above, so the fiber will be rendered
|
||||
// in the next microtick anyway, so we should not render it again.
|
||||
if (this.fiber === fiber && (current || !fiber.parent)) {
|
||||
fiber.render();
|
||||
}
|
||||
scheduler.requestAnimationFrame(() => {
|
||||
if (this.status === STATUS.DESTROYED) {
|
||||
return;
|
||||
}
|
||||
// We only want to actually render the component if the following two
|
||||
// conditions are true:
|
||||
// * this.fiber: it could be null, in which case the render has been cancelled
|
||||
// * (current || !fiber.parent): if current is not null, this means that the
|
||||
// render function was called when a render was already occurring. In this
|
||||
// case, the pending rendering was cancelled, and the fiber needs to be
|
||||
// rendered to complete the work. If current is null, we check that the
|
||||
// fiber has no parent. If that is the case, the fiber was downgraded from
|
||||
// a root fiber to a child fiber in the previous microtick, because it was
|
||||
// embedded in a rendering coming from above, so the fiber will be rendered
|
||||
// in the next microtick anyway, so we should not render it again.
|
||||
if (this.fiber === fiber && (current || !fiber.parent)) {
|
||||
fiber.render();
|
||||
}
|
||||
});
|
||||
scheduler.addFiber(fiber);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
@@ -247,14 +260,17 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
}
|
||||
}
|
||||
currentNode = null;
|
||||
const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
|
||||
await prom;
|
||||
if (fiber !== this.fiber) {
|
||||
return;
|
||||
if (this.willUpdateProps.length) {
|
||||
const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
|
||||
if (willUpdatePropsResults.some((res) => res instanceof Promise)) {
|
||||
await Promise.all(willUpdatePropsResults);
|
||||
}
|
||||
if (fiber !== this.fiber) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
component.props = props;
|
||||
this.props = rawProps;
|
||||
fiber.render();
|
||||
const parentRoot = parentFiber.root!;
|
||||
if (this.willPatch.length) {
|
||||
parentRoot.willPatch.push(fiber);
|
||||
@@ -262,6 +278,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
if (this.patched.length) {
|
||||
parentRoot.patched.push(fiber);
|
||||
}
|
||||
fiber.render();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -20,6 +20,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
|
||||
// which means any arbitrary code can be run in onWillDestroy, which may
|
||||
// trigger new renderings
|
||||
root.locked = true;
|
||||
debugger
|
||||
root.setCounter(root.counter + 1 - cancelFibers(current.children));
|
||||
root.locked = false;
|
||||
current.children = [];
|
||||
@@ -151,6 +152,7 @@ export class RootFiber extends Fiber {
|
||||
complete() {
|
||||
const node = this.node;
|
||||
this.locked = true;
|
||||
debugger
|
||||
let current: Fiber | undefined = undefined;
|
||||
try {
|
||||
// Step 1: calling all willPatch lifecycle hooks
|
||||
|
||||
+30
-13
@@ -11,12 +11,29 @@ export class Scheduler {
|
||||
// interactions with other code, such as test frameworks that override them
|
||||
static requestAnimationFrame = window.requestAnimationFrame.bind(window);
|
||||
tasks: Set<RootFiber> = new Set();
|
||||
requestAnimationFrame: Window["requestAnimationFrame"];
|
||||
_requestAnimationFrame: Window["requestAnimationFrame"];
|
||||
cbs: Function[] = [];
|
||||
frame: number = 0;
|
||||
delayedRenders: Fiber[] = [];
|
||||
shouldFlush = false;
|
||||
|
||||
constructor() {
|
||||
this.requestAnimationFrame = Scheduler.requestAnimationFrame;
|
||||
this._requestAnimationFrame = Scheduler.requestAnimationFrame;
|
||||
}
|
||||
|
||||
requestAnimationFrame(cb: Function) {
|
||||
this.cbs.push(cb);
|
||||
if (this.frame === 0) {
|
||||
this.frame = this._requestAnimationFrame(() => {
|
||||
// note that some callbacks may be added to this.cbs while this look is
|
||||
// running, and they will be executed immediately
|
||||
for (let i = 0; i < this.cbs.length; i++) {
|
||||
this.cbs[i]();
|
||||
}
|
||||
this.cbs = [];
|
||||
this.frame = 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
addFiber(fiber: Fiber) {
|
||||
@@ -37,18 +54,18 @@ export class Scheduler {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.frame === 0) {
|
||||
this.frame = this.requestAnimationFrame(() => {
|
||||
this.frame = 0;
|
||||
this.tasks.forEach((fiber) => this.processFiber(fiber));
|
||||
for (let task of this.tasks) {
|
||||
if (task.node.status === STATUS.DESTROYED) {
|
||||
this.tasks.delete(task);
|
||||
}
|
||||
// if (this.shouldFlush === false) {
|
||||
// this.shouldFlush = true;
|
||||
this.requestAnimationFrame(() => {
|
||||
// this.shouldFlush = false;
|
||||
this.tasks.forEach((fiber) => this.processFiber(fiber));
|
||||
for (let task of this.tasks) {
|
||||
if (task.node.status === STATUS.DESTROYED) {
|
||||
this.tasks.delete(task);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// }
|
||||
}
|
||||
|
||||
processFiber(fiber: RootFiber) {
|
||||
|
||||
@@ -10,6 +10,7 @@ export type Callback = () => void;
|
||||
export function batched(callback: Callback): Callback {
|
||||
let called = false;
|
||||
return async () => {
|
||||
debugger;
|
||||
// This await blocks all calls to the callback here, then releases them sequentially
|
||||
// in the next microtick. This line decides the granularity of the batch.
|
||||
await Promise.resolve();
|
||||
|
||||
@@ -131,6 +131,19 @@ exports[`can catch errors an error in onWillDestroy 2`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors an error in onWillDestroy 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div>abc</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors an error in onWillDestroy, variation 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
|
||||
@@ -2235,13 +2235,13 @@ test("concurrent renderings scenario 16", async () => {
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"B:willStart",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:rendered",
|
||||
"C:mounted",
|
||||
"B:mounted",
|
||||
"A:mounted",
|
||||
@@ -2906,9 +2906,9 @@ test("two sequential renderings before an animation frame", async () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -2920,13 +2920,7 @@ test("two sequential renderings before an animation frame", async () => {
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
expect(fixture.innerHTML).toBe("0");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
]).toBeLogged();
|
||||
expect([]).toBeLogged();
|
||||
|
||||
parent.state.value = 2;
|
||||
// enough microticks to wait for render + willupdateprops
|
||||
@@ -2936,17 +2930,21 @@ test("two sequential renderings before an animation frame", async () => {
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
expect(fixture.innerHTML).toBe("0");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
]).toBeLogged();
|
||||
expect([]).toBeLogged();
|
||||
|
||||
await nextTick();
|
||||
// we check here that the willPatch and patched hooks are called only once
|
||||
expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
test("t-key on dom node having a component", async () => {
|
||||
@@ -3736,15 +3734,15 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
|
||||
"A:setup",
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"C:setup",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"D:setup",
|
||||
"C:rendered",
|
||||
"D:willRender",
|
||||
"D:rendered",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:rendered",
|
||||
"D:mounted",
|
||||
"C:mounted",
|
||||
"B:mounted",
|
||||
@@ -3753,7 +3751,7 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
|
||||
// Start a render in C
|
||||
c!.render(true);
|
||||
await nextMicroTick();
|
||||
expect(["C:willRender", "C:rendered"]).toBeLogged();
|
||||
expect(["C:willRender", "D:willRender", "D:rendered", "C:rendered"]).toBeLogged();
|
||||
// Start a render in A such that C is already rendered, but D will be delayed
|
||||
// (because A is rendering) then cancelled (when the render from A reaches C)
|
||||
a.render(true);
|
||||
@@ -3761,13 +3759,13 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
|
||||
await nextTick();
|
||||
expect([
|
||||
"A:willRender",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"D:willRender",
|
||||
"D:rendered",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:rendered",
|
||||
"A:willPatch",
|
||||
"B:willPatch",
|
||||
"C:willPatch",
|
||||
|
||||
@@ -3,10 +3,10 @@ import {
|
||||
onError,
|
||||
onMounted,
|
||||
onPatched,
|
||||
onWillPatch,
|
||||
onWillStart,
|
||||
onWillRender,
|
||||
onRendered,
|
||||
onWillPatch,
|
||||
onWillRender,
|
||||
onWillStart,
|
||||
onWillUnmount,
|
||||
useState,
|
||||
xml,
|
||||
@@ -14,8 +14,8 @@ import {
|
||||
import {
|
||||
logStep,
|
||||
makeTestFixture,
|
||||
nextTick,
|
||||
nextMicroTick,
|
||||
nextTick,
|
||||
snapshotEverything,
|
||||
useLogLifecycle,
|
||||
} from "../helpers";
|
||||
@@ -1251,9 +1251,9 @@ describe("can catch errors", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -1276,7 +1276,7 @@ describe("can catch errors", () => {
|
||||
expect(fixture.innerHTML).toBe("2");
|
||||
});
|
||||
|
||||
test("an error in onWillDestroy, variation", async () => {
|
||||
test.only("an error in onWillDestroy, variation", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>abc</div>`;
|
||||
setup() {
|
||||
@@ -1314,27 +1314,26 @@ describe("can catch errors", () => {
|
||||
]).toBeLogged();
|
||||
|
||||
parent.state.hasChild = true;
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
await nextTick();
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:mounted",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
parent.state.hasChild = false;
|
||||
await nextTick();
|
||||
expect([
|
||||
"Child:willDestroy",
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
"Child:willUnmount",
|
||||
"Child:willDestroy",
|
||||
]).toBeLogged();
|
||||
expect(fixture.innerHTML).toBe("2");
|
||||
});
|
||||
|
||||
@@ -461,9 +461,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -474,9 +474,9 @@ describe("lifecycle hooks", () => {
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
@@ -520,9 +520,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -638,9 +638,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -694,13 +694,13 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"GrandChild:setup",
|
||||
"GrandChild:willStart",
|
||||
"Child:rendered",
|
||||
"GrandChild:willRender",
|
||||
"GrandChild:rendered",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"GrandChild:mounted",
|
||||
"Child:mounted",
|
||||
@@ -803,11 +803,11 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"GrandChild:setup",
|
||||
"GrandChild:willStart",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
]).toBeLogged();
|
||||
|
||||
app.destroy();
|
||||
@@ -843,9 +843,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -886,9 +886,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -898,9 +898,9 @@ describe("lifecycle hooks", () => {
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
@@ -943,9 +943,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -1060,21 +1060,21 @@ describe("lifecycle hooks", () => {
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"B:willStart",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"B:rendered",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"C:willRender",
|
||||
"D:setup",
|
||||
"D:willStart",
|
||||
"E:setup",
|
||||
"E:willStart",
|
||||
"C:rendered",
|
||||
"D:willRender",
|
||||
"D:rendered",
|
||||
"E:setup",
|
||||
"E:willStart",
|
||||
"E:willRender",
|
||||
"E:rendered",
|
||||
"C:rendered",
|
||||
"A:rendered",
|
||||
"E:mounted",
|
||||
"D:mounted",
|
||||
"C:mounted",
|
||||
@@ -1089,9 +1089,9 @@ describe("lifecycle hooks", () => {
|
||||
"C:willRender",
|
||||
"F:setup",
|
||||
"F:willStart",
|
||||
"C:rendered",
|
||||
"F:willRender",
|
||||
"F:rendered",
|
||||
"C:rendered",
|
||||
"C:willPatch",
|
||||
"E:willUnmount",
|
||||
"E:willDestroy",
|
||||
@@ -1124,9 +1124,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -1148,9 +1148,9 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:mounted",
|
||||
"Parent:patched",
|
||||
@@ -1171,7 +1171,7 @@ describe("lifecycle hooks", () => {
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span></span>");
|
||||
expect(fixture.innerHTML).toBe("<span>Patched</span>");
|
||||
expect([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
@@ -1180,11 +1180,13 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:mounted",
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>Patched</span>");
|
||||
expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
|
||||
expect([]).toBeLogged();
|
||||
});
|
||||
|
||||
test("render in patched", async () => {
|
||||
@@ -1215,7 +1217,7 @@ describe("lifecycle hooks", () => {
|
||||
|
||||
parent.render();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span></span>");
|
||||
expect(fixture.innerHTML).toBe("<span>Patched</span>");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
@@ -1223,11 +1225,13 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:patched",
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>Patched</span>");
|
||||
expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
|
||||
expect([]).toBeLogged();
|
||||
});
|
||||
|
||||
test("render in willPatch", async () => {
|
||||
@@ -1265,12 +1269,15 @@ describe("lifecycle hooks", () => {
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
]).toBeLogged();
|
||||
|
||||
await nextTick();
|
||||
expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
expect(fixture.innerHTML).toBe("<span>Patched</span>");
|
||||
});
|
||||
|
||||
@@ -1333,6 +1340,9 @@ describe("lifecycle hooks", () => {
|
||||
static template = xml`child`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onWillStart(async () => {
|
||||
await nextMicroTick();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -152,7 +152,7 @@ describe("reactivity in lifecycle", () => {
|
||||
const prom = mount(Comp, fixture);
|
||||
(STATE as any).val = 2;
|
||||
await prom;
|
||||
expect(steps).toEqual([2]);
|
||||
expect(steps).toEqual([1, 2]);
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, mount, onRendered, onWillUpdateProps, useState, xml } from "../../src";
|
||||
import {
|
||||
makeTestFixture,
|
||||
snapshotEverything,
|
||||
nextTick,
|
||||
useLogLifecycle,
|
||||
makeDeferred,
|
||||
nextMicroTick,
|
||||
makeTestFixture,
|
||||
nextTick,
|
||||
snapshotEverything,
|
||||
useLogLifecycle,
|
||||
} from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
@@ -47,9 +46,9 @@ describe("rendering semantics", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -139,11 +138,16 @@ describe("rendering semantics", () => {
|
||||
expect(childN).toBe(1);
|
||||
});
|
||||
|
||||
test("render with deep=true followed by render with deep=false work as expected", async () => {
|
||||
test.only("render with deep=true followed by render with deep=false work as expected", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`child<t t-esc="env.getValue()"/>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onRendered(() => {
|
||||
if (value === 4) {
|
||||
parent.state.value = "B";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,9 +177,9 @@ describe("rendering semantics", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -184,33 +188,39 @@ describe("rendering semantics", () => {
|
||||
parent.render(true);
|
||||
|
||||
// wait for child to be rendered, but dom not yet patched
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
]).toBeLogged();
|
||||
// await nextMicroTick();
|
||||
// await nextMicroTick();
|
||||
// await nextMicroTick();
|
||||
// expect([
|
||||
// "Parent:willRender",
|
||||
// "Child:willUpdateProps",
|
||||
// "Child:willRender",
|
||||
// "Child:rendered",
|
||||
// "Parent:rendered",
|
||||
// ]).toBeLogged();
|
||||
|
||||
parent.state.value = "B";
|
||||
// parent.state.value = "B";
|
||||
|
||||
await nextTick();
|
||||
// await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("parentBchild4");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willRender",
|
||||
"Child:willUpdateProps",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
expect(fixture.innerHTML).toBe("parentBchild4");
|
||||
});
|
||||
|
||||
test("props are reactive", async () => {
|
||||
@@ -241,9 +251,9 @@ describe("rendering semantics", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -284,9 +294,9 @@ describe("rendering semantics", () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
@@ -372,13 +382,13 @@ describe("rendering semantics", () => {
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"B:willStart",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:rendered",
|
||||
"C:mounted",
|
||||
"B:mounted",
|
||||
"A:mounted",
|
||||
@@ -437,13 +447,13 @@ test("force render in case of existing render", async () => {
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"B:willStart",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:rendered",
|
||||
"C:mounted",
|
||||
"B:mounted",
|
||||
"A:mounted",
|
||||
@@ -466,9 +476,9 @@ test("force render in case of existing render", async () => {
|
||||
expect([
|
||||
"B:willRender",
|
||||
"C:willUpdateProps",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"B:rendered",
|
||||
"A:willPatch",
|
||||
"B:willPatch",
|
||||
"C:willPatch",
|
||||
@@ -509,9 +519,9 @@ test("children, default props and renderings", async () => {
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Parent:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
|
||||
Reference in New Issue
Block a user