solid-recharts 0.2.1 → 1.0.0

package/package.json

@@ -1,31 +1,33 @@
 {
   "name": "solid-recharts",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "license": "MIT",
+  "files": [
+    "src"
+  ],
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts"
   },
+  "scripts": {
+    "pretest": "node ../../scripts/verify-reference.mjs",
+    "test": "vp test run",
+    "test:watch": "vp test",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.1.0"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^1.0.0-beta.2",
+    "@solidjs/testing-library": "^0.8.10",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
     "axe-core": "^4.12.0",
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-beta.17",
-    "solid-js": "^2.0.0-beta.17"
-  },
-  "scripts": {
-    "pretest": "node ../../scripts/verify-reference.mjs",
-    "test": "vp test run",
-    "test:watch": "vp test",
-    "typecheck": "tsc --noEmit"
+    "solid-js": "^1.9.0"
   }
-}
+}

package/src/animation/AnimatedItems.tsx

@@ -13,7 +13,7 @@
 //   - A keyed `<Show when={animationId()}>` wraps the driver so a new animation
 //     cycle remounts it cleanly (same NO_OWNER-safe shape Bar already used).
 import { createMemo, createSignal, untrack, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAnimationId } from "../util/useAnimationId";
 import { noop } from "../util/DataUtils";
 import { useAnimationStartSnapshot, type MutableRef } from "./useAnimationStartSnapshot";
@@ -38,9 +38,7 @@ export function useAnimationCallbacks(
   handleAnimationStart: () => void;
   handleAnimationEnd: () => void;
 } {
-  // ownedWrite: handleAnimationEnd can fire from the driver's effect-cleanup when
-  // a mid-animation chart is disposed (route/soft navigation) — a legal teardown.
-  const [isAnimating, setIsAnimating] = createSignal(false, { ownedWrite: true });
+  const [isAnimating, setIsAnimating] = createSignal(false);
 
   const handleAnimationStart = (): void => {
     onAnimationStart?.();

package/src/animation/CSSTransitionAnimate.tsx

@@ -6,14 +6,14 @@
 //   - `useState` → `createSignal`; the `initialized` `useRef` → a `createSignal`
 //     flipped in the start effect and read reactively in the render memo.
 //   - `usePrefersReducedMotion()` returns an Accessor → call it.
-//   - the `useEffect` → two-arg `createEffect(compute, apply)`; cleanup returned
+//   - the `useEffect` → two-arg `createEffect(on(compute, apply))`; cleanup returned
 //     from the apply phase.
 //   - `return children(style)` → a reactive `<>{props.children(styleObject())}</>`.
 //   - the children style is a `Record<string, string | undefined>`: the dynamic
 //     `[attributeName]` key can't be typed against Solid's stricter `JSX.CSSProperties`,
 //     so consumers read the known keys (e.g. `transform`/`transition`) into their style.
-import { createEffect, createMemo, createSignal, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, createSignal, untrack, createEffect, on, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
 import { noop } from "../util/DataUtils";
 import { getTransitionVal } from "./util";
 import { Global } from "../util/Global";
@@ -81,42 +81,44 @@ export function CSSTransitionAnimate(props: CSSTransitionAnimateProps): JSX.Elem
   // the already-read `deps.from` (reading props.from when the controller invokes it
   // later would be an untracked read).
   createEffect(
-    () => ({
-      active: isActive(),
-      canBegin: canBegin(),
-      duration: duration(),
-      easing: easing(),
-      begin: begin(),
-      from: props.from,
-      to: props.to,
-      animationId: props.animationId,
-      attributeName: props.attributeName,
-      onStart: onAnimationStartProp(),
-      onEnd: onAnimationEnd(),
-      controller: animationController,
-    }),
-    (deps) => {
-      if (!deps.active || !deps.canBegin) {
-        return undefined;
-      }
-      setInitialized(true);
-      const onStart = (): void => {
-        setStyle(deps.from);
-        deps.onStart();
-      };
-      const timeoutController = new RequestAnimationFrameTimeoutController();
-      const animation = new CSSTransitionAnimation({
-        animationId: deps.animationId + deps.attributeName,
-        easing: deps.easing,
-        animationDuration: deps.duration,
-        animationBegin: deps.begin,
-        onAnimationStart: onStart,
-        onAnimationEnd: deps.onEnd,
-        from: deps.from,
-        to: deps.to,
-      });
-      return deps.controller(timeoutController, animation, (next) => setStyle(String(next)));
-    },
+    on(
+      () => ({
+        active: isActive(),
+        canBegin: canBegin(),
+        duration: duration(),
+        easing: easing(),
+        begin: begin(),
+        from: props.from,
+        to: props.to,
+        animationId: props.animationId,
+        attributeName: props.attributeName,
+        onStart: onAnimationStartProp(),
+        onEnd: onAnimationEnd(),
+        controller: animationController,
+      }),
+      (deps) => {
+        if (!deps.active || !deps.canBegin) {
+          return undefined;
+        }
+        setInitialized(true);
+        const onStart = (): void => {
+          setStyle(deps.from);
+          deps.onStart();
+        };
+        const timeoutController = new RequestAnimationFrameTimeoutController();
+        const animation = new CSSTransitionAnimation({
+          animationId: deps.animationId + deps.attributeName,
+          easing: deps.easing,
+          animationDuration: deps.duration,
+          animationBegin: deps.begin,
+          onAnimationStart: onStart,
+          onAnimationEnd: deps.onEnd,
+          from: deps.from,
+          to: deps.to,
+        });
+        onCleanup(deps.controller(timeoutController, animation, (next) => setStyle(String(next))));
+      },
+    ),
   );
 
   // All reactive reads live in this memo (a tracking scope); the JSX insert below

package/src/animation/JavascriptAnimate.tsx

@@ -4,14 +4,14 @@
 // (JavascriptAnimation handle + injectable AnimationController). Deviations:
 //   - `resolveDefaultProps` → per-prop `?? default` accessors.
 //   - `useState` → `createSignal`; the two `useEffect`s → two-arg
-//     `createEffect(compute, apply)`; the start effect returns its cleanup.
+//     `createEffect(on(compute, apply))`; the start effect returns its cleanup.
 //   - `usePrefersReducedMotion()` returns an Accessor → call it.
 //   - `return children(Number(style))` → a reactive `{props.children(...)}` so the
 //     function child re-runs each frame (Solid components run once).
 // This is the same driver `AnimatedItems` uses; standalone consumers are the shape
 // update-tweens (`Rectangle`, `Trapezoid`).
-import { createSignal, createEffect, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, untrack, createEffect, on, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
 import { noop } from "../util/DataUtils";
 import { createEasingFunction, type EasingInput } from "./easing";
 import { Global } from "../util/Global";
@@ -59,48 +59,52 @@ export function JavascriptAnimate(props: JavascriptAnimateProps): JSX.Element {
 
   // When the animation is not active, jump straight to the final state.
   createEffect(
-    () => isActive(),
-    (active) => {
-      if (!active) {
-        setStyle(to);
-      }
-    },
+    on(
+      () => isActive(),
+      (active) => {
+        if (!active) {
+          setStyle(to);
+        }
+      },
+    ),
   );
 
   // Start (and clean up) the animation when its inputs change.
   createEffect(
-    () => ({
-      active: isActive(),
-      canBegin: canBegin(),
-      duration: duration(),
-      easing: easing(),
-      begin: begin(),
-      animationId: props.animationId,
-      onAnimationStart: onAnimationStart(),
-      onAnimationEnd: onAnimationEnd(),
-      controller: animationController,
-    }),
-    (deps) => {
-      if (!deps.active || !deps.canBegin) {
-        return undefined;
-      }
-      const easingFunction = createEasingFunction(deps.easing);
-      if (easingFunction == null) {
-        return undefined;
-      }
-      const timeoutController = new RequestAnimationFrameTimeoutController();
-      const animation = new JavascriptAnimation({
-        animationId: deps.animationId,
-        easing: easingFunction,
-        animationDuration: deps.duration,
-        animationBegin: deps.begin,
-        onAnimationStart: deps.onAnimationStart,
-        onAnimationEnd: deps.onAnimationEnd,
-        from,
-        to,
-      });
-      return deps.controller(timeoutController, animation, setStyle);
-    },
+    on(
+      () => ({
+        active: isActive(),
+        canBegin: canBegin(),
+        duration: duration(),
+        easing: easing(),
+        begin: begin(),
+        animationId: props.animationId,
+        onAnimationStart: onAnimationStart(),
+        onAnimationEnd: onAnimationEnd(),
+        controller: animationController,
+      }),
+      (deps) => {
+        if (!deps.active || !deps.canBegin) {
+          return undefined;
+        }
+        const easingFunction = createEasingFunction(deps.easing);
+        if (easingFunction == null) {
+          return undefined;
+        }
+        const timeoutController = new RequestAnimationFrameTimeoutController();
+        const animation = new JavascriptAnimation({
+          animationId: deps.animationId,
+          easing: easingFunction,
+          animationDuration: deps.duration,
+          animationBegin: deps.begin,
+          onAnimationStart: deps.onAnimationStart,
+          onAnimationEnd: deps.onAnimationEnd,
+          from,
+          to,
+        });
+        onCleanup(deps.controller(timeoutController, animation, setStyle));
+      },
+    ),
   );
 
   return <>{props.children(Number(style()))}</>;

package/src/cartesian/Area.tsx

@@ -11,8 +11,8 @@
 // registration components → `createEffect` add/replace + `onCleanup` (Line idiom);
 // React `useRef` prev-frame state → plain `{ current }` MutableRef objects driven
 // by AnimatedItems/useAnimationStartSnapshot.
-import { createMemo, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   AnimatedItems,
@@ -416,7 +416,7 @@ function interpolateScalarBaseLine(
 
 export const Area = (props: AreaProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(areaDefaultProps, props);
+  const merged = mergeProps(areaDefaultProps, props);
   const isPanorama = useIsPanorama();
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-area", props.id);
@@ -474,7 +474,7 @@ export const Area = (props: AreaProps): JSX.Element => {
 
   // Legend payload entry for this area (color = stroke, like recharts' getLegendItemColor).
   // `payload` mirrors recharts' resolved Area props (built explicitly — spreading the
-  // Solid merge() proxy would leak a MERGE_SOURCE symbol).
+  // Solid mergeProps() proxy would leak a MERGE_SOURCE symbol).
   const legendPayload = createMemo<ReadonlyArray<LegendPayload>>(() => [
     {
       inactive: merged.hide,

package/src/cartesian/AreaRevealShape.tsx

@@ -12,7 +12,7 @@
 // reveal clip is gated with a TERNARY, not `<Show when={const}>` (the entrance
 // flags are read once per frame, not reactive — STRICT_READ discipline).
 import { createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { isNumber } from "../util/DataUtils";
 import { Curve, type BaseLineType, type CurveProps } from "../shape/Curve";
 import type { CartesianLayout, LayoutType, ShapeAnimationProps } from "../util/types";

package/src/cartesian/Bar.tsx

@@ -10,8 +10,18 @@
 // Solid deviations: `resolveDefaultProps`→`merge`; RegisterGraphicalItemId +
 // Set* effect-dispatch components → a `createEffect` add/replace + `onCleanup`
 // remove (the same idiom as <Line>).
-import { createEffect, createMemo, createSignal, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import {
+  createMemo,
+  createSignal,
+  For,
+  Index,
+  Show,
+  mergeProps,
+  createEffect,
+  on,
+  onCleanup,
+} from "solid-js";
+import type { JSX } from "solid-js";
 import { noop } from "../util/DataUtils";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
@@ -573,23 +583,25 @@ function BarRectangleWithActiveState(props: {
   const [hasMountedActive, setHasMountedActive] = createSignal(false);
 
   createEffect(
-    () => isActive(),
-    (active) => {
-      let rafId: number | undefined;
-      if (active) {
-        setStayInLayer(true);
-        rafId = requestAnimationFrame(() => {
-          setHasMountedActive(true);
-        });
-      } else {
-        setHasMountedActive(false);
-      }
-      return () => {
-        if (rafId != null) {
-          cancelAnimationFrame(rafId);
+    on(
+      () => isActive(),
+      (active) => {
+        let rafId: number | undefined;
+        if (active) {
+          setStayInLayer(true);
+          rafId = requestAnimationFrame(() => {
+            setHasMountedActive(true);
+          });
+        } else {
+          setHasMountedActive(false);
         }
-      };
-    },
+        onCleanup(() => {
+          if (rafId != null) {
+            cancelAnimationFrame(rafId);
+          }
+        });
+      },
+    ),
   );
 
   const isVisuallyActive = (): boolean => isActive() && hasMountedActive();
@@ -849,7 +861,7 @@ const barErrorBarFormatter: ErrorBarDataPointFormatter = (entry, dataKey): Error
 
 export const Bar = (props: BarProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(barDefaultProps, props);
+  const merged = mergeProps(barDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-bar", props.id);
   const stackId = useStackId(props.stackId);
@@ -1116,7 +1128,7 @@ export const Bar = (props: BarProps): JSX.Element => {
                             getter-wrapped props) and builds the handlers once per
                             slot. `r` is now an accessor — event handlers read `r()`
                             at dispatch time so they see the current frame's rect. */}
-                        <For each={frame} keyed={false}>
+                        <Index each={frame}>
                           {(r, i) => (
                             // Render every selector-output rectangle, matching recharts
                             // (zero-dimension genuinely-empty bars are already dropped at
@@ -1186,7 +1198,7 @@ export const Bar = (props: BarProps): JSX.Element => {
                               }
                             />
                           )}
-                        </For>
+                        </Index>
                       </Layer>
                     )}
                   </AnimatedItems>

package/src/cartesian/BarStack.tsx

@@ -1,8 +1,8 @@
 // Ported from recharts 3.8.1 src/cartesian/BarStack.tsx (commit 7a23854).
 // Solid deviations: `resolveDefaultProps`→`merge`; React context → Solid `createContext`;
 // `useMemo`→plain object; `React.memo`/`propsAreEqual` omitted (Solid comp granularity).
-import { createContext, createMemo, For, merge, Show, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createContext, createMemo, For, Show, useContext, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { getNormalizedStackId, type NormalizedStackId, type StackId } from "../util/ChartUtils";
 import { useUniqueId } from "../util/useUniqueId";
 import { useAppSelector } from "../state/hooks";
@@ -136,16 +136,16 @@ const BarStackClipPath = (props: {
 };
 
 export const BarStack = (props: BarStackProps): JSX.Element => {
-  const merged = merge(defaultBarStackProps, props);
+  const merged = mergeProps(defaultBarStackProps, props);
   const resolvedStackId = useUniqueId("recharts-bar-stack", getNormalizedStackId(merged.stackId));
   const context: BarStackSettings = {
     stackId: resolvedStackId,
     radius: merged.radius,
   };
   return (
-    <BarStackContext value={context}>
+    <BarStackContext.Provider value={context}>
       <BarStackClipPath stackId={resolvedStackId} radius={merged.radius} />
       {props.children}
-    </BarStackContext>
+    </BarStackContext.Provider>
   );
 };

package/src/cartesian/Brush.tsx

@@ -23,8 +23,8 @@
 // (drag overrides win mid-interaction, the Solid equivalent of recharts'
 // getDerivedStateFromProps "don't sync while interacting" guards). Covered by the
 // "with controlled startIndex/endIndex" Brush.spec block.
-import { createEffect, createMemo, createSignal, merge, onCleanup, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, createSignal, onCleanup, Show, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { scalePoint } from "d3-scale";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
@@ -211,7 +211,7 @@ function DefaultTraveller(props: {
 
 export const Brush = (props: BrushProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(brushDefaultProps, props);
+  const merged = mergeProps(brushDefaultProps, props);
 
   const dimensions = useAppSelector(selectBrushDimensions);
   const dataState = useAppSelector(selectChartDataWithIndexes);
@@ -229,24 +229,28 @@ export const Brush = (props: BrushProps): JSX.Element => {
   // createEffect (compute → apply): the store write happens in the untracked apply
   // phase, like the other Set* registration components.
   createEffect(
-    () => ({
-      x: merged.x,
-      y: merged.y,
-      width: merged.width,
-      height: merged.height,
-      padding: { ...merged.padding },
-    }),
-    (settings) => store?.actions.brush.setBrushSettings(settings),
+    on(
+      () => ({
+        x: merged.x,
+        y: merged.y,
+        width: merged.width,
+        height: merged.height,
+        padding: { ...merged.padding },
+      }),
+      (settings) => store?.actions.brush.setBrushSettings(settings),
+    ),
   );
   unregisterOnCleanup(() => store?.actions.brush.setBrushSettings(null));
 
   // Sync controlled start/end index props into the store (recharts BrushInternal
   // useEffect — always dispatch; the reducer ignores undefined fields).
   createEffect(
-    () => ({ startIndex: merged.startIndex, endIndex: merged.endIndex }),
-    (idx) => {
-      store?.actions.chartData.setDataStartEndIndexes(idx);
-    },
+    on(
+      () => ({ startIndex: merged.startIndex, endIndex: merged.endIndex }),
+      (idx) => {
+        store?.actions.chartData.setDataStartEndIndexes(idx);
+      },
+    ),
   );
 
   // scalePoint over the data indices → pixel positions across the brush width.

package/src/cartesian/CartesianAxis.tsx

@@ -17,8 +17,8 @@
 // auto-width. Solid deviations:
 // forwardRef dropped; React CSSProperties n/a; `className`→`class`.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { 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 { getTicks } from "./getTicks";
 import { Layer } from "../container/Layer";
 import {
@@ -281,9 +281,9 @@ const AxisLine = (props: {
 };
 
 export const CartesianAxis = (props: CartesianAxisProps): JSX.Element => {
-  const merged = merge(cartesianAxisDefaults, props);
+  const merged = mergeProps(cartesianAxisDefaults, props);
 
-  // merge() keeps an explicit `stroke={undefined}` (e.g. forwarded from a
+  // mergeProps() keeps an explicit `stroke={undefined}` (e.g. forwarded from a
   // strokeless <YAxis/>) as undefined; resolve the default at use sites.
   const strokeColor = (): string => merged.stroke ?? cartesianAxisDefaults.stroke;
 

package/src/cartesian/CartesianGrid.tsx

@@ -13,8 +13,8 @@
 // full GridLineTypeFunctionProps payload (matching recharts) including the
 // xAxis/yAxis/offset bundle.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { 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 } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useChartHeight, useChartWidth, useOffsetInternal } from "../context/chartLayoutContext";
@@ -227,7 +227,7 @@ const defaultHorizontalCoordinatesGenerator: HorizontalCoordinatesGenerator = (
   );
 
 export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
-  const merged = merge(cartesianGridDefaults, props);
+  const merged = mergeProps(cartesianGridDefaults, props);
   const isPanorama = useIsPanorama();
   const offset = useOffsetInternal();
   const chartWidth = useChartWidth();
@@ -379,7 +379,7 @@ export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
 
   // Builds the props payload passed to a custom line render-prop function.
   // Enumerates exactly the keys recharts' LineItem receives — no `...props`
-  // spread (that would leak the merge()-proxy MERGE_SOURCE symbol into the
+  // spread (that would leak the mergeProps()-proxy MERGE_SOURCE symbol into the
   // payload and break deep-equality assertions).
   const lineItemProps = (
     index: number,
@@ -486,7 +486,7 @@ export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
           Show child — see Bar). Default grid zIndex is -100: the grid portals
           BELOW the graphical items, mirroring the reference's settled DOM. */}
       <ZIndexLayer zIndex={merged.zIndex}>
-        <g class={["recharts-cartesian-grid", merged.class]}>
+        <g class={["recharts-cartesian-grid", merged.class].filter(Boolean).join(" ")}>
           <Show when={merged.fill != null && merged.fill !== "none"}>
             <rect
               x={geom().x}

package/src/cartesian/ErrorBar.tsx

@@ -16,8 +16,8 @@
 //  - arbitrary SVG-prop passthrough to the whisker group (recharts `Props = SVGProps
 //    & ErrorBarProps`, e.g. a bare `begin` attribute) rides through
 //    svgPropertiesNoEvents, filtered by the canonical allowlist.
-import { type Accessor, createMemo, For, merge, omit, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createMemo, For, Show, mergeProps, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Layer } from "../container/Layer";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { CSSTransitionAnimate } from "../animation/CSSTransitionAnimate";
@@ -219,7 +219,10 @@ function ErrorBarImpl(props: {
                 <Show when={group.lines.length > 0}>
                   {/* Raw <g> (mirrors Layer's `recharts-layer` class) so the Record
                     spread can carry the non-typed `offset` attribute. */}
-                  <g class={["recharts-layer", "recharts-errorBar"]} {...groupAttrs()}>
+                  <g
+                    class={["recharts-layer", "recharts-errorBar"].filter(Boolean).join(" ")}
+                    {...groupAttrs()}
+                  >
                     <For each={group.lines}>
                       {(c) => {
                         const lineStyle: JSX.CSSProperties | undefined = props.isAnimationActive
@@ -275,7 +278,7 @@ function ErrorBarImpl(props: {
  * @consumes ErrorBarContext
  */
 export function ErrorBar(props: ErrorBarProps): JSX.Element {
-  const merged = merge(errorBarDefaultProps, props);
+  const merged = mergeProps(errorBarDefaultProps, props);
   const direction = useErrorBarDirection(props.direction);
   // Everything that isn't ErrorBar config is an SVG presentation prop for the
   // whisker group (recharts: `const { direction, width, dataKey, ...others } =
@@ -283,8 +286,7 @@ export function ErrorBar(props: ErrorBarProps): JSX.Element {
   // remaining non-SVG keys (and the merge proxy's symbols).
   const groupSvgAttrs = createMemo<Record<string, unknown>>(() =>
     svgPropertiesNoEvents({
-      ...omit(
-        merged,
+      ...splitProps(merged, [
         "dataKey",
         "width",
         "direction",
@@ -294,7 +296,7 @@ export function ErrorBar(props: ErrorBarProps): JSX.Element {
         "animationEasing",
         "zIndex",
         "class",
-      ),
+      ])[1],
     }),
   );
   return (

package/src/cartesian/Funnel.tsx

@@ -17,8 +17,8 @@
 // Enter/Leave/onTouchStart/Move/End, props-first `(data, index, event)`) ARE wired.
 // No legend registration and no ZIndexLayer — matching recharts (upstream Funnel
 // registers no legend payload and renders inline without a zIndex portal).
-import { 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 } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
 import {
@@ -346,7 +346,7 @@ export const funnelDefaultProps = {
 export function Funnel<DataPointType = Record<string, unknown>, DataValueType = unknown>(
   props: FunnelProps<DataPointType, DataValueType>,
 ): JSX.Element {
-  const merged = merge(funnelDefaultProps, props);
+  const merged = mergeProps(funnelDefaultProps, props);
   const id = useUniqueId("recharts-funnel", props.id);
 
   const cells = collectCells(() => props.children);

package/src/cartesian/GraphicalItemClipPath.tsx

@@ -6,7 +6,7 @@
 // through `<Show>`. Not yet wired into <Line> (clip is a deferred Line feature);
 // this is the shared clip-path primitive for graphical items.
 import { createMemo, Show, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { AxisId } from "../state/cartesianAxisSlice";
 import { useAppSelector } from "../state/hooks";
 import {