solid-recharts 0.1.0

package/src/animation/CSSTransitionAnimate.tsx

@@ -0,0 +1,142 @@
+// Ported from recharts 3.9.0 src/animation/CSSTransitionAnimate.tsx.
+//
+// Solid 2.0 port of the CSS-transition render-prop driver, on the v3.9 engine
+// (CSSTransitionAnimation handle + injectable AnimationController). Deviations:
+//   - `resolveDefaultProps` → per-prop `?? default` accessors.
+//   - `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
+//     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 { noop } from "../util/DataUtils";
+import { getTransitionVal } from "./util";
+import { Global } from "../util/Global";
+import { usePrefersReducedMotion } from "../util/usePrefersReducedMotion";
+import { CSSTransitionAnimation } from "./AnimationHandle";
+import type { EasingInput, NamedBezier } from "./easing";
+import { RequestAnimationFrameTimeoutController } from "./timeoutController";
+import type { AnimationController } from "./AnimationController";
+import { useAnimationController } from "./useAnimationController";
+
+/** The style object handed to the render-prop child (dynamic `[attributeName]` key). */
+export type CSSTransitionStyle = Record<string, string | undefined>;
+
+/**
+ * A CSS transition can only use a named/cubic-bezier easing — `spring` and custom
+ * function easings have no CSS equivalent, so they fall back to `ease`.
+ */
+export function extractCssEasing(easingInput: EasingInput): NamedBezier {
+  if (easingInput === "spring" || typeof easingInput !== "string") {
+    return "ease";
+  }
+  return easingInput;
+}
+
+interface CSSTransitionAnimateProps {
+  animationId: string;
+  animationController?: AnimationController;
+  duration?: number;
+  begin?: number;
+  easing?: EasingInput;
+  isActive?: boolean | "auto";
+  canBegin?: boolean;
+  from: string;
+  to: string;
+  attributeName: string;
+  onAnimationStart?: () => void;
+  onAnimationEnd?: () => void;
+  children: (style: CSSTransitionStyle) => JSX.Element;
+}
+
+export function CSSTransitionAnimate(props: CSSTransitionAnimateProps): JSX.Element {
+  const duration = (): number => props.duration ?? 1000;
+  const easing = (): NamedBezier => extractCssEasing(props.easing ?? "ease");
+  const begin = (): number => props.begin ?? 0;
+  const canBegin = (): boolean => props.canBegin ?? true;
+  const isActiveProp = (): boolean | "auto" => props.isActive ?? true;
+  const onAnimationStartProp = (): (() => void) => props.onAnimationStart ?? noop;
+  const onAnimationEnd = (): (() => void) => props.onAnimationEnd ?? noop;
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const isActive = (): boolean => {
+    const active = isActiveProp();
+    return active === "auto" ? !Global.isSsr && !prefersReducedMotion() : active;
+  };
+
+  const animationController = useAnimationController(props.animationController);
+
+  const [style, setStyle] = createSignal<string>(
+    untrack(() => (isActive() ? props.from : props.to)),
+  );
+  const [initialized, setInitialized] = createSignal(false);
+
+  // Start (and clean up) the animation when its inputs change. `onStart` closes over
+  // 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)));
+    },
+  );
+
+  // All reactive reads live in this memo (a tracking scope); the JSX insert below
+  // re-invokes the render-prop child whenever the resolved style changes.
+  const styleObject = createMemo<CSSTransitionStyle>(() => {
+    if (!isActive()) {
+      // isActive=false: render the final style immediately, no transition.
+      return { [props.attributeName]: props.to };
+    }
+    if (!canBegin()) {
+      return { [props.attributeName]: props.from };
+    }
+    if (initialized()) {
+      return {
+        transition: getTransitionVal([props.attributeName], duration(), easing()),
+        [props.attributeName]: style(),
+      };
+    }
+    return { [props.attributeName]: props.from };
+  });
+
+  return <>{props.children(styleObject())}</>;
+}

package/src/animation/JavascriptAnimate.tsx

@@ -0,0 +1,107 @@
+// Ported from recharts 3.9.0 src/animation/JavascriptAnimate.tsx.
+//
+// Solid 2.0 port of the JavaScript render-prop animation driver, on the v3.9 engine
+// (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.
+//   - `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 { noop } from "../util/DataUtils";
+import { createEasingFunction, type EasingInput } from "./easing";
+import { Global } from "../util/Global";
+import { usePrefersReducedMotion } from "../util/usePrefersReducedMotion";
+import { JavascriptAnimation } from "./AnimationHandle";
+import { RequestAnimationFrameTimeoutController } from "./timeoutController";
+import type { AnimationController } from "./AnimationController";
+import { useAnimationController } from "./useAnimationController";
+
+interface JavascriptAnimateProps {
+  animationId: string;
+  animationController?: AnimationController;
+  duration?: number;
+  begin?: number;
+  easing?: EasingInput;
+  isActive?: boolean | "auto";
+  canBegin?: boolean;
+  onAnimationStart?: () => void;
+  onAnimationEnd?: () => void;
+  children: (time: number) => JSX.Element;
+}
+
+const from = 0;
+const to = 1;
+
+export function JavascriptAnimate(props: JavascriptAnimateProps): JSX.Element {
+  const duration = (): number => props.duration ?? 1000;
+  const easing = (): EasingInput => props.easing ?? "ease";
+  const begin = (): number => props.begin ?? 0;
+  const canBegin = (): boolean => props.canBegin ?? true;
+  const isActiveProp = (): boolean | "auto" => props.isActive ?? true;
+  const onAnimationStart = (): (() => void) => props.onAnimationStart ?? noop;
+  const onAnimationEnd = (): (() => void) => props.onAnimationEnd ?? noop;
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const isActive = (): boolean => {
+    const active = isActiveProp();
+    return active === "auto" ? !Global.isSsr && !prefersReducedMotion() : active;
+  };
+
+  const animationController = useAnimationController(props.animationController);
+
+  const [style, setStyle] = createSignal<number | string>(untrack(() => (isActive() ? from : to)));
+
+  // When the animation is not active, jump straight to the final state.
+  createEffect(
+    () => 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);
+    },
+  );
+
+  return <>{props.children(Number(style()))}</>;
+}

package/src/animation/easing.ts

@@ -0,0 +1,261 @@
+// Ported from recharts 3.8.1 src/animation/easing.ts (commit 7a23854).
+// Pure math — no framework surface — so behavior is byte-identical to recharts.
+// Deviations from the reference are limited to satisfying this repo's type
+// discipline (no `as` / no non-null `!`); `as const` is retained where it
+// brands the stepper/bezier discriminant.
+
+export const ACCURACY = 1e-4;
+
+const cubicBezierFactor = (c1: number, c2: number): number[] => [
+  0,
+  3 * c1,
+  3 * c2 - 6 * c1,
+  3 * c1 - 3 * c2 + 1,
+];
+
+const evaluatePolynomial = (params: ReadonlyArray<number>, t: number): number =>
+  params.map((param, i) => param * t ** i).reduce((pre, curr) => pre + curr);
+
+const cubicBezier = (c1: number, c2: number) => (t: number) => {
+  const params = cubicBezierFactor(c1, c2);
+
+  return evaluatePolynomial(params, t);
+};
+
+const derivativeCubicBezier = (c1: number, c2: number) => (t: number) => {
+  const params = cubicBezierFactor(c1, c2);
+  const newParams = [...params.map((param, i) => param * i).slice(1), 0];
+
+  return evaluatePolynomial(newParams, t);
+};
+
+type CubicBezierTemplate = `cubic-bezier(${number},${number},${number},${number})`;
+
+export type NamedBezier =
+  | "linear"
+  | "ease"
+  | "ease-in"
+  | "ease-out"
+  | "ease-in-out"
+  | CubicBezierTemplate;
+
+type BezierInput = [NamedBezier] | [number, number, number, number];
+
+export type BezierEasingFunction = {
+  isStepper: false;
+  (t: number): number;
+};
+
+const parseCubicBezier = (easing: string): [number, number, number, number] | null => {
+  const easingParts = easing.split("(");
+  if (easingParts.length !== 2 || easingParts[0] !== "cubic-bezier") {
+    return null;
+  }
+  const numbers = easingParts[1]?.split(")")[0]?.split(",");
+  if (numbers == null || numbers.length !== 4) {
+    return null;
+  }
+  const [x1, y1, x2, y2] = numbers.map((x: string) => parseFloat(x));
+  // `noUncheckedIndexedAccess` keeps the tuple elements possibly-undefined even
+  // after the length check, so narrow explicitly instead of asserting.
+  if (x1 === undefined || y1 === undefined || x2 === undefined || y2 === undefined) {
+    return null;
+  }
+  return [x1, y1, x2, y2];
+};
+
+const getBezierCoordinates = (...args: BezierInput): [number, number, number, number] => {
+  if (args.length === 1) {
+    switch (args[0]) {
+      case "linear":
+        return [0.0, 0.0, 1.0, 1.0];
+      case "ease":
+        return [0.25, 0.1, 0.25, 1.0];
+      case "ease-in":
+        return [0.42, 0.0, 1.0, 1.0];
+      case "ease-out":
+        return [0.42, 0.0, 0.58, 1.0];
+      case "ease-in-out":
+        return [0.0, 0.0, 0.58, 1.0];
+      default: {
+        const easing = parseCubicBezier(args[0]);
+        if (easing) {
+          return easing;
+        }
+      }
+    }
+  }
+
+  if (args.length === 4) {
+    return args;
+  }
+
+  // Fallback for invalid inputs. The previous implementation was buggy and would lead to NaN.
+  // Returning linear easing is a safe default.
+  return [0.0, 0.0, 1.0, 1.0];
+};
+
+const createBezierEasing = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): BezierEasingFunction => {
+  const curveX = cubicBezier(x1, x2);
+  const curveY = cubicBezier(y1, y2);
+  const derCurveX = derivativeCubicBezier(x1, x2);
+  const rangeValue = (value: number): number => {
+    if (value > 1) {
+      return 1;
+    }
+    if (value < 0) {
+      return 0;
+    }
+
+    return value;
+  };
+
+  const bezier = (_t: number) => {
+    const t = _t > 1 ? 1 : _t;
+    let x = t;
+
+    for (let i = 0; i < 8; ++i) {
+      const evalT = curveX(x) - t;
+      const derVal = derCurveX(x);
+
+      if (Math.abs(evalT - t) < ACCURACY || derVal < ACCURACY) {
+        return curveY(x);
+      }
+
+      x = rangeValue(x - evalT / derVal);
+    }
+
+    return curveY(x);
+  };
+
+  bezier.isStepper = false as const;
+
+  return bezier;
+};
+
+// calculate cubic-bezier using Newton's method
+export const configBezier = (...args: BezierInput): BezierEasingFunction => {
+  return createBezierEasing(...getBezierCoordinates(...args));
+};
+
+type SpringInput = {
+  /**
+   * The stiffness coefficient of the spring.
+   * Higher values create a more forceful, faster pull towards the target.
+   */
+  stiff?: number;
+  /**
+   * The damping coefficient (friction/resistance).
+   * Higher values reduce bounciness and stop oscillation sooner. Lower values create more bounce.
+   */
+  damping?: number;
+  /**
+   * The physics simulation time step in milliseconds.
+   * Determines the granularity of the baked frames. 16.67ms roughly equals a 60fps frame delta.
+   */
+  dt?: number;
+};
+
+/**
+ * Creates a performance-optimized, progress-based spring easing function.
+ * It pre-calculates ("bakes") spring physics frames upfront based on a fixed duration,
+ * then returns a pure, lightweight function mapping progress (0 to 1) to the animated position.
+ * This approach is ideal for low-power devices because it removes heavy physics math from the frame loop.
+ */
+export const createSpringEasing = (config: SpringInput = {}): ProgressEasingFn => {
+  const { stiff = 100, damping = 8, dt = 16.67 } = config;
+  const destX = 1;
+
+  const positions: number[] = [0];
+  let currX = 0;
+  let currV = 0;
+
+  // Safety valve to prevent accidental infinite loops if physics config is extreme
+  const maxIterations = 10000;
+  let iterations = 0;
+
+  // 1. Run the simulation until the spring completely stops moving
+  while (iterations < maxIterations) {
+    const FSpring = -(currX - destX) * stiff;
+    const FDamping = currV * damping;
+
+    currV += ((FSpring - FDamping) * dt) / 1000;
+    currX += (currV * dt) / 1000;
+
+    positions.push(currX);
+
+    // Stop only when position is essentially at 1.0 AND bounce velocity has died down
+    if (Math.abs(currX - destX) < ACCURACY && Math.abs(currV) < ACCURACY) {
+      break;
+    }
+    iterations++;
+  }
+
+  // Force the absolute final element to be exactly 1.0 for a perfect finish
+  positions[positions.length - 1] = destX;
+  const maxIndex = positions.length - 1;
+
+  // 2. The ultra-smooth runtime function mapping your 0..1 progress
+  return (t: number): number => {
+    if (t <= 0) return 0;
+    if (t >= 1) return destX;
+
+    // Scale t (0..1) proportionally across our entire pre-calculated array
+    const exactFrame = t * maxIndex;
+    const index = Math.floor(exactFrame);
+    const fraction = exactFrame - index;
+
+    // Blend between the two closest frames
+    return (
+      (positions[index] ?? 0) + ((positions[index + 1] ?? 0) - (positions[index] ?? 0)) * fraction
+    );
+  };
+};
+
+/**
+ * The unified easing-function shape (v3.9): maps progress `t` to an eased value.
+ * `ProgressEasingFn` is the canonical name; `EasingFunction` is kept as an alias for
+ * callers that reference it.
+ */
+export type ProgressEasingFn = (t: number) => number;
+export type EasingFunction = ProgressEasingFn;
+
+/**
+ * @inline
+ */
+export type EasingInput = NamedBezier | "spring" | EasingFunction;
+
+/**
+ * The v3.9 easing resolver. Resolves an {@link EasingInput} to a {@link ProgressEasingFn}:
+ * named beziers, `cubic-bezier(...)`, `'spring'` via baked physics, or a passed-through
+ * `(t) => number`. Returns `null` for unrecognized input.
+ */
+export const createEasingFunction = (easing: EasingInput): ProgressEasingFn | null => {
+  if (typeof easing === "string") {
+    switch (easing) {
+      case "ease":
+      case "ease-in-out":
+      case "ease-out":
+      case "ease-in":
+      case "linear":
+        return configBezier(easing);
+      case "spring":
+        return createSpringEasing();
+      default:
+        if (easing.split("(")[0] === "cubic-bezier") {
+          return configBezier(easing);
+        }
+    }
+  }
+
+  if (typeof easing === "function") {
+    return easing;
+  }
+
+  return null;
+};