solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/util/useUniqueId.spec.ts

@@ -0,0 +1,99 @@
+// Ported from recharts 3.8.1 test/util/useUniqueId.spec.ts.
+// Harness adaptation: renderHook from the local Solid shim (returns the value as
+// `result`, not `result.current`). Solid components run once, so `rerender` has
+// no effect on these once-computed ids — it's a local no-op here, preserving the
+// spec's structure; the stability assertions hold by construction. Assertions
+// are otherwise byte-identical.
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@solidjs/testing-library";
+import { useUniqueId } from "../../src/util/useUniqueId";
+import { useIdFallback } from "../../src/util/useId";
+
+// Solid hooks return a stable value (no re-render); rerender is a no-op.
+const rerender = (_props?: unknown): void => {};
+
+describe("useIdFallback", () => {
+  it("should generate a random ID without prefix", () => {
+    const { result } = renderHook(() => useIdFallback());
+    expect(result.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("continues to return the same ID on rerender", () => {
+    const { result } = renderHook(() => useIdFallback());
+    const firstId = result;
+    rerender();
+    expect(result).toBe(firstId);
+  });
+
+  it("should return the same ID even when props change", () => {
+    const { result } = renderHook(() => useIdFallback());
+    const firstId = result;
+    rerender({ prefix: "new-prefix" });
+    expect(result).toBe(firstId);
+  });
+});
+
+describe("useUniqueId (SSR-safe)", () => {
+  describe("without prefix", () => {
+    it("should generate a random ID without prefix", () => {
+      const { result } = renderHook(() => useUniqueId());
+      expect(result.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("continues to return the same ID on rerender", () => {
+      const { result } = renderHook(() => useUniqueId());
+      const firstId = result;
+      rerender();
+      expect(result).toBe(firstId);
+    });
+
+    it("should return the same ID even when props change", () => {
+      const { result } = renderHook(() => useUniqueId());
+      const firstId = result;
+      rerender({ id: "new-id", prefix: "new-prefix" });
+      expect(result).toBe(firstId);
+    });
+  });
+
+  describe("with prefix", () => {
+    it("should generate a random ID with prefix", () => {
+      const { result } = renderHook(() => useUniqueId("bar"));
+      expect(result).toMatch(/^bar-.+$/);
+    });
+
+    it("should return the same ID on rerender with prefix", () => {
+      const { result } = renderHook(() => useUniqueId("bar"));
+      const firstId = result;
+      rerender();
+      expect(result).toBe(firstId);
+    });
+
+    it("should return the same ID even when props change", () => {
+      const { result } = renderHook(() => useUniqueId("bar"));
+      const firstId = result;
+      rerender({ id: "new-id", prefix: "new-prefix" });
+      expect(result).toBe(firstId);
+    });
+  });
+
+  describe("with customId", () => {
+    it("should return custom ID if provided, and ignore the prefix", () => {
+      const { result } = renderHook(() => useUniqueId("bar", "custom-id-modern"));
+      expect(result).toBe("custom-id-modern");
+    });
+
+    it("should return the same custom ID on rerender", () => {
+      const { result } = renderHook(() => useUniqueId("bar", "custom-id-modern"));
+      expect(result).toBe("custom-id-modern");
+      rerender();
+      expect(result).toBe("custom-id-modern");
+    });
+
+    it("should return the same custom ID even when props change", () => {
+      const { result } = renderHook(() => useUniqueId("bar", "custom-id-modern"));
+      expect(result).toBe("custom-id-modern");
+      rerender({ id: "new-id", prefix: "new-prefix" });
+      expect(result).toBe("custom-id-modern");
+    });
+  });
+});

package/test/utils/diagnostics-allowlist.ts

@@ -0,0 +1,18 @@
+// Diagnostic codes accepted globally as informational, not errors.
+//
+// Adding to this list requires a justification in the PR/commit describing
+// the false-positive or informational status of the code, with reference to
+// the Solid 2.0 diagnostics reference
+// (.claude/skills/solidjs-2/references/diagnostics.md) or the recharts
+// behavior being matched. The default is zero tolerance — this list is the
+// only escape hatch and it should stay short.
+
+export const GLOBALLY_ACCEPTED_DIAGNOSTICS = [
+  // Non-halting informational. Fires when an async value is read outside a
+  // <Loading> boundary; the runtime defers root mount until settled. The
+  // permissive default is fine per the 2.0 diagnostics reference, and our
+  // chart examples don't always wrap async reads in <Loading>.
+  "ASYNC_OUTSIDE_LOADING_BOUNDARY",
+] as const;
+
+export type AcceptedDiagnostic = (typeof GLOBALLY_ACCEPTED_DIAGNOSTICS)[number];

package/test/utils/diagnostics.ts

@@ -0,0 +1,58 @@
+// Shared helpers for the Solid 2.0 diagnostics guard.
+//
+// Solid 2.0 ships a structured diagnostics system that catches common
+// reactive-graph mistakes in dev (broken reactivity, writes in owned scopes,
+// untracked reads of async/strict values, lifecycle misuse). The full
+// reference is in `.claude/skills/solidjs-2/references/diagnostics.md`.
+//
+// Workflow rule: **every diagnostic event is signal, not noise — tests fail on
+// unexpected ones.** AI-generated code in particular tends to ignore console
+// warnings because "stuff works anyway", but a `STRICT_READ_UNTRACKED` warning
+// means a future state change won't propagate: the test passes while the state
+// is static and the bug only surfaces later.
+//
+//   - Error-severity diagnostics (SIGNAL_WRITE_IN_OWNED_SCOPE,
+//     CLEANUP_IN_FORBIDDEN_SCOPE, …) throw, so a test that triggers one fails by
+//     virtue of the throw — zero tolerance is enforced for free.
+//   - Warning-severity diagnostics (STRICT_READ_UNTRACKED, NO_OWNER_EFFECT, …)
+//     only log; the GLOBAL guard in `test/setup.ts` turns them into failures.
+//
+// Enforcement is global and unconditional (`test/setup.ts` subscribes for every
+// test) — there is intentionally no opt-in `expectClean`/`expectОnly` wrapper:
+// we check always. This module just exposes the event shape + the filtering /
+// formatting the guard uses; the allowlist (`./diagnostics-allowlist.ts`) is the
+// only escape hatch and it should stay short.
+
+import { GLOBALLY_ACCEPTED_DIAGNOSTICS } from "./diagnostics-allowlist";
+
+// `DEV.diagnostics.subscribe()` events. We narrow the shape structurally so
+// tests can read fields without importing internal types from `@solidjs/signals`
+// (keeps this test-only and re-syncs trivially if the upstream type moves).
+export interface DiagnosticEvent {
+  readonly sequence: number;
+  readonly code: string;
+  readonly kind: string;
+  readonly severity: "warn" | "error";
+  readonly message: string;
+  readonly ownerName?: string;
+  readonly nodeName?: string;
+  readonly data?: Record<string, unknown>;
+}
+
+export function isAllowedDiagnostic(code: string): boolean {
+  for (const c of GLOBALLY_ACCEPTED_DIAGNOSTICS) {
+    if (code === c) return true;
+  }
+  return false;
+}
+
+export function describeDiagnosticEvents(events: readonly DiagnosticEvent[]): string {
+  return events
+    .map((e) => {
+      const owner = e.ownerName ?? "<unknown>";
+      const node = e.nodeName === undefined ? "" : ` node=${e.nodeName}`;
+      const data = e.data === undefined ? "" : ` data=${JSON.stringify(e.data)}`;
+      return `  [${e.severity}] ${e.code} at ${owner}${node}${data}: ${e.message}`;
+    })
+    .join("\n");
+}

package/test/zIndex/AllZIndexPortals.spec.tsx

@@ -0,0 +1,83 @@
+// Ported from recharts 3.8.1 test/zIndex/AllZIndexPortals.spec.tsx (commit 7a23854).
+//
+// Harness adaptation (Tier-A, behaviour byte-identical): recharts wraps the
+// component in react-redux `<Provider store context>` and dispatches actions via
+// `store.dispatch(action)` inside `act(() => …)`. The Solid-native store has no
+// Redux runtime — the store is `{ state, actions }`, provided via
+// `RechartsStoreContext`, and actions are called directly. Reactive `<For>`
+// re-renders are driven by `flush()` (Solid batches store writes on a microtask
+// boundary), so `act(() => { dispatch; vi.runOnlyPendingTimers() })` becomes
+// `store.actions.zIndex.registerZIndexPortal(…)` + `flush()`.
+import { beforeEach, describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { RechartsStoreContext } from "../../src/state/RechartsStoreContext";
+import { AllZIndexPortals } from "../../src/zIndex/ZIndexPortal";
+import { createRechartsStore, type RechartsStore } from "../../src/state/store";
+import { selectAllRegisteredZIndexes } from "../../src/zIndex/zIndexSelectors";
+import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
+import { isNotNil } from "../../src/util/DataUtils";
+
+describe("AllZIndexPortals", () => {
+  let store: RechartsStore;
+
+  beforeEach(() => {
+    store = createRechartsStore();
+  });
+
+  it("should add z-index portal when z-index consumer is registered", () => {
+    const { container } = render(() => (
+      <svg>
+        <RechartsStoreContext value={store}>
+          <AllZIndexPortals isPanorama={false}>child</AllZIndexPortals>
+        </RechartsStoreContext>
+      </svg>
+    ));
+    flush();
+
+    const allZIndexes = selectAllRegisteredZIndexes(store.state);
+
+    const newZIndexDefinitelyNotOneOfTheDefaults =
+      Object.values(DefaultZIndexes).reduce(
+        (acc, val) => Math.max(acc, val),
+        Number.NEGATIVE_INFINITY,
+      ) + 1;
+
+    // all z-index portals should be rendered (they are <g> elements with tabIndex={-1})
+    expect(container.querySelectorAll('g[tabindex="-1"]')).toHaveLength(allZIndexes.length);
+
+    store.actions.zIndex.registerZIndexPortal({ zIndex: newZIndexDefinitelyNotOneOfTheDefaults });
+    flush();
+
+    // After registering, should have one more z-index portal
+    const zIndexPortals = container.querySelectorAll('g[tabindex="-1"]');
+    expect(zIndexPortals).toHaveLength(allZIndexes.length + 1);
+  });
+
+  it("should render one child for each of the registered elements", () => {
+    const { container } = render(() => (
+      <svg>
+        <RechartsStoreContext value={store}>
+          <AllZIndexPortals isPanorama={false}>
+            <div data-testid="child">child</div>
+          </AllZIndexPortals>
+        </RechartsStoreContext>
+      </svg>
+    ));
+    flush();
+
+    const state = store.state;
+
+    const renderedElements = Array.from(container.querySelectorAll('g[tabindex="-1"]'));
+    const storedElementIds = Object.values(state.zIndex.zIndexMap)
+      .map((entry) => entry.element?.id)
+      .filter(isNotNil);
+
+    expect(renderedElements).toHaveLength(storedElementIds.length);
+
+    // each rendered element should be in the store
+    renderedElements.forEach((el) => {
+      expect(storedElementIds).toContain(el.id);
+    });
+  });
+});

package/test/zIndex/DefaultZIndexes.spec.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
+
+describe("DefaultZIndexes", () => {
+  describe("zIndex ordering", () => {
+    it("should have barBackground below grid", () => {
+      expect(DefaultZIndexes.barBackground).toBeGreaterThan(DefaultZIndexes.grid);
+    });
+
+    it("should have barBackground below all other elements", () => {
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.area);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.cursorRectangle);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.bar);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.line);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.axis);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.scatter);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.label);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.activeBar);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.activeDot);
+    });
+
+    it("should maintain correct ordering of all zIndex values", () => {
+      expect(DefaultZIndexes.grid).toBeLessThan(DefaultZIndexes.barBackground);
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.area);
+      expect(DefaultZIndexes.area).toBeLessThan(DefaultZIndexes.cursorRectangle);
+      expect(DefaultZIndexes.cursorRectangle).toBeLessThan(DefaultZIndexes.bar);
+      expect(DefaultZIndexes.bar).toBeLessThan(DefaultZIndexes.line);
+      expect(DefaultZIndexes.line).toBeLessThan(DefaultZIndexes.axis);
+      expect(DefaultZIndexes.axis).toBeLessThan(DefaultZIndexes.scatter);
+      expect(DefaultZIndexes.scatter).toBeLessThan(DefaultZIndexes.label);
+      expect(DefaultZIndexes.activeBar).toBeLessThan(DefaultZIndexes.label);
+      expect(DefaultZIndexes.activeBar).toBeLessThan(DefaultZIndexes.activeDot);
+    });
+  });
+
+  describe("value types", () => {
+    it("should have all values as numbers", () => {
+      Object.values(DefaultZIndexes).forEach((value) => {
+        expect(typeof value).toBe("number");
+        expect(Number.isFinite(value)).toBe(true);
+      });
+    });
+
+    it("should not have any NaN values", () => {
+      Object.values(DefaultZIndexes).forEach((value) => {
+        expect(Number.isNaN(value)).toBe(false);
+      });
+    });
+
+    it("should have integer values only", () => {
+      Object.values(DefaultZIndexes).forEach((value) => {
+        expect(Number.isInteger(value)).toBe(true);
+      });
+    });
+  });
+
+  describe("specific use cases", () => {
+    it("should provide appropriate zIndex for Bar and RadialBar backgrounds", () => {
+      // Background should be behind bars but visible
+      expect(DefaultZIndexes.barBackground).toBeLessThan(DefaultZIndexes.bar);
+      // Background should be visible (not too far back)
+      expect(DefaultZIndexes.barBackground).toBeGreaterThan(-100);
+    });
+
+    it("should ensure active elements appear on top", () => {
+      expect(DefaultZIndexes.activeBar).toBeGreaterThan(DefaultZIndexes.bar);
+      expect(DefaultZIndexes.activeDot).toBeGreaterThan(DefaultZIndexes.scatter);
+    });
+
+    it("should ensure grid appears behind all chart elements", () => {
+      const nonGridValues = Object.entries(DefaultZIndexes)
+        .filter(([key]) => key !== "grid")
+        .map(([, value]) => value);
+
+      nonGridValues.forEach((value) => {
+        expect(DefaultZIndexes.grid).toBeLessThan(value);
+      });
+    });
+  });
+});

package/test/zIndex/DynamicZIndex.spec.tsx

@@ -0,0 +1,102 @@
+// Port of recharts 3.8.1 test/zIndex/DynamicZIndex.spec.tsx (commit 7a23854).
+// Tier A (DOM assertion: the two `.recharts-line` groups stay mounted across
+// dynamic zIndex updates). The upstream spec only asserts survival (both lines
+// stay in the DOM); a second `describe` below ADDS a port-authored relayering
+// assertion — the zIndexed line RELOCATES into `.recharts-zIndex-layer_<n>` as the
+// prop changes, and the un-zIndexed line stays in its default (400) portal — which
+// is the observable behaviour the wiring enables. Harness adaptations:
+//   - React `useState` → Solid `createSignal`; `setZIndex(z => z + 1)` → updater.
+//   - `act(() => vi.runAllTimers())` dropped: both Lines use
+//     `isAnimationActive={false}`, so there is no timer to flush; reactive
+//     propagation is driven by `flush()` instead.
+//   - `button.click()` → `fireEvent.click(button)`; `getByText` → `screen.getByText`.
+import { describe, it, expect } from "vitest";
+import { createSignal, flush } from "solid-js";
+import { LineChart, Line, XAxis, YAxis } from "../../src";
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+
+describe("Dynamic zIndex updates", () => {
+  it("should keep the line in the DOM when zIndex changes dynamically", () => {
+    const data = [
+      { name: "A", uv: 400, pv: 2400 },
+      { name: "B", uv: 300, pv: 4567 },
+    ];
+
+    const [zIndex, setZIndex] = createSignal(10);
+
+    const { container } = render(() => (
+      <div>
+        <button type="button" onClick={() => setZIndex((z) => z + 1)}>
+          Increment zIndex
+        </button>
+        <LineChart width={400} height={400} data={data}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Line dataKey="uv" stroke="#8884d8" zIndex={zIndex()} isAnimationActive={false} />
+          <Line dataKey="pv" stroke="#82ca9d" isAnimationActive={false} />
+        </LineChart>
+      </div>
+    ));
+    flush();
+
+    const initialLines = container.querySelectorAll(".recharts-line");
+    expect(initialLines.length).toBe(2);
+
+    const button = screen.getByText("Increment zIndex");
+
+    // Rapid zIndex updates should not cause lines to disappear
+    fireEvent.click(button);
+    flush();
+
+    let lines = container.querySelectorAll(".recharts-line");
+    expect(lines.length).toBe(2);
+
+    fireEvent.click(button);
+    flush();
+
+    lines = container.querySelectorAll(".recharts-line");
+    expect(lines.length).toBe(2);
+  });
+
+  it("relocates the zIndexed line into its portal as zIndex changes, leaving the other in the default (400) portal", () => {
+    const data = [
+      { name: "A", uv: 400, pv: 2400 },
+      { name: "B", uv: 300, pv: 4567 },
+    ];
+
+    const [zIndex, setZIndex] = createSignal(10);
+
+    const { container } = render(() => (
+      <div>
+        <button type="button" onClick={() => setZIndex((z) => z + 1)}>
+          Increment zIndex
+        </button>
+        <LineChart width={400} height={400} data={data}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Line dataKey="uv" stroke="#8884d8" zIndex={zIndex()} isAnimationActive={false} />
+          <Line dataKey="pv" stroke="#82ca9d" isAnimationActive={false} />
+        </LineChart>
+      </div>
+    ));
+    flush();
+
+    const portalHasLine = (z: number): boolean => {
+      const portal = container.querySelector(`.recharts-zIndex-layer_${z}`);
+      return portal != null && portal.querySelector(".recharts-line") != null;
+    };
+
+    // Initially the uv line lives in the zIndex=10 portal; the un-zIndexed pv line
+    // lives in the default line portal (DefaultZIndexes.line = 400).
+    expect(portalHasLine(10)).toBe(true);
+    expect(portalHasLine(400)).toBe(true);
+
+    fireEvent.click(screen.getByText("Increment zIndex"));
+    flush();
+    // The uv line has moved to the zIndex=11 portal; the old 10 portal no longer
+    // holds a line; the pv line stays at 400.
+    expect(portalHasLine(11)).toBe(true);
+    expect(portalHasLine(10)).toBe(false);
+    expect(portalHasLine(400)).toBe(true);
+  });
+});

package/test/zIndex/ZIndexLayer.portalOwner.spec.tsx

@@ -0,0 +1,125 @@
+// Regression: <ZIndexLayer> renders its children through a <Portal> when zIndex≠0.
+// The portal target settles asynchronously, so the <Portal> is created during a
+// flush; Solid's runEffect runs an effect's APPLY phase without re-establishing the
+// effect as owner, so <Portal>'s apply-phase insert() would create child
+// render-effects with no owner (NO_OWNER_EFFECT — they never dispose). The fix
+// captures the component owner (getOwner) and re-establishes it around the Portal
+// (runWithOwner) + keys the target Show. These tests fail (NO_OWNER) without it; the
+// test/setup.ts global guard turns any NO_OWNER_EFFECT into a failure.
+import { describe, expect, it } from "vitest";
+import { createSignal, flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { BarChart, Bar } from "../../src";
+import type { AnimationController } from "../../src";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import { MockControllerAnimationManager } from "../animation/mockControllerAnimationManager";
+import { PageData } from "../_data";
+
+const small = PageData.slice(0, 2);
+const large = PageData.slice(0, 3);
+
+// Bar runs on the v3.9 animation engine, so we drive it through an injected
+// AnimationController that routes per-id (via handle.getAnimationId()) to a
+// MockControllerAnimationManager — a remount's stop() on the old id then never
+// clobbers the new id's manager.
+function createRegistry(): {
+  controller: AnimationController;
+  current: () => MockControllerAnimationManager;
+} {
+  const managers = new Map<string, MockControllerAnimationManager>();
+  let latest: MockControllerAnimationManager | null = null;
+  return {
+    controller: (timeoutController, animationHandle, listener) => {
+      const id = animationHandle.getAnimationId();
+      let m = managers.get(id);
+      if (m == null) {
+        m = new MockControllerAnimationManager(id);
+        managers.set(id, m);
+      }
+      latest = m;
+      m.start(animationHandle, listener);
+      return () => m.stop();
+    },
+    current: () => {
+      if (latest == null) throw new Error("no manager yet");
+      return latest;
+    },
+  };
+}
+
+// Swap data via an in-tree button click so the data-change re-render happens
+// inside the render owner (mirrors the legacy harness).
+function renderChart(background: boolean): {
+  setData: (d: typeof small) => void;
+  registry: ReturnType<typeof createRegistry>;
+} {
+  const registry = createRegistry();
+  const [data, setData] = createSignal<typeof small>(small);
+  const [next, setNext] = createSignal<typeof small | null>(null);
+  const { container } = render(() => (
+    <AnimationControllerProvider value={registry.controller}>
+      <button
+        type="button"
+        data-testid="swap"
+        onClick={() => {
+          const n = next();
+          if (n != null) setData(() => n);
+        }}
+      />
+      <BarChart width={200} height={200} data={data()}>
+        <Bar
+          dataKey="uv"
+          background={background}
+          isAnimationActive
+          animationDuration={1000}
+          animationEasing="linear"
+        />
+      </BarChart>
+    </AnimationControllerProvider>
+  )) as { container: HTMLElement };
+  flush();
+  const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
+  if (button == null) throw new Error("no button");
+  return {
+    setData: (d) => {
+      setNext(() => d);
+      flush();
+      fireEvent.click(button);
+      flush();
+    },
+    registry,
+  };
+}
+
+describe("ZIndexLayer/Portal leak", () => {
+  it("two coexisting BarCharts must not leak NO_OWNER", () => {
+    const node = (): JSX.Element => (
+      <BarChart width={200} height={200} data={small}>
+        <Bar dataKey="uv" isAnimationActive={false} />
+      </BarChart>
+    );
+    render(node);
+    flush();
+    flush();
+    render(node);
+    flush();
+    flush();
+    expect(true).toBe(true);
+  });
+
+  it("re-animation across grow + shrink (with background) must not leak", async () => {
+    const r = renderChart(true);
+    await r.registry.current().completeAnimation();
+    flush();
+    r.setData(large);
+    await r.registry.current().setAnimationProgress(0.5);
+    flush();
+    await r.registry.current().completeAnimation();
+    flush();
+    r.setData(small);
+    await r.registry.current().completeAnimation();
+    flush();
+    expect(true).toBe(true);
+  });
+});