solid-recharts 1.0.0 → 2.0.0-beta.1

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "solid-recharts",
-  "version": "1.0.0",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
-  "files": [
-    "src"
-  ],
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -21,13 +18,14 @@
     "d3-shape": "^3.1.0"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^0.8.10",
+    "@solidjs/testing-library": "^1.0.0-beta.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
     "axe-core": "^4.12.0",
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.0"
+    "@solidjs/web": "^2.0.0-beta.17",
+    "solid-js": "^2.0.0-beta.17"
   }
 }

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 "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useAnimationId } from "../util/useAnimationId";
 import { noop } from "../util/DataUtils";
 import { useAnimationStartSnapshot, type MutableRef } from "./useAnimationStartSnapshot";
@@ -38,7 +38,9 @@ export function useAnimationCallbacks(
   handleAnimationStart: () => void;
   handleAnimationEnd: () => void;
 } {
-  const [isAnimating, setIsAnimating] = createSignal(false);
+  // 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 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(on(compute, apply))`; cleanup returned
+//   - the `useEffect` → two-arg `createEffect(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 { createMemo, createSignal, untrack, createEffect, on, onCleanup } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createMemo, createSignal, untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { noop } from "../util/DataUtils";
 import { getTransitionVal } from "./util";
 import { Global } from "../util/Global";
@@ -81,44 +81,42 @@ 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(
-    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))));
-      },
-    ),
+    () => ({
+      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)));
+    },
   );
 
   // 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(on(compute, apply))`; the start effect returns its cleanup.
+//     `createEffect(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, untrack, createEffect, on, onCleanup } from "solid-js";
-import type { JSX } from "solid-js";
+import { createSignal, createEffect, untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { noop } from "../util/DataUtils";
 import { createEasingFunction, type EasingInput } from "./easing";
 import { Global } from "../util/Global";
@@ -59,52 +59,48 @@ export function JavascriptAnimate(props: JavascriptAnimateProps): JSX.Element {
 
   // When the animation is not active, jump straight to the final state.
   createEffect(
-    on(
-      () => isActive(),
-      (active) => {
-        if (!active) {
-          setStyle(to);
-        }
-      },
-    ),
+    () => isActive(),
+    (active) => {
+      if (!active) {
+        setStyle(to);
+      }
+    },
   );
 
   // Start (and clean up) the animation when its inputs change.
   createEffect(
-    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));
-      },
-    ),
+    () => ({
+      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);
+    },
   );
 
   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, 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 { 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 = mergeProps(areaDefaultProps, props);
+  const merged = merge(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 mergeProps() proxy would leak a MERGE_SOURCE symbol).
+  // Solid merge() 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 "solid-js";
+import type { JSX } from "@solidjs/web";
 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,18 +10,8 @@
 // Solid deviations: `resolveDefaultProps`→`merge`; RegisterGraphicalItemId +
 // Set* effect-dispatch components → a `createEffect` add/replace + `onCleanup`
 // remove (the same idiom as <Line>).
-import {
-  createMemo,
-  createSignal,
-  For,
-  Index,
-  Show,
-  mergeProps,
-  createEffect,
-  on,
-  onCleanup,
-} from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createMemo, createSignal, For, merge, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { noop } from "../util/DataUtils";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
@@ -583,25 +573,23 @@ function BarRectangleWithActiveState(props: {
   const [hasMountedActive, setHasMountedActive] = createSignal(false);
 
   createEffect(
-    on(
-      () => isActive(),
-      (active) => {
-        let rafId: number | undefined;
-        if (active) {
-          setStayInLayer(true);
-          rafId = requestAnimationFrame(() => {
-            setHasMountedActive(true);
-          });
-        } else {
-          setHasMountedActive(false);
-        }
-        onCleanup(() => {
-          if (rafId != null) {
-            cancelAnimationFrame(rafId);
-          }
+    () => isActive(),
+    (active) => {
+      let rafId: number | undefined;
+      if (active) {
+        setStayInLayer(true);
+        rafId = requestAnimationFrame(() => {
+          setHasMountedActive(true);
         });
-      },
-    ),
+      } else {
+        setHasMountedActive(false);
+      }
+      return () => {
+        if (rafId != null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    },
   );
 
   const isVisuallyActive = (): boolean => isActive() && hasMountedActive();
@@ -861,7 +849,7 @@ const barErrorBarFormatter: ErrorBarDataPointFormatter = (entry, dataKey): Error
 
 export const Bar = (props: BarProps): JSX.Element => {
   const store = useAppStore();
-  const merged = mergeProps(barDefaultProps, props);
+  const merged = merge(barDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-bar", props.id);
   const stackId = useStackId(props.stackId);
@@ -1128,7 +1116,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. */}
-                        <Index each={frame}>
+                        <For each={frame} keyed={false}>
                           {(r, i) => (
                             // Render every selector-output rectangle, matching recharts
                             // (zero-dimension genuinely-empty bars are already dropped at
@@ -1198,7 +1186,7 @@ export const Bar = (props: BarProps): JSX.Element => {
                               }
                             />
                           )}
-                        </Index>
+                        </For>
                       </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, Show, useContext, mergeProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createContext, createMemo, For, merge, Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 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 = mergeProps(defaultBarStackProps, props);
+  const merged = merge(defaultBarStackProps, props);
   const resolvedStackId = useUniqueId("recharts-bar-stack", getNormalizedStackId(merged.stackId));
   const context: BarStackSettings = {
     stackId: resolvedStackId,
     radius: merged.radius,
   };
   return (
-    <BarStackContext.Provider value={context}>
+    <BarStackContext value={context}>
       <BarStackClipPath stackId={resolvedStackId} radius={merged.radius} />
       {props.children}
-    </BarStackContext.Provider>
+    </BarStackContext>
   );
 };

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 { createMemo, createSignal, onCleanup, Show, mergeProps, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createMemo, createSignal, merge, onCleanup, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 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 = mergeProps(brushDefaultProps, props);
+  const merged = merge(brushDefaultProps, props);
 
   const dimensions = useAppSelector(selectBrushDimensions);
   const dataState = useAppSelector(selectChartDataWithIndexes);
@@ -229,28 +229,24 @@ 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(
-    on(
-      () => ({
-        x: merged.x,
-        y: merged.y,
-        width: merged.width,
-        height: merged.height,
-        padding: { ...merged.padding },
-      }),
-      (settings) => store?.actions.brush.setBrushSettings(settings),
-    ),
+    () => ({
+      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(
-    on(
-      () => ({ startIndex: merged.startIndex, endIndex: merged.endIndex }),
-      (idx) => {
-        store?.actions.chartData.setDataStartEndIndexes(idx);
-      },
-    ),
+    () => ({ 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, 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 { 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 = mergeProps(cartesianAxisDefaults, props);
+  const merged = merge(cartesianAxisDefaults, props);
 
-  // mergeProps() keeps an explicit `stroke={undefined}` (e.g. forwarded from a
+  // merge() 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, 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 } 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 = mergeProps(cartesianGridDefaults, props);
+  const merged = merge(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 mergeProps()-proxy MERGE_SOURCE symbol into the
+  // spread (that would leak the merge()-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].filter(Boolean).join(" ")}>
+        <g class={["recharts-cartesian-grid", merged.class]}>
           <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, Show, mergeProps, splitProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { type Accessor, createMemo, For, merge, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { CSSTransitionAnimate } from "../animation/CSSTransitionAnimate";
@@ -219,10 +219,7 @@ 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"].filter(Boolean).join(" ")}
-                    {...groupAttrs()}
-                  >
+                  <g class={["recharts-layer", "recharts-errorBar"]} {...groupAttrs()}>
                     <For each={group.lines}>
                       {(c) => {
                         const lineStyle: JSX.CSSProperties | undefined = props.isAnimationActive
@@ -278,7 +275,7 @@ function ErrorBarImpl(props: {
  * @consumes ErrorBarContext
  */
 export function ErrorBar(props: ErrorBarProps): JSX.Element {
-  const merged = mergeProps(errorBarDefaultProps, props);
+  const merged = merge(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 } =
@@ -286,7 +283,8 @@ export function ErrorBar(props: ErrorBarProps): JSX.Element {
   // remaining non-SVG keys (and the merge proxy's symbols).
   const groupSvgAttrs = createMemo<Record<string, unknown>>(() =>
     svgPropertiesNoEvents({
-      ...splitProps(merged, [
+      ...omit(
+        merged,
         "dataKey",
         "width",
         "direction",
@@ -296,7 +294,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, 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 } 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 = mergeProps(funnelDefaultProps, props);
+  const merged = merge(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 "solid-js";
+import type { JSX } from "@solidjs/web";
 import { AxisId } from "../state/cartesianAxisSlice";
 import { useAppSelector } from "../state/hooks";
 import {