solid-recharts 1.0.0 → 2.0.0-beta.1

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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { patched } from "./patched";
 import { LayoutType, Margin, Size } from "../util/types";
 
@@ -43,39 +43,31 @@ export function createChartLayoutSlice(
 
   const actions: ChartLayoutActions = {
     setLayout(layoutType) {
-      setState(
-        produce((s) => {
-          s.layoutType = layoutType;
-        }),
-      );
+      setState((s) => {
+        s.layoutType = layoutType;
+      });
     },
     setChartSize(size) {
-      setState(
-        produce((s) => {
-          s.width = size.width;
-          s.height = size.height;
-        }),
-      );
+      setState((s) => {
+        s.width = size.width;
+        s.height = size.height;
+      });
     },
     setMargin(margin) {
       // Slice immutability contract (ADR-0002): replace the margin node.
-      setState(
-        produce((s) => {
-          s.margin = patched(s.margin, {
-            top: margin.top ?? 0,
-            right: margin.right ?? 0,
-            bottom: margin.bottom ?? 0,
-            left: margin.left ?? 0,
-          });
-        }),
-      );
+      setState((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(
-        produce((s) => {
-          s.scale = scale;
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { createCollectionActions } from "./createCollectionActions";
 import { patched } from "./patched";
 import { LayoutType, Size } from "../util/types";
@@ -70,37 +70,31 @@ export function createLegendSlice(initialState: LegendState = initialLegendState
 
   const payload = createCollectionActions<LegendPayloadEntry>(
     (updater) =>
-      setState(
-        produce((s) => {
-          const next = updater(s.payload);
-          if (next !== s.payload) {
-            s.payload = next;
-          }
-        }),
-      ),
+      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(
-        produce((s) => {
-          s.size = patched(s.size, { width: payload.width, height: payload.height });
-        }),
-      );
+      setState((s) => {
+        s.size = patched(s.size, { width: payload.width, height: payload.height });
+      });
     },
     setLegendSettings(payload) {
-      setState(
-        produce((s) => {
-          s.settings = patched(s.settings, {
-            align: payload.align,
-            layout: payload.layout,
-            verticalAlign: payload.verticalAlign,
-            itemSorter: payload.itemSorter,
-          });
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { TooltipEventType } from "../util/types";
 import { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice";
 import { isNan } from "../util/DataUtils";
@@ -52,13 +52,11 @@ export function createOptionsSlice(initialState: ChartOptions = initialOptionsSt
 
   const actions: OptionsActions = {
     createEventEmitter() {
-      setState(
-        produce((s) => {
-          if (s.eventEmitter == null) {
-            s.eventEmitter = Symbol("rechartsEventEmitter");
-          }
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { AxisId, BaseCartesianAxis, TicksSettings } from "./cartesianAxisSlice";
 
 export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings;
@@ -40,32 +40,24 @@ export function createPolarAxisSlice(
 
   const actions: PolarAxisActions = {
     addRadiusAxis(axis) {
-      setState(
-        produce((s) => {
-          s.radiusAxis[axis.id] = axis;
-        }),
-      );
+      setState((s) => {
+        s.radiusAxis[axis.id] = axis;
+      });
     },
     removeRadiusAxis(axis) {
-      setState(
-        produce((s) => {
-          delete s.radiusAxis[axis.id];
-        }),
-      );
+      setState((s) => {
+        delete s.radiusAxis[axis.id];
+      });
     },
     addAngleAxis(axis) {
-      setState(
-        produce((s) => {
-          s.angleAxis[axis.id] = axis;
-        }),
-      );
+      setState((s) => {
+        s.angleAxis[axis.id] = axis;
+      });
     },
     removeAngleAxis(axis) {
-      setState(
-        produce((s) => {
-          delete s.angleAxis[axis.id];
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 
 export type PolarChartOptions = {
   cx: number | string;
@@ -34,21 +34,19 @@ export function createPolarOptionsSlice(initialState: PolarChartState = null): P
 
   const actions: PolarOptionsActions = {
     updatePolarOptions(payload) {
-      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;
-        }),
-      );
+      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;
+      });
     },
   };
 

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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { createCollectionActions } from "./createCollectionActions";
 import type { AxisId } from "./cartesianAxisSlice";
 import type { IfOverflow } from "../util/IfOverflow";
@@ -88,38 +88,32 @@ export function createReferenceElementsSlice(
   // 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;
-          }
-        }),
-      ),
+      setState((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;
-          }
-        }),
-      ),
+      setState((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;
-          }
-        }),
-      ),
+      setState((s) => {
+        const next = updater(s.lines);
+        if (next !== s.lines) {
+          s.lines = next;
+        }
+      }),
     (l) => l.id,
   );
 

package/src/state/registerInStore.ts

@@ -1,10 +1,9 @@
-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
+// `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
@@ -19,6 +18,7 @@ import { createEffect, on } from "solid-js";
 // `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,19 +47,17 @@ export function registerInStore<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;
-    }),
-  );
+  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) {

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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { TickItem } from "../util/types";
 import { AxisId } from "./cartesianAxisSlice";
 
@@ -46,18 +46,14 @@ export function createRenderedTicksSlice(
 
   const actions: RenderedTicksActions = {
     setRenderedTicks({ axisType, axisId, ticks }) {
-      setState(
-        produce((s) => {
-          s[axisType][axisId] = ticks;
-        }),
-      );
+      setState((s) => {
+        s[axisType][axisId] = ticks;
+      });
     },
     removeRenderedTicks({ axisType, axisId }) {
-      setState(
-        produce((s) => {
-          delete s[axisType][axisId];
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { StackOffsetType, SyncMethod, BaseValue } from "../util/types";
 
 /**
@@ -50,21 +50,19 @@ export function createRootPropsSlice(
 
   const actions: RootPropsActions = {
     updateOptions(payload) {
-      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;
-        }),
-      );
+      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;
+      });
     },
   };