solid-recharts 1.0.0 → 2.0.0-beta.1

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={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`.
+ * `clsx` → `class={[...]}`; `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 { createSignal, Show, untrack, splitProps, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createSignal, Show, omit, untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
 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 = (): string => ["recharts-trapezoid", props.class].filter(Boolean).join(" ");
+  const layerClass = (): Array<string | undefined> => ["recharts-trapezoid", props.class];
 
   // 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,29 +102,27 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
     pathEl = el;
   };
   createEffect(
-    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);
-        }
-      },
-    ),
+    () => ({
+      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(
@@ -147,7 +145,7 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
 
   const staticPath = (): JSX.Element => (
     <path
-      {...svgPropertiesAndEvents({ ...splitProps(props, ["class"])[1] })}
+      {...svgPropertiesAndEvents({ ...omit(props, "class") })}
       class={layerClass()}
       d={getTrapezoidPath(x(), y(), upperWidth(), lowerWidth(), height())}
     />
@@ -212,7 +210,7 @@ export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
                     typeof props.style === "object" && props.style != null ? props.style : {};
                   return (
                     <path
-                      {...svgPropertiesAndEvents({ ...splitProps(props, ["class", "style"])[1] })}
+                      {...svgPropertiesAndEvents({ ...omit(props, "class", "style") })}
                       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.Provider value={store}>`.
+// IS the provider in Solid 2.0: `<RechartsStoreContext 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 "solid-js";
+import type { JSX } from "@solidjs/web";
 import { RechartsStoreContext } from "./RechartsStoreContext";
 import { createRechartsStore, type RechartsRootState } from "./store";
 
@@ -23,7 +23,5 @@ export function RechartsStoreProvider(props: RechartsStoreProviderProps): JSX.El
   // untracked (it should not make store creation reactive).
   const store = createRechartsStore(untrack(() => props.preloadedState));
 
-  return (
-    <RechartsStoreContext.Provider value={store}>{props.children}</RechartsStoreContext.Provider>
-  );
+  return <RechartsStoreContext value={store}>{props.children}</RechartsStoreContext>;
 }

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 type { JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { UpdatableChartOptions } from "./rootPropsSlice";
 import { useAppStore } from "./hooks";
 
@@ -9,12 +9,10 @@ export const ReportChartProps = (props: UpdatableChartOptions): JSX.Element => {
   const store = useAppStore();
 
   createEffect(
-    on(
-      () => ({ ...props }),
-      (options) => {
-        store?.actions.rootProps.updateOptions(options);
-      },
-    ),
+    () => ({ ...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 type { JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppStore } from "./hooks";
 import { EventThrottlingProps } from "../util/types";
 
@@ -9,12 +9,10 @@ export const ReportEventSettings = (props: EventThrottlingProps): JSX.Element =>
   const store = useAppStore();
 
   createEffect(
-    on(
-      () => ({ throttleDelay: props.throttleDelay, throttledEvents: props.throttledEvents }),
-      (settings) => {
-        store?.actions.eventSettings.setEventSettings(settings);
-      },
-    ),
+    () => ({ 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 type { JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { LayoutType, Margin } from "../util/types";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useAppStore } from "./hooks";
@@ -22,15 +22,13 @@ export const ReportMainChartProps = (props: MainChartProps): JSX.Element => {
   const isPanorama = useIsPanorama();
 
   createEffect(
-    on(
-      () => ({ layout: props.layout, margin: props.margin }),
-      ({ layout, margin }) => {
-        if (!isPanorama) {
-          store?.actions.layout.setLayout(layout);
-          store?.actions.layout.setMargin(margin);
-        }
-      },
-    ),
+    () => ({ 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 type { JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { PolarChartOptions } from "./polarOptionsSlice";
 import { useAppStore } from "./hooks";
 
@@ -11,19 +11,17 @@ export const ReportPolarOptions = (props: PolarChartOptions): JSX.Element => {
   const store = useAppStore();
 
   createEffect(
-    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);
-      },
-    ),
+    () => ({
+      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 "solid-js";
+import type { JSX } from "@solidjs/web";
 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 "solid-js";
+import type { JSX } from "@solidjs/web";
 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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { Padding } from "../util/types";
 
 /**
@@ -46,15 +46,13 @@ export function createBrushSlice(initialState: BrushSettings = initialBrushState
     // null); draft-first assignment of every field applies the full replacement.
     setBrushSettings(payload) {
       const next = payload ?? initialBrushState;
-      setState(
-        produce((s) => {
-          s.x = next.x;
-          s.y = next.y;
-          s.width = next.width;
-          s.height = next.height;
-          s.padding = { ...next.padding };
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import type {
   AxisDomain,
   AxisInterval,
@@ -203,29 +203,23 @@ export function createCartesianAxisSlice(
   function axisCollection<A extends { id: AxisId }>(pick: (s: AxisMapState) => Record<AxisId, A>) {
     return {
       add: (axis: A) =>
-        setState(
-          produce((s) => {
-            pick(s)[axis.id] = axis;
-          }),
-        ),
+        setState((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;
+        setState((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];
-          }),
-        ),
+        setState((s) => {
+          delete pick(s)[axis.id];
+        }),
     };
   }
   const x = axisCollection<XAxisSettings>((s) => s.xAxis);
@@ -243,32 +237,30 @@ export function createCartesianAxisSlice(
     replaceZAxis: z.replace,
     removeZAxis: z.remove,
     updateYAxisWidth({ id, width }) {
-      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,
-            };
+      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;
           }
-        }),
-      );
+          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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { BrushStartEndIndex } from "../context/brushUpdateContext";
 
 /**
@@ -82,38 +82,32 @@ export function createChartDataSlice(
 
   const actions: ChartDataActions = {
     setChartData(chartData) {
-      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;
-          }
-        }),
-      );
+      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;
+        }
+      });
     },
     setComputedData(computedData) {
-      setState(
-        produce((s) => {
-          s.computedData = computedData;
-        }),
-      );
+      setState((s) => {
+        s.computedData = computedData;
+      });
     },
     setDataStartEndIndexes({ startIndex, endIndex }) {
-      setState(
-        produce((s) => {
-          if (startIndex != null) {
-            s.dataStartIndex = startIndex;
-          }
-          if (endIndex != null) {
-            s.dataEndIndex = endIndex;
-          }
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import type { ErrorBarDirection } from "../cartesian/ErrorBar";
 import { DataKey } from "../util/types";
 import { GraphicalItemId } from "./graphicalItemsSlice";
@@ -58,31 +58,25 @@ export function createErrorBarSlice(
 
   const actions: ErrorBarsActions = {
     addErrorBar({ itemId, errorBar }) {
-      setState(
-        produce((s) => {
-          s[itemId] = [...(s[itemId] ?? []), errorBar];
-        }),
-      );
+      setState((s) => {
+        s[itemId] = [...(s[itemId] ?? []), errorBar];
+      });
     },
     replaceErrorBar({ itemId, prev, next }) {
-      setState(
-        produce((s) => {
-          const list = s[itemId];
-          if (list) {
-            s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
-          }
-        }),
-      );
+      setState((s) => {
+        const list = s[itemId];
+        if (list) {
+          s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
+        }
+      });
     },
     removeErrorBar({ itemId, errorBar }) {
-      setState(
-        produce((s) => {
-          const list = s[itemId];
-          if (list) {
-            s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
-          }
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { EventThrottlingProps } from "../util/types";
 
 export type EventSettingsState = Required<EventThrottlingProps>;
@@ -26,16 +26,14 @@ export function createEventSettingsSlice(
 
   const actions: EventSettingsActions = {
     setEventSettings(payload) {
-      setState(
-        produce((s) => {
-          if (payload.throttleDelay != null) {
-            s.throttleDelay = payload.throttleDelay;
-          }
-          if (payload.throttledEvents != null) {
-            s.throttledEvents = payload.throttledEvents;
-          }
-        }),
-      );
+      setState((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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { createCollectionActions } from "./createCollectionActions";
 import { ChartData } from "./chartDataSlice";
 import { AxisId } from "./cartesianAxisSlice";
@@ -117,26 +117,22 @@ export function createGraphicalItemsSlice(
   // actions reassign the whole array rather than mutate in place (see ADR-0002).
   const cartesian = createCollectionActions<CartesianGraphicalItemSettings>(
     (updater) =>
-      setState(
-        produce((s) => {
-          const next = updater(s.cartesianItems);
-          if (next !== s.cartesianItems) {
-            s.cartesianItems = next;
-          }
-        }),
-      ),
+      setState((s) => {
+        const next = updater(s.cartesianItems);
+        if (next !== s.cartesianItems) {
+          s.cartesianItems = next;
+        }
+      }),
     (it) => it.id,
   );
   const polar = createCollectionActions<PolarGraphicalItemSettings>(
     (updater) =>
-      setState(
-        produce((s) => {
-          const next = updater(s.polarItems);
-          if (next !== s.polarItems) {
-            s.polarItems = next;
-          }
-        }),
-      ),
+      setState((s) => {
+        const next = updater(s.polarItems);
+        if (next !== s.polarItems) {
+          s.polarItems = next;
+        }
+      }),
     (it) => it.id,
   );