solid-recharts 0.2.0 → 1.0.0

package/src/cartesian/Line.tsx

@@ -20,12 +20,16 @@
 //     `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 { createEffect, createMemo, createSignal, merge, Show, untrack } from "solid-js";
+import { createMemo, createSignal, Show, untrack, mergeProps, createEffect, on } from "solid-js";
 import { useActiveTooltipDataPoints } from "../hooks";
 import { selectActiveTooltipIndex } from "../state/selectors/tooltipSelectors";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchByIndex, type AnimationItem, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { LineDrawShape, type LineDrawShapeProps } from "./LineDrawShape";
@@ -80,7 +84,7 @@ import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { GraphicalItemClipPath, useNeedsClip } from "./GraphicalItemClipPath";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface LinePointItem {
   readonly value: unknown;
@@ -337,44 +341,32 @@ export const lineDefaultProps = {
 
 export const Line = (props: LineProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(lineDefaultProps, props);
+  const merged = mergeProps(lineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-line", props.id);
 
-  let prev: LineSettings | null = null;
-
-  createEffect(
-    (): LineSettings => ({
-      id,
-      type: "line",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-    }),
-    (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<LineSettings>(
+      () => ({
+        id,
+        type: "line",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   const points = useAppSelector((state) =>
     selectLinePoints(state, merged.xAxisId, merged.yAxisId, isPanorama, id),
@@ -494,19 +486,11 @@ export const Line = (props: LineProps): JSX.Element => {
   });
   // Labels are hidden while the entrance animation runs and shown once it ends
   // (matching recharts: showLabels = !isAnimating).
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup
-  // when a mid-animation chart is disposed (route/soft navigation) — a legal
-  // teardown write, not a write-in-computation bug.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   // Measure on data change AND on animation start/end (showLabels flips): a
   // data-change morph alters the path geometry per frame, so the length taken
@@ -515,19 +499,21 @@ 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(
-    () => ({ points: points(), showLabels: showLabels() }),
-    () => {
-      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);
-    },
+    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);
+      },
+    ),
   );
 
   // Raw user event handlers forwarded to the curve. recharts' StaticCurve spreads
@@ -627,8 +613,7 @@ export const Line = (props: LineProps): JSX.Element => {
                     // recharts: visibleLength is computed only while the animation is
                     // active; once settled it is null so no entrance dasharray remains.
                     const len = untrack(totalLength);
-                    const animationActive =
-                      untrack(showLabels) === false || animationElapsedTime < 1;
+                    const animationActive = untrack(isAnimating) || animationElapsedTime < 1;
                     const visibleLength = animationActive
                       ? animatedLineLength.getVisibleLength(animationElapsedTime, len)
                       : null;

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 { createEffect, createSignal, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, splitProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { Curve, type CurveProps } from "../shape/Curve";
 import type { ShapeAnimationProps } from "../util/types";
 
@@ -138,19 +138,23 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
     props.forwardPathRef?.(el);
   };
 
-  // Re-measure whenever the geometry or the animation frame changes (a data-change
-  // morph alters the path per frame; remeasuring once the frame committed gives the
-  // settled dash the new curve's true length — mirrors recharts recomputing
-  // totalLength on the post-animation re-render).
+  // Re-measure the path length only while the entrance dash is actually being
+  // drawn (`visibleLength != null`). `totalLength` feeds `strokeDasharray` ONLY on
+  // that branch (see below), so once the reveal is done — including every
+  // subsequent data-change morph, where `frame` changes per frame — measuring
+  // would force a synchronous SVG layout (reflow) each frame for a value nothing
+  // reads. Guarding on visibleLength drops those per-frame reflows.
   createEffect(
-    () => ({ points: props.points, visibleLength: props.visibleLength }),
-    () => {
-      if (pathEl?.getTotalLength == null) {
-        return;
-      }
-      const length = getTotalLength(pathEl);
-      setTotalLength(length);
-    },
+    on(
+      () => ({ 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 => {
@@ -168,8 +172,7 @@ 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 = omit(
-    props,
+  const curveProps = splitProps(props, [
     "animationElapsedTime",
     "isAnimating",
     "isEntrance",
@@ -177,7 +180,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 { createEffect, 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 { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -41,7 +41,7 @@ import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
 import type { AxisId } from "../state/cartesianAxisSlice";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type ReferenceCoordinateValue = number | string;
 
@@ -124,39 +124,29 @@ const renderRect = (option: ReferenceAreaProps["shape"], props: RectangleProps):
 
 function ReportReferenceArea(props: ReferenceAreaSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceAreaSettings | null = null;
-
-  createEffect(
-    (): ReferenceAreaSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x1: props.x1,
-      x2: props.x2,
-      y1: props.y1,
-      y2: props.y2,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addArea(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeArea(prev);
-        store.actions.referenceElements.addArea(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeArea(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceAreaSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x1: props.x1,
+        x2: props.x2,
+        y1: props.y1,
+        y2: props.y2,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addArea(next),
+        // No replace action on the slice; a change is remove-then-add (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeArea(prev);
+          store.actions.referenceElements.addArea(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeArea(prev),
+      },
+    );
+  }
 
   return null;
 }
@@ -174,7 +164,7 @@ const referenceAreaDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceAreaImpl(props: Props): JSX.Element {
-  const merged = merge(referenceAreaDefaultProps, props);
+  const merged = mergeProps(referenceAreaDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -253,7 +243,7 @@ export function ReferenceArea<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceAreaDefaultProps, props);
+  const merged = mergeProps(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 { createEffect, 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 { Layer } from "../container/Layer";
 import { Dot, type DotProps } from "../shape/Dot";
 import {
@@ -36,7 +36,7 @@ import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { Coordinate } from "../util/types";
 import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type ReferenceCoordinateValue = number | string;
 
@@ -130,38 +130,28 @@ export type Props<
 
 function ReportReferenceDot(props: ReferenceDotSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceDotSettings | null = null;
-
-  createEffect(
-    (): ReferenceDotSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x: props.x,
-      y: props.y,
-      r: props.r,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addDot(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeDot(prev);
-        store.actions.referenceElements.addDot(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeDot(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceDotSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x: props.x,
+        y: props.y,
+        r: props.r,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addDot(next),
+        // No replace action on the slice; a change is remove-then-add (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeDot(prev);
+          store.actions.referenceElements.addDot(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeDot(prev),
+      },
+    );
+  }
 
   return null;
 }
@@ -193,7 +183,7 @@ const referenceDotDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceDotImpl(props: Props): JSX.Element {
-  const merged = merge(referenceDotDefaultProps, props);
+  const merged = mergeProps(referenceDotDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -265,7 +255,7 @@ export function ReferenceDot<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceDotDefaultProps, props);
+  const merged = mergeProps(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 { createEffect, 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 { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -46,7 +46,7 @@ import { CartesianScaleHelper, CartesianScaleHelperImpl } from "../util/scale/Ca
 import type { AxisId } from "../state/cartesianAxisSlice";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 /**
  * Single point that defines one end of a segment, in data space.
@@ -242,38 +242,29 @@ const renderLine = (
 
 function ReportReferenceLine(props: ReferenceLineSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceLineSettings | null = null;
-
-  createEffect(
-    (): ReferenceLineSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x: props.x,
-      y: props.y,
-      segment: props.segment,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addLine(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeLine(prev);
-        store.actions.referenceElements.addLine(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeLine(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceLineSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x: props.x,
+        y: props.y,
+        segment: props.segment,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addLine(next),
+        // The referenceElements slice has no replace action; the change is a
+        // remove of the old settings followed by an add of the new (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeLine(prev);
+          store.actions.referenceElements.addLine(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeLine(prev),
+      },
+    );
+  }
 
   return null;
 }
@@ -291,7 +282,7 @@ const referenceLineDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceLineImpl(props: Props): JSX.Element {
-  const merged = merge(referenceLineDefaultProps, props);
+  const merged = mergeProps(referenceLineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const clipPathId = useClipPathId();
   const viewBox = useViewBox();
@@ -393,7 +384,7 @@ export function ReferenceLine<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceLineDefaultProps, props);
+  const merged = mergeProps(referenceLineDefaultProps, props);
   const id = useUniqueId("recharts-reference-line");
   return (
     <>

package/src/cartesian/RenderedTicksReporter.tsx

@@ -1,3 +1,4 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/cartesian/CartesianAxis.tsx RenderedTicksReporter
 // (commit 7a23854).
 //
@@ -5,8 +6,7 @@
 // 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 { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "../state/hooks";
 import type { AxisId } from "../state/cartesianAxisSlice";
 import type { CartesianTickItem, TickItem } from "../util/types";
@@ -21,21 +21,23 @@ export function RenderedTicksReporter(props: {
   let prev: { axisType: "xAxis" | "yAxis"; axisId: AxisId } | null = null;
 
   createEffect(
-    (): { 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 };
-    },
+    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 };
+      },
+    ),
   );
 
   unregisterOnCleanup(() => {