solid-recharts 0.2.0 → 1.0.0

package/src/util/ChartUtils.ts

@@ -15,16 +15,8 @@ import {
   stackOffsetSilhouette,
   stackOffsetWiggle,
   stackOrderNone,
-} from "victory-vendor/d3-shape";
-import {
-  findEntryInArray,
-  isNan,
-  isNotNil,
-  isNullish,
-  isNumber,
-  isNumOrStr,
-  mathSign,
-} from "./DataUtils";
+} from "d3-shape";
+import { isNan, isNotNil, isNullish, isNumber, isNumOrStr, mathSign } from "./DataUtils";
 import { getSliced } from "./getSliced";
 import { isWellBehavedNumber } from "./isWellBehavedNumber";
 import type {
@@ -276,6 +268,32 @@ export const truncateByDomain = <T>(
   return result;
 };
 
+// Value→tick lookup cache, keyed on the ticks array reference. getCateCoordinateOfLine
+// is called once per data point; a linear findEntryInArray scan there is O(points²)
+// across a full series when allowDuplicatedCategory=false (ticks.length ≈ points).
+// The axis-ticks selector memoizes the ticks array, so this map is built once per
+// render and reused for every point lookup, making it O(points). First value wins,
+// mirroring Array.find.
+const tickByValueCache = new WeakMap<ReadonlyArray<TickItem>, Map<unknown, TickItem>>();
+function findTickByValue(ticks: ReadonlyArray<TickItem>, value: unknown): TickItem | undefined {
+  // Map uses SameValueZero and would match NaN, while the upstream Array.find
+  // lookup uses strict equality (NaN !== NaN). Preserve that fallback behavior.
+  if (typeof value === "number" && Number.isNaN(value)) {
+    return undefined;
+  }
+  let map = tickByValueCache.get(ticks);
+  if (map == null) {
+    map = new Map<unknown, TickItem>();
+    for (const tick of ticks) {
+      if (tick != null && !map.has(tick.value)) {
+        map.set(tick.value, tick);
+      }
+    }
+    tickByValueCache.set(ticks, map);
+  }
+  return map.get(value);
+}
+
 export function getCateCoordinateOfLine<T>({
   axis,
   ticks,
@@ -312,7 +330,7 @@ export function getCateCoordinateOfLine<T>({
       const key: string | number = axisDataKey;
       const cellValue = entry[key];
       if (!isNullish(cellValue)) {
-        const matchedTick = ticks ? findEntryInArray(ticks, "value", cellValue) : undefined;
+        const matchedTick = ticks ? findTickByValue(ticks, cellValue) : undefined;
 
         if (matchedTick) {
           return matchedTick.coordinate + bandSize / 2;
@@ -625,35 +643,61 @@ export const getStackedData = (
   offsetType: StackOffsetType,
 ): ReadonlyArray<Series<StackDatum, StackKey>> => {
   const offsetAccessor: OffsetAccessor = STACK_OFFSET_MAP[offsetType] ?? offsetSign;
+  // Track whether any value is a [min, max] tuple during the (unavoidable) value
+  // accessor pass, so the ranged-data fixup below can be skipped entirely for the
+  // common scalar case instead of running a second full series×points scan.
+  let hasRangedValues = false;
   const stack = shapeStack<StackDatum, StackKey>()
     .keys(dataKeys)
-    .value((d, key) => Number(getValueByDataKey(d, key, 0)))
+    .value((d, key) => {
+      const raw = getValueByDataKey(d, key, 0);
+      if (Array.isArray(raw) && raw.length === 2) {
+        hasRangedValues = true;
+      }
+      return Number(raw);
+    })
     .order(stackOrderNone)
     .offset(offsetAccessor);
 
   const result = stack(data);
 
   // Ranged data: when a value is a [min, max] tuple, use it directly (no stacking).
-  result.forEach((s, seriesIndex) => {
-    s.forEach((point, pointIndex) => {
-      const value = getValueByDataKey(data[pointIndex], dataKeys[seriesIndex], 0);
-      if (value != null && Array.isArray(value) && value.length === 2) {
-        const lo: unknown = value[0];
-        const hi: unknown = value[1];
-        if (isNumber(lo) && isNumber(hi)) {
-          point[0] = lo;
-          point[1] = hi;
+  if (hasRangedValues) {
+    result.forEach((s, seriesIndex) => {
+      s.forEach((point, pointIndex) => {
+        const value = getValueByDataKey(data[pointIndex], dataKeys[seriesIndex], 0);
+        if (value != null && Array.isArray(value) && value.length === 2) {
+          const lo: unknown = value[0];
+          const hi: unknown = value[1];
+          if (isNumber(lo) && isNumber(hi)) {
+            point[0] = lo;
+            point[1] = hi;
+          }
         }
-      }
+      });
     });
-  });
+  }
 
   return result;
 };
 
 const getDomainOfSingle = (data: ReadonlyArray<ReadonlyArray<unknown>>): number[] => {
-  const flat = data.flat(2).filter(isNumber);
-  return [Math.min(...flat), Math.max(...flat)];
+  // Reduce loop, not `Math.min(...flat)`: spreading a data-sized array throws a V8
+  // RangeError past ~100k elements. Empty input yields [Infinity, -Infinity],
+  // matching the previous Math.min/Math.max-of-empty behavior.
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of data.flat(2)) {
+    if (isNumber(value)) {
+      if (value < min) {
+        min = value;
+      }
+      if (value > max) {
+        max = value;
+      }
+    }
+  }
+  return [min, max];
 };
 
 const makeDomainFinite = (domain: NumberDomain): NumberDomain => [

package/src/util/DirectPortal.tsx

@@ -0,0 +1,107 @@
+import { createEffect, createRoot, on, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
+import { insert, isServer } from "solid-js/web";
+
+export interface DirectPortalProps {
+  mount: Element;
+  children: JSX.Element;
+}
+
+interface PortalRange {
+  placeholder: Text;
+  start: Comment;
+  end: Comment;
+  sequence: number;
+}
+
+const rangesByMount = new WeakMap<Element, PortalRange[]>();
+let nextSequence = 0;
+
+function reorderRanges(mount: Element, ranges: PortalRange[]): void {
+  ranges.sort((left, right) => {
+    const position = left.placeholder.compareDocumentPosition(right.placeholder);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return left.sequence - right.sequence;
+  });
+
+  const fragment = document.createDocumentFragment();
+  ranges.forEach((range) => {
+    let node: Node | null = range.start;
+    while (node != null) {
+      const next: Node | null = node.nextSibling;
+      fragment.append(node);
+      if (node === range.end) {
+        break;
+      }
+      node = next;
+    }
+  });
+  mount.append(fragment);
+}
+
+/**
+ * Portal content directly into a target without Solid 1's wrapper div/g.
+ *
+ * Recharts exposes the portal DOM shape, so the wrapper added by Solid 1's
+ * built-in Portal would break direct-child selectors and SVG parity.
+ */
+export function DirectPortal(props: DirectPortalProps): JSX.Element {
+  if (isServer) {
+    return null;
+  }
+
+  const placeholder = document.createTextNode("");
+
+  createEffect(
+    on(
+      () => props.mount,
+      (mount) => {
+        const start = document.createComment("solid-recharts-portal-start");
+        const end = document.createComment("solid-recharts-portal-end");
+        mount.append(start, end);
+
+        const dispose = createRoot((disposeRoot) => {
+          insert(mount, () => props.children, end);
+          return disposeRoot;
+        });
+        const range: PortalRange = {
+          placeholder,
+          start,
+          end,
+          sequence: nextSequence,
+        };
+        nextSequence += 1;
+        const ranges = rangesByMount.get(mount) ?? [];
+        ranges.push(range);
+        rangesByMount.set(mount, ranges);
+        reorderRanges(mount, ranges);
+
+        onCleanup(() => {
+          dispose();
+          let node: ChildNode | null = start.nextSibling;
+          while (node != null && node !== end) {
+            const next: ChildNode | null = node.nextSibling;
+            node.remove();
+            node = next;
+          }
+          start.remove();
+          end.remove();
+          const index = ranges.indexOf(range);
+          if (index >= 0) {
+            ranges.splice(index, 1);
+          }
+          if (ranges.length === 0) {
+            rangesByMount.delete(mount);
+          }
+        });
+      },
+    ),
+  );
+
+  return placeholder;
+}

package/src/util/FunnelUtils.tsx

@@ -8,7 +8,7 @@
 // function + object + boolean forms are supported, matching ActiveShapeUtils). The
 // `option` is typed as the wider `ActiveShape` the `<Shape>` helper accepts (the
 // `<Funnel>` `shape`/`activeShape` function-form props are assignable to it).
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { Trapezoid } from "../shape/Trapezoid";
 import { Shape } from "./ActiveShapeUtils";
 import type { ActiveShape, ShapeAnimationProps } from "./types";

package/src/util/RadialBarUtils.tsx

@@ -1,7 +1,8 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/util/RadialBarUtils.tsx (commit 7a23854).
 // Renders a RadialBar sector through the <Shape> abstraction (default = Sector).
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { RadialBarDataItem, RadialBarProps } from "../polar/RadialBar";
 import { Sector } from "../shape/Sector";
 import { Shape } from "./ActiveShapeUtils";
@@ -29,7 +30,7 @@ export function RadialBarSector(props: RadialBarSectorComponentProps): JSX.Eleme
     <Shape<RadialBarSectorProps, SVGPathElement>
       option={props.option}
       DefaultShape={defaultRadialBarShape}
-      shapeProps={omit(props, "option")}
+      shapeProps={splitProps(props, ["option"])[1]}
     />
   );
 }

package/src/util/createCartesianCharts.tsx

@@ -3,7 +3,7 @@
 // binding wrapper spreads the user props then sets `layout` as a static
 // attribute LAST, so the bound layout wins over any passed value; the public
 // type omits `layout` so TS rejects it too.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { AreaChart as OriginalAreaChart } from "../chart/AreaChart";
 import { BarChart as OriginalBarChart } from "../chart/BarChart";
 import { LineChart as OriginalLineChart } from "../chart/LineChart";

package/src/util/createPolarCharts.tsx

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/util/createPolarCharts.tsx.
 // Solid-native: React.ComponentType → `(props) => JSX.Element`; layout binding
 // via `merge()`.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { RadialBarChart as OriginalRadialBarChart } from "../chart/RadialBarChart";
 import { RadarChart as OriginalRadarChart } from "../chart/RadarChart";
 import { PieChart as OriginalPieChart } from "../chart/PieChart";

package/src/util/propsAreEqual.ts

@@ -1,16 +1,15 @@
 // Ported from recharts 3.8.1 src/util/propsAreEqual.ts (commit 7a23854).
 //
 // Deviation: recharts imports `shallowEqual` from `react-redux`. A SolidJS port
-// has no react-redux, so we inline an equivalent one-level same-value compare.
-// react-redux's `shallowEqual` is just `Object.is` applied per own-enumerable
-// key (its internal `is` predates and mirrors `Object.is`), so the local
-// version below is behavior-identical — NaN compares equal, +0 and -0 do not.
+// has no react-redux, so it reuses the local equivalent in `./ShallowEqual`
+// (one-level same-value compare — NaN equal, +0 and -0 distinct).
 //
 // NOTE on relevance: recharts uses `propsAreEqual` only as the `React.memo`
 // comparator on Bar/Area/Line/Scatter/Legend/ReportEventSettings/etc. Solid
 // components do not re-render, so when those units are ported this comparator
 // will most likely be dropped or repurposed. The function itself is pure and
 // spec-tested, so we port it now and revisit its call sites in Tier 2.
+import { shallowEqual } from "./ShallowEqual";
 
 const propsToShallowCompare = new Set<string>([
   "axisLine",
@@ -37,35 +36,6 @@ const propsToShallowCompare = new Set<string>([
   "throttledEvents",
 ]);
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-/**
- * One-level same-value comparison, equivalent to react-redux's `shallowEqual`.
- * Uses `Object.is`, so two NaNs are equal and +0/-0 are not — matching the
- * original.
- */
-function shallowEqual(objA: unknown, objB: unknown): boolean {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (!isRecord(objA) || !isRecord(objB)) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!Object.hasOwn(objB, key) || !Object.is(objA[key], objB[key])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /**
  * When comparing two values, returns true if they are the same value or
  * are both NaN.

package/src/util/stacks/stackTypes.ts

@@ -1,5 +1,5 @@
 // Ported from recharts 3.8.1 src/util/stacks/stackTypes.ts (commit 7a23854).
-import { Series } from "victory-vendor/d3-shape";
+import { Series } from "d3-shape";
 import { StackId } from "../ChartUtils";
 import { DataKey } from "../types";
 import { GraphicalItemId } from "../../state/graphicalItemsSlice";

package/src/util/svgPropertiesAndEvents.ts

@@ -5,7 +5,7 @@
 // is deferred until the Tier-2 "shape can be an element or a props object"
 // pattern lands (ActiveShapeUtils). Element inputs currently fall through to
 // `null`. React's `SVGProps`/`CSSProperties` types are replaced with JSX.*
-// from '@solidjs/web'.
+// from 'solid-js/web'.
 import { isEventKey } from "./excludeEventProps";
 import { isDataAttribute, isSvgElementPropKey, toSvgAttributeName } from "./svgPropertiesNoEvents";
 import { svgPropertiesNoEventsKeepCase } from "./svgPropertiesNoEvents";

package/src/util/tooltip/translate.ts

@@ -2,9 +2,9 @@
 // Pure functions — no JSX/components.
 // Deviations from reference:
 //   - `clsx` replaced with hand-rolled class concatenation (no clsx dep, no class strings)
-//   - `CSSProperties` from 'react' → `JSX.CSSProperties` from '@solidjs/web'
+//   - `CSSProperties` from 'react' → `JSX.CSSProperties` from 'solid-js/web'
 
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { isNumber } from "../DataUtils";
 import type { Coordinate, CartesianViewBox, AllowInDimension } from "../types";
 

package/src/util/types.ts

@@ -1,6 +1,6 @@
-import type { JSX } from "@solidjs/web";
-import type { Element } from "solid-js";
-import type * as d3Scales from "victory-vendor/d3-scale";
+import type { JSX } from "solid-js";
+type Element = JSX.Element;
+import type * as d3Scales from "d3-scale";
 import type { DotProps } from "../shape/Dot";
 import type { ExternalMouseEvents } from "../chart/types";
 

package/src/zIndex/ZIndexLayer.tsx

@@ -1,17 +1,9 @@
 // Ported from recharts 3.8.1 src/zIndex/ZIndexLayer.tsx (commit 7a23854).
 // Solid deviations: `useLayoutEffect` → two-arg `createEffect`; `createPortal` →
 // `<Portal mount>`; dispatch → `store.actions.zIndex`.
-import {
-  createEffect,
-  createMemo,
-  createRoot,
-  getOwner,
-  onCleanup,
-  onSettled,
-  runWithOwner,
-  Show,
-} from "solid-js";
-import { Portal, type JSX } from "@solidjs/web";
+import { createMemo, onCleanup, Show, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
+import { DirectPortal } from "../util/DirectPortal";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { unregisterCleanup } from "../state/unregisterOnCleanup";
 import { selectZIndexPortalElement } from "./zIndexSelectors";
@@ -48,78 +40,57 @@ export function ZIndexLayer(props: {
   );
 
   createEffect(
-    () => ({
-      should: shouldRenderInPortal(),
-      zIndex: props.zIndex,
-      portal: portalElement(),
-    }),
-    ({ should, zIndex, portal }) => {
-      const actions = zIndexActions;
-      if (!should || zIndex === undefined || actions == null) {
-        registeredZIndexes.forEach((z) => {
-          actions?.unregisterZIndexPortal({ zIndex: z });
-        });
-        registeredZIndexes.clear();
-        lastPortalElement = undefined;
-        return;
-      }
+    on(
+      () => ({
+        should: shouldRenderInPortal(),
+        zIndex: props.zIndex,
+        portal: portalElement(),
+      }),
+      ({ should, zIndex, portal }) => {
+        const actions = zIndexActions;
+        if (!should || zIndex === undefined || actions == null) {
+          registeredZIndexes.forEach((z) => {
+            actions?.unregisterZIndexPortal({ zIndex: z });
+          });
+          registeredZIndexes.clear();
+          lastPortalElement = undefined;
+          return;
+        }
 
-      if (!registeredZIndexes.has(zIndex)) {
-        actions.registerZIndexPortal({ zIndex });
-        registeredZIndexes.add(zIndex);
-      }
+        if (!registeredZIndexes.has(zIndex)) {
+          actions.registerZIndexPortal({ zIndex });
+          registeredZIndexes.add(zIndex);
+        }
 
-      if (portal) {
-        lastPortalElement = portal;
-        registeredZIndexes.forEach((z) => {
-          if (z !== zIndex) {
-            actions.unregisterZIndexPortal({ zIndex: z });
-            registeredZIndexes.delete(z);
-          }
-        });
-      }
-    },
+        if (portal) {
+          lastPortalElement = portal;
+          registeredZIndexes.forEach((z) => {
+            if (z !== zIndex) {
+              actions.unregisterZIndexPortal({ zIndex: z });
+              registeredZIndexes.delete(z);
+            }
+          });
+        }
+      },
+    ),
   );
 
-  onSettled(() => {
-    return unregisterCleanup(() => {
+  onCleanup(
+    unregisterCleanup(() => {
       const actions = zIndexActions;
       registeredZIndexes.forEach((z) => {
         actions?.unregisterZIndexPortal({ zIndex: z });
       });
       registeredZIndexes.clear();
-    });
-  });
+    }),
+  );
 
   const targetElement = createMemo(() => portalElement() ?? lastPortalElement);
 
-  // The portal target settles asynchronously (the <g> ref → register → selector),
-  // so this Portal is created during a flush, NOT during the initial owned render.
-  // Solid's runEffect invokes an effect's APPLY phase without re-establishing the
-  // effect as owner, so <Portal>'s apply-phase `insert()` would create its child
-  // render-effects with no owner (NO_OWNER_EFFECT — they never dispose). Capture the
-  // component owner and create the Portal inside a `createRoot` parented to it, so
-  // those effects are owned. The root's manual `dispose` is hooked to the keyed
-  // <Show> branch's cleanup: when the target identity changes, the old Portal
-  // subtree is torn down (parenting it to the component owner alone would leave
-  // every previous Portal alive until the whole layer unmounts — stale chart
-  // content stays portal'd into the old <g>).
-  const owner = getOwner();
-
   return (
     <Show when={shouldRenderInPortal()} fallback={props.children}>
       <Show when={targetElement()} keyed>
-        {(mount) => {
-          let disposePortal: (() => void) | undefined;
-          const rendered = runWithOwner(owner, () =>
-            createRoot((dispose) => {
-              disposePortal = dispose;
-              return <Portal mount={mount}>{props.children}</Portal>;
-            }),
-          );
-          onCleanup(() => disposePortal?.());
-          return rendered;
-        }}
+        {(mount) => <DirectPortal mount={mount}>{props.children}</DirectPortal>}
       </Show>
     </Show>
   );

package/src/zIndex/ZIndexPortal.tsx

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/zIndex/ZIndexPortal.tsx (commit 7a23854).
 // Solid deviations: `useLayoutEffect` → two-arg `createEffect`; `className` → `class`.
-import { createEffect, createMemo, createSignal, For, onSettled } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, createSignal, For, onCleanup, onMount, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { unregisterCleanup } from "../state/unregisterOnCleanup";
 import { selectAllRegisteredZIndexes } from "./zIndexSelectors";
@@ -12,35 +12,39 @@ function ZIndexSvgPortal(props: { zIndex: number; isPanorama: boolean }): JSX.El
   const [gRef, setGRef] = createSignal<SVGGElement | undefined>();
 
   createEffect(
-    () => ({
-      zIndex: props.zIndex,
-      isPanorama: props.isPanorama,
-      element: gRef(),
-    }),
-    ({ zIndex, isPanorama, element }) => {
-      const actions = zIndexActions;
-      if (element != null && actions != null) {
-        actions.registerZIndexPortalElement({
-          zIndex,
-          element,
-          isPanorama,
-        });
-      }
-    },
+    on(
+      () => ({
+        zIndex: props.zIndex,
+        isPanorama: props.isPanorama,
+        element: gRef(),
+      }),
+      ({ zIndex, isPanorama, element }) => {
+        const actions = zIndexActions;
+        if (element != null && actions != null) {
+          actions.registerZIndexPortalElement({
+            zIndex,
+            element,
+            isPanorama,
+          });
+        }
+      },
+    ),
   );
 
-  onSettled(() => {
+  onMount(() => {
     const zIndex = props.zIndex;
     const isPanorama = props.isPanorama;
-    return unregisterCleanup(() => {
-      zIndexActions?.unregisterZIndexPortalElement({
-        zIndex,
-        isPanorama,
-      });
-    });
+    onCleanup(
+      unregisterCleanup(() => {
+        zIndexActions?.unregisterZIndexPortalElement({
+          zIndex,
+          isPanorama,
+        });
+      }),
+    );
   });
 
-  return <g tabindex={-1} class={`recharts-zIndex-layer_${props.zIndex}`} ref={setGRef} />;
+  return <g tabIndex={-1} class={`recharts-zIndex-layer_${props.zIndex}`} ref={setGRef} />;
 }
 
 export const AllZIndexPortals = (props: {

package/src/state/reduxDevtoolsJsonStringifyReplacer.ts

@@ -1,15 +0,0 @@
-// Ported from recharts 3.8.1 src/state/reduxDevtoolsJsonStringifyReplacer.ts
-// Pure util — no framework surface — behavior is byte-identical to recharts.
-
-export function reduxDevtoolsJsonStringifyReplacer(key: string, value: unknown) {
-  if (value instanceof HTMLElement) {
-    return `HTMLElement <${value.tagName} class="${value.className}">`;
-  }
-  if (value === window) {
-    return "global.window";
-  }
-  if (key === "children" && typeof value === "object" && value !== null) {
-    return "<<CHILDREN>>";
-  }
-  return value;
-}

package/src/util/axisPropsAreEqual.ts

@@ -1,42 +0,0 @@
-// Ported from recharts 3.8.1 src/util/axisPropsAreEqual.ts (commit 7a23854).
-import { AxisRange } from "../state/selectors/axisSelectors";
-import { AxisDomain } from "./types";
-import { propsAreEqual } from "./propsAreEqual";
-
-function shortArraysAreEqual(
-  arr1: AxisDomain | AxisRange | undefined,
-  arr2: AxisDomain | AxisRange | undefined,
-): boolean {
-  if (arr1 === arr2) {
-    return true;
-  }
-
-  if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
-    return arr1[0] === arr2[0] && arr1[1] === arr2[1];
-  }
-
-  return false;
-}
-
-export function axisPropsAreEqual<
-  T extends Record<string, unknown> & {
-    domain?: AxisDomain;
-    range?: AxisRange;
-  },
->(prevProps: T, nextProps: T): boolean {
-  if (prevProps === nextProps) {
-    return true;
-  }
-  const { domain: prevDomain, range: prevRange, ...prevRest } = prevProps;
-  const { domain: nextDomain, range: nextRange, ...nextRest } = nextProps;
-
-  if (!shortArraysAreEqual(prevDomain, nextDomain)) {
-    return false;
-  }
-
-  if (!shortArraysAreEqual(prevRange, nextRange)) {
-    return false;
-  }
-
-  return propsAreEqual(prevRest, nextRest);
-}