solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/animation/matchBy.spec.ts

@@ -0,0 +1,467 @@
+import { describe, expect, it } from "vitest";
+import type { AnimationItem } from "../../src/animation/matchBy";
+import {
+  matchAppend,
+  matchAnimationItems,
+  matchByDataKey,
+  matchByIndex,
+} from "../../src/animation/matchBy";
+
+interface TestItem {
+  x: number;
+  y: number;
+  payload?: Record<string, unknown>;
+}
+
+const matchByName = matchByDataKey("name");
+
+function expectAlignedPrevItems(
+  result: ReadonlyArray<AnimationItem<TestItem>> | null,
+  expected: ReadonlyArray<TestItem | undefined>,
+): void {
+  expect(result).not.toBeNull();
+  const alignedPrevItems = result!
+    .filter((item) => item.status !== "removed")
+    .map((item) => (item.status === "matched" ? item.prev : undefined));
+  expect(alignedPrevItems).toEqual(expected);
+}
+
+function expectRemovedPrevItems(
+  result: ReadonlyArray<AnimationItem<TestItem>> | null,
+  expected: ReadonlyArray<TestItem | undefined>,
+): void {
+  expect(result).not.toBeNull();
+  const removedPrevItems = result!
+    .filter((item) => item.status === "removed")
+    .map((item) => item.prev);
+  expect(removedPrevItems).toEqual(expected);
+}
+
+function expectStatuses(
+  result: ReadonlyArray<AnimationItem<TestItem>> | null,
+  expected: ReadonlyArray<AnimationItem<TestItem>["status"]>,
+): void {
+  expect(result).not.toBeNull();
+  expect(result!.map((item) => item.status)).toEqual(expected);
+}
+
+describe("matchByIndex", () => {
+  it('should be the string "index"', () => {
+    expect(matchByIndex).toBe("index");
+  });
+});
+
+describe("matchAppend", () => {
+  it('should be the string "append"', () => {
+    expect(matchAppend).toBe("append");
+  });
+});
+
+describe("matchByDataKey", () => {
+  it("should extract a string key from payload", () => {
+    const matchFn = matchByDataKey("name");
+    const item: TestItem = { x: 10, y: 20, payload: { name: "Alice" } };
+    expect(matchFn(item, 0)).toBe("Alice");
+  });
+
+  it("should extract a numeric key from payload", () => {
+    const matchFn = matchByDataKey("id");
+    const item: TestItem = { x: 10, y: 20, payload: { id: 42 } };
+    expect(matchFn(item, 0)).toBe(42);
+  });
+
+  it("should return null when payload is missing", () => {
+    const matchFn = matchByDataKey("name");
+    const item: TestItem = { x: 10, y: 20 };
+    expect(matchFn(item, 0)).toBeNull();
+  });
+
+  it("should return null when the key is not in payload", () => {
+    const matchFn = matchByDataKey("missing");
+    const item: TestItem = { x: 10, y: 20, payload: { name: "Alice" } };
+    expect(matchFn(item, 0)).toBeNull();
+  });
+
+  it("should JSON-stringify object values", () => {
+    const matchFn = matchByDataKey("complex");
+    const item: TestItem = { x: 10, y: 20, payload: { complex: { a: 1 } } };
+    expect(matchFn(item, 0)).toBe('{"a":1}');
+  });
+});
+
+describe("matchAnimationItems", () => {
+  describe("with matchByIndex (proportional stretch)", () => {
+    it("should return same items when arrays have equal length", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+        { x: 30, y: 30 },
+      ];
+      const next: TestItem[] = [
+        { x: 15, y: 15 },
+        { x: 25, y: 25 },
+        { x: 35, y: 35 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByIndex);
+
+      expectStatuses(result, ["matched", "matched", "matched"]);
+      expectAlignedPrevItems(result, [prev[0], prev[1], prev[2]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should stretch when growing from 3 to 6 items", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+        { x: 30, y: 30 },
+      ];
+      const next: TestItem[] = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+        { x: 4, y: 4 },
+        { x: 5, y: 5 },
+        { x: 6, y: 6 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByIndex);
+
+      expectStatuses(result, ["matched", "matched", "matched", "matched", "matched", "matched"]);
+      expectAlignedPrevItems(result, [prev[0], prev[0], prev[1], prev[1], prev[2], prev[2]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should compress when shrinking from 6 to 3 items", () => {
+      const prev: TestItem[] = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+        { x: 4, y: 4 },
+        { x: 5, y: 5 },
+        { x: 6, y: 6 },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+        { x: 30, y: 30 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByIndex);
+
+      expectAlignedPrevItems(result, [prev[0], prev[2], prev[4]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should stretch from 5 to 15 items", () => {
+      const prev: TestItem[] = Array.from({ length: 5 }, (_, i) => ({ x: i, y: i }));
+      const next: TestItem[] = Array.from({ length: 15 }, (_, i) => ({ x: i, y: i }));
+
+      const result = matchAnimationItems(prev, next, matchByIndex);
+
+      expectStatuses(
+        result,
+        Array.from({ length: 15 }, () => "matched"),
+      );
+      expectAlignedPrevItems(result, [
+        prev[0],
+        prev[0],
+        prev[0],
+        prev[1],
+        prev[1],
+        prev[1],
+        prev[2],
+        prev[2],
+        prev[2],
+        prev[3],
+        prev[3],
+        prev[3],
+        prev[4],
+        prev[4],
+        prev[4],
+      ]);
+      expectRemovedPrevItems(result, []);
+    });
+  });
+
+  describe("with matchAppend (sequential)", () => {
+    it("should return same items when arrays have equal length", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+        { x: 30, y: 30 },
+      ];
+      const next: TestItem[] = [
+        { x: 15, y: 15 },
+        { x: 25, y: 25 },
+        { x: 35, y: 35 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchAppend);
+
+      expectStatuses(result, ["matched", "matched", "matched"]);
+      expectAlignedPrevItems(result, [prev[0], prev[1], prev[2]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should leave extras added when growing", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+      ];
+      const next: TestItem[] = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+        { x: 4, y: 4 },
+        { x: 5, y: 5 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchAppend);
+
+      expectStatuses(result, ["matched", "matched", "added", "added", "added"]);
+      expectAlignedPrevItems(result, [prev[0], prev[1], undefined, undefined, undefined]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should truncate when shrinking", () => {
+      const prev: TestItem[] = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+        { x: 4, y: 4 },
+        { x: 5, y: 5 },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchAppend);
+
+      expectAlignedPrevItems(result, [prev[0], prev[1]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should match 1:1 from 5 to 15 items", () => {
+      const prev: TestItem[] = Array.from({ length: 5 }, (_, i) => ({ x: i, y: i }));
+      const next: TestItem[] = Array.from({ length: 15 }, (_, i) => ({ x: i, y: i }));
+
+      const result = matchAnimationItems(prev, next, matchAppend);
+
+      expectAlignedPrevItems(result, [
+        prev[0],
+        prev[1],
+        prev[2],
+        prev[3],
+        prev[4],
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ]);
+      expectRemovedPrevItems(result, []);
+    });
+  });
+
+  describe("with custom key function (matchByDataKey)", () => {
+    it("should return removed items first, then matched and added items for [A,B,C] -> [B,C,D]", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+        { x: 30, y: 30, payload: { name: "C" } },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 20, payload: { name: "B" } },
+        { x: 20, y: 30, payload: { name: "C" } },
+        { x: 30, y: 40, payload: { name: "D" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expect(result).toEqual([
+        { status: "removed", prev: prev[0] },
+        { status: "matched", prev: prev[1], next: next[0] },
+        { status: "matched", prev: prev[2], next: next[1] },
+        { status: "added", next: next[2] },
+      ]);
+    });
+
+    it("should return removed items first, then preserve next-item order for [B,C,D] -> [A,B,C]", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 20, payload: { name: "B" } },
+        { x: 20, y: 30, payload: { name: "C" } },
+        { x: 30, y: 40, payload: { name: "D" } },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+        { x: 30, y: 30, payload: { name: "C" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expect(result).toEqual([
+        { status: "removed", prev: prev[2] },
+        { status: "added", next: next[0] },
+        { status: "matched", prev: prev[0], next: next[1] },
+        { status: "matched", prev: prev[1], next: next[2] },
+      ]);
+    });
+
+    it("should detect multiple removed items", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+        { x: 30, y: 30, payload: { name: "C" } },
+        { x: 40, y: 40, payload: { name: "D" } },
+        { x: 50, y: 50, payload: { name: "E" } },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 30, payload: { name: "C" } },
+        { x: 20, y: 40, payload: { name: "D" } },
+        { x: 30, y: 50, payload: { name: "E" } },
+        { x: 40, y: 60, payload: { name: "F" } },
+        { x: 50, y: 70, payload: { name: "G" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expect(result).toEqual([
+        { status: "removed", prev: prev[0] },
+        { status: "removed", prev: prev[1] },
+        { status: "matched", prev: prev[2], next: next[0] },
+        { status: "matched", prev: prev[3], next: next[1] },
+        { status: "matched", prev: prev[4], next: next[2] },
+        { status: "added", next: next[3] },
+        { status: "added", next: next[4] },
+      ]);
+    });
+
+    it("should return only matched items when all previous items match", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+      ];
+      const next: TestItem[] = [
+        { x: 15, y: 15, payload: { name: "A" } },
+        { x: 25, y: 25, payload: { name: "B" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expectStatuses(result, ["matched", "matched"]);
+      expectAlignedPrevItems(result, [prev[0], prev[1]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should return all previous items as removed when none match", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+      ];
+      const next: TestItem[] = [
+        { x: 10, y: 100, payload: { name: "X" } },
+        { x: 20, y: 200, payload: { name: "Y" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expectStatuses(result, ["removed", "removed", "added", "added"]);
+      expectAlignedPrevItems(result, [undefined, undefined]);
+      expectRemovedPrevItems(result, [prev[0], prev[1]]);
+    });
+
+    it("should use first occurrence for duplicate keys in prev", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 99, payload: { name: "A" } },
+        { x: 30, y: 30, payload: { name: "B" } },
+      ];
+      const next: TestItem[] = [
+        { x: 15, y: 15, payload: { name: "A" } },
+        { x: 35, y: 35, payload: { name: "B" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expectAlignedPrevItems(result, [prev[0], prev[2]]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should handle growing arrays", () => {
+      const prev: TestItem[] = [{ x: 10, y: 10, payload: { name: "A" } }];
+      const next: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+        { x: 30, y: 30, payload: { name: "C" } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expectAlignedPrevItems(result, [prev[0], undefined, undefined]);
+      expectRemovedPrevItems(result, []);
+    });
+
+    it("should handle shrinking arrays", () => {
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { name: "A" } },
+        { x: 20, y: 20, payload: { name: "B" } },
+        { x: 30, y: 30, payload: { name: "C" } },
+      ];
+      const next: TestItem[] = [{ x: 10, y: 15, payload: { name: "B" } }];
+
+      const result = matchAnimationItems(prev, next, matchByName);
+
+      expectStatuses(result, ["removed", "removed", "matched"]);
+      expectAlignedPrevItems(result, [prev[1]]);
+      expectRemovedPrevItems(result, [prev[0], prev[2]]);
+    });
+
+    it("should work with a custom match function", () => {
+      const matchByTimestamp = (item: TestItem) => (item.payload?.ts as number) ?? null;
+      const prev: TestItem[] = [
+        { x: 10, y: 10, payload: { ts: 1000 } },
+        { x: 20, y: 20, payload: { ts: 2000 } },
+      ];
+      const next: TestItem[] = [
+        { x: 15, y: 25, payload: { ts: 2000 } },
+        { x: 25, y: 35, payload: { ts: 3000 } },
+      ];
+
+      const result = matchAnimationItems(prev, next, matchByTimestamp);
+
+      expectStatuses(result, ["removed", "matched", "added"]);
+      expectAlignedPrevItems(result, [prev[1], undefined]);
+      expectRemovedPrevItems(result, [prev[0]]);
+    });
+  });
+
+  it("should return added items on first render", () => {
+    const next: TestItem[] = [
+      { x: 10, y: 100, payload: { name: "X" } },
+      { x: 20, y: 200, payload: { name: "Y" } },
+    ];
+
+    const result = matchAnimationItems(null, next, matchByName);
+
+    expect(result).toEqual([
+      { status: "added", next: next[0] },
+      { status: "added", next: next[1] },
+    ]);
+  });
+
+  it("should return null when next items are undefined", () => {
+    const prev: TestItem[] = [{ x: 10, y: 10, payload: { name: "A" } }];
+
+    const result = matchAnimationItems(prev, undefined, matchByName);
+
+    expect(result).toBeNull();
+  });
+});

package/test/animation/mockAnimationController.ts

@@ -0,0 +1,40 @@
+// Ported from recharts 3.9.0 test/animation/mockAnimationController.ts.
+import type {
+  AnimationController,
+  AnimationHandle,
+  CancelableTimeout,
+  OnAnimationStateUpdate,
+  TimeoutController,
+} from "../../src";
+
+/**
+ * Animation controller that does NOT automatically complete when reaching 100%.
+ * That is the default useful behavior, but a lot of our unit tests assume
+ * "100% progress" and "completed" are two different states, so it's easier to
+ * provide a controller that stops at 100% and lets the test call `complete()`.
+ */
+export const mockAnimationController: AnimationController = (
+  timeoutController: TimeoutController,
+  animationHandle: AnimationHandle,
+  listener: OnAnimationStateUpdate,
+): CancelableTimeout => {
+  let cancellable: CancelableTimeout | undefined;
+  const nextUpdate = (now: number): void => {
+    const timeRemaining = animationHandle.tick(now);
+    if (animationHandle.getState() === "active") {
+      listener(animationHandle.getInterpolated());
+      if (animationHandle.getProgress() === 1) {
+        // don't complete! (the test drives completion explicitly)
+        cancellable = undefined;
+        return;
+      }
+      cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
+      return;
+    }
+    cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
+  };
+
+  cancellable = timeoutController.setTimeout(nextUpdate, 0);
+
+  return () => cancellable?.();
+};

package/test/animation/mockControllerAnimationManager.ts

@@ -0,0 +1,143 @@
+// Ported from recharts 3.9.0 test/animation/MockProgressAnimationManager.ts.
+//
+// The v3.9 new-engine equivalent of the legacy MockProgressAnimationManager:
+// it drives an AnimationHandle deterministically (no requestAnimationFrame) via
+// mockAnimationController + MockTimeoutController, and exposes a `factory`
+// (an AnimationController) to inject through <AnimationControllerProvider>.
+//
+// Solid deviation: React's `act()` (used upstream around `complete()`) is dropped
+// — this repo has no React; the spec calls `flush()` after each step instead.
+import type { AnimationController, AnimationHandle, OnAnimationStateUpdate } from "../../src";
+import { mockAnimationController } from "./mockAnimationController";
+import { MockTimeoutController } from "./mockTimeoutController";
+
+export interface MockAnimationManager {
+  /** Step the eased progress to an absolute percentage in [0, 1] (no rewind). */
+  setAnimationProgress(percent: number): Promise<void>;
+  /** Finish everything in the queue immediately. */
+  completeAnimation(): Promise<void>;
+  isAnimating(): boolean;
+}
+
+/**
+ * A higher-level mock manager that steps a (new-engine) AnimationHandle to an
+ * absolute progress percentage. Wire it via `<AnimationControllerProvider value={manager.factory}>`.
+ */
+export class MockControllerAnimationManager implements MockAnimationManager {
+  private readonly onStop?: () => void;
+
+  private animation: AnimationHandle | null = null;
+
+  private readonly timeoutController: MockTimeoutController = new MockTimeoutController();
+
+  private cancelController: undefined | (() => void);
+
+  private isPrimed: boolean = false;
+
+  /**
+   * The easing animation previously required a non-zero first tick to set up
+   * internal state. The new engine does not, but the existing assertions are all
+   * `firstTick`ms off, so we keep the same delay to avoid rewriting them.
+   */
+  private firstTick: number = 16;
+
+  constructor(
+    private animationId: string,
+    onStop?: () => void,
+  ) {
+    this.onStop = onStop;
+  }
+
+  /** AnimationController to inject through `<AnimationControllerProvider>`. */
+  readonly factory: AnimationController = (_timeoutController, animationHandle, listener) => {
+    this.start(animationHandle, listener);
+    return () => this.stop();
+  };
+
+  start(animation: AnimationHandle, listener: OnAnimationStateUpdate): void {
+    this.animation = animation;
+    this.isPrimed = false;
+    this.cancelController = mockAnimationController(
+      this.timeoutController,
+      this.animation,
+      listener,
+    );
+  }
+
+  stop(): void {
+    this.cancelController?.();
+    this.cancelController = undefined;
+    this.animation = null;
+    this.isPrimed = false;
+    this.onStop?.();
+  }
+
+  async setAnimationProgress(percent: number): Promise<void> {
+    if (this.animation === null) {
+      throw new Error(`[${this.animationId}] Animation not available`);
+    }
+    if (percent < 0) {
+      throw new Error("Percent must be greater than or equal to 0");
+    }
+    if (this.animation.getState() === "completed") {
+      throw new Error(
+        "Animation is already complete. Call completeAnimation to finish the queue. MockControllerAnimationManager does not support rewinding.",
+      );
+    }
+
+    const animationDuration = await this.peekAnimationDuration();
+    // Absolute time: duration*percent + begin + firstTick → `percent` eased progress.
+    const timeToAdvance =
+      animationDuration * percent + this.animation.getAnimationBegin() + this.firstTick;
+    await this.timeoutController.triggerNextTimeout(timeToAdvance);
+  }
+
+  async completeAnimation(): Promise<void> {
+    if (this.animation === null) {
+      throw new Error("Queue is empty");
+    }
+    if (this.animation.getProgress() < 1) {
+      await this.setAnimationProgress(1);
+    }
+    this.animation?.complete();
+    this.onStop?.();
+  }
+
+  isAnimating(): boolean {
+    return this.animation !== null && this.animation.getState() !== "completed";
+  }
+
+  private async prime(): Promise<void> {
+    if (this.animation === null) {
+      throw new Error("No animation available");
+    }
+    if (this.isPrimed) {
+      return;
+    }
+    this.isPrimed = true;
+
+    if (this.animation.getState() === "completed") {
+      return;
+    }
+    if (this.animation.getState() === "init") {
+      await this.timeoutController.triggerNextTimeout(0);
+    }
+    if (this.animation.getState() === "pending") {
+      await this.timeoutController.triggerNextTimeout(
+        this.animation.getAnimationBegin() + this.firstTick,
+      );
+    }
+    if (this.animation.getState() === "active") {
+      return;
+    }
+    throw new Error(`Unexpected animation state: ${this.animation.getState()}`);
+  }
+
+  private async peekAnimationDuration(): Promise<number> {
+    if (this.animation === null) {
+      throw new Error(`[${this.animationId}] Animation not available`);
+    }
+    await this.prime();
+    return this.animation.getAnimationDuration();
+  }
+}