solid-recharts 1.0.0 → 2.0.0-beta.1

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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { createCollectionActions } from "./createCollectionActions";
 import { patched } from "./patched";
 import { TooltipTrigger } from "../chart/types";
@@ -188,14 +188,12 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
   // one entry, so the id is unique.
   const entries = createCollectionActions<TooltipPayloadConfiguration>(
     (updater) =>
-      setState(
-        produce((s) => {
-          const next = updater(s.tooltipItemPayloads);
-          if (next !== s.tooltipItemPayloads) {
-            s.tooltipItemPayloads = next;
-          }
-        }),
-      ),
+      setState((s) => {
+        const next = updater(s.tooltipItemPayloads);
+        if (next !== s.tooltipItemPayloads) {
+          s.tooltipItemPayloads = next;
+        }
+      }),
     (p) => p.settings.graphicalItemId,
   );
 
@@ -204,11 +202,9 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
     replaceTooltipEntrySettings: entries.replace,
     removeTooltipEntrySettings: entries.remove,
     setTooltipSettingsState(payload) {
-      setState(
-        produce((s) => {
-          s.settings = payload;
-        }),
-      );
+      setState((s) => {
+        s.settings = payload;
+      });
     },
     setActiveMouseOverItemIndex(payload) {
       // Slice immutability contract (ADR-0002): replace each written interaction
@@ -216,121 +212,105 @@ 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(
-        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,
-            },
-          });
-        }),
-      );
+      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,
+          },
+        });
+      });
     },
     mouseLeaveChart() {
-      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 }),
-          });
-        }),
-      );
+      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 }),
+        });
+      });
     },
     mouseLeaveItem() {
-      setState(
-        produce((s) => {
-          s.itemInteraction = patched(s.itemInteraction, {
-            hover: patched(s.itemInteraction.hover, { active: false }),
-          });
-        }),
-      );
+      setState((s) => {
+        s.itemInteraction = patched(s.itemInteraction, {
+          hover: patched(s.itemInteraction.hover, { active: false }),
+        });
+      });
     },
     setActiveClickItemIndex(payload) {
-      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,
-            },
-          });
-        }),
-      );
+      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,
+          },
+        });
+      });
     },
     setMouseOverAxisIndex(payload) {
-      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,
-            }),
-          });
-        }),
-      );
+      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,
+          }),
+        });
+      });
     },
     setMouseClickAxisIndex(payload) {
-      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,
-            }),
-          });
-        }),
-      );
+      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,
+          }),
+        });
+      });
     },
     setSyncInteraction(payload) {
-      setState(
-        produce((s) => {
-          s.syncInteraction = payload;
-        }),
-      );
+      setState((s) => {
+        s.syncInteraction = payload;
+      });
     },
     setKeyboardInteraction(payload) {
-      setState(
-        produce((s) => {
-          s.keyboardInteraction = patched(s.keyboardInteraction, {
-            active: payload.active,
-            index: payload.activeIndex,
-            coordinate: payload.activeCoordinate,
-          });
-        }),
-      );
+      setState((s) => {
+        s.keyboardInteraction = patched(s.keyboardInteraction, {
+          active: payload.active,
+          index: payload.activeIndex,
+          coordinate: payload.activeCoordinate,
+        });
+      });
     },
   };
 

package/src/state/unregisterOnCleanup.ts

@@ -1,11 +1,26 @@
-import { onCleanup } from "solid-js";
+// 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";
 
-/** Register a synchronous store unregistration on owner cleanup. */
+/** `onCleanup` for store unregistrations: runs `fn` outside the disposing scope. */
 export function unregisterOnCleanup(fn: () => void): void {
-  onCleanup(fn);
+  onCleanup(() => runWithOwner(null, fn));
 }
 
-/** Adapt a store unregistration for APIs that accept a cleanup callback. */
+/**
+ * Same escape for cleanups *returned* from an effect apply phase or `onSettled`
+ * (those also run inside the disposing computation's context on unmount).
+ */
 export function unregisterCleanup(fn: () => void): () => void {
-  return fn;
+  return () => runWithOwner(null, 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, produce } from "solid-js/store";
+import { createStore } from "solid-js";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 
 type ZIndexEntry = {
@@ -70,65 +70,57 @@ export function createZIndexSlice(initialState: ZIndexState = initialZIndexState
 
   const actions: ZIndexActions = {
     registerZIndexPortal({ zIndex }) {
-      setState(
-        produce((s) => {
-          const entry = s.zIndexMap[zIndex];
-          if (entry) {
-            entry.consumers += 1;
-          } else {
-            s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
-          }
-        }),
-      );
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          entry.consumers += 1;
+        } else {
+          s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
+        }
+      });
     },
     unregisterZIndexPortal({ 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];
-            }
+      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];
           }
-        }),
-      );
+        }
+      });
     },
     registerZIndexPortalElement({ zIndex, element, isPanorama }) {
-      setState(
-        produce((s) => {
-          const entry = s.zIndexMap[zIndex];
-          if (entry) {
-            if (isPanorama) {
-              entry.panoramaElement = element;
-            } else {
-              entry.element = element;
-            }
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          if (isPanorama) {
+            entry.panoramaElement = element;
           } else {
-            s.zIndexMap[zIndex] = {
-              consumers: 0,
-              element: isPanorama ? undefined : element,
-              panoramaElement: isPanorama ? element : undefined,
-            };
+            entry.element = element;
           }
-        }),
-      );
+        } else {
+          s.zIndexMap[zIndex] = {
+            consumers: 0,
+            element: isPanorama ? undefined : element,
+            panoramaElement: isPanorama ? element : undefined,
+          };
+        }
+      });
     },
     unregisterZIndexPortalElement({ zIndex, isPanorama }) {
-      setState(
-        produce((s) => {
-          const entry = s.zIndexMap[zIndex];
-          if (entry) {
-            if (isPanorama) {
-              entry.panoramaElement = undefined;
-            } else {
-              entry.element = undefined;
-            }
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          if (isPanorama) {
+            entry.panoramaElement = undefined;
+          } else {
+            entry.element = undefined;
           }
-        }),
-      );
+        }
+      });
     },
   };