solid-recharts 0.1.0

package/test/animation/mockTimeoutController.ts

@@ -0,0 +1,114 @@
+// Ported from recharts 3.8.1 test/animation/mockTimeoutController.ts (commit 7a23854).
+// Adapted to remove the @testing-library/react `act` dependency — in this
+// repo there is no React; the callbacks contain no Solid reactive primitives
+// so a direct synchronous call is equivalent.
+
+import {
+  CallbackType,
+  CancelableTimeout,
+  TimeoutController,
+} from "../../src/animation/timeoutController";
+
+/**
+ * Mock implementation of TimeoutController for testing purposes.
+ * This does not use requestAnimationFrame and allows for manual control of timeouts.
+ */
+type MockTimeoutControllerConfig = {
+  /**
+   * The mock controller will never allow more than this number of timeouts at once.
+   */
+  timeoutLimit?: number;
+};
+
+export class MockTimeoutController implements TimeoutController {
+  private timeouts: Array<{ callback: CallbackType; delay: number | undefined }> = [];
+
+  private cancelledFramesCount = 0;
+
+  private readonly config: MockTimeoutControllerConfig;
+
+  constructor(config: MockTimeoutControllerConfig = {}) {
+    this.config = config;
+  }
+
+  setTimeout(callback: CallbackType, delay?: number): CancelableTimeout {
+    /*
+     * We store a COPY of the callback instead of the callback itself, so that consumers
+     * which track cancellations by identity (like the real
+     * RequestAnimationFrameTimeoutController, which tracks requestIds) are exercised
+     * correctly rather than passing by accident.
+     */
+    const copy: CallbackType = (now: number) => callback(now);
+    if (this.config.timeoutLimit != null && this.timeouts.length >= this.config.timeoutLimit) {
+      throw new Error(
+        `Timeout queue has size ${this.timeouts.length} which is more than the allowed ${this.config.timeoutLimit}`,
+      );
+    }
+
+    this.timeouts.push({ callback: copy, delay });
+
+    // Return a cancelable timeout function
+    return () => {
+      this.removeTimeout(copy);
+      this.cancelledFramesCount++;
+    };
+  }
+
+  /**
+   * Manually triggers the next timeout callback, as defined by the registration order,
+   * not the order of the delay.
+   * This (poorly) simulates the passage of time without using requestAnimationFrame.
+   * If there are no timeouts registered, it throws an error.
+   * If there are multiple timeouts, it triggers the first one in the queue.
+   * @param now - The current time in milliseconds.
+   * @returns undefined
+   */
+  async triggerNextTimeout(now: number): Promise<void> {
+    const next = this.timeouts.shift();
+
+    if (next == null) {
+      return;
+    }
+
+    const { callback } = next;
+    await Promise.resolve(); // Simulate async behavior
+    // Remove the timeout before executing the callback, because the callback may queue itself again
+    this.removeTimeout(callback);
+    callback(now);
+  }
+
+  /**
+   * Flushes all registered timeouts by triggering them in the order they were registered.
+   * This simulates the passage of time until all timeouts are executed.
+   * @param tickSize - The size of each tick in milliseconds. Defaults to 1000ms.
+   * @returns A promise that resolves when all timeouts have been triggered.
+   */
+  async flushAllTimeouts(tickSize: number = 1000): Promise<void> {
+    let time = 0;
+    while (this.timeouts.length > 0) {
+      // eslint-disable-next-line no-await-in-loop
+      await this.triggerNextTimeout(tickSize * time++);
+    }
+  }
+
+  clear() {
+    this.timeouts = [];
+    this.cancelledFramesCount = 0;
+  }
+
+  private removeTimeout(callback: CallbackType) {
+    this.timeouts = this.timeouts.filter((t) => t.callback !== callback);
+  }
+
+  getCallbacksCount() {
+    return this.timeouts.length;
+  }
+
+  getTimeouts() {
+    return this.timeouts.map((t) => t.delay);
+  }
+
+  getCancelledFramesCount() {
+    return this.cancelledFramesCount;
+  }
+}

package/test/animation/timeoutController.spec.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeAll, afterAll, MockInstance } from "vitest";
+import { RequestAnimationFrameTimeoutController } from "../../src/animation/timeoutController";
+
+describe("RequestAnimationFrameTimeoutController", () => {
+  beforeAll(() => {
+    vi.useFakeTimers();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should call requestAnimationFrame with a callback", () => {
+    const rafSpy: MockInstance<Window["requestAnimationFrame"]> = vi.spyOn(
+      window,
+      "requestAnimationFrame",
+    );
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb = vi.fn();
+
+    controller.setTimeout(cb);
+    expect(cb).not.toHaveBeenCalled();
+    expect(rafSpy).toHaveBeenCalledWith(expect.any(Function));
+
+    // Simulate the passage of time
+    vi.runAllTimers();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(rafSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel timeout", () => {
+    const rafSpy: MockInstance<Window["requestAnimationFrame"]> = vi.spyOn(
+      window,
+      "requestAnimationFrame",
+    );
+    const cancelSpy: MockInstance<Window["cancelAnimationFrame"]> = vi.spyOn(
+      window,
+      "cancelAnimationFrame",
+    );
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb = vi.fn();
+
+    const cancellableTimeout = controller.setTimeout(cb);
+    expect(cb).not.toHaveBeenCalled();
+    expect(rafSpy).toHaveBeenCalledWith(expect.any(Function));
+
+    cancellableTimeout();
+
+    // Simulate the passage of time
+    vi.runAllTimers();
+    expect(cb).toHaveBeenCalledTimes(0);
+    expect(rafSpy).toHaveBeenCalledTimes(1);
+    expect(cancelSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should allow multiple timeouts to be set", () => {
+    const controller = new RequestAnimationFrameTimeoutController();
+
+    const cb1 = vi.fn();
+    const cb2 = vi.fn();
+
+    controller.setTimeout(cb1);
+    controller.setTimeout(cb2);
+
+    // Simulate the passage of time
+    vi.runAllTimers();
+
+    expect(cb1).toHaveBeenCalledTimes(1);
+    expect(cb2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should allow setting a timeout with a delay", () => {
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb = vi.fn();
+
+    controller.setTimeout(cb, 1000);
+
+    // Simulate the passage of time
+    vi.advanceTimersByTime(999);
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it("should allow settings two callbacks with different delays", () => {
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb1 = vi.fn();
+    const cb2 = vi.fn();
+
+    controller.setTimeout(cb1, 1000);
+    controller.setTimeout(cb2, 500);
+
+    // Simulate the passage of time
+    vi.advanceTimersByTime(499);
+    expect(cb1).not.toHaveBeenCalled();
+    expect(cb2).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(cb1).not.toHaveBeenCalled();
+    expect(cb2).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(500);
+    expect(cb1).toHaveBeenCalledTimes(1);
+  });
+
+  it("should allow cancelling a timeout before it executes", () => {
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb = vi.fn();
+
+    const cancellableTimeout = controller.setTimeout(cb, 1000);
+
+    // Cancel the timeout before it executes
+    cancellableTimeout();
+
+    // Simulate the passage of time
+    vi.advanceTimersByTime(2000);
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("should allow cancelling a timeout before it executes, but after a bit of delay", () => {
+    const controller = new RequestAnimationFrameTimeoutController();
+    const cb = vi.fn();
+
+    const cancellableTimeout = controller.setTimeout(cb, 1000);
+
+    vi.advanceTimersByTime(100);
+
+    // Cancel the timeout before it executes
+    cancellableTimeout();
+
+    // Simulate the passage of time
+    vi.advanceTimersByTime(2000);
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+});

package/test/animation/useAnimationStartSnapshot.spec.ts

@@ -0,0 +1,147 @@
+// Ported from recharts 3.9.0 test/animation/useAnimationStartSnapshot.spec.ts.
+//
+// Solid adaptation: the hook is reactive — `useAnimationStartSnapshot(inputAccessor, ref)`
+// returns `startValue` as an `Accessor<T>`. React's `rerender({ animationInput })` becomes
+// a signal write + `flush()`; a rerender with the SAME input has no Solid equivalent
+// (signals don't re-fire on identical values), which matches the "frozen for the same
+// cycle" contract — we just read the accessor again. The hook is created inside
+// `createRoot` (the memo needs an owner); signal writes happen outside the owned scope.
+import { describe, expect, it } from "vitest";
+import { createRoot, createSignal, flush } from "solid-js";
+import { useAnimationStartSnapshot } from "../../src/animation/useAnimationStartSnapshot";
+import type { MutableRef } from "../../src/animation/useAnimationStartSnapshot";
+
+function createMutableRef<T>(current: T): MutableRef<T> {
+  return { current };
+}
+
+function setup(initialInput: string, previousValueRef: MutableRef<string>) {
+  const [animationInput, setAnimationInput] = createSignal(initialInput);
+  const { snapshot, dispose } = createRoot((d) => ({
+    snapshot: useAnimationStartSnapshot(animationInput, previousValueRef),
+    dispose: d,
+  }));
+  return { snapshot, setAnimationInput, dispose };
+}
+
+describe("useAnimationStartSnapshot", () => {
+  it("should expose the current ref value as the initial startValue", () => {
+    const previousValueRef = createMutableRef("frame-10");
+
+    const { snapshot, dispose } = setup("animation-a", previousValueRef);
+
+    expect(snapshot.startValue()).toBe("frame-10");
+    dispose();
+  });
+
+  it("should keep startValue frozen for the duration of the same animation cycle", () => {
+    const previousValueRef = createMutableRef("frame-10");
+
+    const { snapshot, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-10");
+
+    snapshot.syncStepValue("frame-40", 0.4);
+
+    expect(previousValueRef.current).toBe("frame-40");
+    expect(snapshot.startValue()).toBe("frame-10");
+    dispose();
+  });
+
+  it("should capture the previous ref value as the new startValue when animationInput changes", () => {
+    const previousValueRef = createMutableRef("frame-40");
+
+    const { snapshot, setAnimationInput, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    setAnimationInput("animation-b");
+    flush();
+
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    snapshot.syncStepValue("frame-52", 0.4);
+
+    expect(previousValueRef.current).toBe("frame-40");
+    expect(snapshot.startValue()).toBe("frame-40");
+    dispose();
+  });
+
+  it("should unlock commits at t=0 without mutating the live ref", () => {
+    const previousValueRef = createMutableRef("frame-40");
+
+    const { snapshot, setAnimationInput, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    setAnimationInput("animation-b");
+    flush();
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    snapshot.syncStepValue("frame-40", 0);
+
+    expect(previousValueRef.current).toBe("frame-40");
+
+    snapshot.syncStepValue("frame-41", 0.1);
+
+    expect(previousValueRef.current).toBe("frame-41");
+    dispose();
+  });
+
+  it("should honor canCommit=false even after the new animation has been armed", () => {
+    const previousValueRef = createMutableRef("frame-40");
+
+    const { snapshot, setAnimationInput, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    setAnimationInput("animation-b");
+    flush();
+    expect(snapshot.startValue()).toBe("frame-40");
+
+    snapshot.syncStepValue("frame-40", 0);
+    snapshot.syncStepValue("frame-41", 0.1, false);
+
+    expect(previousValueRef.current).toBe("frame-40");
+
+    snapshot.syncStepValue("frame-42", 0.2, true);
+
+    expect(previousValueRef.current).toBe("frame-42");
+    dispose();
+  });
+
+  it("should use the completed frame as the startValue for the next animation cycle", () => {
+    const previousValueRef = createMutableRef("frame-10");
+
+    const { snapshot, setAnimationInput, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-10");
+
+    snapshot.syncStepValue("frame-100", 1);
+
+    expect(previousValueRef.current).toBe("frame-100");
+
+    setAnimationInput("animation-b");
+    flush();
+
+    expect(snapshot.startValue()).toBe("frame-100");
+    dispose();
+  });
+
+  /*
+   * DEVIATION from upstream "should update the frozen snapshot to the completed frame
+   * after t=1 in the same cycle": React refreshes its ref-based snapshot on the render
+   * AFTER t=1 within the SAME cycle; the Solid memo (keyed on animationInput) does not
+   * recompute for an unchanged input. Parity for the observable behavior (settled frame
+   * reports isEntrance=false) is handled centrally in AnimatedItems. Here we pin the
+   * Solid contract: the in-cycle snapshot stays frozen, while the live ref carries the
+   * completed frame forward for the next cycle (previous test).
+   */
+  it("keeps the in-cycle snapshot frozen after t=1 while the ref holds the completed frame", () => {
+    const previousValueRef = createMutableRef("frame-10");
+
+    const { snapshot, dispose } = setup("animation-a", previousValueRef);
+    expect(snapshot.startValue()).toBe("frame-10");
+
+    snapshot.syncStepValue("frame-100", 1);
+
+    expect(previousValueRef.current).toBe("frame-100");
+    expect(snapshot.startValue()).toBe("frame-10");
+    dispose();
+  });
+});

package/test/animation/util.spec.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { getDashCase, getTransitionVal } from "../../src/animation/util";
+
+describe("getDashCase", () => {
+  it("should convert camelCase to dash-case", () => {
+    expect(getDashCase("camelCase")).toBe("camel-case");
+    expect(getDashCase("CamelCase")).toBe("-camel-case");
+    expect(getDashCase("already-dash")).toBe("already-dash");
+    expect(getDashCase("")).toBe("");
+    expect(getDashCase("a")).toBe("a");
+    expect(getDashCase("A")).toBe("-a");
+  });
+});
+
+describe("getTransitionVal", () => {
+  it("should return correct transition string for multiple props", () => {
+    expect(getTransitionVal(["opacity", "strokeWidth"], 300, "ease-in")).toBe(
+      "opacity 300ms ease-in,stroke-width 300ms ease-in",
+    );
+  });
+  it("should handle empty props array", () => {
+    expect(getTransitionVal([], 200, "linear")).toBe("");
+  });
+  it("should handle numeric and string duration", () => {
+    expect(getTransitionVal(["foo"], "500", "ease")).toBe("foo 500ms ease");
+    expect(getTransitionVal(["foo"], 500, "ease")).toBe("foo 500ms ease");
+  });
+});