solid-recharts 0.2.0 → 1.0.0

package/test/util/useUniqueId.spec.ts

@@ -1,99 +0,0 @@
-// 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

@@ -1,18 +0,0 @@
-// 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

@@ -1,58 +0,0 @@
-// 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

@@ -1,83 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-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

@@ -1,102 +0,0 @@
-// 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

@@ -1,125 +0,0 @@
-// 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);
-  });
-});