solid-recharts 0.2.0 → 1.0.0

package/package.json

@@ -1,29 +1,33 @@
 {
   "name": "solid-recharts",
-  "version": "0.2.0",
+  "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": {
-    "tiny-invariant": "^1.3.3",
-    "victory-vendor": "^37.0.2"
+    "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,10 +11,14 @@
 // registration components → `createEffect` add/replace + `onCleanup` (Line idiom);
 // React `useRef` prev-frame state → plain `{ current }` MutableRef objects driven
 // by AnimatedItems/useAnimationStartSnapshot.
-import { createEffect, createMemo, createSignal, 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, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import {
   matchAnimationItems,
   matchByIndex,
@@ -78,7 +82,7 @@ import { interpolate, isNan, isNullish, isNumber } from "../util/DataUtils";
 import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { StackId } from "../util/ChartUtils";
 import { StackDataPoint } from "../util/stacks/stackTypes";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 import { AreaRevealShape, type AreaRevealShapeProps } from "./AreaRevealShape";
 
 function getLegendItemColor(
@@ -412,50 +416,38 @@ 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);
 
-  let prev: AreaSettings | null = null;
-
-  createEffect(
-    (): AreaSettings => ({
-      id,
-      type: "area",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey ?? "",
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-      // Area has no bar size; the field exists only because AreaSettings shares
-      // the MaybeStackedGraphicalItem shape with Bar.
-      barSize: undefined,
-      stackId: merged.stackId == null ? undefined : String(merged.stackId),
-      connectNulls: merged.connectNulls,
-      baseValue: merged.baseValue,
-    }),
-    (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<AreaSettings>(
+      () => ({
+        id,
+        type: "area",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey ?? "",
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+        // Area has no bar size; the field exists only because AreaSettings shares
+        // the MaybeStackedGraphicalItem shape with Bar.
+        barSize: undefined,
+        stackId: merged.stackId == null ? undefined : String(merged.stackId),
+        connectNulls: merged.connectNulls,
+        baseValue: merged.baseValue,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   const area = useAppSelector((state) => selectArea(state, id, isPanorama));
 
@@ -482,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,
@@ -569,18 +561,11 @@ export const Area = (props: AreaProps): JSX.Element => {
     });
   });
   // Labels are hidden while the entrance/update animation runs, shown once it ends.
-  // ownedWrite: handleAnimationEnd also fires from the driver's effect cleanup when
-  // a mid-animation chart is disposed (route/soft navigation) — a legal teardown.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    setShowLabels(false);
-    props.onAnimationStart?.();
-  };
-  const handleAnimationEnd = (): void => {
-    setShowLabels(true);
-    props.onAnimationEnd?.();
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   // Per-frame prev geometry (recharts' previousPointsRef / previousBaselineRef):
   // plain `{ current }` refs (NOT signals) driven by AnimatedItems +
@@ -761,7 +746,7 @@ export const Area = (props: AreaProps): JSX.Element => {
                       stepBaseLine,
                       target.isRange,
                       animationElapsedTime,
-                      !showLabels() || animationElapsedTime < 1,
+                      isAnimating() || animationElapsedTime < 1,
                       effectiveIsEntrance,
                     );
                   }}

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";