solid-recharts 1.0.0 → 2.0.0-beta.1

package/src/synchronisation/useChartSynchronisation.tsx

@@ -10,10 +10,16 @@
 // (`syncRegistry.ts`, a plain synchronous bus) and Solid `createEffect`s.
 //
 // Reactivity notes (diagnostics-clean):
-//  - Each effect uses Solid 1's `createEffect(on(deps, effect))` form so only the
-//    explicit dependencies are tracked.
-//  - Listener store writes are synchronous under Solid 1.
-import { untrack, createEffect, on, onCleanup } from "solid-js";
+//  - Each effect uses the two-arg `createEffect(deps, effect)` form: the first
+//    function tracks the reactive inputs and returns them as a tuple, the second
+//    runs the side effect (subscribe/emit). Reads inside the side-effect callback
+//    are therefore not tracked, and we never write a *local* signal there — emits
+//    only call OTHER charts' batched store setters via the registry, which is the
+//    sanctioned cross-store write path (no SIGNAL_WRITE_IN_OWNED_SCOPE).
+//  - The listener calls `store.actions.tooltip.setSyncInteraction(...)` +
+//    `flush()` on the RECEIVING chart's store; that store is a different owner, so
+//    the write is not "in an owned computation" of the emitting effect.
+import { createEffect, flush, untrack } from "solid-js";
 import { useAppStore } from "../state/hooks";
 import {
   selectEventEmitter,
@@ -53,129 +59,134 @@ function useTooltipSyncEventsListener(store: RechartsStore): void {
   const viewBox = useViewBox();
 
   createEffect(
-    on(
-      () => {
-        const mySyncId = selectSyncId(store.state);
-        const myEventEmitter = selectEventEmitter(store.state);
-        const syncMethod = selectSyncMethod(store.state);
-        const tooltipTicks = selectTooltipAxisTicks(store.state);
-        const layout = selectChartLayout(store.state);
-        const box = viewBox();
-        return { mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box };
-      },
-      ({ mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box }) => {
-        if (mySyncId == null) {
-          // Not synchronised with any other chart — nothing to listen for.
+    () => {
+      const mySyncId = selectSyncId(store.state);
+      const myEventEmitter = selectEventEmitter(store.state);
+      const syncMethod = selectSyncMethod(store.state);
+      const tooltipTicks = selectTooltipAxisTicks(store.state);
+      const layout = selectChartLayout(store.state);
+      const box = viewBox();
+      return { mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box };
+    },
+    ({ mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box }) => {
+      if (mySyncId == null) {
+        // Not synchronised with any other chart — nothing to listen for.
+        return;
+      }
+
+      const listener = (
+        incomingSyncId: SyncId,
+        payload: TooltipSyncState,
+        emitter: symbol,
+      ): void => {
+        if (myEventEmitter === emitter) {
+          // Don't react to our own emissions.
+          return;
+        }
+        if (mySyncId !== incomingSyncId) {
+          // Not for this chart.
           return;
         }
 
-        const listener = (
-          incomingSyncId: SyncId,
-          payload: TooltipSyncState,
-          emitter: symbol,
-        ): void => {
-          if (myEventEmitter === emitter) {
-            // Don't react to our own emissions.
-            return;
-          }
-          if (mySyncId !== incomingSyncId) {
-            // Not for this chart.
-            return;
-          }
-
-          // Source deactivation (mouseLeave) clears state for ALL sync methods,
-          // including sourceViewBox so emission can resume.
-          if (payload.active === false) {
-            store.actions.tooltip.setSyncInteraction(inactiveSyncState);
-            return;
-          }
-
-          if (syncMethod === "index") {
-            if (box && payload.coordinate && payload.sourceViewBox) {
-              const { coordinate } = payload;
-              const { x, y } = coordinate;
-              const {
-                x: sourceX,
-                y: sourceY,
-                width: sourceWidth,
-                height: sourceHeight,
-              } = payload.sourceViewBox;
-              const scaledCoordinate: Coordinate = {
-                ...coordinate,
-                x: box.x + (sourceWidth ? (x - sourceX) / sourceWidth : 0) * box.width,
-                y: box.y + (sourceHeight ? (y - sourceY) / sourceHeight : 0) * box.height,
-              };
-              store.actions.tooltip.setSyncInteraction({
-                ...payload,
-                coordinate: scaledCoordinate,
-              });
-            } else {
-              store.actions.tooltip.setSyncInteraction(payload);
-            }
-            return;
-          }
-
-          if (tooltipTicks == null) {
-            // 'value'/function need ticks.
-            return;
-          }
+        // Source deactivation (mouseLeave) clears state for ALL sync methods,
+        // including sourceViewBox so emission can resume.
+        if (payload.active === false) {
+          store.actions.tooltip.setSyncInteraction(inactiveSyncState);
+          flush();
+          return;
+        }
 
-          let activeTick: TickItem | undefined;
-          if (typeof syncMethod === "function") {
-            const syncMethodParam: MouseHandlerDataParam = {
-              activeTooltipIndex: payload.index == null ? undefined : Number(payload.index),
-              isTooltipActive: payload.active,
-              activeIndex: payload.index == null ? undefined : Number(payload.index),
-              activeLabel: payload.label,
-              activeDataKey: payload.dataKey,
-              activeCoordinate: payload.coordinate,
+        if (syncMethod === "index") {
+          if (box && payload.coordinate && payload.sourceViewBox) {
+            const { coordinate } = payload;
+            const { x, y } = coordinate;
+            const {
+              x: sourceX,
+              y: sourceY,
+              width: sourceWidth,
+              height: sourceHeight,
+            } = payload.sourceViewBox;
+            const scaledCoordinate: Coordinate = {
+              ...coordinate,
+              x: box.x + (sourceWidth ? (x - sourceX) / sourceWidth : 0) * box.width,
+              y: box.y + (sourceHeight ? (y - sourceY) / sourceHeight : 0) * box.height,
             };
-            const activeTooltipIndex = syncMethod(tooltipTicks, syncMethodParam);
-            activeTick = tooltipTicks[activeTooltipIndex];
-          } else if (syncMethod === "value") {
-            activeTick = tooltipTicks.find((tick) => String(tick.value) === payload.label);
-          }
-
-          const { coordinate } = payload;
-          if (coordinate == null || box == null) {
-            store.actions.tooltip.setSyncInteraction(inactiveSyncState);
-            return;
-          }
-
-          if (activeTick == null) {
-            // No matching tick (sparse data): hide locally but KEEP sourceViewBox so
-            // the emission guard still sees us as "receiving" (no counter-cascade).
             store.actions.tooltip.setSyncInteraction({
-              ...inactiveSyncState,
-              sourceViewBox: payload.sourceViewBox,
+              ...payload,
+              coordinate: scaledCoordinate,
             });
-            return;
+          } else {
+            store.actions.tooltip.setSyncInteraction(payload);
           }
+          flush();
+          return;
+        }
+
+        if (tooltipTicks == null) {
+          // 'value'/function need ticks.
+          return;
+        }
 
-          const validateChartX = Math.min(coordinate.x, box.x + box.width);
-          const validateChartY = Math.min(coordinate.y, box.y + box.height);
-          const activeCoordinate: Coordinate = {
-            x: layout === "horizontal" ? activeTick.coordinate : validateChartX,
-            y: layout === "horizontal" ? validateChartY : activeTick.coordinate,
+        let activeTick: TickItem | undefined;
+        if (typeof syncMethod === "function") {
+          const syncMethodParam: MouseHandlerDataParam = {
+            activeTooltipIndex: payload.index == null ? undefined : Number(payload.index),
+            isTooltipActive: payload.active,
+            activeIndex: payload.index == null ? undefined : Number(payload.index),
+            activeLabel: payload.label,
+            activeDataKey: payload.dataKey,
+            activeCoordinate: payload.coordinate,
           };
+          const activeTooltipIndex = syncMethod(tooltipTicks, syncMethodParam);
+          activeTick = tooltipTicks[activeTooltipIndex];
+        } else if (syncMethod === "value") {
+          activeTick = tooltipTicks.find((tick) => String(tick.value) === payload.label);
+        }
+
+        const { coordinate } = payload;
+        if (coordinate == null || box == null) {
+          store.actions.tooltip.setSyncInteraction(inactiveSyncState);
+          flush();
+          return;
+        }
 
+        if (activeTick == null) {
+          // No matching tick (sparse data): hide locally but KEEP sourceViewBox so
+          // the emission guard still sees us as "receiving" (no counter-cascade).
           store.actions.tooltip.setSyncInteraction({
-            active: payload.active,
-            coordinate: activeCoordinate,
-            dataKey: payload.dataKey,
-            index: String(activeTick.index),
-            label: payload.label,
+            ...inactiveSyncState,
             sourceViewBox: payload.sourceViewBox,
-            graphicalItemId: payload.graphicalItemId,
           });
+          flush();
+          return;
+        }
+
+        const validateChartX = Math.min(coordinate.x, box.x + box.width);
+        const validateChartY = Math.min(coordinate.y, box.y + box.height);
+        const activeCoordinate: Coordinate = {
+          x: layout === "horizontal" ? activeTick.coordinate : validateChartX,
+          y: layout === "horizontal" ? validateChartY : activeTick.coordinate,
         };
 
-        syncEventCenter.on(TOOLTIP_SYNC_EVENT, listener);
-        onCleanup(() => {
-          syncEventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+        store.actions.tooltip.setSyncInteraction({
+          active: payload.active,
+          coordinate: activeCoordinate,
+          dataKey: payload.dataKey,
+          index: String(activeTick.index),
+          label: payload.label,
+          sourceViewBox: payload.sourceViewBox,
+          graphicalItemId: payload.graphicalItemId,
         });
-      },
-    ),
+        flush();
+      };
+
+      syncEventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+      // The effect (apply) callback is a leaf scope — return cleanup, don't call
+      // onCleanup (which would warn NO_OWNER_CLEANUP). Runs before the next apply.
+      return () => {
+        syncEventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+      };
+    },
   );
 }
 
@@ -185,34 +196,33 @@ function useTooltipSyncEventsListener(store: RechartsStore): void {
  */
 function useBrushSyncEventsListener(store: RechartsStore): void {
   createEffect(
-    on(
-      () => {
-        const mySyncId = selectSyncId(store.state);
-        const myEventEmitter = selectEventEmitter(store.state);
-        return { mySyncId, myEventEmitter };
-      },
-      ({ mySyncId, myEventEmitter }) => {
-        if (mySyncId == null) {
+    () => {
+      const mySyncId = selectSyncId(store.state);
+      const myEventEmitter = selectEventEmitter(store.state);
+      return { mySyncId, myEventEmitter };
+    },
+    ({ mySyncId, myEventEmitter }) => {
+      if (mySyncId == null) {
+        return;
+      }
+      const listener = (
+        incomingSyncId: SyncId,
+        payload: BrushStartEndIndex,
+        emitter: symbol,
+      ): void => {
+        if (myEventEmitter === emitter) {
           return;
         }
-        const listener = (
-          incomingSyncId: SyncId,
-          payload: BrushStartEndIndex,
-          emitter: symbol,
-        ): void => {
-          if (myEventEmitter === emitter) {
-            return;
-          }
-          if (mySyncId === incomingSyncId) {
-            store.actions.chartData.setDataStartEndIndexes(payload);
-          }
-        };
-        syncEventCenter.on(BRUSH_SYNC_EVENT, listener);
-        onCleanup(() => {
-          syncEventCenter.off(BRUSH_SYNC_EVENT, listener);
-        });
-      },
-    ),
+        if (mySyncId === incomingSyncId) {
+          store.actions.chartData.setDataStartEndIndexes(payload);
+          flush();
+        }
+      };
+      syncEventCenter.on(BRUSH_SYNC_EVENT, listener);
+      return () => {
+        syncEventCenter.off(BRUSH_SYNC_EVENT, listener);
+      };
+    },
   );
 }
 
@@ -232,10 +242,8 @@ export function useSynchronisedEventsFromOtherCharts(): void {
   // _SCOPE). Effects flush in creation order, so the symbol is set before the
   // emit effect (created later, in the Tooltip) first runs.
   createEffect(
-    on(
-      () => undefined,
-      () => store.actions.options.createEventEmitter(),
-    ),
+    () => undefined,
+    () => store.actions.options.createEventEmitter(),
   );
   useTooltipSyncEventsListener(store);
   useBrushSyncEventsListener(store);
@@ -277,54 +285,52 @@ export function useTooltipChartSynchronisation(
   let lastEmitted: string | undefined;
 
   createEffect(
-    on(
-      () => {
-        // Build the *plain* (snapshotted) payload in the COMPUTE phase, where store
-        // reads track and STRICT_READ_UNTRACKED doesn't apply. The apply phase then
-        // only emits — it never reads store proxies (which would warn).
-        const eventEmitterSymbol = selectEventEmitter(store.state);
-        const syncId = selectSyncId(store.state);
-        const tooltipState = store.state.tooltip.syncInteraction;
-        // sourceViewBox (not `active`) flags that we're currently RECEIVING sync.
-        const isReceivingSynchronisation = tooltipState.sourceViewBox != null;
+    () => {
+      // Build the *plain* (snapshotted) payload in the COMPUTE phase, where store
+      // reads track and STRICT_READ_UNTRACKED doesn't apply. The apply phase then
+      // only emits — it never reads store proxies (which would warn).
+      const eventEmitterSymbol = selectEventEmitter(store.state);
+      const syncId = selectSyncId(store.state);
+      const tooltipState = store.state.tooltip.syncInteraction;
+      // sourceViewBox (not `active`) flags that we're currently RECEIVING sync.
+      const isReceivingSynchronisation = tooltipState.sourceViewBox != null;
 
-        const box = viewBox();
-        const rawCoordinate = activeCoordinate();
-        const rawLabel = activeLabel();
-        const payload: TooltipSyncState = {
-          active: isTooltipActive(),
-          coordinate: rawCoordinate == null ? undefined : { ...rawCoordinate },
-          dataKey: selectTooltipDataKey(store.state, tooltipEventType(), trigger()),
-          index: activeIndex() ?? null,
-          label: typeof rawLabel === "number" ? String(rawLabel) : rawLabel,
-          sourceViewBox: box == null ? undefined : { ...box },
-          graphicalItemId: selectActiveTooltipGraphicalItemId(store.state),
-        };
-        return { eventEmitterSymbol, syncId, isReceivingSynchronisation, payload };
-      },
-      ({ eventEmitterSymbol, syncId, isReceivingSynchronisation, payload }) => {
-        if (isReceivingSynchronisation) {
-          // Receiving sync — don't echo events back out.
-          return;
-        }
-        if (syncId == null) {
-          // Not synchronised.
-          return;
-        }
-        if (eventEmitterSymbol == null) {
-          // Used outside a chart context — bail silently.
-          return;
-        }
-        // Dedupe identical consecutive emissions (see lastEmitted note above). The
-        // payload is already a plain snapshot, so stringifying it here is safe.
-        const fingerprint = JSON.stringify(payload);
-        if (fingerprint === lastEmitted) {
-          return;
-        }
-        lastEmitted = fingerprint;
-        syncEventCenter.emit(TOOLTIP_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
-      },
-    ),
+      const box = viewBox();
+      const rawCoordinate = activeCoordinate();
+      const rawLabel = activeLabel();
+      const payload: TooltipSyncState = {
+        active: isTooltipActive(),
+        coordinate: rawCoordinate == null ? undefined : { ...rawCoordinate },
+        dataKey: selectTooltipDataKey(store.state, tooltipEventType(), trigger()),
+        index: activeIndex() ?? null,
+        label: typeof rawLabel === "number" ? String(rawLabel) : rawLabel,
+        sourceViewBox: box == null ? undefined : { ...box },
+        graphicalItemId: selectActiveTooltipGraphicalItemId(store.state),
+      };
+      return { eventEmitterSymbol, syncId, isReceivingSynchronisation, payload };
+    },
+    ({ eventEmitterSymbol, syncId, isReceivingSynchronisation, payload }) => {
+      if (isReceivingSynchronisation) {
+        // Receiving sync — don't echo events back out.
+        return;
+      }
+      if (syncId == null) {
+        // Not synchronised.
+        return;
+      }
+      if (eventEmitterSymbol == null) {
+        // Used outside a chart context — bail silently.
+        return;
+      }
+      // Dedupe identical consecutive emissions (see lastEmitted note above). The
+      // payload is already a plain snapshot, so stringifying it here is safe.
+      const fingerprint = JSON.stringify(payload);
+      if (fingerprint === lastEmitted) {
+        return;
+      }
+      lastEmitted = fingerprint;
+      syncEventCenter.emit(TOOLTIP_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
+    },
   );
 }
 
@@ -338,31 +344,29 @@ export function useBrushChartSynchronisation(): void {
     return;
   }
   createEffect(
-    on(
-      () => {
-        const syncId = selectSyncId(store.state);
-        const eventEmitterSymbol = selectEventEmitter(store.state);
-        const brushStartIndex = store.state.chartData.dataStartIndex;
-        const brushEndIndex = store.state.chartData.dataEndIndex;
-        return { syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex };
-      },
-      ({ syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex }) => {
-        if (
-          syncId == null ||
-          brushStartIndex == null ||
-          brushEndIndex == null ||
-          eventEmitterSymbol == null
-        ) {
-          return;
-        }
-        const payload: BrushStartEndIndex = {
-          startIndex: brushStartIndex,
-          endIndex: brushEndIndex,
-        };
-        untrack(() => {
-          syncEventCenter.emit(BRUSH_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
-        });
-      },
-    ),
+    () => {
+      const syncId = selectSyncId(store.state);
+      const eventEmitterSymbol = selectEventEmitter(store.state);
+      const brushStartIndex = store.state.chartData.dataStartIndex;
+      const brushEndIndex = store.state.chartData.dataEndIndex;
+      return { syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex };
+    },
+    ({ syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex }) => {
+      if (
+        syncId == null ||
+        brushStartIndex == null ||
+        brushEndIndex == null ||
+        eventEmitterSymbol == null
+      ) {
+        return;
+      }
+      const payload: BrushStartEndIndex = {
+        startIndex: brushStartIndex,
+        endIndex: brushEndIndex,
+      };
+      untrack(() => {
+        syncEventCenter.emit(BRUSH_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
+      });
+    },
   );
 }

package/src/util/ActiveShapeUtils.tsx

@@ -7,8 +7,8 @@
 // includes the element constituent; the default shape is rendered via `<Dynamic>`.
 // `className`→`class`.
 import { Layer } from "../container/Layer";
-import type { JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import type { JSX } from "@solidjs/web";
+import { Dynamic } from "@solidjs/web";
 import { ActiveShape } from "./types";
 
 type ShapeRenderer<PropsType> = (props: PropsType) => JSX.Element;

package/src/util/BarUtils.tsx

@@ -2,8 +2,8 @@
 //
 // Exports `BarRectangle`/`defaultBarShape` for background bars and custom shapes;
 // `MinPointSize` + `minPointSizeCallback` for computeBarRectangles.
-import { createMemo, splitProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Rectangle, type RectangleProps } from "../shape/Rectangle";
 import type { BarShapeProps } from "../cartesian/Bar";
 import { Shape } from "./ActiveShapeUtils";
@@ -32,9 +32,7 @@ export function BarRectangle(props: BarRectangleProps): JSX.Element {
   // fails to exclude `option` and leaks it to custom shape/background functions.
   // Spreading into a plain object keeps the downstream <Shape> reads a static
   // snapshot (no STRICT_READ), while the memo re-runs when any prop changes.
-  const shapeProps = createMemo(
-    (): BarRectangleShapeProps => ({ ...splitProps(props, ["option"])[1] }),
-  );
+  const shapeProps = createMemo((): BarRectangleShapeProps => ({ ...omit(props, "option") }));
   return (
     <Shape<BarRectangleShapeProps, SVGPathElement>
       option={props.option}

package/src/util/FunnelUtils.tsx

@@ -8,7 +8,7 @@
 // function + object + boolean forms are supported, matching ActiveShapeUtils). The
 // `option` is typed as the wider `ActiveShape` the `<Shape>` helper accepts (the
 // `<Funnel>` `shape`/`activeShape` function-form props are assignable to it).
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Trapezoid } from "../shape/Trapezoid";
 import { Shape } from "./ActiveShapeUtils";
 import type { ActiveShape, ShapeAnimationProps } from "./types";

package/src/util/RadialBarUtils.tsx

@@ -1,8 +1,7 @@
-import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/util/RadialBarUtils.tsx (commit 7a23854).
 // Renders a RadialBar sector through the <Shape> abstraction (default = Sector).
-
-import type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { RadialBarDataItem, RadialBarProps } from "../polar/RadialBar";
 import { Sector } from "../shape/Sector";
 import { Shape } from "./ActiveShapeUtils";
@@ -30,7 +29,7 @@ export function RadialBarSector(props: RadialBarSectorComponentProps): JSX.Eleme
     <Shape<RadialBarSectorProps, SVGPathElement>
       option={props.option}
       DefaultShape={defaultRadialBarShape}
-      shapeProps={splitProps(props, ["option"])[1]}
+      shapeProps={omit(props, "option")}
     />
   );
 }

package/src/util/createCartesianCharts.tsx

@@ -3,7 +3,7 @@
 // binding wrapper spreads the user props then sets `layout` as a static
 // attribute LAST, so the bound layout wins over any passed value; the public
 // type omits `layout` so TS rejects it too.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { AreaChart as OriginalAreaChart } from "../chart/AreaChart";
 import { BarChart as OriginalBarChart } from "../chart/BarChart";
 import { LineChart as OriginalLineChart } from "../chart/LineChart";

package/src/util/createPolarCharts.tsx

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/util/createPolarCharts.tsx.
 // Solid-native: React.ComponentType → `(props) => JSX.Element`; layout binding
 // via `merge()`.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { RadialBarChart as OriginalRadialBarChart } from "../chart/RadialBarChart";
 import { RadarChart as OriginalRadarChart } from "../chart/RadarChart";
 import { PieChart as OriginalPieChart } from "../chart/PieChart";

package/src/util/svgPropertiesAndEvents.ts

@@ -5,7 +5,7 @@
 // is deferred until the Tier-2 "shape can be an element or a props object"
 // pattern lands (ActiveShapeUtils). Element inputs currently fall through to
 // `null`. React's `SVGProps`/`CSSProperties` types are replaced with JSX.*
-// from 'solid-js/web'.
+// from '@solidjs/web'.
 import { isEventKey } from "./excludeEventProps";
 import { isDataAttribute, isSvgElementPropKey, toSvgAttributeName } from "./svgPropertiesNoEvents";
 import { svgPropertiesNoEventsKeepCase } from "./svgPropertiesNoEvents";

package/src/util/tooltip/translate.ts

@@ -2,9 +2,9 @@
 // Pure functions — no JSX/components.
 // Deviations from reference:
 //   - `clsx` replaced with hand-rolled class concatenation (no clsx dep, no class strings)
-//   - `CSSProperties` from 'react' → `JSX.CSSProperties` from 'solid-js/web'
+//   - `CSSProperties` from 'react' → `JSX.CSSProperties` from '@solidjs/web'
 
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { isNumber } from "../DataUtils";
 import type { Coordinate, CartesianViewBox, AllowInDimension } from "../types";
 

package/src/util/types.ts

@@ -1,5 +1,5 @@
-import type { JSX } from "solid-js";
-type Element = JSX.Element;
+import type { JSX } from "@solidjs/web";
+import type { Element } from "solid-js";
 import type * as d3Scales from "d3-scale";
 import type { DotProps } from "../shape/Dot";
 import type { ExternalMouseEvents } from "../chart/types";