Implement commitMutations for insert/move/remove effects in tree order
Adds commitMutations function to reconcile.ts that processes fiber effects in correct order: removes (reverse), inserts+moves (left-to-right with insertBefore), updates (top-down). Integrates key-based reconciliation pipeline into render() via reconcileNode, resolveUNode, and createFiberForInsert.
This commit is contained in:
382
test/commit-mutations.test.ts
Normal file
382
test/commit-mutations.test.ts
Normal file
@@ -0,0 +1,382 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { h } from "../src/core/h.js";
|
||||
import { createRoot as createHostRoot } from "../src/host/config.js";
|
||||
import type { HostConfig } from "../src/host/config.js";
|
||||
import { commitMutations, reconcileChildren } from "../src/host/reconcile.js";
|
||||
import type { CommitContext, ChildClassification } from "../src/host/reconcile.js";
|
||||
import type { Fiber } from "../src/host/fiber.js";
|
||||
|
||||
function makeHost(): {
|
||||
host: HostConfig<string, string, Record<string, unknown>>;
|
||||
operations: string[];
|
||||
instances: { tag: string; props: Record<string, unknown> }[];
|
||||
} {
|
||||
const operations: string[] = [];
|
||||
const instances: { tag: string; props: Record<string, unknown> }[] = [];
|
||||
|
||||
const host: HostConfig<string, string, Record<string, unknown>> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: (tag, props) => {
|
||||
const id = `${tag}_${instances.length}`;
|
||||
instances.push({ tag, props });
|
||||
return id;
|
||||
},
|
||||
createTextInstance: (text) => {
|
||||
return `text:${text}`;
|
||||
},
|
||||
appendChild: (parent, child) => {
|
||||
operations.push(`appendChild(${parent}, ${child})`);
|
||||
},
|
||||
insertBefore: (parent, child, before) => {
|
||||
operations.push(`insertBefore(${parent}, ${child}, ${before})`);
|
||||
},
|
||||
removeChild: (parent, child) => {
|
||||
operations.push(`removeChild(${parent}, ${child})`);
|
||||
},
|
||||
prepareUpdate: (_instance, _tag, prevProps, nextProps) => {
|
||||
const changed = Object.keys(nextProps).some(
|
||||
(k) => prevProps[k] !== nextProps[k],
|
||||
) || Object.keys(prevProps).some(
|
||||
(k) => !(k in nextProps),
|
||||
);
|
||||
return changed ? { prevProps, nextProps } : null;
|
||||
},
|
||||
commitUpdate: (instance, _payload, _tag, _prevProps, nextProps) => {
|
||||
operations.push(`commitUpdate(${instance})`);
|
||||
},
|
||||
};
|
||||
return { host, operations, instances };
|
||||
}
|
||||
|
||||
describe("commitMutations", () => {
|
||||
it("adding a child calls host.appendChild", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
expect(operations.some(op => op.includes("appendChild") || op.includes("insertBefore"))).toBe(true);
|
||||
});
|
||||
|
||||
it("removing a child calls host.removeChild", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A")));
|
||||
|
||||
expect(operations.some(op => op.includes("removeChild"))).toBe(true);
|
||||
});
|
||||
|
||||
it("reordering children calls host.insertBefore for moved children", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B"), h("li", { key: "c" }, "C")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "c" }, "C"), h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
expect(operations.some(op => op.includes("insertBefore"))).toBe(true);
|
||||
});
|
||||
|
||||
it("mixed add+remove+update operations apply in correct order", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a", color: "red" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "a", color: "blue" }, "A"), h("li", { key: "c" }, "C")));
|
||||
|
||||
const removeIdx = operations.findIndex(op => op.includes("removeChild"));
|
||||
const insertIdx = operations.findIndex(op => op.includes("appendChild") || op.includes("insertBefore"));
|
||||
const updateIdx = operations.findIndex(op => op.includes("commitUpdate"));
|
||||
|
||||
if (removeIdx !== -1 && insertIdx !== -1) {
|
||||
expect(removeIdx).toBeLessThan(insertIdx);
|
||||
}
|
||||
if (insertIdx !== -1 && updateIdx !== -1) {
|
||||
expect(insertIdx).toBeLessThan(updateIdx);
|
||||
}
|
||||
});
|
||||
|
||||
it("insertBefore falls back to appendChild if before is null", () => {
|
||||
const hostWithoutInsertBefore: HostConfig<string, string, Record<string, unknown>> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: (tag) => `${tag}_0`,
|
||||
createTextInstance: (text) => `text:${text}`,
|
||||
appendChild: (_parent, _child) => {},
|
||||
removeChild: (_parent, _child) => {},
|
||||
prepareUpdate: () => null,
|
||||
};
|
||||
const root = createHostRoot(hostWithoutInsertBefore, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A")));
|
||||
|
||||
expect(() => {
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it("fiber tree updated: new children added, removed children pruned", () => {
|
||||
const { host } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
const ulFiber = root.rootFiber!.children[0]!;
|
||||
expect(ulFiber.children.length).toBe(2);
|
||||
expect(ulFiber.children[0]!.key).toBe("a");
|
||||
expect(ulFiber.children[1]!.key).toBe("b");
|
||||
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "c" }, "C")));
|
||||
|
||||
expect(ulFiber.children.length).toBe(2);
|
||||
const keys = ulFiber.children.map(c => c.key);
|
||||
expect(keys).toContain("a");
|
||||
expect(keys).toContain("c");
|
||||
expect(keys).not.toContain("b");
|
||||
});
|
||||
|
||||
it("fiber tree updated: moved children reordered", () => {
|
||||
const { host } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B"), h("li", { key: "c" }, "C")));
|
||||
|
||||
root.render(h("ul", null, h("li", { key: "c" }, "C"), h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
const ulFiber = root.rootFiber!.children[0]!;
|
||||
const keys = ulFiber.children.map(c => c.key);
|
||||
expect(keys).toEqual(["c", "a", "b"]);
|
||||
});
|
||||
|
||||
it("removes are committed before inserts and moves", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "c" }, "C"), h("li", { key: "a" }, "A")));
|
||||
|
||||
const removeIdx = operations.findIndex(op => op.includes("removeChild"));
|
||||
const insertIdx = operations.findIndex(op => op.includes("appendChild") || op.includes("insertBefore"));
|
||||
|
||||
if (removeIdx !== -1 && insertIdx !== -1) {
|
||||
expect(removeIdx).toBeLessThan(insertIdx);
|
||||
}
|
||||
});
|
||||
|
||||
it("updates are committed after inserts and moves", () => {
|
||||
const { host, operations } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a", color: "red" }, "A")));
|
||||
|
||||
operations.length = 0;
|
||||
root.render(h("ul", null, h("li", { key: "a", color: "blue" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
const insertIdx = operations.findIndex(op => op.includes("appendChild") || op.includes("insertBefore"));
|
||||
const updateIdx = operations.findIndex(op => op.includes("commitUpdate"));
|
||||
|
||||
if (insertIdx !== -1 && updateIdx !== -1) {
|
||||
expect(insertIdx).toBeLessThan(updateIdx);
|
||||
}
|
||||
});
|
||||
|
||||
it("removed fibers have parent set to null", () => {
|
||||
const { host } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A"), h("li", { key: "b" }, "B")));
|
||||
|
||||
const ulFiber = root.rootFiber!.children[0]!;
|
||||
const bFiber = ulFiber.children[1]!;
|
||||
|
||||
root.render(h("ul", null, h("li", { key: "a" }, "A")));
|
||||
|
||||
expect(bFiber.parent).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("commitMutations direct", () => {
|
||||
function makeFiber(key: string | undefined, tag: string, instance?: string): Fiber<string> {
|
||||
return {
|
||||
instance: instance ?? `inst-${tag}-${key ?? "nokey"}`,
|
||||
tag,
|
||||
props: {},
|
||||
key,
|
||||
children: [],
|
||||
parent: null,
|
||||
effect: null,
|
||||
signalDisposers: [],
|
||||
prevProps: null,
|
||||
};
|
||||
}
|
||||
|
||||
function makeClassification<I>(
|
||||
overrides: Partial<ChildClassification<I>> = {},
|
||||
): ChildClassification<I> {
|
||||
return {
|
||||
matched: [],
|
||||
added: [],
|
||||
removed: [],
|
||||
moves: new Map(),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
it("appendChild for added child at end position", () => {
|
||||
const ops: string[] = [];
|
||||
const parentFiber = makeFiber(undefined, "div", "parent-inst");
|
||||
|
||||
const addedFiber = makeFiber("b", "span", "span-inst");
|
||||
|
||||
const host: HostConfig<string, string, unknown> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: () => "inst",
|
||||
createTextInstance: () => "text",
|
||||
appendChild: (p, c) => ops.push(`appendChild(${p},${c})`),
|
||||
removeChild: (p, c) => ops.push(`removeChild(${p},${c})`),
|
||||
};
|
||||
|
||||
const existingFiber = makeFiber("a", "div", "a-inst");
|
||||
existingFiber.parent = parentFiber;
|
||||
parentFiber.children = [existingFiber];
|
||||
|
||||
const classification = makeClassification({
|
||||
matched: [{ oldFiber: existingFiber, newChild: { type: "div", props: {}, children: [], key: "a" }, index: 0 }],
|
||||
added: [{ newChild: { type: "span", props: {}, children: [], key: "b" }, index: 1 }],
|
||||
});
|
||||
|
||||
const commitCtx: CommitContext<string> = {
|
||||
host: host as HostConfig<string, string, unknown>,
|
||||
ctx: {},
|
||||
createFiber: () => addedFiber,
|
||||
};
|
||||
|
||||
commitMutations(parentFiber, classification, commitCtx);
|
||||
|
||||
expect(ops).toContain("appendChild(parent-inst,span-inst)");
|
||||
});
|
||||
|
||||
it("removeChild called for removed child", () => {
|
||||
const ops: string[] = [];
|
||||
const parentFiber = makeFiber(undefined, "div", "parent-inst");
|
||||
|
||||
const removedFiber = makeFiber("b", "span", "b-inst");
|
||||
removedFiber.parent = parentFiber;
|
||||
|
||||
const host: HostConfig<string, string, unknown> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: () => "inst",
|
||||
createTextInstance: () => "text",
|
||||
appendChild: () => {},
|
||||
removeChild: (p, c) => ops.push(`removeChild(${p},${c})`),
|
||||
};
|
||||
|
||||
const classification = makeClassification({
|
||||
removed: [removedFiber],
|
||||
});
|
||||
|
||||
const commitCtx: CommitContext<string> = {
|
||||
host: host as HostConfig<string, string, unknown>,
|
||||
ctx: {},
|
||||
createFiber: () => makeFiber("x", "x", "x"),
|
||||
};
|
||||
|
||||
commitMutations(parentFiber, classification, commitCtx);
|
||||
|
||||
expect(ops).toContain("removeChild(parent-inst,b-inst)");
|
||||
});
|
||||
|
||||
it("insertBefore called for moved child with staying sibling after it", () => {
|
||||
const ops: string[] = [];
|
||||
const parentFiber = makeFiber(undefined, "div", "parent-inst");
|
||||
|
||||
const aFiber = makeFiber("a", "div", "a-inst");
|
||||
aFiber.parent = parentFiber;
|
||||
const bFiber = makeFiber("b", "span", "b-inst");
|
||||
bFiber.parent = parentFiber;
|
||||
const cFiber = makeFiber("c", "p", "c-inst");
|
||||
cFiber.parent = parentFiber;
|
||||
parentFiber.children = [aFiber, bFiber, cFiber];
|
||||
|
||||
const host: HostConfig<string, string, unknown> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: () => "inst",
|
||||
createTextInstance: () => "text",
|
||||
appendChild: (p, c) => ops.push(`appendChild(${p},${c})`),
|
||||
insertBefore: (p, c, b) => ops.push(`insertBefore(${p},${c},${b})`),
|
||||
removeChild: (p, c) => ops.push(`removeChild(${p},${c})`),
|
||||
};
|
||||
|
||||
// Reorder: [b, a, c] → moves b before a (a is staying)
|
||||
const classification: ChildClassification<string> = {
|
||||
matched: [
|
||||
{ oldFiber: bFiber, newChild: { type: "span", props: {}, children: [], key: "b" }, index: 0 },
|
||||
{ oldFiber: aFiber, newChild: { type: "div", props: {}, children: [], key: "a" }, index: 1 },
|
||||
{ oldFiber: cFiber, newChild: { type: "p", props: {}, children: [], key: "c" }, index: 2 },
|
||||
],
|
||||
added: [],
|
||||
removed: [],
|
||||
moves: new Map([[0, bFiber]]),
|
||||
};
|
||||
|
||||
const commitCtx: CommitContext<string> = {
|
||||
host: host as HostConfig<string, string, unknown>,
|
||||
ctx: {},
|
||||
createFiber: () => makeFiber("x", "x", "x"),
|
||||
};
|
||||
|
||||
commitMutations(parentFiber, classification, commitCtx);
|
||||
|
||||
expect(ops.some(op => op.includes("insertBefore"))).toBe(true);
|
||||
});
|
||||
|
||||
it("updates committed top-down (parent before child)", () => {
|
||||
const ops: string[] = [];
|
||||
const parentFiber = makeFiber(undefined, "div", "parent-inst");
|
||||
parentFiber.effect = { type: "update", payload: {} };
|
||||
parentFiber.prevProps = {};
|
||||
parentFiber.props = { color: "blue" };
|
||||
|
||||
const childFiber = makeFiber("a", "span", "child-inst");
|
||||
childFiber.parent = parentFiber;
|
||||
childFiber.effect = { type: "update", payload: {} };
|
||||
childFiber.prevProps = {};
|
||||
childFiber.props = { size: "big" };
|
||||
parentFiber.children = [childFiber];
|
||||
|
||||
const host: HostConfig<string, string, unknown> = {
|
||||
name: "test",
|
||||
createRootContext: () => ({}),
|
||||
createInstance: () => "inst",
|
||||
createTextInstance: () => "text",
|
||||
appendChild: () => {},
|
||||
commitUpdate: (inst) => ops.push(`commitUpdate(${inst})`),
|
||||
};
|
||||
|
||||
const classification = makeClassification<string>({
|
||||
matched: [{
|
||||
oldFiber: childFiber,
|
||||
newChild: { type: "span", props: { size: "big" }, children: [], key: "a" },
|
||||
index: 0,
|
||||
}],
|
||||
});
|
||||
|
||||
const commitCtx: CommitContext<string> = {
|
||||
host: host as HostConfig<string, string, unknown>,
|
||||
ctx: {},
|
||||
createFiber: () => makeFiber("x", "x", "x"),
|
||||
};
|
||||
|
||||
commitMutations(parentFiber, classification, commitCtx);
|
||||
|
||||
const parentIdx = ops.indexOf("commitUpdate(parent-inst)");
|
||||
const childIdx = ops.indexOf("commitUpdate(child-inst)");
|
||||
expect(parentIdx).toBeLessThan(childIdx);
|
||||
});
|
||||
});
|
||||
@@ -133,15 +133,14 @@ describe("Root.render() re-renderable", () => {
|
||||
expect(emCall!.nextProps.size).toBe("small");
|
||||
});
|
||||
|
||||
it("excess old children remain when new children are fewer", () => {
|
||||
it("excess old children are removed when new children are fewer", () => {
|
||||
const { host, instances } = makeHost();
|
||||
const root = createHostRoot(host, {});
|
||||
root.render(h("div", null, h("span", null), h("em", null)));
|
||||
const countAfterFirst = instances.length;
|
||||
|
||||
root.render(h("div", null, h("span", null)));
|
||||
expect(instances.length).toBe(countAfterFirst);
|
||||
expect(root.rootFiber!.children[0]!.children.length).toBe(2);
|
||||
expect(root.rootFiber!.children[0]!.children.length).toBe(1);
|
||||
expect(root.rootFiber!.children[0]!.children[0]!.tag).toBe("span");
|
||||
});
|
||||
|
||||
it("text node props are reconciled on re-render", () => {
|
||||
|
||||
Reference in New Issue
Block a user