solid-recharts 0.2.0 → 1.0.0

package/src/container/RootSurface.tsx

@@ -4,7 +4,7 @@
 // hooks return Accessors → call them; `return null` → keyed `<Show>` (which also
 // narrows width/height to numbers without a non-null `!`).
 import { Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useChartHeight, useChartWidth } from "../context/chartLayoutContext";
 import { useAccessibilityLayer } from "../context/accessibilityContext";
 import { useIsPanorama } from "../context/PanoramaContext";

package/src/container/Surface.tsx

@@ -1,7 +1,7 @@
+import { splitProps } from "solid-js";
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 
 export interface CartesianViewBox {
   x?: number;
@@ -37,8 +37,7 @@ export type SurfaceProps = Omit<
  */
 export const Surface = (props: SurfaceProps) => {
   const svgView = () => props.viewBox ?? { width: props.width, height: props.height, x: 0, y: 0 };
-  const rest = omit(
-    props,
+  const rest = splitProps(props, [
     "children",
     "width",
     "height",
@@ -48,14 +47,14 @@ export const Surface = (props: SurfaceProps) => {
     "title",
     "desc",
     "ref",
-  );
+  ])[1];
 
   // Parity with recharts Surface: the passthrough props go through the SVG
   // filter (camelCase props → DOM attribute names), not a verbatim spread.
   return (
     <svg
       {...svgPropertiesAndEvents({ ...rest })}
-      class={["recharts-surface", props.class]}
+      class={["recharts-surface", props.class].filter(Boolean).join(" ")}
       width={props.width}
       height={props.height}
       style={props.style}

package/src/context/ErrorBarContext.tsx

@@ -7,15 +7,15 @@
 // Solid deviations: context value carries an `Accessor` (Solid context is fixed
 // at provide-time; the accessor keeps `data` reactive). useEffect add/replace +
 // cleanup remove → createEffect + onCleanup. useGraphicalItemId provides the id.
-import { createContext, createEffect, useContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { AxisId } from "../state/cartesianAxisSlice";
 import type { ErrorBarDataPointFormatter } from "../cartesian/ErrorBar";
 import type { ErrorBarsSettings } from "../state/errorBarSlice";
 import { useAppStore } from "../state/hooks";
 import { useGraphicalItemId } from "./RegisterGraphicalItemId";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ErrorBarContextValue {
   data: ReadonlyArray<unknown> | undefined;
@@ -45,7 +45,7 @@ export function SetErrorBarContext(
     dataPointFormatter: props.dataPointFormatter,
     errorBarOffset: props.errorBarOffset,
   });
-  return <ErrorBarContext value={value}>{props.children}</ErrorBarContext>;
+  return <ErrorBarContext.Provider value={value}>{props.children}</ErrorBarContext.Provider>;
 }
 
 export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useContext(ErrorBarContext);
@@ -57,29 +57,20 @@ export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useConte
 export function ReportErrorBarSettings(props: ErrorBarsSettings): JSX.Element {
   const store = useAppStore();
   const graphicalItemId = useGraphicalItemId();
-  let prev: ErrorBarsSettings | null = null;
 
-  createEffect(
-    (): ErrorBarsSettings => ({ dataKey: props.dataKey, direction: props.direction }),
-    (settings) => {
-      if (store == null || graphicalItemId == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.errorBars.addErrorBar({ itemId: graphicalItemId, errorBar: settings });
-      } else if (prev !== settings) {
-        store.actions.errorBars.replaceErrorBar({ itemId: graphicalItemId, prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev != null && store != null && graphicalItemId != null) {
-      store.actions.errorBars.removeErrorBar({ itemId: graphicalItemId, errorBar: prev });
-      prev = null;
-    }
-  });
+  if (store != null && graphicalItemId != null) {
+    registerInStore<ErrorBarsSettings>(
+      () => ({ dataKey: props.dataKey, direction: props.direction }),
+      {
+        add: (next) =>
+          store.actions.errorBars.addErrorBar({ itemId: graphicalItemId, errorBar: next }),
+        replace: (prev, next) =>
+          store.actions.errorBars.replaceErrorBar({ itemId: graphicalItemId, prev, next }),
+        remove: (prev) =>
+          store.actions.errorBars.removeErrorBar({ itemId: graphicalItemId, errorBar: prev }),
+      },
+    );
+  }
 
   return null;
 }

package/src/context/PanoramaContext.tsx

@@ -2,12 +2,12 @@
 // Context-value-is-provider in Solid 2.0; default `null` (a real value) so
 // `useContext` returns it without throwing outside a provider.
 import { createContext, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 
 const PanoramaContext = createContext<boolean | null>(null);
 
 export const useIsPanorama = (): boolean => useContext(PanoramaContext) != null;
 
 export const PanoramaContextProvider = (props: { children: JSX.Element }): JSX.Element => (
-  <PanoramaContext value={true}>{props.children}</PanoramaContext>
+  <PanoramaContext.Provider value={true}>{props.children}</PanoramaContext.Provider>
 );

package/src/context/RegisterGraphicalItemId.tsx

@@ -8,7 +8,7 @@
 // Not yet adopted by <Line> (which currently generates its own id inline); this
 // is the shared primitive for graphical items (Line/Bar/Area/Scatter) to use.
 import { createContext, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useUniqueId } from "../util/useUniqueId";
 import { GraphicalItemId } from "../state/graphicalItemsSlice";
 
@@ -32,7 +32,9 @@ const GraphicalItemIdContext = createContext<GraphicalItemId | null>(null);
 export const RegisterGraphicalItemId = (props: IdSetter): JSX.Element => {
   const resolvedId = useUniqueId(`recharts-${props.type}`, props.id);
   return (
-    <GraphicalItemIdContext value={resolvedId}>{props.children(resolvedId)}</GraphicalItemIdContext>
+    <GraphicalItemIdContext.Provider value={resolvedId}>
+      {props.children(resolvedId)}
+    </GraphicalItemIdContext.Provider>
   );
 };
 

package/src/context/chartDataContext.tsx

@@ -1,15 +1,14 @@
 // Ported from recharts 3.8.1 src/context/chartDataContext.tsx (commit 7a23854).
 //
 // Solid deviations: `useAppDispatch` + action creators → `useAppStore()` + slice
-// actions (`store.actions.chartData.*`); `useEffect` → two-arg `createEffect`
-// (the cleanup is returned from the apply phase); selector hooks return
+// actions (`store.actions.chartData.*`); `useEffect` → `createEffect` + `onCleanup`;
+// selector hooks return
 // Accessors (since `useAppSelector` does). `SetComputedData` and the BrushStartEndIndex
 // type are kept local; the latter re-homes to brushUpdateContext when ported.
-import { createEffect, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createEffect, on, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
 import { ChartData } from "../state/chartDataSlice";
 import { useAppSelector, useAppStore } from "../state/hooks";
-import { unregisterCleanup } from "../state/unregisterOnCleanup";
 import { RechartsRootState } from "../state/store";
 import { useIsPanorama } from "./PanoramaContext";
 
@@ -25,17 +24,19 @@ export const ChartDataContextProvider = (props: {
   const isPanorama = useIsPanorama();
 
   createEffect(
-    () => props.chartData,
-    (chartData) => {
-      // Panorama mode reuses the main chart's data — don't overwrite it.
-      if (isPanorama) {
-        return undefined;
-      }
-      store?.actions.chartData.setChartData(chartData);
-      return unregisterCleanup(() => {
-        store?.actions.chartData.setChartData(undefined);
-      });
-    },
+    on(
+      () => props.chartData,
+      (chartData) => {
+        // Panorama mode reuses the main chart's data — don't overwrite it.
+        if (isPanorama) {
+          return undefined;
+        }
+        store?.actions.chartData.setChartData(chartData);
+        onCleanup(() => {
+          store?.actions.chartData.setChartData(undefined);
+        });
+      },
+    ),
   );
 
   return null;
@@ -45,13 +46,15 @@ export const SetComputedData = (props: { computedData: unknown }): JSX.Element =
   const store = useAppStore();
 
   createEffect(
-    () => props.computedData,
-    (computedData) => {
-      store?.actions.chartData.setComputedData(computedData);
-      return unregisterCleanup(() => {
-        store?.actions.chartData.setChartData(undefined);
-      });
-    },
+    on(
+      () => props.computedData,
+      (computedData) => {
+        store?.actions.chartData.setComputedData(computedData);
+        onCleanup(() => {
+          store?.actions.chartData.setChartData(undefined);
+        });
+      },
+    ),
   );
 
   return null;

package/src/context/chartLayoutContext.tsx

@@ -3,8 +3,8 @@
 // Solid deviations: selector hooks return Accessors (since `useAppSelector`
 // does); `useAppDispatch` + action creators → `useAppStore().actions` +
 // `createEffect`. Brush/responsive reads go through the current stubs.
-import { createEffect, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import {
   CartesianLayout,
   CartesianViewBoxRequired,
@@ -135,12 +135,14 @@ export const ReportChartSize = (props: {
     responsive && responsive.height > 0 ? responsive.height : props.height;
 
   createEffect(
-    () => ({ width: width(), height: height() }),
-    ({ width: w, height: h }) => {
-      if (!isPanorama && isPositiveNumber(w) && isPositiveNumber(h)) {
-        store?.actions.layout.setChartSize({ width: w, height: h });
-      }
-    },
+    on(
+      () => ({ width: width(), height: height() }),
+      ({ width: w, height: h }) => {
+        if (!isPanorama && isPositiveNumber(w) && isPositiveNumber(h)) {
+          store?.actions.layout.setChartSize({ width: w, height: h });
+        }
+      },
+    ),
   );
 
   return null;
@@ -149,10 +151,12 @@ export const ReportChartSize = (props: {
 export const ReportChartMargin = (props: { margin: Partial<Margin> }): JSX.Element => {
   const store = useAppStore();
   createEffect(
-    () => props.margin,
-    (margin) => {
-      store?.actions.layout.setMargin(margin);
-    },
+    on(
+      () => props.margin,
+      (margin) => {
+        store?.actions.layout.setMargin(margin);
+      },
+    ),
   );
   return null;
 };

package/src/polar/Pie.tsx

@@ -31,8 +31,8 @@
 // recharts (the empty/hidden root Layer stays inline, mounting no portal).
 // DEFERRED: `maxRadius`/`cornerRadius` rounding edge cases, float-precise per-frame
 // animation angle matrices.
-import { createEffect, createMemo, For, merge, Show, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, untrack, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
 import {
@@ -81,7 +81,7 @@ import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { getMaxRadius, polarToCartesian } from "../util/PolarUtils";
 import { getPercentValue, interpolate, isNumber, isNumOrStr, mathSign } from "../util/DataUtils";
 import { getValueByDataKey } from "../util/ChartUtils";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export type PieCoordinate = {
   cx: number;
@@ -580,56 +580,44 @@ export function Pie<DataPointType = Record<string, unknown>, DataValueType = unk
   props: PieProps<DataPointType, DataValueType>,
 ): JSX.Element {
   const store = useAppStore();
-  const merged = merge(pieDefaultProps, props);
+  const merged = mergeProps(pieDefaultProps, props);
   const id = useUniqueId("recharts-pie", props.id);
 
-  let prev: PieSettings | null = null;
-
-  createEffect(
-    (): PieSettings => ({
-      id,
-      type: "pie",
-      data: merged.data,
-      dataKey: merged.dataKey,
-      hide: merged.hide,
-      angleAxisId: merged.angleAxisId ?? 0,
-      radiusAxisId: merged.radiusAxisId ?? 0,
-      name: merged.name,
-      nameKey: merged.nameKey,
-      tooltipType: merged.tooltipType,
-      legendType: merged.legendType,
-      fill: merged.fill,
-      stroke: merged.stroke,
-      cx: merged.cx,
-      cy: merged.cy,
-      startAngle: merged.startAngle,
-      endAngle: merged.endAngle,
-      paddingAngle: merged.paddingAngle,
-      minAngle: merged.minAngle,
-      innerRadius: merged.innerRadius,
-      outerRadius: merged.outerRadius,
-      cornerRadius: merged.cornerRadius,
-      maxRadius: merged.maxRadius,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<PieSettings>(
+      () => ({
+        id,
+        type: "pie",
+        data: merged.data,
+        dataKey: merged.dataKey,
+        hide: merged.hide,
+        angleAxisId: merged.angleAxisId ?? 0,
+        radiusAxisId: merged.radiusAxisId ?? 0,
+        name: merged.name,
+        nameKey: merged.nameKey,
+        tooltipType: merged.tooltipType,
+        legendType: merged.legendType,
+        fill: merged.fill,
+        stroke: merged.stroke,
+        cx: merged.cx,
+        cy: merged.cy,
+        startAngle: merged.startAngle,
+        endAngle: merged.endAngle,
+        paddingAngle: merged.paddingAngle,
+        minAngle: merged.minAngle,
+        innerRadius: merged.innerRadius,
+        outerRadius: merged.outerRadius,
+        cornerRadius: merged.cornerRadius,
+        maxRadius: merged.maxRadius,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-slice <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);
@@ -715,18 +703,19 @@ export function Pie<DataPointType = Record<string, unknown>, DataValueType = unk
   // re-appears re-runs the ENTER animation from a collapsed state instead of resuming the
   // tween from the last visible (mid-progress) frame. Plain-ref write (no reactive graph).
   createEffect(
-    () => merged.hide || sectors() == null,
-    (shouldReset) => {
-      if (shouldReset) {
-        previousSectorsRef.current = null;
-      }
-    },
+    on(
+      () => merged.hide || sectors() == null,
+      (shouldReset) => {
+        if (shouldReset) {
+          previousSectorsRef.current = null;
+        }
+      },
+    ),
   );
   const polarLayout = usePolarChartLayout();
 
-  // Tracks animation in-progress (gates the labels). ownedWrite: handleAnimationEnd
-  // can fire from the driver's effect-cleanup when a mid-animation chart is disposed
-  // (route/soft navigation) — a legal teardown write.
+  // Tracks animation in-progress (gates the labels). handleAnimationEnd can fire
+  // from the driver's cleanup when a mid-animation chart is disposed.
   const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
     () => props.onAnimationStart?.(),
     () => props.onAnimationEnd?.(),

package/src/polar/PolarAngleAxis.tsx

@@ -17,8 +17,8 @@
 // evaluated element to inject computed x/y/payload — use the function form
 // instead). NOTE: the reference PolarAngleAxis renders no axis `label` title
 // either (only PolarRadiusAxis does) — no gap there.
-import { createEffect, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
@@ -48,7 +48,7 @@ import { useIsPanorama } from "../context/PanoramaContext";
 import { usePolarChartLayout } from "../context/chartLayoutContext";
 import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 
@@ -331,57 +331,48 @@ export function PolarAngleAxis<DataPointType = unknown, DataValueType = unknown>
 ): JSX.Element {
   const store = useAppStore();
   const layout = usePolarChartLayout();
-  const merged = merge(polarAngleAxisDefaultProps, props);
+  const merged = mergeProps(polarAngleAxisDefaultProps, props);
   const isPanorama = useIsPanorama();
 
-  let prev: AngleAxisSettings | null = null;
-
-  createEffect(
-    (): AngleAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(layout(), "angleAxis", merged.type);
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: merged.angleAxisId,
-        scale: merged.scale,
-        type: evaluatedType,
-        dataKey: merged.dataKey,
-        unit: undefined,
-        name: merged.name,
-        // Ignored on purpose: axis calc behaves as if false (recharts note).
-        allowDuplicatedCategory: false,
-        allowDataOverflow: false,
-        reversed: merged.reversed,
-        includeHidden: false,
-        domain: merged.domain,
-        allowDecimals: merged.allowDecimals,
-        tickCount: merged.tickCount,
-        ticks: merged.ticks,
-        // DEVIATION: the settings slice shares the cartesian tick renderer type,
-        // so a polar function-form renderer is recorded as `true` (presence only —
-        // the renderer itself stays local to this component's render; no selector
-        // reads the function back out of the store).
-        tick: typeof merged.tick === "function" ? true : merged.tick,
-        niceTicks: merged.niceTicks,
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      // addAngleAxis overwrites by id, so it doubles as replace-on-change.
-      store.actions.polarAxis.addAngleAxis(settings);
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.polarAxis.removeAngleAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<AngleAxisSettings>(
+      (): AngleAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(layout(), "angleAxis", merged.type);
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: merged.angleAxisId,
+          scale: merged.scale,
+          type: evaluatedType,
+          dataKey: merged.dataKey,
+          unit: undefined,
+          name: merged.name,
+          // Ignored on purpose: axis calc behaves as if false (recharts note).
+          allowDuplicatedCategory: false,
+          allowDataOverflow: false,
+          reversed: merged.reversed,
+          includeHidden: false,
+          domain: merged.domain,
+          allowDecimals: merged.allowDecimals,
+          tickCount: merged.tickCount,
+          ticks: merged.ticks,
+          // DEVIATION: the settings slice shares the cartesian tick renderer type,
+          // so a polar function-form renderer is recorded as `true` (presence only —
+          // the renderer itself stays local to this component's render; no selector
+          // reads the function back out of the store).
+          tick: typeof merged.tick === "function" ? true : merged.tick,
+          niceTicks: merged.niceTicks,
+        };
+      },
+      {
+        // addAngleAxis overwrites by id, so it doubles as replace-on-change.
+        add: (next) => store.actions.polarAxis.addAngleAxis(next),
+        replace: (_prev, next) => store.actions.polarAxis.addAngleAxis(next),
+        remove: (prev) => store.actions.polarAxis.removeAngleAxis(prev),
+      },
+    );
+  }
 
   const viewBox = useAppSelector(selectPolarViewBox);
   const scale = useAppSelector((state) =>

package/src/polar/PolarGrid.tsx

@@ -10,8 +10,8 @@
 // default DefaultZIndexes.grid). DEFERRED (documented): background fill rect (fill
 // defaults to "none"), generic SVG-prop passthrough beyond
 // stroke/strokeWidth/strokeDasharray.
-import { For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector } from "../state/hooks";
 import { AxisId } from "../state/cartesianAxisSlice";
 import { selectPolarGridAngles, selectPolarGridRadii } from "../state/selectors/polarGridSelectors";
@@ -107,7 +107,7 @@ const ConcentricRing = (
     fallback={
       <path
         {...concentricPolygonAttrs(props.cx, props.cy)}
-        class={["recharts-polar-grid-concentric-polygon", props.class]}
+        class={["recharts-polar-grid-concentric-polygon", props.class].filter(Boolean).join(" ")}
         fill={props.fill ?? "none"}
         fill-opacity={props.fillOpacity}
         stroke={props.stroke}
@@ -118,7 +118,7 @@ const ConcentricRing = (
     }
   >
     <circle
-      class={["recharts-polar-grid-concentric-circle", props.class]}
+      class={["recharts-polar-grid-concentric-circle", props.class].filter(Boolean).join(" ")}
       fill={props.fill ?? "none"}
       fill-opacity={props.fillOpacity}
       stroke={props.stroke}
@@ -155,7 +155,7 @@ const RadialLine = (
 };
 
 export const PolarGrid = (props: PolarGridProps): JSX.Element => {
-  const merged = merge(polarGridDefaultProps, props);
+  const merged = mergeProps(polarGridDefaultProps, props);
   const polarViewBox = useAppSelector(selectPolarViewBox);
   const anglesFromStore = useAppSelector((state) =>
     selectPolarGridAngles(state, merged.angleAxisId),