solid-recharts 1.0.0 → 2.0.0-beta.1

package/src/cartesian/Line.tsx

@@ -20,10 +20,10 @@
 //     `any`); the value comes from `getValueByDataKey`, which is genuinely
 //     untyped, and only x/y are needed to draw. It flows through `scale.map`
 //     (which accepts `unknown`) unchanged.
-import { createMemo, createSignal, Show, untrack, mergeProps, createEffect, on } from "solid-js";
+import { createEffect, createMemo, createSignal, merge, Show, untrack } from "solid-js";
 import { useActiveTooltipDataPoints } from "../hooks";
 import { selectActiveTooltipIndex } from "../state/selectors/tooltipSelectors";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   AnimatedItems,
@@ -341,7 +341,7 @@ export const lineDefaultProps = {
 
 export const Line = (props: LineProps): JSX.Element => {
   const store = useAppStore();
-  const merged = mergeProps(lineDefaultProps, props);
+  const merged = merge(lineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-line", props.id);
@@ -499,21 +499,19 @@ export const Line = (props: LineProps): JSX.Element => {
   // settled dasharray the new curve's true length — mirroring recharts, which
   // recomputes totalLength on the post-animation re-render.
   createEffect(
-    on(
-      () => ({ points: points(), showLabels: !isAnimating() }),
-      () => {
-        if (curveEl?.getTotalLength == null) {
-          return;
-        }
-        let length = 0;
-        try {
-          length = curveEl.getTotalLength() || 0;
-        } catch {
-          return; // getTotalLength can throw on detached/empty paths — keep the last value.
-        }
-        setTotalLength(length);
-      },
-    ),
+    () => ({ points: points(), showLabels: !isAnimating() }),
+    () => {
+      if (curveEl?.getTotalLength == null) {
+        return;
+      }
+      let length = 0;
+      try {
+        length = curveEl.getTotalLength() || 0;
+      } catch {
+        return; // getTotalLength can throw on detached/empty paths — keep the last value.
+      }
+      setTotalLength(length);
+    },
   );
 
   // Raw user event handlers forwarded to the curve. recharts' StaticCurve spreads

package/src/cartesian/LineDrawShape.tsx

@@ -16,8 +16,8 @@
 //     forwards the element to the parent-supplied `forwardPathRef` so the parent
 //     (<Line>) can drive `shouldUpdatePreviousRef`/`getVisibleLength` off the same
 //     measured length.
-import { createSignal, splitProps, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createSignal, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Curve, type CurveProps } from "../shape/Curve";
 import type { ShapeAnimationProps } from "../util/types";
 
@@ -145,16 +145,14 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
   // would force a synchronous SVG layout (reflow) each frame for a value nothing
   // reads. Guarding on visibleLength drops those per-frame reflows.
   createEffect(
-    on(
-      () => ({ points: props.points, visibleLength: props.visibleLength }),
-      (deps) => {
-        if (deps.visibleLength == null || pathEl?.getTotalLength == null) {
-          return;
-        }
-        const length = getTotalLength(pathEl);
-        setTotalLength(length);
-      },
-    ),
+    () => ({ points: props.points, visibleLength: props.visibleLength }),
+    (deps) => {
+      if (deps.visibleLength == null || pathEl?.getTotalLength == null) {
+        return;
+      }
+      const length = getTotalLength(pathEl);
+      setTotalLength(length);
+    },
   );
 
   const strokeDasharray = (): string | undefined => {
@@ -172,7 +170,8 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
   // Strip the animation-only props before forwarding to <Curve>; we set
   // connectNulls/strokeDasharray/pathRef explicitly below. `omit` keeps the
   // remaining props reactive (no destructuring of `props`).
-  const curveProps = splitProps(props, [
+  const curveProps = omit(
+    props,
     "animationElapsedTime",
     "isAnimating",
     "isEntrance",
@@ -180,7 +179,7 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
     "forwardPathRef",
     "strokeDasharray",
     "connectNulls",
-  ])[1];
+  );
 
   return (
     <Curve

package/src/cartesian/ReferenceArea.tsx

@@ -16,8 +16,8 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form). <Label>
 //    CHILDREN are not rendered (the `label` prop is).
-import { createMemo, Show, mergeProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -164,7 +164,7 @@ const referenceAreaDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceAreaImpl(props: Props): JSX.Element {
-  const merged = mergeProps(referenceAreaDefaultProps, props);
+  const merged = merge(referenceAreaDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -243,7 +243,7 @@ export function ReferenceArea<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = mergeProps(referenceAreaDefaultProps, props);
+  const merged = merge(referenceAreaDefaultProps, props);
   const id = useUniqueId("recharts-reference-area");
   return (
     <>

package/src/cartesian/ReferenceDot.tsx

@@ -12,8 +12,8 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form);
 //    `children` is not rendered (CartesianLabelContext).
-import { createMemo, Show, mergeProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import { Dot, type DotProps } from "../shape/Dot";
 import {
@@ -183,7 +183,7 @@ const referenceDotDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceDotImpl(props: Props): JSX.Element {
-  const merged = mergeProps(referenceDotDefaultProps, props);
+  const merged = merge(referenceDotDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -255,7 +255,7 @@ export function ReferenceDot<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = mergeProps(referenceDotDefaultProps, props);
+  const merged = merge(referenceDotDefaultProps, props);
   const id = useUniqueId("recharts-reference-dot");
   return (
     <>

package/src/cartesian/ReferenceLine.tsx

@@ -16,8 +16,8 @@
 //    render-function form; the default-`<line>` branch is kept). <Label> CHILDREN
 //    are not rendered (the `label` prop is).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, Show, mergeProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -282,7 +282,7 @@ const referenceLineDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceLineImpl(props: Props): JSX.Element {
-  const merged = mergeProps(referenceLineDefaultProps, props);
+  const merged = merge(referenceLineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const clipPathId = useClipPathId();
   const viewBox = useViewBox();
@@ -384,7 +384,7 @@ export function ReferenceLine<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = mergeProps(referenceLineDefaultProps, props);
+  const merged = merge(referenceLineDefaultProps, props);
   const id = useUniqueId("recharts-reference-line");
   return (
     <>

package/src/cartesian/RenderedTicksReporter.tsx

@@ -1,4 +1,3 @@
-import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/cartesian/CartesianAxis.tsx RenderedTicksReporter
 // (commit 7a23854).
 //
@@ -6,7 +5,8 @@ import { createEffect, on } from "solid-js";
 // useXAxisTicks/useYAxisTicks hooks (and the tick-snap inverse scale) can read
 // them. Solid deviation: useEffect add + cleanup remove → createEffect + onCleanup
 // (the same effect-dispatch idiom the other Report* components use).
-import type { JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppStore } from "../state/hooks";
 import type { AxisId } from "../state/cartesianAxisSlice";
 import type { CartesianTickItem, TickItem } from "../util/types";
@@ -21,23 +21,21 @@ export function RenderedTicksReporter(props: {
   let prev: { axisType: "xAxis" | "yAxis"; axisId: AxisId } | null = null;
 
   createEffect(
-    on(
-      (): { axisType: "xAxis" | "yAxis"; axisId: AxisId; ticks: ReadonlyArray<TickItem> } => ({
-        axisType: props.axisType,
-        axisId: props.axisId,
-        // Expose only the external tick shape (drop internal props).
-        ticks: props.ticks.map((t) => ({
-          value: t.value,
-          coordinate: t.coordinate,
-          offset: t.offset,
-          index: t.index,
-        })),
-      }),
-      (payload) => {
-        store?.actions.renderedTicks.setRenderedTicks(payload);
-        prev = { axisType: payload.axisType, axisId: payload.axisId };
-      },
-    ),
+    (): { axisType: "xAxis" | "yAxis"; axisId: AxisId; ticks: ReadonlyArray<TickItem> } => ({
+      axisType: props.axisType,
+      axisId: props.axisId,
+      // Expose only the external tick shape (drop internal props).
+      ticks: props.ticks.map((t) => ({
+        value: t.value,
+        coordinate: t.coordinate,
+        offset: t.offset,
+        index: t.index,
+      })),
+    }),
+    (payload) => {
+      store?.actions.renderedTicks.setRenderedTicks(payload);
+      prev = { axisType: payload.axisType, axisId: payload.axisId };
+    },
   );
 
   unregisterOnCleanup(() => {

package/src/cartesian/Scatter.tsx

@@ -10,8 +10,8 @@
 // joint/fitting line) are wired.) Solid deviations:
 // resolveDefaultProps→merge; effect-dispatch registration → createEffect/onCleanup;
 // the `@ts-expect-error`-laden value plumbing is replaced with typed coercion.
-import { createMemo, For, Show, mergeProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, For, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useUniqueId } from "../util/useUniqueId";
@@ -383,7 +383,7 @@ const scatterErrorBarFormatter: ErrorBarDataPointFormatter = (
 
 export const Scatter = (props: ScatterProps): JSX.Element => {
   const store = useAppStore();
-  const merged = mergeProps(scatterDefaultProps, props);
+  const merged = merge(scatterDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-scatter", props.id);
   // `shape` is either a built-in symbol type or a custom render fn; resolve once.

package/src/cartesian/XAxis.tsx

@@ -11,7 +11,7 @@
 // recharts' `resolveDefaultProps`: explicit `undefined` falls back to defaults.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { createMemo, Show } from "solid-js";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,

package/src/cartesian/YAxis.tsx

@@ -4,8 +4,8 @@
 // via createEffect + defaults resolved like recharts' resolveDefaultProps); the
 // visual `<CartesianAxis>` IS rendered at the bottom of this file.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, Show, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createMemo, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,
@@ -225,44 +225,42 @@ export function YAxis<DataPointType = unknown, DataValueType = unknown>(
   // Dynamic Y-axis width: when `width="auto"` (and the label is not a function/element),
   // recharts measures the rendered tick-value DOM via `getCalculatedYAxisWidth` and feeds
   // the result back into the store with `updateYAxisWidth`. Mirror that with the codebase's
-  // two-arg createEffect(on(compute, apply)): the compute tracks the reactive inputs (ticks +
+  // two-arg createEffect(compute, apply): the compute tracks the reactive inputs (ticks +
   // size), the apply does the DOM measurement and the store write (untracked — so it cannot
   // re-trigger itself; the slice's `updateYAxisWidth` + the Math.round equality also guard
   // oscillation).
   let layerEl: SVGGElement | null = null;
   createEffect(
-    on(
-      () => ({
-        ticks: ticks(),
-        size: size(),
-        width: props.width,
-        label: props.label,
-        id: yAxisId(),
-      }),
-      (inputs) => {
-        if (inputs.width !== "auto" || isLabelContentAFunction(inputs.label)) {
-          return;
-        }
-        const el = layerEl;
-        if (el == null || inputs.ticks == null || inputs.size == null || store == null) {
-          return;
-        }
-        const tickNodes = el.getElementsByClassName("recharts-cartesian-axis-tick-value");
-        if (tickNodes.length === 0) {
-          return;
-        }
-        const updatedYAxisWidth = getCalculatedYAxisWidth({
-          ticks: tickNodes,
-          label: undefined,
-          labelGapWithTick: 5,
-          tickSize: 6,
-          tickMargin: 2,
-        });
-        if (Math.round(inputs.size.width) !== Math.round(updatedYAxisWidth)) {
-          store.actions.cartesianAxis.updateYAxisWidth({ id: inputs.id, width: updatedYAxisWidth });
-        }
-      },
-    ),
+    () => ({
+      ticks: ticks(),
+      size: size(),
+      width: props.width,
+      label: props.label,
+      id: yAxisId(),
+    }),
+    (inputs) => {
+      if (inputs.width !== "auto" || isLabelContentAFunction(inputs.label)) {
+        return;
+      }
+      const el = layerEl;
+      if (el == null || inputs.ticks == null || inputs.size == null || store == null) {
+        return;
+      }
+      const tickNodes = el.getElementsByClassName("recharts-cartesian-axis-tick-value");
+      if (tickNodes.length === 0) {
+        return;
+      }
+      const updatedYAxisWidth = getCalculatedYAxisWidth({
+        ticks: tickNodes,
+        label: undefined,
+        labelGapWithTick: 5,
+        tickSize: 6,
+        tickMargin: 2,
+      });
+      if (Math.round(inputs.size.width) !== Math.round(updatedYAxisWidth)) {
+        store.actions.cartesianAxis.updateYAxisWidth({ id: inputs.id, width: updatedYAxisWidth });
+      }
+    },
   );
 
   return (

package/src/cartesian/ZAxis.tsx

@@ -1,11 +1,10 @@
-import { mergeProps } from "solid-js";
 // Ported from recharts 3.8.1 src/cartesian/ZAxis.tsx (commit 7a23854).
 //
 // REGISTRATION-ONLY: ZAxis never renders (it has no ticks/line); it only pushes
 // settings into the cartesianAxis slice so Scatter can size its points by the z
 // value. Solid deviations: useLayoutEffect/prevRef → createEffect add/replace +
 // onCleanup remove (the XAxis/YAxis idiom); defaults via merge.
-
+import { merge } from "solid-js";
 import { useAppStore } from "../state/hooks";
 import { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice";
 import { implicitZAxis } from "../state/selectors/axisSelectors";
@@ -36,7 +35,7 @@ export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
   props: ZAxisProps<DataPointType, DataValueType>,
 ): null {
   const store = useAppStore();
-  const merged = mergeProps(zAxisDefaultProps, props);
+  const merged = merge(zAxisDefaultProps, props);
 
   if (store != null) {
     registerInStore<ZAxisSettings>(

package/src/chart/AreaChart.tsx

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/chart/AreaChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart
 // (mirrors LineChart — differs only in chartName / allowed tooltip event types).
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/BarChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/BarChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/CartesianChart.tsx

@@ -1,12 +1,11 @@
-import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/CartesianChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
 // `?? default` accessors (see the defaults-use-solid-merge memory — using
 // explicit nullish-coalescing avoids `merge`'s undefined-override gotcha AND the
 // required-ness typing gap). Provider + Report components mirror recharts.
-
-import type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -84,7 +83,7 @@ export const CartesianChart = (props: CartesianChartOptions): JSX.Element => {
       {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
           children getter here, before the provider sets context — running them
           outside the store); pass children as a lazy JSX child instead. */}
-      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
+      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/CategoricalChart.tsx

@@ -1,11 +1,10 @@
-import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/CategoricalChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; no destructuring (omit + props);
 // `className` → `class`. The `compact` (Brush panorama) branch is deferred. Event
 // handlers are not forwarded yet (RechartsWrapper is render-only).
-
-import type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { RootSurface } from "../container/RootSurface";
 import { RechartsWrapper } from "./RechartsWrapper";
 import { ClipPathProvider } from "../container/ClipPathProvider";
@@ -19,7 +18,8 @@ export interface CategoricalChartProps extends CartesianChartProps {
 export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
   const attrs = (): Record<string, unknown> =>
     svgPropertiesNoEventsKeepCase({
-      ...splitProps(props, [
+      ...omit(
+        props,
         "width",
         "height",
         "responsive",
@@ -30,7 +30,7 @@ export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
         "title",
         "desc",
         "ref",
-      ])[1],
+      ),
     });
 
   return (

package/src/chart/ComposedChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/ComposedChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/FunnelChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/FunnelChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/LineChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/LineChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over CartesianChart.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/PieChart.tsx

@@ -1,4 +1,3 @@
-import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PieChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over PolarChart.
 // `resolveDefaultProps` → Solid `merge` (lazy proxy — does NOT eagerly evaluate
@@ -6,8 +5,8 @@ import { mergeProps, splitProps } from "solid-js";
 // (layout "centric", startAngle 0, endAngle 360) win over PolarChart's polar
 // defaults. `ref` is omitted from categoricalChartProps and passed separately,
 // mirroring the reference's forwardRef split.
-
-import type { JSX } from "solid-js";
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -27,7 +26,7 @@ export interface PieChartProps<DataPointType = unknown> extends PolarChartProps<
 export function PieChart<DataPointType = unknown>(
   props: PieChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = mergeProps(defaultPieChartProps, splitProps(props, ["ref"])[1]);
+  const categoricalChartProps = merge(defaultPieChartProps, omit(props, "ref"));
 
   return (
     <PolarChart

package/src/chart/PolarChart.tsx

@@ -1,4 +1,3 @@
-import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PolarChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
@@ -8,8 +7,8 @@ import { splitProps } from "solid-js";
 // The polar geometry props (cx/cy/innerRadius/outerRadius/startAngle/endAngle)
 // pass through to CategoricalChart exactly as in the reference — svgPropertiesNoEvents
 // forwards cx/cy onto the root <svg> (faithful) and drops the rest.
-
-import type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -90,7 +89,7 @@ export const PolarChart = (props: PolarChartOptions): JSX.Element => {
       {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
           children getter here, before the provider sets context — running them
           outside the store); pass children as a lazy JSX child instead. */}
-      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
+      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/RadarChart.tsx

@@ -1,9 +1,8 @@
-import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge` (lazy proxy, see PieChart).
 // RadarChart-specific defaults: layout "centric", startAngle 90, endAngle -270.
-
-import type { JSX } from "solid-js";
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -23,7 +22,7 @@ export interface RadarChartProps<DataPointType = unknown> extends PolarChartProp
 export function RadarChart<DataPointType = unknown>(
   props: RadarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = mergeProps(defaultRadarChartProps, splitProps(props, ["ref"])[1]);
+  const categoricalChartProps = merge(defaultRadarChartProps, omit(props, "ref"));
 
   return (
     <PolarChart

package/src/chart/RadialBarChart.tsx

@@ -1,9 +1,8 @@
-import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadialBarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge`. RadialBarChart defaults:
 // layout "radial", startAngle 0, endAngle 360 (PolarChart fills cx/cy/radii).
-
-import type { JSX } from "solid-js";
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -25,10 +24,7 @@ export interface RadialBarChartProps<
 export function RadialBarChart<DataPointType = unknown>(
   props: RadialBarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = mergeProps(
-    defaultRadialBarChartProps,
-    splitProps(props, ["ref"])[1],
-  );
+  const categoricalChartProps = merge(defaultRadialBarChartProps, omit(props, "ref"));
 
   return (
     <PolarChart