solid-recharts 0.2.0 → 1.0.0

package/src/shape/Trapezoid.tsx

@@ -4,7 +4,7 @@
  * Ported from recharts 3.8.1 src/shape/Trapezoid.tsx (commit 7a23854).
  * Pure `getTrapezoidPath` copied verbatim. Solid deviations: `className` →
  * `class` (Omit the wide SVG `class`); destructuring defaults → `?? default`;
- * `clsx` → `class={[...]}`; `return null` → `<Show>`.
+ * `clsx` → `class={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`.
  *
  * The update-animation path (`isUpdateAnimationActive`) is WIRED, mirroring the
  * Rectangle port: JavascriptAnimate keyed on a geometry animationId, per-frame
@@ -13,8 +13,8 @@
  * stays the static shape.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createSignal, Show, omit, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, Show, untrack, splitProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import type { AnimationDuration } from "../util/types";
 import type { EasingInput } from "../animation/easing";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
@@ -89,7 +89,7 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
   const animationEasing = (): EasingInput => props.animationEasing ?? "ease";
   const animationBegin = (): number => props.animationBegin ?? 0;
 
-  const layerClass = (): Array<string | undefined> => ["recharts-trapezoid", props.class];
+  const layerClass = (): string => ["recharts-trapezoid", props.class].filter(Boolean).join(" ");
 
   // Animation (update path) state: a ref to read the path length + prev-value
   // closures the animation interpolates from. The ref only captures the element
@@ -102,27 +102,29 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
     pathEl = el;
   };
   createEffect(
-    () => ({
-      x: x(),
-      y: y(),
-      upperWidth: upperWidth(),
-      lowerWidth: lowerWidth(),
-      height: height(),
-    }),
-    () => {
-      if (pathEl?.getTotalLength == null) {
-        return;
-      }
-      let len = 0;
-      try {
-        len = pathEl.getTotalLength();
-      } catch {
-        return; // getTotalLength can throw on detached/empty paths — keep the last value.
-      }
-      if (len) {
-        setTotalLength(len);
-      }
-    },
+    on(
+      () => ({
+        x: x(),
+        y: y(),
+        upperWidth: upperWidth(),
+        lowerWidth: lowerWidth(),
+        height: height(),
+      }),
+      () => {
+        if (pathEl?.getTotalLength == null) {
+          return;
+        }
+        let len = 0;
+        try {
+          len = pathEl.getTotalLength();
+        } catch {
+          return; // getTotalLength can throw on detached/empty paths — keep the last value.
+        }
+        if (len) {
+          setTotalLength(len);
+        }
+      },
+    ),
   );
 
   const animationId = useAnimationId(
@@ -145,7 +147,7 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
 
   const staticPath = (): JSX.Element => (
     <path
-      {...svgPropertiesAndEvents({ ...omit(props, "class") })}
+      {...svgPropertiesAndEvents({ ...splitProps(props, ["class"])[1] })}
       class={layerClass()}
       d={getTrapezoidPath(x(), y(), upperWidth(), lowerWidth(), height())}
     />
@@ -210,7 +212,7 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
                     typeof props.style === "object" && props.style != null ? props.style : {};
                   return (
                     <path
-                      {...svgPropertiesAndEvents({ ...omit(props, "class", "style") })}
+                      {...svgPropertiesAndEvents({ ...splitProps(props, ["class", "style"])[1] })}
                       ref={measurePath}
                       class={layerClass()}
                       d={getTrapezoidPath(currX, currY, currUpperWidth, currLowerWidth, currHeight)}

package/src/state/RechartsStoreProvider.tsx

@@ -4,12 +4,12 @@
 // <Provider>. In Solid the component body runs once, so creating the store in the
 // body is the natural "create once per chart instance" — each chart gets its own
 // independent store (recharts supports many charts per page). The context value
-// IS the provider in Solid 2.0: `<RechartsStoreContext value={store}>`.
+// IS the provider in Solid 2.0: `<RechartsStoreContext.Provider value={store}>`.
 //
 // NOTE: the panorama branch (Brush's preview chart reuses the parent store by
 // rendering no Provider) is deferred until PanoramaContext is ported.
 import { untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { RechartsStoreContext } from "./RechartsStoreContext";
 import { createRechartsStore, type RechartsRootState } from "./store";
 
@@ -23,5 +23,7 @@ export function RechartsStoreProvider(props: RechartsStoreProviderProps): JSX.El
   // untracked (it should not make store creation reactive).
   const store = createRechartsStore(untrack(() => props.preloadedState));
 
-  return <RechartsStoreContext value={store}>{props.children}</RechartsStoreContext>;
+  return (
+    <RechartsStoreContext.Provider value={store}>{props.children}</RechartsStoreContext.Provider>
+  );
 }

package/src/state/ReportChartProps.tsx

@@ -1,7 +1,7 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/state/ReportChartProps.tsx (commit 7a23854).
 // useAppDispatch → useAppStore().actions; useEffect → createEffect.
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { UpdatableChartOptions } from "./rootPropsSlice";
 import { useAppStore } from "./hooks";
 
@@ -9,10 +9,12 @@ export const ReportChartProps = (props: UpdatableChartOptions): JSX.Element => {
   const store = useAppStore();
 
   createEffect(
-    () => ({ ...props }),
-    (options) => {
-      store?.actions.rootProps.updateOptions(options);
-    },
+    on(
+      () => ({ ...props }),
+      (options) => {
+        store?.actions.rootProps.updateOptions(options);
+      },
+    ),
   );
 
   return null;

package/src/state/ReportEventSettings.tsx

@@ -1,7 +1,7 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/state/ReportEventSettings.tsx (commit 7a23854).
 // memo/propsAreEqual dropped; useAppDispatch → useAppStore().actions; useEffect → createEffect.
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "./hooks";
 import { EventThrottlingProps } from "../util/types";
 
@@ -9,10 +9,12 @@ export const ReportEventSettings = (props: EventThrottlingProps): JSX.Element =>
   const store = useAppStore();
 
   createEffect(
-    () => ({ throttleDelay: props.throttleDelay, throttledEvents: props.throttledEvents }),
-    (settings) => {
-      store?.actions.eventSettings.setEventSettings(settings);
-    },
+    on(
+      () => ({ throttleDelay: props.throttleDelay, throttledEvents: props.throttledEvents }),
+      (settings) => {
+        store?.actions.eventSettings.setEventSettings(settings);
+      },
+    ),
   );
 
   return null;

package/src/state/ReportMainChartProps.tsx

@@ -1,10 +1,10 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/state/ReportMainChartProps.tsx (commit 7a23854).
 //
 // Solid deviations: `memo(..., propsAreEqual)` is dropped (Solid doesn't
 // re-render; the comparator has no equivalent); `useAppDispatch` + action
 // creators → `useAppStore().actions`; `useEffect` → two-arg `createEffect`.
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { LayoutType, Margin } from "../util/types";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useAppStore } from "./hooks";
@@ -22,13 +22,15 @@ export const ReportMainChartProps = (props: MainChartProps): JSX.Element => {
   const isPanorama = useIsPanorama();
 
   createEffect(
-    () => ({ layout: props.layout, margin: props.margin }),
-    ({ layout, margin }) => {
-      if (!isPanorama) {
-        store?.actions.layout.setLayout(layout);
-        store?.actions.layout.setMargin(margin);
-      }
-    },
+    on(
+      () => ({ layout: props.layout, margin: props.margin }),
+      ({ layout, margin }) => {
+        if (!isPanorama) {
+          store?.actions.layout.setLayout(layout);
+          store?.actions.layout.setMargin(margin);
+        }
+      },
+    ),
   );
 
   return null;

package/src/state/ReportPolarOptions.tsx

@@ -1,9 +1,9 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/state/ReportPolarOptions.tsx (commit 7a23854).
 //
 // Solid deviations: `useAppDispatch` + action creator → `useAppStore().actions`;
 // `useEffect` → two-arg `createEffect` (compute the payload, dispatch in apply).
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { PolarChartOptions } from "./polarOptionsSlice";
 import { useAppStore } from "./hooks";
 
@@ -11,17 +11,19 @@ export const ReportPolarOptions = (props: PolarChartOptions): JSX.Element => {
   const store = useAppStore();
 
   createEffect(
-    () => ({
-      cx: props.cx,
-      cy: props.cy,
-      startAngle: props.startAngle,
-      endAngle: props.endAngle,
-      innerRadius: props.innerRadius,
-      outerRadius: props.outerRadius,
-    }),
-    (payload) => {
-      store?.actions.polarOptions.updatePolarOptions(payload);
-    },
+    on(
+      () => ({
+        cx: props.cx,
+        cy: props.cy,
+        startAngle: props.startAngle,
+        endAngle: props.endAngle,
+        innerRadius: props.innerRadius,
+        outerRadius: props.outerRadius,
+      }),
+      (payload) => {
+        store?.actions.polarOptions.updatePolarOptions(payload);
+      },
+    ),
   );
 
   return null;

package/src/state/SetLegendPayload.ts

@@ -5,12 +5,16 @@
 // explicit `id` prop (the graphical item's id) keys the entry so replace/remove are
 // proxy-safe (recharts matches the array by reference, which Solid stores break).
 // `SetPolarLegendPayload` lands with the polar vertical. Returns nothing.
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "./hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { LegendPayload } from "../component/DefaultLegendContent";
-import { unregisterOnCleanup } from "./unregisterOnCleanup";
+import { registerInStore } from "./registerInStore";
+
+interface LegendPayloadEntry {
+  id: string;
+  items: ReadonlyArray<LegendPayload>;
+}
 
 export function SetLegendPayload(props: {
   id: string;
@@ -19,32 +23,20 @@ export function SetLegendPayload(props: {
   const store = useAppStore();
   const isPanorama = useIsPanorama();
 
-  let prevId: string | null = null;
-
-  createEffect(
-    () => ({ id: props.id, items: props.legendPayload }),
-    (entry) => {
-      if (store == null || isPanorama) {
-        return;
-      }
-      if (prevId === null) {
-        store.actions.legend.addLegendPayload(entry);
-      } else {
+  // Panorama mirrors never contribute to the legend. The entry is keyed by id
+  // (recharts matches the array by reference, which Solid stores break), so
+  // replace/remove rebuild the `{ id, items: [] }` lookup key from prev.
+  if (store != null && !isPanorama) {
+    registerInStore<LegendPayloadEntry>(() => ({ id: props.id, items: props.legendPayload }), {
+      add: (next) => store.actions.legend.addLegendPayload(next),
+      replace: (prev, next) =>
         store.actions.legend.replaceLegendPayload({
-          prev: { id: prevId, items: [] },
-          next: entry,
-        });
-      }
-      prevId = entry.id;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prevId != null && store != null) {
-      store.actions.legend.removeLegendPayload({ id: prevId, items: [] });
-      prevId = null;
-    }
-  });
+          prev: { id: prev.id, items: [] },
+          next,
+        }),
+      remove: (prev) => store.actions.legend.removeLegendPayload({ id: prev.id, items: [] }),
+    });
+  }
 
   return null;
 }

package/src/state/SetTooltipEntrySettings.tsx

@@ -4,12 +4,11 @@
 // on change) + onCleanup (remove), the same effect-dispatch idiom Line/Bar/Area
 // use for their graphical-item registration. Returns null (renders nothing) — it
 // exists purely to register the item's tooltip payload entry in the store.
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "./hooks";
 import { TooltipPayloadConfiguration } from "./tooltipSlice";
 import { useIsPanorama } from "../context/PanoramaContext";
-import { unregisterOnCleanup } from "./unregisterOnCleanup";
+import { registerInStore } from "./registerInStore";
 
 export function SetTooltipEntrySettings(props: {
   tooltipEntrySettings: TooltipPayloadConfiguration;
@@ -17,30 +16,14 @@ export function SetTooltipEntrySettings(props: {
   const store = useAppStore();
   const isPanorama = useIsPanorama();
 
-  let prev: TooltipPayloadConfiguration | null = null;
-
-  createEffect(
-    () => props.tooltipEntrySettings,
-    (settings) => {
-      if (store == null || isPanorama) {
-        // Panorama graphical items never contribute to the Tooltip payload.
-        return;
-      }
-      if (prev === null) {
-        store.actions.tooltip.addTooltipEntrySettings(settings);
-      } else if (prev !== settings) {
-        store.actions.tooltip.replaceTooltipEntrySettings({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.tooltip.removeTooltipEntrySettings(prev);
-      prev = null;
-    }
-  });
+  // Panorama graphical items never contribute to the Tooltip payload.
+  if (store != null && !isPanorama) {
+    registerInStore<TooltipPayloadConfiguration>(() => props.tooltipEntrySettings, {
+      add: (next) => store.actions.tooltip.addTooltipEntrySettings(next),
+      replace: (prev, next) => store.actions.tooltip.replaceTooltipEntrySettings({ prev, next }),
+      remove: (prev) => store.actions.tooltip.removeTooltipEntrySettings(prev),
+    });
+  }
 
   return null;
 }

package/src/state/brushSlice.ts

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/state/brushSlice.ts (commit 7a23854).
 // FULL SOLID-NATIVE REWRITE (no Redux). Brush is a deferred vertical; this slice
 // is wired into the store so the offset can read `brush.height` (0 by default).
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { Padding } from "../util/types";
 
 /**
@@ -46,13 +46,15 @@ export function createBrushSlice(initialState: BrushSettings = initialBrushState
     // null); draft-first assignment of every field applies the full replacement.
     setBrushSettings(payload) {
       const next = payload ?? initialBrushState;
-      setState((s) => {
-        s.x = next.x;
-        s.y = next.y;
-        s.width = next.width;
-        s.height = next.height;
-        s.padding = { ...next.padding };
-      });
+      setState(
+        produce((s) => {
+          s.x = next.x;
+          s.y = next.y;
+          s.width = next.width;
+          s.height = next.height;
+          s.padding = { ...next.padding };
+        }),
+      );
     },
   };
 

package/src/state/cartesianAxisSlice.ts

@@ -9,7 +9,7 @@
 // `any`). `castDraft`/immer are unnecessary — Solid's setter takes a mutable
 // draft. The `add/replace/remove` reducers (RTK `prepareAutoBatched`) become
 // plain action functions; batching is handled by Solid's store microtask.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import type {
   AxisDomain,
   AxisInterval,
@@ -195,92 +195,80 @@ export function createCartesianAxisSlice(
     zAxis: { ...initialState.zAxis },
   });
 
+  // The x/y/z axis maps are Record<AxisId, …> (not arrays), and their
+  // add/replace/remove mutate the draft IN PLACE — preserving each map's reference
+  // identity, which downstream reads rely on. So this is a local record helper, not
+  // the shared array `createCollectionActions`; `pick` selects the map to touch.
+  // Concentrates the replace body that was written verbatim three times (x/y/z).
+  function axisCollection<A extends { id: AxisId }>(pick: (s: AxisMapState) => Record<AxisId, A>) {
+    return {
+      add: (axis: A) =>
+        setState(
+          produce((s) => {
+            pick(s)[axis.id] = axis;
+          }),
+        ),
+      replace: ({ prev, next }: { prev: A; next: A }) =>
+        setState(
+          produce((s) => {
+            const map = pick(s);
+            if (map[prev.id] !== undefined) {
+              if (prev.id !== next.id) {
+                delete map[prev.id];
+              }
+              map[next.id] = next;
+            }
+          }),
+        ),
+      remove: (axis: A) =>
+        setState(
+          produce((s) => {
+            delete pick(s)[axis.id];
+          }),
+        ),
+    };
+  }
+  const x = axisCollection<XAxisSettings>((s) => s.xAxis);
+  const y = axisCollection<YAxisSettings>((s) => s.yAxis);
+  const z = axisCollection<ZAxisSettings>((s) => s.zAxis);
+
   const actions: CartesianAxisActions = {
-    addXAxis(axis) {
-      setState((s) => {
-        s.xAxis[axis.id] = axis;
-      });
-    },
-    replaceXAxis({ prev, next }) {
-      setState((s) => {
-        if (s.xAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.xAxis[prev.id];
-          }
-          s.xAxis[next.id] = next;
-        }
-      });
-    },
-    removeXAxis(axis) {
-      setState((s) => {
-        delete s.xAxis[axis.id];
-      });
-    },
-    addYAxis(axis) {
-      setState((s) => {
-        s.yAxis[axis.id] = axis;
-      });
-    },
-    replaceYAxis({ prev, next }) {
-      setState((s) => {
-        if (s.yAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.yAxis[prev.id];
-          }
-          s.yAxis[next.id] = next;
-        }
-      });
-    },
-    removeYAxis(axis) {
-      setState((s) => {
-        delete s.yAxis[axis.id];
-      });
-    },
-    addZAxis(axis) {
-      setState((s) => {
-        s.zAxis[axis.id] = axis;
-      });
-    },
-    replaceZAxis({ prev, next }) {
-      setState((s) => {
-        if (s.zAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.zAxis[prev.id];
-          }
-          s.zAxis[next.id] = next;
-        }
-      });
-    },
-    removeZAxis(axis) {
-      setState((s) => {
-        delete s.zAxis[axis.id];
-      });
-    },
+    addXAxis: x.add,
+    replaceXAxis: x.replace,
+    removeXAxis: x.remove,
+    addYAxis: y.add,
+    replaceYAxis: y.replace,
+    removeYAxis: y.remove,
+    addZAxis: z.add,
+    replaceZAxis: z.replace,
+    removeZAxis: z.remove,
     updateYAxisWidth({ id, width }) {
-      setState((s) => {
-        const axis = s.yAxis[id];
-        if (axis) {
-          const history = axis.widthHistory || [];
-          // An oscillation is detected when the new width matches the width
-          // before the last one — a simple A -> B -> A pattern. If the next
-          // width is B and the difference is under 1 pixel, we ignore it.
-          if (
-            history.length === 3 &&
-            history[0] === history[2] &&
-            width === history[1] &&
-            width !== axis.width &&
-            Math.abs(width - (history[0] ?? 0)) <= 1
-          ) {
-            return;
+      setState(
+        produce((s) => {
+          const axis = s.yAxis[id];
+          if (axis) {
+            const history = axis.widthHistory || [];
+            // An oscillation is detected when the new width matches the width
+            // before the last one — a simple A -> B -> A pattern. If the next
+            // width is B and the difference is under 1 pixel, we ignore it.
+            if (
+              history.length === 3 &&
+              history[0] === history[2] &&
+              width === history[1] &&
+              width !== axis.width &&
+              Math.abs(width - (history[0] ?? 0)) <= 1
+            ) {
+              return;
+            }
+            const newHistory = [...history, width].slice(-3);
+            s.yAxis[id] = {
+              ...axis,
+              width,
+              widthHistory: newHistory,
+            };
           }
-          const newHistory = [...history, width].slice(-3);
-          s.yAxis[id] = {
-            ...axis,
-            width,
-            widthHistory: newHistory,
-          };
-        }
-      });
+        }),
+      );
     },
   };
 

package/src/state/chartDataSlice.ts

@@ -7,7 +7,7 @@
 // functions directly, and selectors read `state` inside a `createMemo`.
 //
 // `castDraft`/immer are unnecessary — Solid's store setter takes a mutable draft.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { BrushStartEndIndex } from "../context/brushUpdateContext";
 
 /**
@@ -82,32 +82,38 @@ export function createChartDataSlice(
 
   const actions: ChartDataActions = {
     setChartData(chartData) {
-      setState((s) => {
-        s.chartData = chartData;
-        if (chartData == null) {
-          s.dataStartIndex = 0;
-          s.dataEndIndex = 0;
-          return;
-        }
-        if (chartData.length > 0 && s.dataEndIndex !== chartData.length - 1) {
-          s.dataEndIndex = chartData.length - 1;
-        }
-      });
+      setState(
+        produce((s) => {
+          s.chartData = chartData;
+          if (chartData == null) {
+            s.dataStartIndex = 0;
+            s.dataEndIndex = 0;
+            return;
+          }
+          if (chartData.length > 0 && s.dataEndIndex !== chartData.length - 1) {
+            s.dataEndIndex = chartData.length - 1;
+          }
+        }),
+      );
     },
     setComputedData(computedData) {
-      setState((s) => {
-        s.computedData = computedData;
-      });
+      setState(
+        produce((s) => {
+          s.computedData = computedData;
+        }),
+      );
     },
     setDataStartEndIndexes({ startIndex, endIndex }) {
-      setState((s) => {
-        if (startIndex != null) {
-          s.dataStartIndex = startIndex;
-        }
-        if (endIndex != null) {
-          s.dataEndIndex = endIndex;
-        }
-      });
+      setState(
+        produce((s) => {
+          if (startIndex != null) {
+            s.dataStartIndex = startIndex;
+          }
+          if (endIndex != null) {
+            s.dataEndIndex = endIndex;
+          }
+        }),
+      );
     },
   };