solid-recharts 0.2.1 → 1.0.0

package/src/state/tooltipSlice.ts

@@ -6,7 +6,7 @@
 // `settings.graphicalItemId` instead — the same proxy-safe strategy as
 // graphicalItemsSlice (SetTooltipEntrySettings is the sole caller and each
 // graphical item registers exactly one entry, so the id is unique).
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { createCollectionActions } from "./createCollectionActions";
 import { patched } from "./patched";
 import { TooltipTrigger } from "../chart/types";
@@ -188,12 +188,14 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
   // one entry, so the id is unique.
   const entries = createCollectionActions<TooltipPayloadConfiguration>(
     (updater) =>
-      setState((s) => {
-        const next = updater(s.tooltipItemPayloads);
-        if (next !== s.tooltipItemPayloads) {
-          s.tooltipItemPayloads = next;
-        }
-      }),
+      setState(
+        produce((s) => {
+          const next = updater(s.tooltipItemPayloads);
+          if (next !== s.tooltipItemPayloads) {
+            s.tooltipItemPayloads = next;
+          }
+        }),
+      ),
     (p) => p.settings.graphicalItemId,
   );
 
@@ -202,9 +204,11 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
     replaceTooltipEntrySettings: entries.replace,
     removeTooltipEntrySettings: entries.remove,
     setTooltipSettingsState(payload) {
-      setState((s) => {
-        s.settings = payload;
-      });
+      setState(
+        produce((s) => {
+          s.settings = payload;
+        }),
+      );
     },
     setActiveMouseOverItemIndex(payload) {
       // Slice immutability contract (ADR-0002): replace each written interaction
@@ -212,105 +216,121 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
       // graph invalidates by input-reference comparison. In-place leaf writes
       // keep the node reference stable, so reference-keyed selectors would never
       // recompute — see the store-proxy-reference-identity memory.
-      setState((s) => {
-        s.syncInteraction = patched(s.syncInteraction, {
-          active: false,
-          sourceViewBox: undefined,
-        });
-        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
-        s.itemInteraction = patched(s.itemInteraction, {
-          hover: {
-            active: true,
-            index: payload.activeIndex,
-            dataKey: payload.activeDataKey,
-            graphicalItemId: payload.activeGraphicalItemId,
-            coordinate: payload.activeCoordinate,
-          },
-        });
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              graphicalItemId: payload.activeGraphicalItemId,
+              coordinate: payload.activeCoordinate,
+            },
+          });
+        }),
+      );
     },
     mouseLeaveChart() {
-      setState((s) => {
-        s.itemInteraction = patched(s.itemInteraction, {
-          hover: patched(s.itemInteraction.hover, { active: false }),
-        });
-        s.axisInteraction = patched(s.axisInteraction, {
-          hover: patched(s.axisInteraction.hover, { active: false }),
-        });
-      });
+      setState(
+        produce((s) => {
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: patched(s.itemInteraction.hover, { active: false }),
+          });
+          s.axisInteraction = patched(s.axisInteraction, {
+            hover: patched(s.axisInteraction.hover, { active: false }),
+          });
+        }),
+      );
     },
     mouseLeaveItem() {
-      setState((s) => {
-        s.itemInteraction = patched(s.itemInteraction, {
-          hover: patched(s.itemInteraction.hover, { active: false }),
-        });
-      });
+      setState(
+        produce((s) => {
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: patched(s.itemInteraction.hover, { active: false }),
+          });
+        }),
+      );
     },
     setActiveClickItemIndex(payload) {
-      setState((s) => {
-        s.syncInteraction = patched(s.syncInteraction, {
-          active: false,
-          sourceViewBox: undefined,
-        });
-        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
-        s.itemInteraction = patched(s.itemInteraction, {
-          click: {
-            active: true,
-            index: payload.activeIndex,
-            dataKey: payload.activeDataKey,
-            graphicalItemId: payload.activeGraphicalItemId,
-            coordinate: payload.activeCoordinate,
-          },
-        });
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.itemInteraction = patched(s.itemInteraction, {
+            click: {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              graphicalItemId: payload.activeGraphicalItemId,
+              coordinate: payload.activeCoordinate,
+            },
+          });
+        }),
+      );
     },
     setMouseOverAxisIndex(payload) {
-      setState((s) => {
-        s.syncInteraction = patched(s.syncInteraction, {
-          active: false,
-          sourceViewBox: undefined,
-        });
-        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
-        s.axisInteraction = patched(s.axisInteraction, {
-          hover: patched(s.axisInteraction.hover, {
-            active: true,
-            index: payload.activeIndex,
-            dataKey: payload.activeDataKey,
-            coordinate: payload.activeCoordinate,
-          }),
-        });
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.axisInteraction = patched(s.axisInteraction, {
+            hover: patched(s.axisInteraction.hover, {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              coordinate: payload.activeCoordinate,
+            }),
+          });
+        }),
+      );
     },
     setMouseClickAxisIndex(payload) {
-      setState((s) => {
-        s.syncInteraction = patched(s.syncInteraction, {
-          active: false,
-          sourceViewBox: undefined,
-        });
-        s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
-        s.axisInteraction = patched(s.axisInteraction, {
-          click: patched(s.axisInteraction.click, {
-            active: true,
-            index: payload.activeIndex,
-            dataKey: payload.activeDataKey,
-            coordinate: payload.activeCoordinate,
-          }),
-        });
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.axisInteraction = patched(s.axisInteraction, {
+            click: patched(s.axisInteraction.click, {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              coordinate: payload.activeCoordinate,
+            }),
+          });
+        }),
+      );
     },
     setSyncInteraction(payload) {
-      setState((s) => {
-        s.syncInteraction = payload;
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = payload;
+        }),
+      );
     },
     setKeyboardInteraction(payload) {
-      setState((s) => {
-        s.keyboardInteraction = patched(s.keyboardInteraction, {
-          active: payload.active,
-          index: payload.activeIndex,
-          coordinate: payload.activeCoordinate,
-        });
-      });
+      setState(
+        produce((s) => {
+          s.keyboardInteraction = patched(s.keyboardInteraction, {
+            active: payload.active,
+            index: payload.activeIndex,
+            coordinate: payload.activeCoordinate,
+          });
+        }),
+      );
     },
   };
 

package/src/state/unregisterOnCleanup.ts

@@ -1,26 +1,11 @@
-// The register-while-mounted idiom: a component adds its settings to the chart
-// store in an effect and removes them again when it unmounts. The removal is
-// the one lifecycle moment where a store write is otherwise illegal: when the
-// router (or a <Show>) disposes a subtree, `onCleanup` callbacks run inside the
-// disposing computation's context, and Solid 2.0 throws
-// SIGNAL_WRITE_IN_OWNED_SCOPE for any signal/store write made there.
-//
-// An unregistration is not derived state — it is an external transition on a
-// store that outlives the component — so it must not execute under the dying
-// scope. `runWithOwner(null, …)` runs the callback owner- and context-free,
-// which is the documented way to "move the write outside" without deferring it
-// (synchronous removal keeps selector state consistent within the same flush).
-import { onCleanup, runWithOwner } from "solid-js";
+import { onCleanup } from "solid-js";
 
-/** `onCleanup` for store unregistrations: runs `fn` outside the disposing scope. */
+/** Register a synchronous store unregistration on owner cleanup. */
 export function unregisterOnCleanup(fn: () => void): void {
-  onCleanup(() => runWithOwner(null, fn));
+  onCleanup(fn);
 }
 
-/**
- * Same escape for cleanups *returned* from an effect apply phase or `onSettled`
- * (those also run inside the disposing computation's context on unmount).
- */
+/** Adapt a store unregistration for APIs that accept a cleanup callback. */
 export function unregisterCleanup(fn: () => void): () => void {
-  return () => runWithOwner(null, fn);
+  return fn;
 }

package/src/state/zIndexSlice.ts

@@ -2,7 +2,7 @@
 // FULL SOLID-NATIVE REWRITE (no Redux/immer). Registry of z-index -> element refs
 // used to portal components at each z-index. Z-index layering is wired into the
 // store so chart items can render through ZIndexLayer.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 
 type ZIndexEntry = {
@@ -70,57 +70,65 @@ export function createZIndexSlice(initialState: ZIndexState = initialZIndexState
 
   const actions: ZIndexActions = {
     registerZIndexPortal({ zIndex }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          entry.consumers += 1;
-        } else {
-          s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
-        }
-      });
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            entry.consumers += 1;
+          } else {
+            s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
+          }
+        }),
+      );
     },
     unregisterZIndexPortal({ zIndex }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          entry.consumers -= 1;
-          // Garbage-collect unused entries, except default z-indexes (always
-          // rendered, so their portal provider stays mounted and won't re-register).
-          if (entry.consumers <= 0 && !isDefaultZIndex(zIndex)) {
-            delete s.zIndexMap[zIndex];
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            entry.consumers -= 1;
+            // Garbage-collect unused entries, except default z-indexes (always
+            // rendered, so their portal provider stays mounted and won't re-register).
+            if (entry.consumers <= 0 && !isDefaultZIndex(zIndex)) {
+              delete s.zIndexMap[zIndex];
+            }
           }
-        }
-      });
+        }),
+      );
     },
     registerZIndexPortalElement({ zIndex, element, isPanorama }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          if (isPanorama) {
-            entry.panoramaElement = element;
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            if (isPanorama) {
+              entry.panoramaElement = element;
+            } else {
+              entry.element = element;
+            }
           } else {
-            entry.element = element;
+            s.zIndexMap[zIndex] = {
+              consumers: 0,
+              element: isPanorama ? undefined : element,
+              panoramaElement: isPanorama ? element : undefined,
+            };
           }
-        } else {
-          s.zIndexMap[zIndex] = {
-            consumers: 0,
-            element: isPanorama ? undefined : element,
-            panoramaElement: isPanorama ? element : undefined,
-          };
-        }
-      });
+        }),
+      );
     },
     unregisterZIndexPortalElement({ zIndex, isPanorama }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          if (isPanorama) {
-            entry.panoramaElement = undefined;
-          } else {
-            entry.element = undefined;
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            if (isPanorama) {
+              entry.panoramaElement = undefined;
+            } else {
+              entry.element = undefined;
+            }
           }
-        }
-      });
+        }),
+      );
     },
   };