solid-recharts 0.2.0 → 1.0.0

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 { createEffect, createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useUniqueId } from "../util/useUniqueId";
@@ -79,7 +79,7 @@ import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from "
 import { getLinearRegression, interpolate, isNullish, isNumOrStr } from "../util/DataUtils";
 import { BaseAxisWithScale, implicitZAxis, ZAxisWithScale } from "../state/selectors/axisSelectors";
 import type { Formatter, ValueType } from "../component/DefaultTooltipContent";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ScatterPointNode {
   x?: number | string;
@@ -383,7 +383,7 @@ const scatterErrorBarFormatter: ErrorBarDataPointFormatter = (
 
 export const Scatter = (props: ScatterProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(scatterDefaultProps, props);
+  const merged = mergeProps(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.
@@ -402,41 +402,29 @@ export const Scatter = (props: ScatterProps): JSX.Element => {
   // The default shape a (possibly partial-object) activeShape falls back to.
   const defaultSymbolShape = (p: ScatterShapeProps): JSX.Element => <Symbols {...p} />;
 
-  let prev: ScatterSettings | null = null;
-
-  createEffect(
-    (): ScatterSettings => ({
-      id,
-      type: "scatter",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: merged.zAxisId,
-      hide: merged.hide,
-      tooltipType: merged.tooltipType,
-      name: merged.name,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ScatterSettings>(
+      () => ({
+        id,
+        type: "scatter",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: merged.zAxisId,
+        hide: merged.hide,
+        tooltipType: merged.tooltipType,
+        name: merged.name,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-point <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);

package/src/cartesian/XAxis.tsx

@@ -10,8 +10,8 @@
 // plus `onCleanup` for removal. Defaults are resolved field-by-field to match
 // recharts' `resolveDefaultProps`: explicit `undefined` falls back to defaults.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,
@@ -43,7 +43,7 @@ import {
   TickProp,
 } from "../util/types";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface XAxisProps<DataPointType = unknown, DataValueType = unknown> {
   xAxisId?: string | number;
@@ -155,71 +155,58 @@ export function XAxis<DataPointType = unknown, DataValueType = unknown>(
   const unit = createMemo(() => props.unit);
   const mirror = createMemo(() => withDefault(props.mirror, xAxisDefaultProps.mirror));
 
-  let prev: XAxisSettings | null = null;
-
-  createEffect(
-    (): XAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(
-        layout(),
-        "xAxis",
-        withDefault(props.type, xAxisDefaultProps.type),
-      );
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: xAxisId(),
-        scale: withDefault(props.scale, xAxisDefaultProps.scale),
-        type: evaluatedType,
-        dataKey: props.dataKey,
-        unit: unit(),
-        name: props.name,
-        allowDuplicatedCategory: withDefault(
-          props.allowDuplicatedCategory,
-          xAxisDefaultProps.allowDuplicatedCategory,
-        ),
-        allowDataOverflow: withDefault(
-          props.allowDataOverflow,
-          xAxisDefaultProps.allowDataOverflow,
-        ),
-        reversed: withDefault(props.reversed, xAxisDefaultProps.reversed),
-        includeHidden: withDefault(props.includeHidden, xAxisDefaultProps.includeHidden),
-        domain: props.domain,
-        allowDecimals: withDefault(props.allowDecimals, xAxisDefaultProps.allowDecimals),
-        tickCount: withDefault(props.tickCount, xAxisDefaultProps.tickCount),
-        ticks: props.ticks,
-        tick: tick(),
-        niceTicks: withDefault(props.niceTicks, xAxisDefaultProps.niceTicks),
-        interval: withDefault(props.interval, xAxisDefaultProps.interval),
-        mirror: mirror(),
-        minTickGap: withDefault(props.minTickGap, xAxisDefaultProps.minTickGap),
-        angle: withDefault(props.angle, xAxisDefaultProps.angle),
-        hide: hide(),
-        tickFormatter: tickFormatter(),
-        padding: withDefault(props.padding, xAxisDefaultProps.padding),
-        height: withDefault(props.height, xAxisDefaultProps.height),
-        orientation: orientation(),
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addXAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceXAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeXAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<XAxisSettings>(
+      (): XAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(
+          layout(),
+          "xAxis",
+          withDefault(props.type, xAxisDefaultProps.type),
+        );
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: xAxisId(),
+          scale: withDefault(props.scale, xAxisDefaultProps.scale),
+          type: evaluatedType,
+          dataKey: props.dataKey,
+          unit: unit(),
+          name: props.name,
+          allowDuplicatedCategory: withDefault(
+            props.allowDuplicatedCategory,
+            xAxisDefaultProps.allowDuplicatedCategory,
+          ),
+          allowDataOverflow: withDefault(
+            props.allowDataOverflow,
+            xAxisDefaultProps.allowDataOverflow,
+          ),
+          reversed: withDefault(props.reversed, xAxisDefaultProps.reversed),
+          includeHidden: withDefault(props.includeHidden, xAxisDefaultProps.includeHidden),
+          domain: props.domain,
+          allowDecimals: withDefault(props.allowDecimals, xAxisDefaultProps.allowDecimals),
+          tickCount: withDefault(props.tickCount, xAxisDefaultProps.tickCount),
+          ticks: props.ticks,
+          tick: tick(),
+          niceTicks: withDefault(props.niceTicks, xAxisDefaultProps.niceTicks),
+          interval: withDefault(props.interval, xAxisDefaultProps.interval),
+          mirror: mirror(),
+          minTickGap: withDefault(props.minTickGap, xAxisDefaultProps.minTickGap),
+          angle: withDefault(props.angle, xAxisDefaultProps.angle),
+          hide: hide(),
+          tickFormatter: tickFormatter(),
+          padding: withDefault(props.padding, xAxisDefaultProps.padding),
+          height: withDefault(props.height, xAxisDefaultProps.height),
+          orientation: orientation(),
+        };
+      },
+      {
+        add: (next) => store.actions.cartesianAxis.addXAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceXAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeXAxis(prev),
+      },
+    );
+  }
 
   // Visual: render the <CartesianAxis> (ticks + labels + axis line). Never inside
   // a Brush panorama.

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 { createEffect, createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,
@@ -40,7 +40,7 @@ import {
   TickProp,
 } from "../util/types";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface YAxisProps<DataPointType = unknown, DataValueType = unknown> {
   yAxisId?: string | number;
@@ -152,71 +152,58 @@ export function YAxis<DataPointType = unknown, DataValueType = unknown>(
   const unit = createMemo(() => props.unit);
   const mirror = createMemo(() => withDefault(props.mirror, yAxisDefaultProps.mirror));
 
-  let prev: YAxisSettings | null = null;
-
-  createEffect(
-    (): YAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(
-        layout(),
-        "yAxis",
-        withDefault(props.type, yAxisDefaultProps.type),
-      );
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: yAxisId(),
-        scale: withDefault(props.scale, yAxisDefaultProps.scale),
-        type: evaluatedType,
-        dataKey: props.dataKey,
-        unit: unit(),
-        name: props.name,
-        allowDuplicatedCategory: withDefault(
-          props.allowDuplicatedCategory,
-          yAxisDefaultProps.allowDuplicatedCategory,
-        ),
-        allowDataOverflow: withDefault(
-          props.allowDataOverflow,
-          yAxisDefaultProps.allowDataOverflow,
-        ),
-        reversed: withDefault(props.reversed, yAxisDefaultProps.reversed),
-        includeHidden: withDefault(props.includeHidden, yAxisDefaultProps.includeHidden),
-        domain: props.domain,
-        allowDecimals: withDefault(props.allowDecimals, yAxisDefaultProps.allowDecimals),
-        tickCount: withDefault(props.tickCount, yAxisDefaultProps.tickCount),
-        ticks: props.ticks,
-        tick: tick(),
-        niceTicks: withDefault(props.niceTicks, yAxisDefaultProps.niceTicks),
-        interval: withDefault(props.interval, yAxisDefaultProps.interval),
-        mirror: mirror(),
-        minTickGap: withDefault(props.minTickGap, yAxisDefaultProps.minTickGap),
-        angle: withDefault(props.angle, yAxisDefaultProps.angle),
-        hide: hide(),
-        tickFormatter: tickFormatter(),
-        padding: withDefault(props.padding, yAxisDefaultProps.padding),
-        width: withDefault(props.width, yAxisDefaultProps.width),
-        orientation: orientation(),
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addYAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceYAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeYAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<YAxisSettings>(
+      (): YAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(
+          layout(),
+          "yAxis",
+          withDefault(props.type, yAxisDefaultProps.type),
+        );
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: yAxisId(),
+          scale: withDefault(props.scale, yAxisDefaultProps.scale),
+          type: evaluatedType,
+          dataKey: props.dataKey,
+          unit: unit(),
+          name: props.name,
+          allowDuplicatedCategory: withDefault(
+            props.allowDuplicatedCategory,
+            yAxisDefaultProps.allowDuplicatedCategory,
+          ),
+          allowDataOverflow: withDefault(
+            props.allowDataOverflow,
+            yAxisDefaultProps.allowDataOverflow,
+          ),
+          reversed: withDefault(props.reversed, yAxisDefaultProps.reversed),
+          includeHidden: withDefault(props.includeHidden, yAxisDefaultProps.includeHidden),
+          domain: props.domain,
+          allowDecimals: withDefault(props.allowDecimals, yAxisDefaultProps.allowDecimals),
+          tickCount: withDefault(props.tickCount, yAxisDefaultProps.tickCount),
+          ticks: props.ticks,
+          tick: tick(),
+          niceTicks: withDefault(props.niceTicks, yAxisDefaultProps.niceTicks),
+          interval: withDefault(props.interval, yAxisDefaultProps.interval),
+          mirror: mirror(),
+          minTickGap: withDefault(props.minTickGap, yAxisDefaultProps.minTickGap),
+          angle: withDefault(props.angle, yAxisDefaultProps.angle),
+          hide: hide(),
+          tickFormatter: tickFormatter(),
+          padding: withDefault(props.padding, yAxisDefaultProps.padding),
+          width: withDefault(props.width, yAxisDefaultProps.width),
+          orientation: orientation(),
+        };
+      },
+      {
+        add: (next) => store.actions.cartesianAxis.addYAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceYAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeYAxis(prev),
+      },
+    );
+  }
 
   // Visual: render the <CartesianAxis>. Never inside a Brush panorama.
   const isPanorama = useIsPanorama();
@@ -238,42 +225,44 @@ 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(compute, apply): the compute tracks the reactive inputs (ticks +
+  // two-arg createEffect(on(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(
-    () => ({
-      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 });
-      }
-    },
+    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 });
+        }
+      },
+    ),
   );
 
   return (

package/src/cartesian/ZAxis.tsx

@@ -1,17 +1,18 @@
+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 { createEffect, merge } from "solid-js";
+
 import { useAppStore } from "../state/hooks";
 import { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice";
 import { implicitZAxis } from "../state/selectors/axisSelectors";
 import { AxisDomain, DataKey, ScaleType } from "../util/types";
 import { AxisRange } from "../state/selectors/axisSelectors";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ZAxisProps<DataPointType = unknown, DataValueType = unknown> {
   zAxisId?: AxisId;
@@ -35,46 +36,33 @@ export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
   props: ZAxisProps<DataPointType, DataValueType>,
 ): null {
   const store = useAppStore();
-  const merged = merge(zAxisDefaultProps, props);
-
-  let prev: ZAxisSettings | null = null;
-
-  createEffect(
-    (): ZAxisSettings => ({
-      id: merged.zAxisId,
-      type: merged.type,
-      dataKey: merged.dataKey,
-      range: merged.range,
-      domain: merged.domain,
-      scale: merged.scale,
-      // recharts registers the raw prop name/unit (undefined when unset); the
-      // implicit "" is only the fallback when NO ZAxis exists (selectZAxisSettings).
-      name: merged.name,
-      unit: merged.unit,
-      allowDataOverflow: implicitZAxis.allowDataOverflow,
-      allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
-      includeHidden: implicitZAxis.includeHidden,
-      reversed: implicitZAxis.reversed,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addZAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceZAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
+  const merged = mergeProps(zAxisDefaultProps, props);
 
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeZAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ZAxisSettings>(
+      () => ({
+        id: merged.zAxisId,
+        type: merged.type,
+        dataKey: merged.dataKey,
+        range: merged.range,
+        domain: merged.domain,
+        scale: merged.scale,
+        // recharts registers the raw prop name/unit (undefined when unset); the
+        // implicit "" is only the fallback when NO ZAxis exists (selectZAxisSettings).
+        name: merged.name,
+        unit: merged.unit,
+        allowDataOverflow: implicitZAxis.allowDataOverflow,
+        allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
+        includeHidden: implicitZAxis.includeHidden,
+        reversed: implicitZAxis.reversed,
+      }),
+      {
+        add: (next) => store.actions.cartesianAxis.addZAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceZAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeZAxis(prev),
+      },
+    );
+  }
 
   return null;
 }

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 "@solidjs/web";
+import type { JSX } from "solid-js";
 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 "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/CartesianChart.tsx

@@ -1,11 +1,12 @@
+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 { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -83,7 +84,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 {...omit(cp(), "children")} ref={props.ref}>
+      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/CategoricalChart.tsx

@@ -1,10 +1,11 @@
+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 { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { RootSurface } from "../container/RootSurface";
 import { RechartsWrapper } from "./RechartsWrapper";
 import { ClipPathProvider } from "../container/ClipPathProvider";
@@ -18,8 +19,7 @@ export interface CategoricalChartProps extends CartesianChartProps {
 export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
   const attrs = (): Record<string, unknown> =>
     svgPropertiesNoEventsKeepCase({
-      ...omit(
-        props,
+      ...splitProps(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 "@solidjs/web";
+import type { JSX } from "solid-js";
 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 "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";