solid-recharts 0.1.0 → 0.2.1

package/src/state/selectors/barSelectors.ts

@@ -37,6 +37,10 @@ import {
   selectYAxisIdFromGraphicalItemId,
 } from "./graphicalItemSelectors";
 import { combineBarPosition } from "./combiners/combineBarPosition";
+import {
+  selectAxisWithScaleForGraphicalItem,
+  selectTicksForGraphicalItem,
+} from "./selectAxisForGraphicalItem";
 
 const selectSynchronisedBarSettings = (
   state: RechartsRootState,
@@ -187,38 +191,6 @@ export const selectBarPosition = (
     selectSynchronisedBarSettings(state, id),
   );
 
-const selectXAxisWithScale = (
-  state: RechartsRootState,
-  id: GraphicalItemId,
-  isPanorama: boolean,
-) => {
-  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
-  return xAxisId == null ? undefined : selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
-};
-
-const selectYAxisWithScale = (
-  state: RechartsRootState,
-  id: GraphicalItemId,
-  isPanorama: boolean,
-) => {
-  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
-  return yAxisId == null ? undefined : selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
-};
-
-const selectXAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
-  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
-  return xAxisId == null
-    ? undefined
-    : selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
-};
-
-const selectYAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
-  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
-  return yAxisId == null
-    ? undefined
-    : selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
-};
-
 const selectBarStackGroups = (
   state: RechartsRootState,
   id: GraphicalItemId,
@@ -253,10 +225,10 @@ export const selectBarRectangles = (
 ): ReadonlyArray<BarRectangleItem> | undefined => {
   const axisViewBox = selectAxisViewBox(state);
   const offset = selectChartOffsetInternal(state);
-  const xAxis = selectXAxisWithScale(state, id, isPanorama);
-  const yAxis = selectYAxisWithScale(state, id, isPanorama);
-  const xAxisTicks = selectXAxisTicks(state, id, isPanorama);
-  const yAxisTicks = selectYAxisTicks(state, id, isPanorama);
+  const xAxis = selectAxisWithScaleForGraphicalItem(state, "xAxis", id, isPanorama);
+  const yAxis = selectAxisWithScaleForGraphicalItem(state, "yAxis", id, isPanorama);
+  const xAxisTicks = selectTicksForGraphicalItem(state, "xAxis", id, isPanorama);
+  const yAxisTicks = selectTicksForGraphicalItem(state, "yAxis", id, isPanorama);
   const pos = selectBarPosition(state, id, isPanorama);
   const layout: LayoutType = selectChartLayout(state);
   const { chartData, dataStartIndex, dataEndIndex } =

package/src/state/selectors/combiners/combineConfiguredScale.ts

@@ -7,7 +7,7 @@
 // we spread the namespace into a plain record and narrow each candidate to a
 // scale factory through a user-defined type guard before calling it. Behavior is
 // identical (unknown names / non-function exports → `undefined`).
-import * as d3Scales from "victory-vendor/d3-scale";
+import * as d3Scales from "d3-scale";
 import {
   CategoricalDomain,
   CategoricalDomainItem,

package/src/state/selectors/combiners/combineRealScaleType.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/selectors/combiners/combineRealScaleType.ts
 // (commit 7a23854).
-import * as d3Scales from "victory-vendor/d3-scale";
+import * as d3Scales from "d3-scale";
 import { RechartsScaleType } from "../../../util/types";
 import { BaseCartesianAxis } from "../../cartesianAxisSlice";
 import { upperFirst } from "../../../util/DataUtils";

package/src/state/selectors/dataSelectors.ts

@@ -1,12 +1,26 @@
 // Ported from recharts 3.8.1 src/state/selectors/dataSelectors.ts (commit 7a23854).
 //
-// Solid-native: plain selector functions, no reselect. recharts wraps several of
-// these in `createSelector` purely for memoization (to swallow spurious Immer
-// reference churn); in the Solid store, memoization comes from `useAppSelector`'s
-// `createMemo` at the consumer, so these stay plain functions. Behavior is
-// identical.
+// The chartData-projecting selectors below are wrapped in the Solid-native
+// `createSelector` (ADR-0002) so they present a stable reference when the data
+// is unchanged — the leaf-input fix the memoized selector graph depends on. The
+// remaining `slice`-returning helpers stay plain (they intentionally produce a
+// fresh window each call and their wrapped consumers absorb the churn).
 import { RechartsRootState } from "../store";
 import { ChartData, ChartDataState } from "../chartDataSlice";
+import { createSelector } from "../createSelector";
+
+// LEAF-INPUT rule (ADR-0002 "Known constraint"): these read the individual
+// leaves of the chartData slice — never the slice root `state.chartData`, whose
+// proxy reference is permanently stable in Solid and so can never invalidate a
+// reference-keyed cache. Reading the leaves (the `chartData` array is replaced
+// wholesale by `setChartData`; the indexes are primitives) lets `createSelector`
+// return a stable projected object when nothing changed and a fresh one when it
+// did — the reselect semantics the downstream selector graph relies on.
+const pickChartData = (state: RechartsRootState): ChartData | undefined =>
+  state.chartData.chartData;
+const pickComputedData = (state: RechartsRootState): unknown => state.chartData.computedData;
+const pickDataStartIndex = (state: RechartsRootState): number => state.chartData.dataStartIndex;
+const pickDataEndIndex = (state: RechartsRootState): number => state.chartData.dataEndIndex;
 
 /**
  * Always returns the data with the indexes set by a Brush. That might or might
@@ -15,23 +29,28 @@ import { ChartData, ChartDataState } from "../chartDataSlice";
  * {@link selectChartDataAndAlwaysIgnoreIndexes} or
  * {@link selectChartDataWithIndexesIfNotInPanoramaPosition4} when that matters.
  */
-export const selectChartDataWithIndexes = (state: RechartsRootState): ChartDataState =>
-  state.chartData;
+export const selectChartDataWithIndexes: (state: RechartsRootState) => ChartDataState =
+  createSelector(
+    [pickChartData, pickComputedData, pickDataStartIndex, pickDataEndIndex],
+    (chartData, computedData, dataStartIndex, dataEndIndex) => ({
+      chartData,
+      computedData,
+      dataStartIndex,
+      dataEndIndex,
+    }),
+  );
 
 /**
  * Always returns the full range of data, ignoring Brush indexes. Useful for the
  * Brush panorama, Legend, and Tooltip.
  */
-export const selectChartDataAndAlwaysIgnoreIndexes = (state: RechartsRootState): ChartDataState => {
-  const dataState = selectChartDataWithIndexes(state);
-  const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
-  return {
-    chartData: dataState.chartData,
-    computedData: dataState.computedData,
-    dataEndIndex,
+export const selectChartDataAndAlwaysIgnoreIndexes: (state: RechartsRootState) => ChartDataState =
+  createSelector([pickChartData, pickComputedData], (chartData, computedData) => ({
+    chartData,
+    computedData,
+    dataEndIndex: chartData != null ? chartData.length - 1 : 0,
     dataStartIndex: 0,
-  };
-};
+  }));
 
 export const selectChartDataWithIndexesIfNotInPanoramaPosition4 = (
   state: RechartsRootState,

package/src/state/selectors/numberDomainEqualityCheck.ts

@@ -1,8 +1,16 @@
-// SKIPPED — intentionally NOT ported to the SolidJS port.
-//
-// Reason: reselect resultEqualityCheck — Solid memoizes via createMemo, not needed
-//
-// 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. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
-export {};
+// Ported from recharts 3.9.2 src/state/selectors/numberDomainEqualityCheck.ts.
+// See arrayEqualityCheck.ts for why this is now ported (ADR-0002).
+import type { NumberDomain } from "../../util/types";
+
+export const numberDomainEqualityCheck = (
+  a: NumberDomain | undefined,
+  b: NumberDomain | undefined,
+): boolean => {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null) {
+    return false;
+  }
+  return a[0] === b[0] && a[1] === b[1];
+};

package/src/state/selectors/selectAxisForGraphicalItem.ts

@@ -0,0 +1,52 @@
+// Resolves the scaled axis / ticks a cartesian graphical item is bound to, from
+// the item's id. Area and Bar each declared these four wrappers privately (and
+// Bar carried a dead `axisId == null` guard — selectX/YAxisIdFromGraphicalItemId
+// never returns null, it falls back to defaultAxisId). Concentrated here so the
+// "which axis does this item read" resolution lives once.
+//
+// A leaf module (like areaSelectors/barSelectors): it imports from both
+// axisSelectors and graphicalItemSelectors, so it introduces no import cycle.
+import { RechartsRootState } from "../store";
+import { GraphicalItemId } from "../graphicalItemsSlice";
+import {
+  selectAxisWithScale,
+  selectTicksOfGraphicalItem,
+  type BaseAxisWithScale,
+} from "./axisSelectors";
+import {
+  selectXAxisIdFromGraphicalItemId,
+  selectYAxisIdFromGraphicalItemId,
+} from "./graphicalItemSelectors";
+import type { TickItem } from "../../util/types";
+
+type CartesianAxisType = "xAxis" | "yAxis";
+
+const axisIdForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+) =>
+  axisType === "xAxis"
+    ? selectXAxisIdFromGraphicalItemId(state, id)
+    : selectYAxisIdFromGraphicalItemId(state, id);
+
+export const selectAxisWithScaleForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): BaseAxisWithScale | undefined =>
+  selectAxisWithScale(state, axisType, axisIdForGraphicalItem(state, axisType, id), isPanorama);
+
+export const selectTicksForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): TickItem[] | undefined =>
+  selectTicksOfGraphicalItem(
+    state,
+    axisType,
+    axisIdForGraphicalItem(state, axisType, id),
+    isPanorama,
+  );

package/src/state/store.ts

@@ -6,7 +6,6 @@
 // root store composes them — `state` mirrors the slice state proxies, `actions`
 // namespaces the slice actions by slice name (symmetric with `state`).
 //
-// Grows as each slice lands (PORT_ORDER Tier 2 builds the core feature-vertically).
 import { createChartDataSlice, type ChartDataActions, type ChartDataState } from "./chartDataSlice";
 import {
   createChartLayoutSlice,

package/src/state/tooltipSlice.ts

@@ -7,6 +7,8 @@
 // graphicalItemsSlice (SetTooltipEntrySettings is the sole caller and each
 // graphical item registers exactly one entry, so the id is unique).
 import { createStore } from "solid-js";
+import { createCollectionActions } from "./createCollectionActions";
+import { patched } from "./patched";
 import { TooltipTrigger } from "../chart/types";
 import type { NameType, Payload, ValueType } from "../component/DefaultTooltipContent";
 import { CartesianViewBoxRequired, Coordinate, DataKey, PolarCoordinate } from "../util/types";
@@ -179,96 +181,121 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
     settings: { ...initialState.settings },
   });
 
-  const actions: TooltipActions = {
-    addTooltipEntrySettings(payload) {
-      setState((s) => {
-        s.tooltipItemPayloads = [...s.tooltipItemPayloads, payload];
-      });
-    },
-    replaceTooltipEntrySettings({ prev, next }) {
+  // Deviation: recharts matches `prev` by reference (`indexOf`), but a Solid store
+  // proxies stored objects so the raw `prev` never `===` the proxied element. The
+  // collection matches by `settings.graphicalItemId` instead — the same proxy-safe
+  // identity strategy as graphicalItemsSlice. Each graphical item registers exactly
+  // one entry, so the id is unique.
+  const entries = createCollectionActions<TooltipPayloadConfiguration>(
+    (updater) =>
       setState((s) => {
-        // Deviation: recharts matches `prev` by reference (`indexOf`), but a
-        // Solid store proxies stored objects so the raw `prev` never `===` the
-        // proxied element. Match by `settings.graphicalItemId` instead — the
-        // same proxy-safe identity strategy as graphicalItemsSlice. Each
-        // graphical item registers exactly one entry, so the id is unique.
-        const index = s.tooltipItemPayloads.findIndex(
-          (p) => p.settings.graphicalItemId === prev.settings.graphicalItemId,
-        );
-        if (index > -1) {
-          const nextItems = s.tooltipItemPayloads.slice();
-          nextItems[index] = next;
-          s.tooltipItemPayloads = nextItems;
+        const next = updater(s.tooltipItemPayloads);
+        if (next !== s.tooltipItemPayloads) {
+          s.tooltipItemPayloads = next;
         }
-      });
-    },
-    removeTooltipEntrySettings(payload) {
-      setState((s) => {
-        s.tooltipItemPayloads = s.tooltipItemPayloads.filter(
-          (p) => p.settings.graphicalItemId !== payload.settings.graphicalItemId,
-        );
-      });
-    },
+      }),
+    (p) => p.settings.graphicalItemId,
+  );
+
+  const actions: TooltipActions = {
+    addTooltipEntrySettings: entries.add,
+    replaceTooltipEntrySettings: entries.replace,
+    removeTooltipEntrySettings: entries.remove,
     setTooltipSettingsState(payload) {
       setState((s) => {
         s.settings = payload;
       });
     },
     setActiveMouseOverItemIndex(payload) {
+      // Slice immutability contract (ADR-0002): replace each written interaction
+      // node so `state.tooltip.<node>` yields a new reference and the selector
+      // graph invalidates by input-reference comparison. In-place leaf writes
+      // keep the node reference stable, so reference-keyed selectors would never
+      // recompute — see the store-proxy-reference-identity memory.
       setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.keyboardInteraction.active = false;
-        s.itemInteraction.hover.active = true;
-        s.itemInteraction.hover.index = payload.activeIndex;
-        s.itemInteraction.hover.dataKey = payload.activeDataKey;
-        s.itemInteraction.hover.graphicalItemId = payload.activeGraphicalItemId;
-        s.itemInteraction.hover.coordinate = payload.activeCoordinate;
+        s.syncInteraction = patched(s.syncInteraction, {
+          active: false,
+          sourceViewBox: undefined,
+        });
+        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+        s.itemInteraction = patched(s.itemInteraction, {
+          hover: {
+            active: true,
+            index: payload.activeIndex,
+            dataKey: payload.activeDataKey,
+            graphicalItemId: payload.activeGraphicalItemId,
+            coordinate: payload.activeCoordinate,
+          },
+        });
       });
     },
     mouseLeaveChart() {
       setState((s) => {
-        s.itemInteraction.hover.active = false;
-        s.axisInteraction.hover.active = false;
+        s.itemInteraction = patched(s.itemInteraction, {
+          hover: patched(s.itemInteraction.hover, { active: false }),
+        });
+        s.axisInteraction = patched(s.axisInteraction, {
+          hover: patched(s.axisInteraction.hover, { active: false }),
+        });
       });
     },
     mouseLeaveItem() {
       setState((s) => {
-        s.itemInteraction.hover.active = false;
+        s.itemInteraction = patched(s.itemInteraction, {
+          hover: patched(s.itemInteraction.hover, { active: false }),
+        });
       });
     },
     setActiveClickItemIndex(payload) {
       setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.itemInteraction.click.active = true;
-        s.keyboardInteraction.active = false;
-        s.itemInteraction.click.index = payload.activeIndex;
-        s.itemInteraction.click.dataKey = payload.activeDataKey;
-        s.itemInteraction.click.graphicalItemId = payload.activeGraphicalItemId;
-        s.itemInteraction.click.coordinate = payload.activeCoordinate;
+        s.syncInteraction = patched(s.syncInteraction, {
+          active: false,
+          sourceViewBox: undefined,
+        });
+        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+        s.itemInteraction = patched(s.itemInteraction, {
+          click: {
+            active: true,
+            index: payload.activeIndex,
+            dataKey: payload.activeDataKey,
+            graphicalItemId: payload.activeGraphicalItemId,
+            coordinate: payload.activeCoordinate,
+          },
+        });
       });
     },
     setMouseOverAxisIndex(payload) {
       setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.axisInteraction.hover.active = true;
-        s.keyboardInteraction.active = false;
-        s.axisInteraction.hover.index = payload.activeIndex;
-        s.axisInteraction.hover.dataKey = payload.activeDataKey;
-        s.axisInteraction.hover.coordinate = payload.activeCoordinate;
+        s.syncInteraction = patched(s.syncInteraction, {
+          active: false,
+          sourceViewBox: undefined,
+        });
+        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+        s.axisInteraction = patched(s.axisInteraction, {
+          hover: patched(s.axisInteraction.hover, {
+            active: true,
+            index: payload.activeIndex,
+            dataKey: payload.activeDataKey,
+            coordinate: payload.activeCoordinate,
+          }),
+        });
       });
     },
     setMouseClickAxisIndex(payload) {
       setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.keyboardInteraction.active = false;
-        s.axisInteraction.click.active = true;
-        s.axisInteraction.click.index = payload.activeIndex;
-        s.axisInteraction.click.dataKey = payload.activeDataKey;
-        s.axisInteraction.click.coordinate = payload.activeCoordinate;
+        s.syncInteraction = patched(s.syncInteraction, {
+          active: false,
+          sourceViewBox: undefined,
+        });
+        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+        s.axisInteraction = patched(s.axisInteraction, {
+          click: patched(s.axisInteraction.click, {
+            active: true,
+            index: payload.activeIndex,
+            dataKey: payload.activeDataKey,
+            coordinate: payload.activeCoordinate,
+          }),
+        });
       });
     },
     setSyncInteraction(payload) {
@@ -278,9 +305,11 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
     },
     setKeyboardInteraction(payload) {
       setState((s) => {
-        s.keyboardInteraction.active = payload.active;
-        s.keyboardInteraction.index = payload.activeIndex;
-        s.keyboardInteraction.coordinate = payload.activeCoordinate;
+        s.keyboardInteraction = patched(s.keyboardInteraction, {
+          active: payload.active,
+          index: payload.activeIndex,
+          coordinate: payload.activeCoordinate,
+        });
       });
     },
   };

package/src/util/ActiveShapeUtils.tsx

@@ -28,13 +28,6 @@ function mergeShapeProps<PropsType extends object>(
   return { ...props, ...option };
 }
 
-/** Extracts a shape option's props (object form); element form is N/A (no cloneElement). */
-export function getPropsFromShapeOption<PropsType extends object>(
-  option: Partial<PropsType>,
-): Partial<PropsType> {
-  return option;
-}
-
 function getShapeIndex(shapeProps: object): string | number | undefined {
   if (!("index" in shapeProps)) {
     return undefined;

package/src/util/BarUtils.tsx

@@ -2,8 +2,7 @@
 //
 // Exports `BarRectangle`/`defaultBarShape` for background bars and custom shapes;
 // `MinPointSize` + `minPointSizeCallback` for computeBarRectangles.
-import invariant from "tiny-invariant";
-import { createMemo } from "solid-js";
+import { createMemo, omit } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { Rectangle, type RectangleProps } from "../shape/Rectangle";
 import type { BarShapeProps } from "../cartesian/Bar";
@@ -27,11 +26,13 @@ export type BarRectangleProps = Omit<BarShapeProps, "value" | "tooltipPosition"
 type BarRectangleShapeProps = Omit<BarRectangleProps, "option">;
 
 export function BarRectangle(props: BarRectangleProps): JSX.Element {
-  const shapeProps = createMemo((): BarRectangleShapeProps => {
-    const { option: _option, ...rest } = props;
-    void _option;
-    return rest;
-  });
+  // Snapshot of every prop except `option`. `omit` (not native
+  // `{ option, ...rest }`) is required because callers may pass a merged props
+  // proxy (e.g. `<BarRectangle {...rect} isActive={…} />`), whose rest-destructure
+  // fails to exclude `option` and leaks it to custom shape/background functions.
+  // Spreading into a plain object keeps the downstream <Shape> reads a static
+  // snapshot (no STRICT_READ), while the memo re-runs when any prop changes.
+  const shapeProps = createMemo((): BarRectangleShapeProps => ({ ...omit(props, "option") }));
   return (
     <Shape<BarRectangleShapeProps, SVGPathElement>
       option={props.option}
@@ -56,19 +57,23 @@ export type MinPointSize = number | ((value: number | undefined | null, index: n
  * @returns minPointSize
  */
 export const minPointSizeCallback =
-  (minPointSize: MinPointSize, defaultValue = 0) =>
-  (value: unknown, index: number): number => {
-    if (isNumber(minPointSize)) {
-      return minPointSize;
-    }
-    const isValueNumberOrNil = isNumber(value) || isNullish(value);
-    if (isValueNumberOrNil) {
-      return minPointSize(value, index);
-    }
+  // `_defaultValue` is part of the callback's signature but unreachable at runtime:
+  // the only branch that returned it now throws (see below), as upstream's
+  // tiny-invariant did. Kept positionally for API parity.
+  (minPointSize: MinPointSize, _defaultValue = 0) =>
+    (value: unknown, index: number): number => {
+      if (isNumber(minPointSize)) {
+        return minPointSize;
+      }
+      const isValueNumberOrNil = isNumber(value) || isNullish(value);
+      if (isValueNumberOrNil) {
+        return minPointSize(value, index);
+      }
 
-    invariant(
-      isValueNumberOrNil,
-      `minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
-    );
-    return defaultValue;
-  };
+      // Reached only when the value is neither a number nor nil; upstream asserts
+      // this via tiny-invariant, which always throws here — a plain throw is
+      // behavior-equivalent and drops the dependency.
+      throw new Error(
+        `minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
+      );
+    };