solid-recharts 0.2.1 → 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,7 +5,7 @@
 // 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 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";

package/src/state/SetTooltipEntrySettings.tsx

@@ -4,7 +4,7 @@
 // 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 type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "./hooks";
 import { TooltipPayloadConfiguration } from "./tooltipSlice";
 import { useIsPanorama } from "../context/PanoramaContext";

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,
@@ -203,23 +203,29 @@ export function createCartesianAxisSlice(
   function axisCollection<A extends { id: AxisId }>(pick: (s: AxisMapState) => Record<AxisId, A>) {
     return {
       add: (axis: A) =>
-        setState((s) => {
-          pick(s)[axis.id] = axis;
-        }),
+        setState(
+          produce((s) => {
+            pick(s)[axis.id] = axis;
+          }),
+        ),
       replace: ({ prev, next }: { prev: A; next: A }) =>
-        setState((s) => {
-          const map = pick(s);
-          if (map[prev.id] !== undefined) {
-            if (prev.id !== next.id) {
-              delete map[prev.id];
+        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;
             }
-            map[next.id] = next;
-          }
-        }),
+          }),
+        ),
       remove: (axis: A) =>
-        setState((s) => {
-          delete pick(s)[axis.id];
-        }),
+        setState(
+          produce((s) => {
+            delete pick(s)[axis.id];
+          }),
+        ),
     };
   }
   const x = axisCollection<XAxisSettings>((s) => s.xAxis);
@@ -237,30 +243,32 @@ export function createCartesianAxisSlice(
     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;
+          }
+        }),
+      );
     },
   };
 

package/src/state/errorBarSlice.ts

@@ -4,7 +4,7 @@
 // each item holds an array of ErrorBarsSettings. recharts matches for
 // replace/remove by (dataKey, direction) — kept verbatim (these are the error
 // bar's identity within an item).
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import type { ErrorBarDirection } from "../cartesian/ErrorBar";
 import { DataKey } from "../util/types";
 import { GraphicalItemId } from "./graphicalItemsSlice";
@@ -58,25 +58,31 @@ export function createErrorBarSlice(
 
   const actions: ErrorBarsActions = {
     addErrorBar({ itemId, errorBar }) {
-      setState((s) => {
-        s[itemId] = [...(s[itemId] ?? []), errorBar];
-      });
+      setState(
+        produce((s) => {
+          s[itemId] = [...(s[itemId] ?? []), errorBar];
+        }),
+      );
     },
     replaceErrorBar({ itemId, prev, next }) {
-      setState((s) => {
-        const list = s[itemId];
-        if (list) {
-          s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
-        }
-      });
+      setState(
+        produce((s) => {
+          const list = s[itemId];
+          if (list) {
+            s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
+          }
+        }),
+      );
     },
     removeErrorBar({ itemId, errorBar }) {
-      setState((s) => {
-        const list = s[itemId];
-        if (list) {
-          s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
-        }
-      });
+      setState(
+        produce((s) => {
+          const list = s[itemId];
+          if (list) {
+            s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
+          }
+        }),
+      );
     },
   };
 

package/src/state/eventSettingsSlice.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/eventSettingsSlice.ts (commit 7a23854).
 // Solid-native slice; immer's `castDraft` is unnecessary with a Solid store.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { EventThrottlingProps } from "../util/types";
 
 export type EventSettingsState = Required<EventThrottlingProps>;
@@ -26,14 +26,16 @@ export function createEventSettingsSlice(
 
   const actions: EventSettingsActions = {
     setEventSettings(payload) {
-      setState((s) => {
-        if (payload.throttleDelay != null) {
-          s.throttleDelay = payload.throttleDelay;
-        }
-        if (payload.throttledEvents != null) {
-          s.throttledEvents = payload.throttledEvents;
-        }
-      });
+      setState(
+        produce((s) => {
+          if (payload.throttleDelay != null) {
+            s.throttleDelay = payload.throttleDelay;
+          }
+          if (payload.throttledEvents != null) {
+            s.throttledEvents = payload.throttledEvents;
+          }
+        }),
+      );
     },
   };
 

package/src/state/graphicalItemsSlice.ts

@@ -10,7 +10,7 @@
 // the caller passed — reference matching can't work. We match by the required
 // unique `id` instead, which is the items' real identity and gives identical
 // ordering/replacement semantics.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { createCollectionActions } from "./createCollectionActions";
 import { ChartData } from "./chartDataSlice";
 import { AxisId } from "./cartesianAxisSlice";
@@ -117,22 +117,26 @@ export function createGraphicalItemsSlice(
   // actions reassign the whole array rather than mutate in place (see ADR-0002).
   const cartesian = createCollectionActions<CartesianGraphicalItemSettings>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.cartesianItems);
-        if (next !== s.cartesianItems) {
-          s.cartesianItems = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.cartesianItems);
+          if (next !== s.cartesianItems) {
+            s.cartesianItems = next;
+          }
+        }),
+      ),
     (it) => it.id,
   );
   const polar = createCollectionActions<PolarGraphicalItemSettings>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.polarItems);
-        if (next !== s.polarItems) {
-          s.polarItems = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.polarItems);
+          if (next !== s.polarItems) {
+            s.polarItems = next;
+          }
+        }),
+      ),
     (it) => it.id,
   );