solid-recharts 0.2.0 → 1.0.0

package/src/state/polarAxisSlice.ts

@@ -2,7 +2,7 @@
 // FULL SOLID-NATIVE REWRITE (no Redux/immer): createStore + draft-first actions.
 // Polar charts are a deferred vertical; this slice is wired into the store so the
 // polar axis registration path is ready when Radar/RadialBar/Pie land.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { AxisId, BaseCartesianAxis, TicksSettings } from "./cartesianAxisSlice";
 
 export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings;
@@ -40,24 +40,32 @@ export function createPolarAxisSlice(
 
   const actions: PolarAxisActions = {
     addRadiusAxis(axis) {
-      setState((s) => {
-        s.radiusAxis[axis.id] = axis;
-      });
+      setState(
+        produce((s) => {
+          s.radiusAxis[axis.id] = axis;
+        }),
+      );
     },
     removeRadiusAxis(axis) {
-      setState((s) => {
-        delete s.radiusAxis[axis.id];
-      });
+      setState(
+        produce((s) => {
+          delete s.radiusAxis[axis.id];
+        }),
+      );
     },
     addAngleAxis(axis) {
-      setState((s) => {
-        s.angleAxis[axis.id] = axis;
-      });
+      setState(
+        produce((s) => {
+          s.angleAxis[axis.id] = axis;
+        }),
+      );
     },
     removeAngleAxis(axis) {
-      setState((s) => {
-        delete s.angleAxis[axis.id];
-      });
+      setState(
+        produce((s) => {
+          delete s.angleAxis[axis.id];
+        }),
+      );
     },
   };
 

package/src/state/polarOptionsSlice.ts

@@ -6,7 +6,7 @@
 // a reactive `polarOptions` getter so `state.polarOptions` stays `… | null`.
 // The reducer mutates fields in place when already set (preserving identity),
 // matching the reference.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 
 export type PolarChartOptions = {
   cx: number | string;
@@ -34,19 +34,21 @@ export function createPolarOptionsSlice(initialState: PolarChartState = null): P
 
   const actions: PolarOptionsActions = {
     updatePolarOptions(payload) {
-      setState((s) => {
-        const prev = s.current;
-        if (prev === null) {
-          s.current = payload;
-          return;
-        }
-        prev.startAngle = payload.startAngle;
-        prev.endAngle = payload.endAngle;
-        prev.cx = payload.cx;
-        prev.cy = payload.cy;
-        prev.innerRadius = payload.innerRadius;
-        prev.outerRadius = payload.outerRadius;
-      });
+      setState(
+        produce((s) => {
+          const prev = s.current;
+          if (prev === null) {
+            s.current = payload;
+            return;
+          }
+          prev.startAngle = payload.startAngle;
+          prev.endAngle = payload.endAngle;
+          prev.cx = payload.cx;
+          prev.cy = payload.cy;
+          prev.innerRadius = payload.innerRadius;
+          prev.outerRadius = payload.outerRadius;
+        }),
+      );
     },
   };
 

package/src/state/referenceElementsSlice.ts

@@ -11,7 +11,8 @@
 // therefore carries a generated `id` (the Report* component mints it via
 // useUniqueId) and we match by `id`, the same proxy-safe strategy as
 // graphicalItemsSlice / tooltipSlice / legendSlice.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { createCollectionActions } from "./createCollectionActions";
 import type { AxisId } from "./cartesianAxisSlice";
 import type { IfOverflow } from "../util/IfOverflow";
 import type { ReferenceLineSegment } from "../cartesian/ReferenceLine";
@@ -81,40 +82,54 @@ export function createReferenceElementsSlice(
     lines: [...initialState.lines],
   });
 
+  // State arrays are typed ReadonlyArray (immutable external API); the collection
+  // actions reassign the whole array rather than mutate in place (see ADR-0002).
+  // Reference elements have no replace action — a change is remove-then-add at the
+  // call site (ReferenceLine/Dot/Area), so only add + remove are wired.
+  const dots = createCollectionActions<ReferenceDotSettings>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.dots);
+          if (next !== s.dots) {
+            s.dots = next;
+          }
+        }),
+      ),
+    (d) => d.id,
+  );
+  const areas = createCollectionActions<ReferenceAreaSettings>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.areas);
+          if (next !== s.areas) {
+            s.areas = next;
+          }
+        }),
+      ),
+    (a) => a.id,
+  );
+  const lines = createCollectionActions<ReferenceLineSettings>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.lines);
+          if (next !== s.lines) {
+            s.lines = next;
+          }
+        }),
+      ),
+    (l) => l.id,
+  );
+
   const actions: ReferenceElementsActions = {
-    // State arrays are typed ReadonlyArray (immutable external API), so actions
-    // REASSIGN the whole array rather than mutate in place — Solid's fine-grained
-    // store still tracks the change, and the readonly type stays honest.
-    addDot(dot) {
-      setState((s) => {
-        s.dots = [...s.dots, dot];
-      });
-    },
-    removeDot(dot) {
-      setState((s) => {
-        s.dots = s.dots.filter((d) => d.id !== dot.id);
-      });
-    },
-    addArea(area) {
-      setState((s) => {
-        s.areas = [...s.areas, area];
-      });
-    },
-    removeArea(area) {
-      setState((s) => {
-        s.areas = s.areas.filter((a) => a.id !== area.id);
-      });
-    },
-    addLine(line) {
-      setState((s) => {
-        s.lines = [...s.lines, line];
-      });
-    },
-    removeLine(line) {
-      setState((s) => {
-        s.lines = s.lines.filter((l) => l.id !== line.id);
-      });
-    },
+    addDot: dots.add,
+    removeDot: dots.remove,
+    addArea: areas.add,
+    removeArea: areas.remove,
+    addLine: lines.add,
+    removeLine: lines.remove,
   };
 
   return { state, actions };

package/src/state/registerInStore.ts

@@ -0,0 +1,70 @@
+import { createEffect, on } from "solid-js";
+// The register-while-mounted idiom, concentrated.
+//
+// A graphical item / axis / reference element / tooltip / legend entry adds its
+// settings to the chart store while it is mounted and removes them on unmount.
+// Every such component used to hand-roll the identical dance: a two-argument
+// `createEffect(on(compute, apply))` (the compute phase builds the settings, the
+// apply phase adds-or-replaces — this shape is what keeps the reactive reads out
+// of the apply body, avoiding STRICT_READ_UNTRACKED), reference-based add/replace
+// tracking through a `let prev`, and an `unregisterOnCleanup` removal (which runs
+// the store write owner-free via `runWithOwner(null)`, avoiding
+// SIGNAL_WRITE_IN_OWNED_SCOPE on subtree disposal).
+//
+// This module owns that shell so every caller states only what genuinely varies:
+// how to compute its settings, and the three store actions. Both Solid
+// invariants above are now true by construction at every call site.
+//
+// Control signal: `compute` returning `undefined` skips the tick without touching
+// `prev` — exactly the early-return the sites used for every guard (store absent,
+// inside a Panorama, an axis whose type is not yet resolved). Callers fold those
+// guards into the compute closure, so there is a single skip path.
+import { unregisterOnCleanup } from "./unregisterOnCleanup";
+
+/**
+ * The three store writes a registration performs. `add` runs on first registration,
+ * `replace` when the computed settings change, `remove` on unmount.
+ *
+ * Slices without a dedicated replace action compose one: reference elements pass
+ * `replace: (prev, next) => { remove(prev); add(next); }`, and slices whose `add`
+ * overwrites by id (the polar axes) pass `replace: (_prev, next) => add(next)`.
+ */
+export interface StoreRegistrationHandlers<T> {
+  add(next: T): void;
+  replace(prev: T, next: T): void;
+  remove(prev: T): void;
+}
+
+/**
+ * Register `compute()`'s value in the store for as long as the calling component
+ * is mounted. Returns `undefined` from `compute` to skip (no write, `prev`
+ * untouched). Must be called synchronously during component setup so the effect
+ * and cleanup bind to the component's owner.
+ */
+export function registerInStore<T>(
+  compute: () => T | undefined,
+  handlers: StoreRegistrationHandlers<T>,
+): void {
+  let prev: T | null = null;
+
+  createEffect(
+    on(compute, (next: T | undefined) => {
+      if (next == null) {
+        return;
+      }
+      if (prev === null) {
+        handlers.add(next);
+      } else if (prev !== next) {
+        handlers.replace(prev, next);
+      }
+      prev = next;
+    }),
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev !== null) {
+      handlers.remove(prev);
+      prev = null;
+    }
+  });
+}

package/src/state/renderedTicksSlice.ts

@@ -4,7 +4,7 @@
 // Stores the ACTUALLY rendered ticks. The domain→ticks mapping lives in the
 // cartesianAxis selectors, but CartesianAxis uses DOM measurement to decide which
 // ticks to actually render; this slice stores those so a hook can return them.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { TickItem } from "../util/types";
 import { AxisId } from "./cartesianAxisSlice";
 
@@ -46,14 +46,18 @@ export function createRenderedTicksSlice(
 
   const actions: RenderedTicksActions = {
     setRenderedTicks({ axisType, axisId, ticks }) {
-      setState((s) => {
-        s[axisType][axisId] = ticks;
-      });
+      setState(
+        produce((s) => {
+          s[axisType][axisId] = ticks;
+        }),
+      );
     },
     removeRenderedTicks({ axisType, axisId }) {
-      setState((s) => {
-        delete s[axisType][axisId];
-      });
+      setState(
+        produce((s) => {
+          delete s[axisType][axisId];
+        }),
+      );
     },
   };
 

package/src/state/rootPropsSlice.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/rootPropsSlice.ts (commit 7a23854).
 // Solid-native slice. `BaseValue`/`SyncMethod` come from the (seeded) util/types.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { StackOffsetType, SyncMethod, BaseValue } from "../util/types";
 
 /**
@@ -50,19 +50,21 @@ export function createRootPropsSlice(
 
   const actions: RootPropsActions = {
     updateOptions(payload) {
-      setState((s) => {
-        s.accessibilityLayer = payload.accessibilityLayer;
-        s.barCategoryGap = payload.barCategoryGap;
-        s.barGap = payload.barGap ?? initialRootPropsState.barGap;
-        s.barSize = payload.barSize;
-        s.maxBarSize = payload.maxBarSize;
-        s.stackOffset = payload.stackOffset;
-        s.syncId = payload.syncId;
-        s.syncMethod = payload.syncMethod;
-        s.class = payload.class;
-        s.baseValue = payload.baseValue;
-        s.reverseStackOrder = payload.reverseStackOrder;
-      });
+      setState(
+        produce((s) => {
+          s.accessibilityLayer = payload.accessibilityLayer;
+          s.barCategoryGap = payload.barCategoryGap;
+          s.barGap = payload.barGap ?? initialRootPropsState.barGap;
+          s.barSize = payload.barSize;
+          s.maxBarSize = payload.maxBarSize;
+          s.stackOffset = payload.stackOffset;
+          s.syncId = payload.syncId;
+          s.syncMethod = payload.syncMethod;
+          s.class = payload.class;
+          s.baseValue = payload.baseValue;
+          s.reverseStackOrder = payload.reverseStackOrder;
+        }),
+      );
     },
   };
 

package/src/state/selectors/areaSelectors.ts

@@ -3,12 +3,7 @@
 // `selectGraphicalItemStackedData` reads this area's stack series off the numeric
 // axis' stack groups, and computeArea turns it into a per-point baseLine.
 import { RechartsRootState } from "../store";
-import {
-  selectAxisWithScale,
-  selectStackGroups,
-  selectTicksOfGraphicalItem,
-  selectUnfilteredCartesianItems,
-} from "./axisSelectors";
+import { selectStackGroups, selectUnfilteredCartesianItems } from "./axisSelectors";
 import { getBandSizeOfAxis, isCategoricalAxis } from "../../util/ChartUtils";
 import { ChartData } from "../chartDataSlice";
 import { selectChartLayout } from "../../context/chartLayoutContext";
@@ -19,33 +14,15 @@ import {
   selectXAxisIdFromGraphicalItemId,
   selectYAxisIdFromGraphicalItemId,
 } from "./graphicalItemSelectors";
+import {
+  selectAxisWithScaleForGraphicalItem,
+  selectTicksForGraphicalItem,
+} from "./selectAxisForGraphicalItem";
 import { AreaSettings } from "../types/AreaSettings";
 import { computeArea, ComputedArea } from "../../cartesian/Area";
 import { combineStackedData } from "./combiners/combineStackedData";
 import { AllStackGroups, StackDataPoint } from "../../util/stacks/stackTypes";
 
-const selectXAxisWithScale = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) =>
-  selectAxisWithScale(state, "xAxis", selectXAxisIdFromGraphicalItemId(state, id), isPanorama);
-
-const selectXAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) =>
-  selectTicksOfGraphicalItem(
-    state,
-    "xAxis",
-    selectXAxisIdFromGraphicalItemId(state, id),
-    isPanorama,
-  );
-
-const selectYAxisWithScale = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) =>
-  selectAxisWithScale(state, "yAxis", selectYAxisIdFromGraphicalItemId(state, id), isPanorama);
-
-const selectYAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) =>
-  selectTicksOfGraphicalItem(
-    state,
-    "yAxis",
-    selectYAxisIdFromGraphicalItemId(state, id),
-    isPanorama,
-  );
-
 const selectBandSize = (
   state: RechartsRootState,
   id: GraphicalItemId,
@@ -54,14 +31,14 @@ const selectBandSize = (
   const layout = selectChartLayout(state);
   if (isCategoricalAxis(layout, "xAxis")) {
     return getBandSizeOfAxis(
-      selectXAxisWithScale(state, id, isPanorama),
-      selectXAxisTicks(state, id, isPanorama),
+      selectAxisWithScaleForGraphicalItem(state, "xAxis", id, isPanorama),
+      selectTicksForGraphicalItem(state, "xAxis", id, isPanorama),
       false,
     );
   }
   return getBandSizeOfAxis(
-    selectYAxisWithScale(state, id, isPanorama),
-    selectYAxisTicks(state, id, isPanorama),
+    selectAxisWithScaleForGraphicalItem(state, "yAxis", id, isPanorama),
+    selectTicksForGraphicalItem(state, "yAxis", id, isPanorama),
     false,
   );
 };
@@ -116,10 +93,10 @@ export const selectArea = (
   isPanorama: boolean,
 ): ComputedArea | undefined => {
   const layout = selectChartLayout(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 { chartData, dataStartIndex, dataEndIndex } =
     selectChartDataWithIndexesIfNotInPanoramaPosition3(state, id, isPanorama);
   const bandSize = selectBandSize(state, id, isPanorama);

package/src/state/selectors/arrayEqualityCheck.ts

@@ -1,8 +1,33 @@
-// SKIPPED — intentionally NOT ported to the SolidJS port.
+// Ported from recharts 3.9.2 src/state/selectors/arrayEqualityCheck.ts.
 //
-// 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.
-export {};
+// Previously skipped under ADR-0001's reading that Solid's createMemo made
+// reselect's resultEqualityCheck unnecessary. ADR-0002 restores shared
+// memoization via `createSelector`, which takes the same resultEqualityCheck
+// option — so these are ported and passed to the wrapped selectors exactly
+// where upstream passes them.
+
+/**
+ * Checks if two arrays are equal, treating empty arrays as equal regardless of
+ * reference. If both arrays are non-empty, it checks for reference equality.
+ */
+export function emptyArraysAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
+  if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {
+    return true;
+  }
+  return a === b;
+}
+
+/**
+ * Checks if two arrays have the same contents in the same order.
+ */
+export function arrayContentsAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
+  if (a.length === b.length) {
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}