solid-recharts 0.1.0 → 0.2.1

package/src/cartesian/ReferenceArea.tsx

@@ -16,7 +16,7 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form). <Label>
 //    CHILDREN are not rendered (the `label` prop is).
-import { createEffect, createMemo, merge, Show } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import {
@@ -41,7 +41,7 @@ import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
 import type { AxisId } from "../state/cartesianAxisSlice";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type ReferenceCoordinateValue = number | string;
 
@@ -124,39 +124,29 @@ const renderRect = (option: ReferenceAreaProps["shape"], props: RectangleProps):
 
 function ReportReferenceArea(props: ReferenceAreaSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceAreaSettings | null = null;
-
-  createEffect(
-    (): ReferenceAreaSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x1: props.x1,
-      x2: props.x2,
-      y1: props.y1,
-      y2: props.y2,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addArea(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeArea(prev);
-        store.actions.referenceElements.addArea(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeArea(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceAreaSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x1: props.x1,
+        x2: props.x2,
+        y1: props.y1,
+        y2: props.y2,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addArea(next),
+        // No replace action on the slice; a change is remove-then-add (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeArea(prev);
+          store.actions.referenceElements.addArea(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeArea(prev),
+      },
+    );
+  }
 
   return null;
 }

package/src/cartesian/ReferenceDot.tsx

@@ -12,7 +12,7 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form);
 //    `children` is not rendered (CartesianLabelContext).
-import { createEffect, createMemo, merge, Show } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import { Dot, type DotProps } from "../shape/Dot";
@@ -36,7 +36,7 @@ import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { Coordinate } from "../util/types";
 import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type ReferenceCoordinateValue = number | string;
 
@@ -130,38 +130,28 @@ export type Props<
 
 function ReportReferenceDot(props: ReferenceDotSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceDotSettings | null = null;
-
-  createEffect(
-    (): ReferenceDotSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x: props.x,
-      y: props.y,
-      r: props.r,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addDot(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeDot(prev);
-        store.actions.referenceElements.addDot(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeDot(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceDotSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x: props.x,
+        y: props.y,
+        r: props.r,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addDot(next),
+        // No replace action on the slice; a change is remove-then-add (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeDot(prev);
+          store.actions.referenceElements.addDot(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeDot(prev),
+      },
+    );
+  }
 
   return null;
 }

package/src/cartesian/ReferenceLine.tsx

@@ -16,7 +16,7 @@
 //    render-function form; the default-`<line>` branch is kept). <Label> CHILDREN
 //    are not rendered (the `label` prop is).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createMemo, merge, Show } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { Layer } from "../container/Layer";
 import {
@@ -46,7 +46,7 @@ import { CartesianScaleHelper, CartesianScaleHelperImpl } from "../util/scale/Ca
 import type { AxisId } from "../state/cartesianAxisSlice";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 /**
  * Single point that defines one end of a segment, in data space.
@@ -242,38 +242,29 @@ const renderLine = (
 
 function ReportReferenceLine(props: ReferenceLineSettings): JSX.Element {
   const store = useAppStore();
-  let prev: ReferenceLineSettings | null = null;
-
-  createEffect(
-    (): ReferenceLineSettings => ({
-      id: props.id,
-      xAxisId: props.xAxisId,
-      yAxisId: props.yAxisId,
-      ifOverflow: props.ifOverflow,
-      x: props.x,
-      y: props.y,
-      segment: props.segment,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.referenceElements.addLine(settings);
-      } else if (prev !== settings) {
-        store.actions.referenceElements.removeLine(prev);
-        store.actions.referenceElements.addLine(settings);
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.referenceElements.removeLine(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ReferenceLineSettings>(
+      () => ({
+        id: props.id,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        ifOverflow: props.ifOverflow,
+        x: props.x,
+        y: props.y,
+        segment: props.segment,
+      }),
+      {
+        add: (next) => store.actions.referenceElements.addLine(next),
+        // The referenceElements slice has no replace action; the change is a
+        // remove of the old settings followed by an add of the new (recharts idiom).
+        replace: (prev, next) => {
+          store.actions.referenceElements.removeLine(prev);
+          store.actions.referenceElements.addLine(next);
+        },
+        remove: (prev) => store.actions.referenceElements.removeLine(prev),
+      },
+    );
+  }
 
   return null;
 }

package/src/cartesian/Scatter.tsx

@@ -10,7 +10,7 @@
 // joint/fitting line) are wired.) Solid deviations:
 // resolveDefaultProps→merge; effect-dispatch registration → createEffect/onCleanup;
 // the `@ts-expect-error`-laden value plumbing is replaced with typed coercion.
-import { createEffect, createMemo, For, merge, Show } from "solid-js";
+import { createMemo, For, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
@@ -79,7 +79,7 @@ import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from "
 import { getLinearRegression, interpolate, isNullish, isNumOrStr } from "../util/DataUtils";
 import { BaseAxisWithScale, implicitZAxis, ZAxisWithScale } from "../state/selectors/axisSelectors";
 import type { Formatter, ValueType } from "../component/DefaultTooltipContent";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ScatterPointNode {
   x?: number | string;
@@ -402,41 +402,29 @@ export const Scatter = (props: ScatterProps): JSX.Element => {
   // The default shape a (possibly partial-object) activeShape falls back to.
   const defaultSymbolShape = (p: ScatterShapeProps): JSX.Element => <Symbols {...p} />;
 
-  let prev: ScatterSettings | null = null;
-
-  createEffect(
-    (): ScatterSettings => ({
-      id,
-      type: "scatter",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: merged.zAxisId,
-      hide: merged.hide,
-      tooltipType: merged.tooltipType,
-      name: merged.name,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ScatterSettings>(
+      () => ({
+        id,
+        type: "scatter",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: merged.zAxisId,
+        hide: merged.hide,
+        tooltipType: merged.tooltipType,
+        name: merged.name,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-point <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);

package/src/cartesian/XAxis.tsx

@@ -10,7 +10,7 @@
 // plus `onCleanup` for removal. Defaults are resolved field-by-field to match
 // recharts' `resolveDefaultProps`: explicit `undefined` falls back to defaults.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createMemo, Show } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
@@ -43,7 +43,7 @@ import {
   TickProp,
 } from "../util/types";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface XAxisProps<DataPointType = unknown, DataValueType = unknown> {
   xAxisId?: string | number;
@@ -155,71 +155,58 @@ export function XAxis<DataPointType = unknown, DataValueType = unknown>(
   const unit = createMemo(() => props.unit);
   const mirror = createMemo(() => withDefault(props.mirror, xAxisDefaultProps.mirror));
 
-  let prev: XAxisSettings | null = null;
-
-  createEffect(
-    (): XAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(
-        layout(),
-        "xAxis",
-        withDefault(props.type, xAxisDefaultProps.type),
-      );
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: xAxisId(),
-        scale: withDefault(props.scale, xAxisDefaultProps.scale),
-        type: evaluatedType,
-        dataKey: props.dataKey,
-        unit: unit(),
-        name: props.name,
-        allowDuplicatedCategory: withDefault(
-          props.allowDuplicatedCategory,
-          xAxisDefaultProps.allowDuplicatedCategory,
-        ),
-        allowDataOverflow: withDefault(
-          props.allowDataOverflow,
-          xAxisDefaultProps.allowDataOverflow,
-        ),
-        reversed: withDefault(props.reversed, xAxisDefaultProps.reversed),
-        includeHidden: withDefault(props.includeHidden, xAxisDefaultProps.includeHidden),
-        domain: props.domain,
-        allowDecimals: withDefault(props.allowDecimals, xAxisDefaultProps.allowDecimals),
-        tickCount: withDefault(props.tickCount, xAxisDefaultProps.tickCount),
-        ticks: props.ticks,
-        tick: tick(),
-        niceTicks: withDefault(props.niceTicks, xAxisDefaultProps.niceTicks),
-        interval: withDefault(props.interval, xAxisDefaultProps.interval),
-        mirror: mirror(),
-        minTickGap: withDefault(props.minTickGap, xAxisDefaultProps.minTickGap),
-        angle: withDefault(props.angle, xAxisDefaultProps.angle),
-        hide: hide(),
-        tickFormatter: tickFormatter(),
-        padding: withDefault(props.padding, xAxisDefaultProps.padding),
-        height: withDefault(props.height, xAxisDefaultProps.height),
-        orientation: orientation(),
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addXAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceXAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeXAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<XAxisSettings>(
+      (): XAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(
+          layout(),
+          "xAxis",
+          withDefault(props.type, xAxisDefaultProps.type),
+        );
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: xAxisId(),
+          scale: withDefault(props.scale, xAxisDefaultProps.scale),
+          type: evaluatedType,
+          dataKey: props.dataKey,
+          unit: unit(),
+          name: props.name,
+          allowDuplicatedCategory: withDefault(
+            props.allowDuplicatedCategory,
+            xAxisDefaultProps.allowDuplicatedCategory,
+          ),
+          allowDataOverflow: withDefault(
+            props.allowDataOverflow,
+            xAxisDefaultProps.allowDataOverflow,
+          ),
+          reversed: withDefault(props.reversed, xAxisDefaultProps.reversed),
+          includeHidden: withDefault(props.includeHidden, xAxisDefaultProps.includeHidden),
+          domain: props.domain,
+          allowDecimals: withDefault(props.allowDecimals, xAxisDefaultProps.allowDecimals),
+          tickCount: withDefault(props.tickCount, xAxisDefaultProps.tickCount),
+          ticks: props.ticks,
+          tick: tick(),
+          niceTicks: withDefault(props.niceTicks, xAxisDefaultProps.niceTicks),
+          interval: withDefault(props.interval, xAxisDefaultProps.interval),
+          mirror: mirror(),
+          minTickGap: withDefault(props.minTickGap, xAxisDefaultProps.minTickGap),
+          angle: withDefault(props.angle, xAxisDefaultProps.angle),
+          hide: hide(),
+          tickFormatter: tickFormatter(),
+          padding: withDefault(props.padding, xAxisDefaultProps.padding),
+          height: withDefault(props.height, xAxisDefaultProps.height),
+          orientation: orientation(),
+        };
+      },
+      {
+        add: (next) => store.actions.cartesianAxis.addXAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceXAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeXAxis(prev),
+      },
+    );
+  }
 
   // Visual: render the <CartesianAxis> (ticks + labels + axis line). Never inside
   // a Brush panorama.

package/src/cartesian/YAxis.tsx

@@ -40,7 +40,7 @@ import {
   TickProp,
 } from "../util/types";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface YAxisProps<DataPointType = unknown, DataValueType = unknown> {
   yAxisId?: string | number;
@@ -152,71 +152,58 @@ export function YAxis<DataPointType = unknown, DataValueType = unknown>(
   const unit = createMemo(() => props.unit);
   const mirror = createMemo(() => withDefault(props.mirror, yAxisDefaultProps.mirror));
 
-  let prev: YAxisSettings | null = null;
-
-  createEffect(
-    (): YAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(
-        layout(),
-        "yAxis",
-        withDefault(props.type, yAxisDefaultProps.type),
-      );
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: yAxisId(),
-        scale: withDefault(props.scale, yAxisDefaultProps.scale),
-        type: evaluatedType,
-        dataKey: props.dataKey,
-        unit: unit(),
-        name: props.name,
-        allowDuplicatedCategory: withDefault(
-          props.allowDuplicatedCategory,
-          yAxisDefaultProps.allowDuplicatedCategory,
-        ),
-        allowDataOverflow: withDefault(
-          props.allowDataOverflow,
-          yAxisDefaultProps.allowDataOverflow,
-        ),
-        reversed: withDefault(props.reversed, yAxisDefaultProps.reversed),
-        includeHidden: withDefault(props.includeHidden, yAxisDefaultProps.includeHidden),
-        domain: props.domain,
-        allowDecimals: withDefault(props.allowDecimals, yAxisDefaultProps.allowDecimals),
-        tickCount: withDefault(props.tickCount, yAxisDefaultProps.tickCount),
-        ticks: props.ticks,
-        tick: tick(),
-        niceTicks: withDefault(props.niceTicks, yAxisDefaultProps.niceTicks),
-        interval: withDefault(props.interval, yAxisDefaultProps.interval),
-        mirror: mirror(),
-        minTickGap: withDefault(props.minTickGap, yAxisDefaultProps.minTickGap),
-        angle: withDefault(props.angle, yAxisDefaultProps.angle),
-        hide: hide(),
-        tickFormatter: tickFormatter(),
-        padding: withDefault(props.padding, yAxisDefaultProps.padding),
-        width: withDefault(props.width, yAxisDefaultProps.width),
-        orientation: orientation(),
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addYAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceYAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeYAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<YAxisSettings>(
+      (): YAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(
+          layout(),
+          "yAxis",
+          withDefault(props.type, yAxisDefaultProps.type),
+        );
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: yAxisId(),
+          scale: withDefault(props.scale, yAxisDefaultProps.scale),
+          type: evaluatedType,
+          dataKey: props.dataKey,
+          unit: unit(),
+          name: props.name,
+          allowDuplicatedCategory: withDefault(
+            props.allowDuplicatedCategory,
+            yAxisDefaultProps.allowDuplicatedCategory,
+          ),
+          allowDataOverflow: withDefault(
+            props.allowDataOverflow,
+            yAxisDefaultProps.allowDataOverflow,
+          ),
+          reversed: withDefault(props.reversed, yAxisDefaultProps.reversed),
+          includeHidden: withDefault(props.includeHidden, yAxisDefaultProps.includeHidden),
+          domain: props.domain,
+          allowDecimals: withDefault(props.allowDecimals, yAxisDefaultProps.allowDecimals),
+          tickCount: withDefault(props.tickCount, yAxisDefaultProps.tickCount),
+          ticks: props.ticks,
+          tick: tick(),
+          niceTicks: withDefault(props.niceTicks, yAxisDefaultProps.niceTicks),
+          interval: withDefault(props.interval, yAxisDefaultProps.interval),
+          mirror: mirror(),
+          minTickGap: withDefault(props.minTickGap, yAxisDefaultProps.minTickGap),
+          angle: withDefault(props.angle, yAxisDefaultProps.angle),
+          hide: hide(),
+          tickFormatter: tickFormatter(),
+          padding: withDefault(props.padding, yAxisDefaultProps.padding),
+          width: withDefault(props.width, yAxisDefaultProps.width),
+          orientation: orientation(),
+        };
+      },
+      {
+        add: (next) => store.actions.cartesianAxis.addYAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceYAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeYAxis(prev),
+      },
+    );
+  }
 
   // Visual: render the <CartesianAxis>. Never inside a Brush panorama.
   const isPanorama = useIsPanorama();