solid-recharts 0.2.1 → 1.0.0

package/src/state/layoutSlice.ts

@@ -1,6 +1,6 @@
 // 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 { createStore, produce } from "solid-js/store";
 import { patched } from "./patched";
 import { LayoutType, Margin, Size } from "../util/types";
 
@@ -43,31 +43,39 @@ export function createChartLayoutSlice(
 
   const actions: ChartLayoutActions = {
     setLayout(layoutType) {
-      setState((s) => {
-        s.layoutType = layoutType;
-      });
+      setState(
+        produce((s) => {
+          s.layoutType = layoutType;
+        }),
+      );
     },
     setChartSize(size) {
-      setState((s) => {
-        s.width = size.width;
-        s.height = size.height;
-      });
+      setState(
+        produce((s) => {
+          s.width = size.width;
+          s.height = size.height;
+        }),
+      );
     },
     setMargin(margin) {
       // Slice immutability contract (ADR-0002): replace the margin node.
-      setState((s) => {
-        s.margin = patched(s.margin, {
-          top: margin.top ?? 0,
-          right: margin.right ?? 0,
-          bottom: margin.bottom ?? 0,
-          left: margin.left ?? 0,
-        });
-      });
+      setState(
+        produce((s) => {
+          s.margin = patched(s.margin, {
+            top: margin.top ?? 0,
+            right: margin.right ?? 0,
+            bottom: margin.bottom ?? 0,
+            left: margin.left ?? 0,
+          });
+        }),
+      );
     },
     setScale(scale) {
-      setState((s) => {
-        s.scale = scale;
-      });
+      setState(
+        produce((s) => {
+          s.scale = scale;
+        }),
+      );
     },
   };
 

package/src/state/legendSlice.ts

@@ -7,7 +7,7 @@
 // entry carries the graphical item's `id` (`{ id, items }`) and replace/remove
 // 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 { createStore, produce } from "solid-js/store";
 import { createCollectionActions } from "./createCollectionActions";
 import { patched } from "./patched";
 import { LayoutType, Size } from "../util/types";
@@ -70,31 +70,37 @@ export function createLegendSlice(initialState: LegendState = initialLegendState
 
   const payload = createCollectionActions<LegendPayloadEntry>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.payload);
-        if (next !== s.payload) {
-          s.payload = next;
-        }
-      }),
+      setState(
+        produce((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 = patched(s.size, { width: payload.width, height: payload.height });
-      });
+      setState(
+        produce((s) => {
+          s.size = patched(s.size, { width: payload.width, height: payload.height });
+        }),
+      );
     },
     setLegendSettings(payload) {
-      setState((s) => {
-        s.settings = patched(s.settings, {
-          align: payload.align,
-          layout: payload.layout,
-          verticalAlign: payload.verticalAlign,
-          itemSorter: payload.itemSorter,
-        });
-      });
+      setState(
+        produce((s) => {
+          s.settings = patched(s.settings, {
+            align: payload.align,
+            layout: payload.layout,
+            verticalAlign: payload.verticalAlign,
+            itemSorter: payload.itemSorter,
+          });
+        }),
+      );
     },
     addLegendPayload: payload.add,
     replaceLegendPayload: payload.replace,

package/src/state/optionsSlice.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/optionsSlice.ts (commit 7a23854).
 // Solid-native slice.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { TooltipEventType } from "../util/types";
 import { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice";
 import { isNan } from "../util/DataUtils";
@@ -52,11 +52,13 @@ export function createOptionsSlice(initialState: ChartOptions = initialOptionsSt
 
   const actions: OptionsActions = {
     createEventEmitter() {
-      setState((s) => {
-        if (s.eventEmitter == null) {
-          s.eventEmitter = Symbol("rechartsEventEmitter");
-        }
-      });
+      setState(
+        produce((s) => {
+          if (s.eventEmitter == null) {
+            s.eventEmitter = Symbol("rechartsEventEmitter");
+          }
+        }),
+      );
     },
   };
 

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,7 @@
 // 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";
@@ -88,32 +88,38 @@ export function createReferenceElementsSlice(
   // call site (ReferenceLine/Dot/Area), so only add + remove are wired.
   const dots = createCollectionActions<ReferenceDotSettings>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.dots);
-        if (next !== s.dots) {
-          s.dots = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.dots);
+          if (next !== s.dots) {
+            s.dots = next;
+          }
+        }),
+      ),
     (d) => d.id,
   );
   const areas = createCollectionActions<ReferenceAreaSettings>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.areas);
-        if (next !== s.areas) {
-          s.areas = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.areas);
+          if (next !== s.areas) {
+            s.areas = next;
+          }
+        }),
+      ),
     (a) => a.id,
   );
   const lines = createCollectionActions<ReferenceLineSettings>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.lines);
-        if (next !== s.lines) {
-          s.lines = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.lines);
+          if (next !== s.lines) {
+            s.lines = next;
+          }
+        }),
+      ),
     (l) => l.id,
   );
 

package/src/state/registerInStore.ts

@@ -1,9 +1,10 @@
+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(compute, apply)` (the compute phase builds the settings, the
+// `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
@@ -18,7 +19,6 @@
 // `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";
 
 /**
@@ -47,17 +47,19 @@ export function registerInStore<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;
-  });
+  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) {

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;
+        }),
+      );
     },
   };