solid-recharts 0.2.0 → 1.0.0

package/src/state/createCollectionActions.ts

@@ -0,0 +1,51 @@
+// The add / replace / remove algebra for a store-held array collection.
+//
+// Several slices keep a keyed collection as an array and expose the same three
+// writes: append on add, swap-by-key on replace, filter-by-key on remove. Each
+// used to hand-write that algebra (once per collection: cartesian + polar
+// graphical items, reference dots/areas/lines, legend payload, tooltip entries).
+// This concentrates it so the slice immutability contract (ADR-0002) lives in one
+// place: every change produces a NEW array reference, so reference-equality
+// selector caches invalidate; a future in-place slip can only regress here.
+//
+// The slice supplies `update`, which MUST read the current array and assign the
+// result inside its own `setState` draft — the current-array read has to happen
+// in the write batch, not in the caller's scope. Actions register from inside
+// registerInStore's effect apply phase; a store read there (outside setState)
+// would trip STRICT_READ_UNTRACKED. `update` returning the same reference from its
+// updater is a no-op (matches the hand-written `index > -1` guard on replace).
+//
+// `keyOf` extracts the match key (an id field for most collections, a nested
+// `settings.graphicalItemId` for tooltip entries). Slices without a replace action
+// (reference elements) simply wire `add` and `remove`.
+
+export interface CollectionActions<T> {
+  // Arrow-property signatures (not `add(item): void`) so consumers can reference
+  // these without the unbound-method lint firing — they carry no `this`.
+  add: (item: T) => void;
+  replace: (payload: { prev: T; next: T }) => void;
+  remove: (item: T) => void;
+}
+
+export function createCollectionActions<T>(
+  update: (updater: (arr: ReadonlyArray<T>) => ReadonlyArray<T>) => void,
+  // Match key — compared only with `===`, so any value type is fine (an id
+  // field for most collections, a nested `settings.graphicalItemId` for tooltip).
+  keyOf: (item: T) => unknown,
+): CollectionActions<T> {
+  return {
+    add: (item) => update((arr) => [...arr, item]),
+    replace: ({ prev, next }) =>
+      update((arr) => {
+        const index = arr.findIndex((it) => keyOf(it) === keyOf(prev));
+        // Absent key → return the same reference so `update` writes nothing.
+        if (index < 0) {
+          return arr;
+        }
+        const nextItems = arr.slice();
+        nextItems[index] = next;
+        return nextItems;
+      }),
+    remove: (item) => update((arr) => arr.filter((it) => keyOf(it) !== keyOf(item))),
+  };
+}

package/src/state/createSelector.ts

@@ -0,0 +1,97 @@
+// Hand-rolled replacement for reselect v5 `createSelector` (ADR-0002).
+//
+// The port initially replaced reselect with plain functions memoized only by
+// each consumer's `createMemo` (ADR-0001), which lost *shared* memoization:
+// every consumer re-ran the full selector chain. This module restores
+// upstream's caching contract without the dependency:
+//
+//   - Cache nodes live per store (WeakMap keyed on the root state object, so
+//     they are GC'd with the chart) and per primitive args (nested Maps, i.e.
+//     SameValueZero keying — `0` and `"0"` are distinct axis ids), mirroring
+//     reselect v5's `weakMapMemoize`.
+//   - A node recomputes its combiner only when one of its extracted input
+//     values changes by reference (`===`, reselect's default equality). This
+//     is sound because every slice follows the slice immutability contract:
+//     writes replace the objects along the written path.
+//   - Input selectors run tracked on EVERY evaluation — they are the sole
+//     reactive surface, so a consumer's `createMemo` subscribes identically on
+//     cache hits and misses. The combiner runs `untrack`ed and must be pure
+//     over its inputs (reselect's own contract; combiners never read state).
+//   - `resultEqualityCheck` (upstream's `memoizeOptions.resultEqualityCheck`)
+//     keeps the previous reference when a recompute produces a value-equal
+//     result, so downstream reference comparisons — and `useAppSelector`'s
+//     `createMemo` equality — stop propagation.
+import { untrack } from "solid-js";
+
+export type CreateSelectorOptions<Result> = {
+  /** When a recompute yields a value-equal result, return the previous reference. */
+  resultEqualityCheck?: (previous: Result, next: Result) => boolean;
+};
+
+type InputSelector<State> = (state: State, ...args: never[]) => unknown;
+
+type CacheNode = {
+  entry?: { inputs: readonly unknown[]; result: unknown };
+  children?: Map<unknown, CacheNode>;
+};
+
+/**
+ * Memoizing selector factory — the Solid-native stand-in for reselect's
+ * `createSelector([inputs], combiner)`. The returned selector stays a plain
+ * function callable with or without a reactive owner; all callers of the same
+ * store share one cache node per argument combination.
+ *
+ * Input selectors must read every state path segment leading to the value they
+ * extract; the combiner must be pure over the extracted values. The returned
+ * function takes `...args: unknown[]` — callers annotate the exported const's
+ * type (e.g. `(state, axisType, axisId) => X`), which narrows this signature.
+ *
+ * Typed via a precise public overload + a loose implementation signature (the
+ * reselect approach): the body operates entirely on `unknown`, so it needs no
+ * type assertions while callers still get full input/combiner type checking.
+ */
+export function createSelector<
+  State extends object,
+  Inputs extends readonly InputSelector<State>[],
+  Result,
+>(
+  inputs: readonly [...Inputs],
+  combiner: (...values: { [K in keyof Inputs]: ReturnType<Inputs[K]> }) => Result,
+  options?: CreateSelectorOptions<Result>,
+): (state: State, ...args: unknown[]) => Result;
+export function createSelector(
+  inputs: ReadonlyArray<(state: object, ...args: unknown[]) => unknown>,
+  combiner: (...values: unknown[]) => unknown,
+  options?: CreateSelectorOptions<unknown>,
+): (state: object, ...args: unknown[]) => unknown {
+  const cache = new WeakMap<object, CacheNode>();
+  const resultEqualityCheck = options?.resultEqualityCheck;
+
+  return (state: object, ...args: unknown[]): unknown => {
+    let node: CacheNode = cache.get(state) ?? {};
+    cache.set(state, node);
+    for (const arg of args) {
+      const children: Map<unknown, CacheNode> = node.children ?? new Map<unknown, CacheNode>();
+      node.children = children;
+      const child: CacheNode = children.get(arg) ?? {};
+      children.set(arg, child);
+      node = child;
+    }
+
+    // Tracked: the input reads are the selector's whole reactive surface.
+    const values: readonly unknown[] = inputs.map((input) => input(state, ...args));
+
+    const entry = node.entry;
+    if (entry != null && values.every((value, i) => value === entry.inputs[i])) {
+      return entry.result;
+    }
+
+    const result = untrack(() => combiner(...values));
+    if (entry != null && resultEqualityCheck != null && resultEqualityCheck(entry.result, result)) {
+      entry.inputs = values;
+      return entry.result;
+    }
+    node.entry = { inputs: values, result };
+    return result;
+  };
+}

package/src/state/errorBarSlice.ts

@@ -4,7 +4,7 @@
 // each item holds an array of ErrorBarsSettings. recharts matches for
 // replace/remove by (dataKey, direction) — kept verbatim (these are the error
 // bar's identity within an item).
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import type { ErrorBarDirection } from "../cartesian/ErrorBar";
 import { DataKey } from "../util/types";
 import { GraphicalItemId } from "./graphicalItemsSlice";
@@ -58,25 +58,31 @@ export function createErrorBarSlice(
 
   const actions: ErrorBarsActions = {
     addErrorBar({ itemId, errorBar }) {
-      setState((s) => {
-        s[itemId] = [...(s[itemId] ?? []), errorBar];
-      });
+      setState(
+        produce((s) => {
+          s[itemId] = [...(s[itemId] ?? []), errorBar];
+        }),
+      );
     },
     replaceErrorBar({ itemId, prev, next }) {
-      setState((s) => {
-        const list = s[itemId];
-        if (list) {
-          s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
-        }
-      });
+      setState(
+        produce((s) => {
+          const list = s[itemId];
+          if (list) {
+            s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
+          }
+        }),
+      );
     },
     removeErrorBar({ itemId, errorBar }) {
-      setState((s) => {
-        const list = s[itemId];
-        if (list) {
-          s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
-        }
-      });
+      setState(
+        produce((s) => {
+          const list = s[itemId];
+          if (list) {
+            s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
+          }
+        }),
+      );
     },
   };
 

package/src/state/eventSettingsSlice.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/eventSettingsSlice.ts (commit 7a23854).
 // Solid-native slice; immer's `castDraft` is unnecessary with a Solid store.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { EventThrottlingProps } from "../util/types";
 
 export type EventSettingsState = Required<EventThrottlingProps>;
@@ -26,14 +26,16 @@ export function createEventSettingsSlice(
 
   const actions: EventSettingsActions = {
     setEventSettings(payload) {
-      setState((s) => {
-        if (payload.throttleDelay != null) {
-          s.throttleDelay = payload.throttleDelay;
-        }
-        if (payload.throttledEvents != null) {
-          s.throttledEvents = payload.throttledEvents;
-        }
-      });
+      setState(
+        produce((s) => {
+          if (payload.throttleDelay != null) {
+            s.throttleDelay = payload.throttleDelay;
+          }
+          if (payload.throttledEvents != null) {
+            s.throttledEvents = payload.throttledEvents;
+          }
+        }),
+      );
     },
   };
 

package/src/state/externalEventsMiddleware.ts

@@ -13,21 +13,13 @@ import {
 } from "./selectors/tooltipSelectors";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
 import type { RechartsStore } from "./store";
+import { isEventThrottled } from "./isEventThrottled";
 
 export type ExternalEventActionPayload<E = Event> = {
   reactEvent: E;
   handler: CategoricalChartFunc<E> | undefined;
 };
 
-export type ExternalEventAction = {
-  type: "externalEvent";
-  payload: ExternalEventActionPayload;
-};
-
-export function externalEventAction(payload: ExternalEventActionPayload): ExternalEventAction {
-  return { type: "externalEvent", payload };
-}
-
 const rafIdMap = new Map<string, number>();
 const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>();
 const latestEventMap = new Map<
@@ -65,8 +57,7 @@ export function dispatchExternalEvent<E extends Event & { currentTarget: unknown
 
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes(eventType);
+  const isThrottled = isEventThrottled(throttledEvents, eventType);
 
   const existingTimeoutId = timeoutIdMap.get(eventType);
   if (existingTimeoutId !== undefined && (typeof throttleDelay !== "number" || !isThrottled)) {

package/src/state/graphicalItemsSlice.ts

@@ -10,7 +10,8 @@
 // the caller passed — reference matching can't work. We match by the required
 // unique `id` instead, which is the items' real identity and gives identical
 // ordering/replacement semantics.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { createCollectionActions } from "./createCollectionActions";
 import { ChartData } from "./chartDataSlice";
 import { AxisId } from "./cartesianAxisSlice";
 import { DataKey } from "../util/types";
@@ -112,50 +113,40 @@ export function createGraphicalItemsSlice(
     polarItems: [...initialState.polarItems],
   });
 
+  // State arrays are typed ReadonlyArray (immutable external API); the collection
+  // actions reassign the whole array rather than mutate in place (see ADR-0002).
+  const cartesian = createCollectionActions<CartesianGraphicalItemSettings>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.cartesianItems);
+          if (next !== s.cartesianItems) {
+            s.cartesianItems = next;
+          }
+        }),
+      ),
+    (it) => it.id,
+  );
+  const polar = createCollectionActions<PolarGraphicalItemSettings>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.polarItems);
+          if (next !== s.polarItems) {
+            s.polarItems = next;
+          }
+        }),
+      ),
+    (it) => it.id,
+  );
+
   const actions: GraphicalItemsActions = {
-    // State arrays are typed ReadonlyArray (immutable external API), so actions
-    // REASSIGN the whole array rather than mutate in place — Solid's fine-grained
-    // store still tracks the change, and the readonly type stays honest.
-    addCartesianGraphicalItem(item) {
-      setState((s) => {
-        s.cartesianItems = [...s.cartesianItems, item];
-      });
-    },
-    replaceCartesianGraphicalItem({ prev, next }) {
-      setState((s) => {
-        const index = s.cartesianItems.findIndex((it) => it.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.cartesianItems.slice();
-          nextItems[index] = next;
-          s.cartesianItems = nextItems;
-        }
-      });
-    },
-    removeCartesianGraphicalItem(item) {
-      setState((s) => {
-        s.cartesianItems = s.cartesianItems.filter((it) => it.id !== item.id);
-      });
-    },
-    addPolarGraphicalItem(item) {
-      setState((s) => {
-        s.polarItems = [...s.polarItems, item];
-      });
-    },
-    replacePolarGraphicalItem({ prev, next }) {
-      setState((s) => {
-        const index = s.polarItems.findIndex((it) => it.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.polarItems.slice();
-          nextItems[index] = next;
-          s.polarItems = nextItems;
-        }
-      });
-    },
-    removePolarGraphicalItem(item) {
-      setState((s) => {
-        s.polarItems = s.polarItems.filter((it) => it.id !== item.id);
-      });
-    },
+    addCartesianGraphicalItem: cartesian.add,
+    replaceCartesianGraphicalItem: cartesian.replace,
+    removeCartesianGraphicalItem: cartesian.remove,
+    addPolarGraphicalItem: polar.add,
+    replacePolarGraphicalItem: polar.replace,
+    removePolarGraphicalItem: polar.remove,
   };
 
   return { state, actions };

package/src/state/isEventThrottled.ts

@@ -0,0 +1,12 @@
+// The "is this event in the throttle allowlist" decision, shared verbatim by the
+// mouse, keyboard, and external event middleware. Only the DECISION is shared:
+// the timer-lifecycle downstream genuinely differs per middleware (mouse is
+// trailing-only; keyboard and external are leading+trailing; external keys its
+// timers per event type), so unifying the scheduling would change behavior and is
+// deliberately left alone.
+export function isEventThrottled(
+  throttledEvents: ReadonlyArray<string> | "all" | undefined,
+  eventName: string,
+): boolean {
+  return throttledEvents === "all" || (throttledEvents?.includes(eventName) ?? false);
+}

package/src/state/keyboardEventsMiddleware.ts

@@ -14,6 +14,7 @@ import {
 import { selectChartDirection } from "./selectors/axisSelectors";
 import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
+import { isEventThrottled } from "./isEventThrottled";
 
 const mkInteraction = (index: number): TooltipInteractionState => ({
   active: false,
@@ -23,12 +24,6 @@ const mkInteraction = (index: number): TooltipInteractionState => ({
   coordinate: undefined,
 });
 
-export type KeyDownAction = { type: "keyDown"; payload: KeyboardEvent["key"] };
-
-export function keyDownAction(payload: KeyboardEvent["key"]): KeyDownAction {
-  return { type: "keyDown", payload };
-}
-
 let rafId: number | null = null;
 let timeoutId: ReturnType<typeof setTimeout> | null = null;
 let latestKeyboardActionPayload: KeyboardEvent["key"] | null = null;
@@ -43,8 +38,7 @@ export function dispatchKeyDown(store: RechartsStore, key: KeyboardEvent["key"])
 
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("keydown");
+  const isThrottled = isEventThrottled(throttledEvents, "keydown");
 
   if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
     clearTimeout(timeoutId);

package/src/state/layoutSlice.ts

@@ -1,6 +1,7 @@
 // Ported from recharts 3.8.1 src/state/layoutSlice.ts (commit 7a23854).
 // Solid-native slice (no Redux): createStore + draft-first action setters.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { patched } from "./patched";
 import { LayoutType, Margin, Size } from "../util/types";
 
 export type ChartLayoutState = {
@@ -42,28 +43,39 @@ export function createChartLayoutSlice(
 
   const actions: ChartLayoutActions = {
     setLayout(layoutType) {
-      setState((s) => {
-        s.layoutType = layoutType;
-      });
+      setState(
+        produce((s) => {
+          s.layoutType = layoutType;
+        }),
+      );
     },
     setChartSize(size) {
-      setState((s) => {
-        s.width = size.width;
-        s.height = size.height;
-      });
+      setState(
+        produce((s) => {
+          s.width = size.width;
+          s.height = size.height;
+        }),
+      );
     },
     setMargin(margin) {
-      setState((s) => {
-        s.margin.top = margin.top ?? 0;
-        s.margin.right = margin.right ?? 0;
-        s.margin.bottom = margin.bottom ?? 0;
-        s.margin.left = margin.left ?? 0;
-      });
+      // Slice immutability contract (ADR-0002): replace the margin node.
+      setState(
+        produce((s) => {
+          s.margin = patched(s.margin, {
+            top: margin.top ?? 0,
+            right: margin.right ?? 0,
+            bottom: margin.bottom ?? 0,
+            left: margin.left ?? 0,
+          });
+        }),
+      );
     },
     setScale(scale) {
-      setState((s) => {
-        s.scale = scale;
-      });
+      setState(
+        produce((s) => {
+          s.scale = scale;
+        }),
+      );
     },
   };
 

package/src/state/legendSlice.ts

@@ -7,7 +7,9 @@
 // entry carries the graphical item's `id` (`{ id, items }`) and replace/remove
 // match by it (the same proxy-safe strategy as graphicalItemsSlice/tooltipSlice).
 // `selectLegendPayload` flattens `items` back to the reference's flat shape.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { createCollectionActions } from "./createCollectionActions";
+import { patched } from "./patched";
 import { LayoutType, Size } from "../util/types";
 import {
   HorizontalAlignmentType,
@@ -66,41 +68,43 @@ export function createLegendSlice(initialState: LegendState = initialLegendState
     payload: [...initialState.payload],
   });
 
+  const payload = createCollectionActions<LegendPayloadEntry>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.payload);
+          if (next !== s.payload) {
+            s.payload = next;
+          }
+        }),
+      ),
+    (e) => e.id,
+  );
+
   const actions: LegendActions = {
     setLegendSize(payload) {
-      setState((s) => {
-        s.size.width = payload.width;
-        s.size.height = payload.height;
-      });
+      // Slice immutability contract (ADR-0002): replace the node, not leaves.
+      setState(
+        produce((s) => {
+          s.size = patched(s.size, { width: payload.width, height: payload.height });
+        }),
+      );
     },
     setLegendSettings(payload) {
-      setState((s) => {
-        s.settings.align = payload.align;
-        s.settings.layout = payload.layout;
-        s.settings.verticalAlign = payload.verticalAlign;
-        s.settings.itemSorter = payload.itemSorter;
-      });
-    },
-    addLegendPayload(payload) {
-      setState((s) => {
-        s.payload = [...s.payload, payload];
-      });
-    },
-    replaceLegendPayload({ prev, next }) {
-      setState((s) => {
-        const index = s.payload.findIndex((e) => e.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.payload.slice();
-          nextItems[index] = next;
-          s.payload = nextItems;
-        }
-      });
-    },
-    removeLegendPayload(payload) {
-      setState((s) => {
-        s.payload = s.payload.filter((e) => e.id !== payload.id);
-      });
+      setState(
+        produce((s) => {
+          s.settings = patched(s.settings, {
+            align: payload.align,
+            layout: payload.layout,
+            verticalAlign: payload.verticalAlign,
+            itemSorter: payload.itemSorter,
+          });
+        }),
+      );
     },
+    addLegendPayload: payload.add,
+    replaceLegendPayload: payload.replace,
+    removeLegendPayload: payload.remove,
   };
 
   return { state, actions };

package/src/state/mouseEventsMiddleware.ts

@@ -7,17 +7,7 @@ import type { HTMLMousePointer, RelativePointer } from "../util/types";
 import { selectActivePropsFromChartPointer } from "./selectors/tooltipSelectors";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
 import type { RechartsStore } from "./store";
-
-export type MouseMoveAction = { type: "mouseMove"; payload: HTMLMousePointer };
-export type MouseClickAction = { type: "mouseClick"; payload: HTMLMousePointer };
-
-export function mouseMoveAction(payload: HTMLMousePointer): MouseMoveAction {
-  return { type: "mouseMove", payload };
-}
-
-export function mouseClickAction(payload: HTMLMousePointer): MouseClickAction {
-  return { type: "mouseClick", payload };
-}
+import { isEventThrottled } from "./isEventThrottled";
 
 /*
  * This single rafId is safe because:
@@ -46,8 +36,7 @@ export function dispatchMouseClick(store: RechartsStore, mousePointer: HTMLMouse
 export function dispatchMouseMove(store: RechartsStore, mousePointer: HTMLMousePointer): void {
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("mousemove");
+  const isThrottled = isEventThrottled(throttledEvents, "mousemove");
 
   if (rafId !== null) {
     cancelAnimationFrame(rafId);

package/src/state/optionsSlice.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/optionsSlice.ts (commit 7a23854).
 // Solid-native slice.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { TooltipEventType } from "../util/types";
 import { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice";
 import { isNan } from "../util/DataUtils";
@@ -52,11 +52,13 @@ export function createOptionsSlice(initialState: ChartOptions = initialOptionsSt
 
   const actions: OptionsActions = {
     createEventEmitter() {
-      setState((s) => {
-        if (s.eventEmitter == null) {
-          s.eventEmitter = Symbol("rechartsEventEmitter");
-        }
-      });
+      setState(
+        produce((s) => {
+          if (s.eventEmitter == null) {
+            s.eventEmitter = Symbol("rechartsEventEmitter");
+          }
+        }),
+      );
     },
   };
 

package/src/state/patched.ts

@@ -0,0 +1,19 @@
+// Slice immutability contract helper (ADR-0002).
+//
+// Slices must not mutate nested state in place — a changed value must have a
+// new reference all the way up to the slice-root property, because the
+// selector graph invalidates by input-reference comparison. `patched` is the
+// replacement write: it returns `{ ...current, ...patch }` when some patched
+// field actually differs, and `current` itself when nothing does — mirroring
+// immer, which skips same-value assignments, so untouched state keeps its
+// reference and downstream caches stay warm. Nest calls to replace along a
+// path: `s.a = patched(s.a, { b: patched(s.a.b, { c: 1 }) })`.
+
+export function patched<T extends object>(current: T, patch: Partial<T>): T {
+  for (const key in patch) {
+    if (!Object.is(current[key], patch[key])) {
+      return { ...current, ...patch };
+    }
+  }
+  return current;
+}