solid-recharts 0.1.0 → 0.2.1

package/src/state/keyboardEventsMiddleware.ts

@@ -14,6 +14,7 @@ import {
 import { selectChartDirection } from "./selectors/axisSelectors";
 import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
+import { isEventThrottled } from "./isEventThrottled";
 
 const mkInteraction = (index: number): TooltipInteractionState => ({
   active: false,
@@ -23,12 +24,6 @@ const mkInteraction = (index: number): TooltipInteractionState => ({
   coordinate: undefined,
 });
 
-export type KeyDownAction = { type: "keyDown"; payload: KeyboardEvent["key"] };
-
-export function keyDownAction(payload: KeyboardEvent["key"]): KeyDownAction {
-  return { type: "keyDown", payload };
-}
-
 let rafId: number | null = null;
 let timeoutId: ReturnType<typeof setTimeout> | null = null;
 let latestKeyboardActionPayload: KeyboardEvent["key"] | null = null;
@@ -43,8 +38,7 @@ export function dispatchKeyDown(store: RechartsStore, key: KeyboardEvent["key"])
 
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("keydown");
+  const isThrottled = isEventThrottled(throttledEvents, "keydown");
 
   if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
     clearTimeout(timeoutId);

package/src/state/layoutSlice.ts

@@ -1,6 +1,7 @@
 // Ported from recharts 3.8.1 src/state/layoutSlice.ts (commit 7a23854).
 // Solid-native slice (no Redux): createStore + draft-first action setters.
 import { createStore } from "solid-js";
+import { patched } from "./patched";
 import { LayoutType, Margin, Size } from "../util/types";
 
 export type ChartLayoutState = {
@@ -53,11 +54,14 @@ export function createChartLayoutSlice(
       });
     },
     setMargin(margin) {
+      // Slice immutability contract (ADR-0002): replace the margin node.
       setState((s) => {
-        s.margin.top = margin.top ?? 0;
-        s.margin.right = margin.right ?? 0;
-        s.margin.bottom = margin.bottom ?? 0;
-        s.margin.left = margin.left ?? 0;
+        s.margin = patched(s.margin, {
+          top: margin.top ?? 0,
+          right: margin.right ?? 0,
+          bottom: margin.bottom ?? 0,
+          left: margin.left ?? 0,
+        });
       });
     },
     setScale(scale) {

package/src/state/legendSlice.ts

@@ -8,6 +8,8 @@
 // match by it (the same proxy-safe strategy as graphicalItemsSlice/tooltipSlice).
 // `selectLegendPayload` flattens `items` back to the reference's flat shape.
 import { createStore } from "solid-js";
+import { createCollectionActions } from "./createCollectionActions";
+import { patched } from "./patched";
 import { LayoutType, Size } from "../util/types";
 import {
   HorizontalAlignmentType,
@@ -66,41 +68,37 @@ export function createLegendSlice(initialState: LegendState = initialLegendState
     payload: [...initialState.payload],
   });
 
+  const payload = createCollectionActions<LegendPayloadEntry>(
+    (updater) =>
+      setState((s) => {
+        const next = updater(s.payload);
+        if (next !== s.payload) {
+          s.payload = next;
+        }
+      }),
+    (e) => e.id,
+  );
+
   const actions: LegendActions = {
     setLegendSize(payload) {
+      // Slice immutability contract (ADR-0002): replace the node, not leaves.
       setState((s) => {
-        s.size.width = payload.width;
-        s.size.height = payload.height;
+        s.size = patched(s.size, { width: payload.width, height: payload.height });
       });
     },
     setLegendSettings(payload) {
       setState((s) => {
-        s.settings.align = payload.align;
-        s.settings.layout = payload.layout;
-        s.settings.verticalAlign = payload.verticalAlign;
-        s.settings.itemSorter = payload.itemSorter;
-      });
-    },
-    addLegendPayload(payload) {
-      setState((s) => {
-        s.payload = [...s.payload, payload];
-      });
-    },
-    replaceLegendPayload({ prev, next }) {
-      setState((s) => {
-        const index = s.payload.findIndex((e) => e.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.payload.slice();
-          nextItems[index] = next;
-          s.payload = nextItems;
-        }
-      });
-    },
-    removeLegendPayload(payload) {
-      setState((s) => {
-        s.payload = s.payload.filter((e) => e.id !== payload.id);
+        s.settings = patched(s.settings, {
+          align: payload.align,
+          layout: payload.layout,
+          verticalAlign: payload.verticalAlign,
+          itemSorter: payload.itemSorter,
+        });
       });
     },
+    addLegendPayload: payload.add,
+    replaceLegendPayload: payload.replace,
+    removeLegendPayload: payload.remove,
   };
 
   return { state, actions };

package/src/state/mouseEventsMiddleware.ts

@@ -7,17 +7,7 @@ import type { HTMLMousePointer, RelativePointer } from "../util/types";
 import { selectActivePropsFromChartPointer } from "./selectors/tooltipSelectors";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
 import type { RechartsStore } from "./store";
-
-export type MouseMoveAction = { type: "mouseMove"; payload: HTMLMousePointer };
-export type MouseClickAction = { type: "mouseClick"; payload: HTMLMousePointer };
-
-export function mouseMoveAction(payload: HTMLMousePointer): MouseMoveAction {
-  return { type: "mouseMove", payload };
-}
-
-export function mouseClickAction(payload: HTMLMousePointer): MouseClickAction {
-  return { type: "mouseClick", payload };
-}
+import { isEventThrottled } from "./isEventThrottled";
 
 /*
  * This single rafId is safe because:
@@ -46,8 +36,7 @@ export function dispatchMouseClick(store: RechartsStore, mousePointer: HTMLMouse
 export function dispatchMouseMove(store: RechartsStore, mousePointer: HTMLMousePointer): void {
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("mousemove");
+  const isThrottled = isEventThrottled(throttledEvents, "mousemove");
 
   if (rafId !== null) {
     cancelAnimationFrame(rafId);

package/src/state/patched.ts

@@ -0,0 +1,19 @@
+// Slice immutability contract helper (ADR-0002).
+//
+// Slices must not mutate nested state in place — a changed value must have a
+// new reference all the way up to the slice-root property, because the
+// selector graph invalidates by input-reference comparison. `patched` is the
+// replacement write: it returns `{ ...current, ...patch }` when some patched
+// field actually differs, and `current` itself when nothing does — mirroring
+// immer, which skips same-value assignments, so untouched state keeps its
+// reference and downstream caches stay warm. Nest calls to replace along a
+// path: `s.a = patched(s.a, { b: patched(s.a.b, { c: 1 }) })`.
+
+export function patched<T extends object>(current: T, patch: Partial<T>): T {
+  for (const key in patch) {
+    if (!Object.is(current[key], patch[key])) {
+      return { ...current, ...patch };
+    }
+  }
+  return current;
+}

package/src/state/referenceElementsSlice.ts

@@ -12,6 +12,7 @@
 // useUniqueId) and we match by `id`, the same proxy-safe strategy as
 // graphicalItemsSlice / tooltipSlice / legendSlice.
 import { createStore } from "solid-js";
+import { createCollectionActions } from "./createCollectionActions";
 import type { AxisId } from "./cartesianAxisSlice";
 import type { IfOverflow } from "../util/IfOverflow";
 import type { ReferenceLineSegment } from "../cartesian/ReferenceLine";
@@ -81,40 +82,48 @@ export function createReferenceElementsSlice(
     lines: [...initialState.lines],
   });
 
-  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) {
+  // 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((s) => {
-        s.areas = [...s.areas, area];
-      });
-    },
-    removeArea(area) {
+        const next = updater(s.dots);
+        if (next !== s.dots) {
+          s.dots = next;
+        }
+      }),
+    (d) => d.id,
+  );
+  const areas = createCollectionActions<ReferenceAreaSettings>(
+    (updater) =>
       setState((s) => {
-        s.areas = s.areas.filter((a) => a.id !== area.id);
-      });
-    },
-    addLine(line) {
+        const next = updater(s.areas);
+        if (next !== s.areas) {
+          s.areas = next;
+        }
+      }),
+    (a) => a.id,
+  );
+  const lines = createCollectionActions<ReferenceLineSettings>(
+    (updater) =>
       setState((s) => {
-        s.lines = [...s.lines, line];
-      });
-    },
-    removeLine(line) {
-      setState((s) => {
-        s.lines = s.lines.filter((l) => l.id !== line.id);
-      });
-    },
+        const next = updater(s.lines);
+        if (next !== s.lines) {
+          s.lines = next;
+        }
+      }),
+    (l) => l.id,
+  );
+
+  const actions: ReferenceElementsActions = {
+    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,68 @@
+// 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(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 { createEffect } from "solid-js";
+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(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/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. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
-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;
+}