solid-recharts 0.2.0 → 0.2.1

package/test/state/selectors/selectorMemoization.spec.tsx

@@ -0,0 +1,136 @@
+// Regression gate for the memoized selector graph (ADR-0002).
+//
+// This is the direct test of the performance win: the expensive
+// applied-values / displayed-data chain must be SHARED (a repeat call returns
+// the identical reference) and must NOT be invalidated by a tooltip/mousemove
+// interaction (the classic recharts hotspot), while STILL invalidating when the
+// underlying chart data actually changes. Reference identity is the observable
+// proxy for "did the O(series×points) combiner re-run".
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { Line, LineChart, XAxis } from "../../../src";
+import { useAppStore } from "../../../src/state/hooks";
+import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
+import {
+  selectAllAppliedValues,
+  selectAxisDomain,
+  selectAxisScale,
+  selectCartesianItemsSettings,
+  selectDisplayedData,
+  selectNumericalDomain,
+  selectTicksOfGraphicalItem,
+} from "../../../src/state/selectors/axisSelectors";
+import type { RechartsStore } from "../../../src/state/store";
+
+const data = [
+  { name: "a", uv: 10 },
+  { name: "b", uv: 30 },
+  { name: "c", uv: 20 },
+  { name: "d", uv: 40 },
+];
+
+function renderChartAndCaptureStore(): RechartsStore {
+  let store: RechartsStore | undefined;
+  const Capture = (): null => {
+    store = useAppStore();
+    return null;
+  };
+  render(() => (
+    <LineChart width={200} height={200} data={data}>
+      <XAxis dataKey="name" />
+      <Line dataKey="uv" isAnimationActive={false} />
+      <Capture />
+    </LineChart>
+  ));
+  flush();
+  flush();
+  flush();
+  if (store == null) {
+    throw new Error("store capture failed");
+  }
+  return store;
+}
+
+describe("memoized selector graph", () => {
+  it("shares the applied-values chain: a repeat call returns the identical reference", () => {
+    const store = renderChartAndCaptureStore();
+    const first = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+    const second = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+    expect(second).toBe(first);
+    // The intermediate nodes are shared too.
+    expect(selectDisplayedData(store.state, "xAxis", defaultAxisId, false)).toBe(
+      selectDisplayedData(store.state, "xAxis", defaultAxisId, false),
+    );
+    expect(selectCartesianItemsSettings(store.state, "xAxis", defaultAxisId)).toBe(
+      selectCartesianItemsSettings(store.state, "xAxis", defaultAxisId),
+    );
+  });
+
+  it("does NOT invalidate the data chain on a tooltip/mousemove interaction (the fan-out win)", () => {
+    const store = renderChartAndCaptureStore();
+    const before = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+    const displayedBefore = selectDisplayedData(store.state, "xAxis", defaultAxisId, false);
+
+    // Simulate the per-frame mousemove state write.
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeIndex: "2",
+      activeDataKey: undefined,
+      activeCoordinate: { x: 50, y: 50 },
+    });
+    flush();
+
+    const after = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+    const displayedAfter = selectDisplayedData(store.state, "xAxis", defaultAxisId, false);
+    // The expensive chain is untouched by the interaction — same references,
+    // so no combiner re-ran. This is what collapses the ~10× mousemove fan-out.
+    expect(after).toBe(before);
+    expect(displayedAfter).toBe(displayedBefore);
+  });
+
+  it("keeps the full domain→scale→ticks chain stable across a mousemove", () => {
+    const store = renderChartAndCaptureStore();
+    const axes = ["xAxis", "yAxis"] as const;
+    const before = axes.map((axisType) => ({
+      numericalDomain: selectNumericalDomain(store.state, axisType, defaultAxisId, false),
+      axisDomain: selectAxisDomain(store.state, axisType, defaultAxisId, false),
+      scale: selectAxisScale(store.state, axisType, defaultAxisId, false),
+      ticks: selectTicksOfGraphicalItem(store.state, axisType, defaultAxisId, false),
+    }));
+
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeIndex: "1",
+      activeDataKey: undefined,
+      activeCoordinate: { x: 30, y: 30 },
+    });
+    flush();
+
+    axes.forEach((axisType, i) => {
+      const prev = before[i]!;
+      expect(selectNumericalDomain(store.state, axisType, defaultAxisId, false)).toBe(
+        prev.numericalDomain,
+      );
+      expect(selectAxisDomain(store.state, axisType, defaultAxisId, false)).toBe(prev.axisDomain);
+      expect(selectAxisScale(store.state, axisType, defaultAxisId, false)).toBe(prev.scale);
+      expect(selectTicksOfGraphicalItem(store.state, axisType, defaultAxisId, false)).toBe(
+        prev.ticks,
+      );
+    });
+  });
+
+  it("DOES invalidate when the chart data changes (correctness)", () => {
+    const store = renderChartAndCaptureStore();
+    const before = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+
+    store.actions.chartData.setChartData([
+      { name: "a", uv: 11 },
+      { name: "b", uv: 31 },
+      { name: "c", uv: 21 },
+    ]);
+    flush();
+
+    const after = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
+    expect(after).not.toBe(before);
+    expect(after.map((v) => v.value)).toEqual(["a", "b", "c"]);
+  });
+});

package/test/util/CartesianUtils/CartesianUtils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { scaleLinear, scaleBand } from "victory-vendor/d3-scale";
+import { scaleLinear, scaleBand } from "d3-scale";
 import { getAngledRectangleWidth, normalizeAngle } from "../../../src/util/CartesianUtils";
 import { rechartsScaleFactory } from "../../../src/util/scale/RechartsScale";
 import { CartesianScaleHelperImpl } from "../../../src/util/scale/CartesianScaleHelper";

package/test/util/ChartUtils/ChartUtils.spec.ts

@@ -1,4 +1,4 @@
-import { scaleBand, scaleLinear, scalePoint } from "victory-vendor/d3-scale";
+import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
 import {
   type AxisPropsNeededForTicksGenerator,
   getBandSizeOfAxis,

package/test/util/ChartUtils/getCateCoordinateOfLine.spec.ts

@@ -79,5 +79,19 @@ describe("getCateCoordinateOfLine", () => {
       });
       expect(actual).toBe(18);
     });
+
+    it("should not match NaN tick values and should fall back to the indexed tick", () => {
+      const actual = getCateCoordinateOfLine({
+        axis: { type: "category", dataKey: "foo", scale: mockScale },
+        bandSize: 4,
+        entry: { foo: NaN },
+        index: 0,
+        ticks: [
+          { coordinate: 8, index: 0, value: "fallback" },
+          { coordinate: 16, index: 1, value: NaN },
+        ],
+      });
+      expect(actual).toBe(10);
+    });
   });
 });

package/test/util/ChartUtils/getStackedData.spec.ts

@@ -1,4 +1,4 @@
-import type { Series, SeriesPoint } from "victory-vendor/d3-shape";
+import type { Series, SeriesPoint } from "d3-shape";
 import { getStackedData, offsetSign } from "../../../src/util/ChartUtils";
 import type { StackOffsetType } from "../../../src/util/types";
 

package/test/util/ChartUtils/truncateByDomain.spec.ts

@@ -1,4 +1,4 @@
-import type { SeriesPoint } from "victory-vendor/d3-shape";
+import type { SeriesPoint } from "d3-shape";
 import { truncateByDomain } from "../../../src/util/ChartUtils";
 
 function createMockSeriesPoint(val: [number, number]): SeriesPoint<Record<number, number>> {

package/test/util/scale/createCategoricalInverse.spec.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 test/util/scale/createCategoricalInverse.spec.ts (commit 7a23854).
 import { describe, it, expect } from "vitest";
-import { scaleLinear } from "victory-vendor/d3-scale";
+import { scaleLinear } from "d3-scale";
 import { bisect, createCategoricalInverse } from "../../../src/util/scale/createCategoricalInverse";
 import { CustomScaleDefinition } from "../../../src/util/scale/CustomScaleDefinition";
 

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

package/src/state/reduxDevtoolsJsonStringifyReplacer.ts

@@ -1,15 +0,0 @@
-// Ported from recharts 3.8.1 src/state/reduxDevtoolsJsonStringifyReplacer.ts
-// Pure util — no framework surface — behavior is byte-identical to recharts.
-
-export function reduxDevtoolsJsonStringifyReplacer(key: string, value: unknown) {
-  if (value instanceof HTMLElement) {
-    return `HTMLElement <${value.tagName} class="${value.className}">`;
-  }
-  if (value === window) {
-    return "global.window";
-  }
-  if (key === "children" && typeof value === "object" && value !== null) {
-    return "<<CHILDREN>>";
-  }
-  return value;
-}

package/src/util/axisPropsAreEqual.ts

@@ -1,42 +0,0 @@
-// Ported from recharts 3.8.1 src/util/axisPropsAreEqual.ts (commit 7a23854).
-import { AxisRange } from "../state/selectors/axisSelectors";
-import { AxisDomain } from "./types";
-import { propsAreEqual } from "./propsAreEqual";
-
-function shortArraysAreEqual(
-  arr1: AxisDomain | AxisRange | undefined,
-  arr2: AxisDomain | AxisRange | undefined,
-): boolean {
-  if (arr1 === arr2) {
-    return true;
-  }
-
-  if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
-    return arr1[0] === arr2[0] && arr1[1] === arr2[1];
-  }
-
-  return false;
-}
-
-export function axisPropsAreEqual<
-  T extends Record<string, unknown> & {
-    domain?: AxisDomain;
-    range?: AxisRange;
-  },
->(prevProps: T, nextProps: T): boolean {
-  if (prevProps === nextProps) {
-    return true;
-  }
-  const { domain: prevDomain, range: prevRange, ...prevRest } = prevProps;
-  const { domain: nextDomain, range: nextRange, ...nextRest } = nextProps;
-
-  if (!shortArraysAreEqual(prevDomain, nextDomain)) {
-    return false;
-  }
-
-  if (!shortArraysAreEqual(prevRange, nextRange)) {
-    return false;
-  }
-
-  return propsAreEqual(prevRest, nextRest);
-}

package/src/util/resolveDefaultProps.tsx

@@ -1,8 +0,0 @@
-// SKIPPED — intentionally NOT ported to the SolidJS port.
-//
-// Reason: React defaultProps shim — use Solid merge()
-//
-// TODO: do not port this file as-is. The Solid-native port replaces it (see the
-// reason above). If a consumer needs this path, wire it to the Solid equivalent
-// instead.
-export {};

package/src/util/typedDataKey.ts

@@ -1,8 +0,0 @@
-// SKIPPED — intentionally NOT ported to the SolidJS port.
-//
-// Reason: already inlined as TypedDataKey in util/types.ts
-//
-// TODO: do not port this file as-is. The Solid-native port replaces it (see the
-// reason above). If a consumer needs this path, wire it to the Solid equivalent
-// instead.
-export {};

package/test/state/reduxDevtoolsJsonStringifyReplacer.spec.ts

@@ -1,25 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { reduxDevtoolsJsonStringifyReplacer } from "../../src/state/reduxDevtoolsJsonStringifyReplacer";
-
-describe("reduxDevtoolsJsonStringifyReplacer", () => {
-  it("should return the original value if the value is not an object", () => {
-    expect(reduxDevtoolsJsonStringifyReplacer("", "foo")).toBe("foo");
-  });
-
-  it("should return string if the value is an HTML element", () => {
-    const p = document.createElement("p");
-    p.classList.add("my-example-class");
-    expect(reduxDevtoolsJsonStringifyReplacer("", p)).toBe(
-      'HTMLElement <P class="my-example-class">',
-    );
-  });
-
-  it("should return string if the value is a global window object", () => {
-    /*
-     * Firefox devtools throw exceptions when attempting to deeply serialize window object
-     * because some of the properties inside belong to another iframe
-     * and that other iframe sometimes has cross-origin access limitations.
-     */
-    expect(reduxDevtoolsJsonStringifyReplacer("", window)).toBe("global.window");
-  });
-});

package/test/util/axisPropsAreEqual.spec.ts

@@ -1,93 +0,0 @@
-// Ported from recharts 3.8.1 test/util/axisPropsAreEqual.spec.ts (commit 7a23854).
-// Solid deviation: the comparator is pure, so tests use plain prop records rather
-// than importing React-oriented axis prop types.
-import { describe, expect, it } from "vitest";
-import { axisPropsAreEqual } from "../../src/util/axisPropsAreEqual";
-import { AxisRange } from "../../src/state/selectors/axisSelectors";
-
-describe("axisPropsAreEqual", () => {
-  it("should return true for identical props", () => {
-    const props1 = { xAxisId: 1 };
-    const props2 = { xAxisId: 1 };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should return false for different props", () => {
-    const props1 = { width: "auto" };
-    const props2 = { width: "auto", height: "auto" };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-
-  it("should return false for different nested props", () => {
-    const props1 = { mirror: true, padding: { left: 0 } };
-    const props2 = { mirror: true, padding: { left: 10 } };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-
-  it("should return true for same reference nested props", () => {
-    const nested = { left: 0 };
-    const props1 = { minTickGap: 1, padding: nested };
-    const props2 = { minTickGap: 1, padding: nested };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should return true for same value, different reference, allowlisted nested props", () => {
-    const props1 = { axisLine: { x: 10, y: 20 } };
-    const props2 = { axisLine: { x: 10, y: 20 } };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should return false for different value, different reference, allowlisted nested props", () => {
-    const props1 = { axisLine: { x: 10, y: 20 } };
-    const props2 = { axisLine: { x: 10, y: 30 } };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-
-  it("should treat undefined and null as if they were equal", () => {
-    const props1: { label: null | undefined } = { label: undefined };
-    const props2: { label: null | undefined } = { label: null };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should treat positive and negative zero as equal", () => {
-    const props1 = { tickMargin: 0 };
-    const props2 = { tickMargin: -0 };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should treat NaN values as equal", () => {
-    const props1 = { angle: NaN };
-    const props2 = { angle: NaN };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should treat two equal domain arrays as equal", () => {
-    const props1 = { domain: [0, 100] };
-    const props2 = { domain: [0, 100] };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should treat two different domain arrays as different", () => {
-    const props1 = { domain: [0, 100] };
-    const props2 = { domain: [0, 200] };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-
-  it("should treat two equal range arrays as equal", () => {
-    const props1: { range: AxisRange } = { range: [0, 500] };
-    const props2: { range: AxisRange } = { range: [0, 500] };
-    expect(axisPropsAreEqual(props1, props2)).toBe(true);
-  });
-
-  it("should treat two different range arrays as different", () => {
-    const props1: { range: AxisRange } = { range: [0, 500] };
-    const props2: { range: AxisRange } = { range: [0, 600] };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-
-  it("should treat two same categorical domains as different", () => {
-    const props1 = { domain: ["a", "b", "c"] };
-    const props2 = { domain: ["a", "b", "c"] };
-    expect(axisPropsAreEqual(props1, props2)).toBe(false);
-  });
-});