solid-recharts 1.0.0 → 2.0.0-beta.1

package/src/component/Legend.tsx

@@ -6,9 +6,8 @@
 // supported), onBBoxUpdate, React.memo. Solid deviations: createPortal →
 // `<Portal mount>`; useLayoutEffect dispatches → createEffect; hooks return
 // accessors; `className`→`class`, React CSSProperties → JSX.CSSProperties.
-import { createMemo, Show, mergeProps, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
-import { DirectPortal } from "../util/DirectPortal";
+import { createEffect, createMemo, merge, Show } from "solid-js";
+import { JSX, Portal } from "@solidjs/web";
 import {
   ContentType,
   DefaultLegendContent,
@@ -128,7 +127,7 @@ function getDefaultPosition(
 }
 
 export const Legend = (props: LegendProps): JSX.Element => {
-  const merged = mergeProps(legendDefaultProps, props);
+  const merged = merge(legendDefaultProps, props);
   const store = useAppStore();
   const contextPayload = useLegendPayload();
   const legendPortalFromContext = useLegendPortal();
@@ -139,30 +138,26 @@ export const Legend = (props: LegendProps): JSX.Element => {
 
   // Push the legend settings into the store (drives the offset's legend space).
   createEffect(
-    on(
-      () => ({
-        align: merged.align,
-        layout: merged.layout,
-        verticalAlign: merged.verticalAlign,
-        itemSorter: merged.itemSorter,
-      }),
-      (settings) => {
-        store?.actions.legend.setLegendSettings(settings);
-      },
-    ),
+    () => ({
+      align: merged.align,
+      layout: merged.layout,
+      verticalAlign: merged.verticalAlign,
+      itemSorter: merged.itemSorter,
+    }),
+    (settings) => {
+      store?.actions.legend.setLegendSettings(settings);
+    },
   );
 
   // Report the measured size; reset to 0 on cleanup. (When a portal is supplied
   // from props, nothing needs the size, matching recharts.)
   createEffect(
-    on(
-      () => ({ width: lastBoundingBox().width, height: lastBoundingBox().height }),
-      (size) => {
-        if (props.portal == null) {
-          store?.actions.legend.setLegendSize(size);
-        }
-      },
-    ),
+    () => ({ width: lastBoundingBox().width, height: lastBoundingBox().height }),
+    (size) => {
+      if (props.portal == null) {
+        store?.actions.legend.setLegendSize(size);
+      }
+    },
   );
 
   const portal = (): HTMLElement | null => props.portal ?? legendPortalFromContext();
@@ -172,7 +167,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
   );
 
   // Props handed to a function-form `content`. Built as a plain object (spreading
-  // the Solid `mergeProps()` proxy leaks a MERGE_SOURCE symbol and doesn't materialize
+  // the Solid `merge()` proxy leaks a MERGE_SOURCE symbol and doesn't materialize
   // keys); reads finalPayload()/chart dims so the enclosing reactive insert re-runs
   // when the payload populates.
   const buildContentProps = (): LegendContentProps => {
@@ -247,7 +242,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
       }
     >
       {(mount) => (
-        <DirectPortal mount={mount()}>
+        <Portal mount={mount()}>
           <div class="recharts-legend-wrapper" style={outerStyle()} ref={updateBoundingBox}>
             <Show
               when={typeof merged.content === "function" ? merged.content : null}
@@ -271,7 +266,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
               {(contentFn) => <>{contentFn()(buildContentProps())}</>}
             </Show>
           </div>
-        </DirectPortal>
+        </Portal>
       )}
     </Show>
   );

package/src/component/ResponsiveContainer.tsx

@@ -3,19 +3,18 @@
 // prop, and two-arg createEffect. Prop deviation: className -> class.
 import {
   Accessor,
-  batch,
   createContext,
+  createEffect,
   createMemo,
   createSignal,
+  flush,
+  omit,
   onCleanup,
-  onMount,
+  onSettled,
   untrack,
   useContext,
-  splitProps,
-  createEffect,
-  on,
 } from "solid-js";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   calculateChartDimensions,
   defaultResponsiveContainerProps,
@@ -94,9 +93,9 @@ function ResponsiveContainerContextProvider(props: {
   });
 
   return (
-    <ResponsiveContainerContext.Provider value={size}>
+    <ResponsiveContainerContext value={size}>
       {size() == null ? null : props.children}
-    </ResponsiveContainerContext.Provider>
+    </ResponsiveContainerContext>
   );
 }
 
@@ -182,7 +181,8 @@ function SizeDetectorContainer(props: Props): JSX.Element {
   // forwarded onto the wrapper div, mirroring recharts' `{...others}` spread.
   // We omit every prop this component consumes itself so they don't leak onto
   // the DOM. (`omit` keeps the rest reactive — no destructuring.)
-  const others = splitProps(props, [
+  const others = omit(
+    props,
     "aspect",
     "width",
     "height",
@@ -198,7 +198,7 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     "onResize",
     "ref",
     "data-testid",
-  ])[1];
+  );
   const initialDimension = (): { width: number; height: number } =>
     props.initialDimension ?? defaultResponsiveContainerProps.initialDimension;
   const width = (): Percent | number | undefined => props.width;
@@ -217,14 +217,13 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     if (untrack(containerWidth) === roundedWidth && untrack(containerHeight) === roundedHeight) {
       return;
     }
-    batch(() => {
-      setContainerWidth(roundedWidth);
-      setContainerHeight(roundedHeight);
-    });
+    setContainerWidth(roundedWidth);
+    setContainerHeight(roundedHeight);
   };
 
   const setContainerSize = (newWidth: number, newHeight: number): void => {
     writeContainerSize(newWidth, newHeight);
+    flush();
   };
 
   let containerEl: HTMLDivElement | undefined;
@@ -241,8 +240,10 @@ function SizeDetectorContainer(props: Props): JSX.Element {
   // i.e. AFTER the committed DOM is laid out. The ref callback runs at element
   // creation (possibly before insertion/layout), where getBoundingClientRect()
   // returns 0x0 and a bogus "width(0) and height(0)" warning fires on every
-  // mount. Measure after insertion in onMount.
-  onMount(() => {
+  // mount. `onSettled` is the post-layout equivalent. The initial measure must
+  // not flush (onSettled is a leaf scope); the write propagates at the next
+  // flush boundary, matching React's setState-in-effect timing.
+  onSettled(() => {
     const el = containerEl;
     if (el == null || typeof ResizeObserver === "undefined") {
       return;
@@ -291,53 +292,49 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     ]);
 
   createEffect(
-    on(
-      () => props.aspect,
-      (aspect) => {
-        warn(!aspect || aspect > 0, "The aspect(%s) must be greater than zero.", aspect);
-      },
-    ),
+    () => props.aspect,
+    (aspect) => {
+      warn(!aspect || aspect > 0, "The aspect(%s) must be greater than zero.", aspect);
+    },
   );
 
   createEffect(
-    on(
-      () => ({
-        containerWidth: containerWidth(),
-        containerHeight: containerHeight(),
-        calculatedWidth: calculated().calculatedWidth,
-        calculatedHeight: calculated().calculatedHeight,
-        width: width(),
-        height: height(),
-        minWidth: minWidth(),
-        minHeight: props.minHeight,
-        aspect: props.aspect,
-      }),
-      (value) => {
-        warn(
-          value.containerWidth < 0 ||
-            value.containerHeight < 0 ||
-            (value.calculatedWidth != null && value.calculatedWidth > 0) ||
-            (value.calculatedHeight != null && value.calculatedHeight > 0),
-          `The width(%s) and height(%s) of chart should be greater than 0,
+    () => ({
+      containerWidth: containerWidth(),
+      containerHeight: containerHeight(),
+      calculatedWidth: calculated().calculatedWidth,
+      calculatedHeight: calculated().calculatedHeight,
+      width: width(),
+      height: height(),
+      minWidth: minWidth(),
+      minHeight: props.minHeight,
+      aspect: props.aspect,
+    }),
+    (value) => {
+      warn(
+        value.containerWidth < 0 ||
+          value.containerHeight < 0 ||
+          (value.calculatedWidth != null && value.calculatedWidth > 0) ||
+          (value.calculatedHeight != null && value.calculatedHeight > 0),
+        `The width(%s) and height(%s) of chart should be greater than 0,
        please check the style of container, or the props width(%s) and height(%s),
        or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the
        height and width.`,
-          value.calculatedWidth,
-          value.calculatedHeight,
-          value.width,
-          value.height,
-          value.minWidth,
-          value.minHeight,
-          value.aspect,
-        );
-      },
-    ),
+        value.calculatedWidth,
+        value.calculatedHeight,
+        value.width,
+        value.height,
+        value.minWidth,
+        value.minHeight,
+        value.aspect,
+      );
+    },
   );
 
   return (
     <div
       id={props.id ? `${props.id}` : undefined}
-      class={["recharts-responsive-container", props.class].filter(Boolean).join(" ")}
+      class={["recharts-responsive-container", props.class]}
       style={wrapperStyle()}
       ref={setRef}
       data-testid={props["data-testid"]}

package/src/component/Text.tsx

@@ -8,8 +8,8 @@
 // SVG passthrough props go through svgPropertiesAndEvents like the shape ports;
 // `React.ReactNode` children → `RenderableText`.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, For, Show, mergeProps, splitProps } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, For, merge, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Properties as CSSProperties } from "csstype";
 import { isNullish, isNumber, isNumOrStr } from "../util/DataUtils";
 import { Global } from "../util/Global";
@@ -314,7 +314,7 @@ const HANDLED_KEYS = [
 ] as const;
 
 export const Text = (props: Props): JSX.Element => {
-  const merged = mergeProps(textDefaultProps, props);
+  const merged = merge(textDefaultProps, props);
 
   const wordsByLines = createMemo<ReadonlyArray<Words>>(() =>
     getWordsByLines({
@@ -383,7 +383,7 @@ export const Text = (props: Props): JSX.Element => {
 
     // Pass-through SVG props (everything except the handled keys); the computed
     // transform is applied as its own attribute on the <text> below.
-    const rest = splitProps(merged, [...HANDLED_KEYS])[1];
+    const rest = omit(merged, ...HANDLED_KEYS);
 
     const textProps: Record<string, unknown> = {
       ...rest,
@@ -418,7 +418,7 @@ export const Text = (props: Props): JSX.Element => {
           x={g().x}
           y={g().y}
           transform={g().transform}
-          class={["recharts-text", g().class].filter(Boolean).join(" ")}
+          class={["recharts-text", g().class]}
           text-anchor={g().textAnchor}
           fill={g().fill}
         >

package/src/component/Tooltip.tsx

@@ -9,9 +9,8 @@
 // createEffect; React `createPortal` → `<Portal mount>`; selectors are read via
 // useAppSelector accessors; `useElementOffset`'s dependency array is a no-op in
 // the Solid port (the ResizeObserver tracks the node directly).
-import { createMemo, Show, mergeProps, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
-import { DirectPortal } from "../util/DirectPortal";
+import { createEffect, createMemo, merge, Show } from "solid-js";
+import { JSX, Portal } from "@solidjs/web";
 import {
   DefaultTooltipContent,
   Formatter,
@@ -149,7 +148,7 @@ function renderContent(content: ContentType | undefined, props: TooltipContentPr
  * interaction or, before any interaction, from `defaultIndex`.
  */
 export const Tooltip = (props: TooltipProps): JSX.Element => {
-  const merged = mergeProps(defaultTooltipProps, props);
+  const merged = merge(defaultTooltipProps, props);
   const store = useAppStore();
   const viewBox = useViewBox();
   const accessibilityLayer = useAccessibilityLayer();
@@ -159,7 +158,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
   const defaultIndexAsString = (): TooltipIndex | undefined =>
     typeof merged.defaultIndex === "number" ? String(merged.defaultIndex) : merged.defaultIndex;
 
-  // mergeProps() keeps an explicit `trigger={undefined}` as undefined (unlike React's
+  // merge() keeps an explicit `trigger={undefined}` as undefined (unlike React's
   // resolveDefaultProps, which would apply the default). The interaction selectors
   // gate on `trigger === "hover"`, so resolve the default explicitly.
   const resolvedTrigger = (): TooltipTrigger => merged.trigger ?? defaultTooltipProps.trigger;
@@ -167,18 +166,16 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
   // Push the Tooltip's settings into the store so the interaction selectors can
   // read shared/trigger/axisId/active/defaultIndex.
   createEffect(
-    on(
-      () => ({
-        shared: merged.shared,
-        trigger: resolvedTrigger(),
-        axisId: merged.axisId,
-        active: merged.active,
-        defaultIndex: defaultIndexAsString(),
-      }),
-      (settings) => {
-        store?.actions.tooltip.setTooltipSettingsState(settings);
-      },
-    ),
+    () => ({
+      shared: merged.shared,
+      trigger: resolvedTrigger(),
+      axisId: merged.axisId,
+      active: merged.active,
+      defaultIndex: defaultIndexAsString(),
+    }),
+    (settings) => {
+      store?.actions.tooltip.setTooltipSettingsState(settings);
+    },
   );
 
   const tooltipEventType = useAppSelector((state) => selectTooltipEventType(state, merged.shared));
@@ -247,7 +244,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
       </Show>
       <Show when={viewBox() && tooltipEventType() && portal()}>
         {(mount) => {
-          // Built as a plain object (spreading the Solid mergeProps() proxy leaks a
+          // Built as a plain object (spreading the Solid merge() proxy leaks a
           // MERGE_SOURCE symbol into the bag handed to a function-form `content`).
           const contentProps = (): TooltipContentProps => ({
             accessibilityLayer: accessibilityLayer(),
@@ -265,7 +262,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
             formatter: merged.formatter,
             includeHidden: merged.includeHidden,
             isAnimationActive: merged.isAnimationActive,
-            // mergeProps() leaves explicit `undefined`; React defaultProps would still apply defaults.
+            // merge() leaves explicit `undefined`; React defaultProps would still apply defaults.
             itemSorter: props.itemSorter ?? defaultTooltipProps.itemSorter,
             itemStyle: merged.itemStyle,
             label: finalLabel(),
@@ -282,7 +279,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
             wrapperStyle: merged.wrapperStyle,
           });
           return (
-            <DirectPortal mount={mount()}>
+            <Portal mount={mount()}>
               <TooltipBoundingBox
                 allowEscapeViewBox={merged.allowEscapeViewBox}
                 animationDuration={merged.animationDuration}
@@ -303,7 +300,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
               >
                 {renderContent(merged.content, contentProps())}
               </TooltipBoundingBox>
-            </DirectPortal>
+            </Portal>
           );
         }}
       </Show>

package/src/component/TooltipBoundingBox.tsx

@@ -1,14 +1,14 @@
 // Ported from recharts 3.8.1 src/component/TooltipBoundingBox.tsx (commit 7a23854).
 //
 // Deviations: React.useState → createSignal; the keydown (Escape-to-dismiss)
-// listener moves from useEffect to onMount (single listener; the handler reads
+// listener moves from useEffect to onSettled (single listener; the handler reads
 // the live props.coordinate at event time); the "reset dismissed when the
 // coordinate moves" inline setState becomes a createEffect; `React.memo` dropped
 // (Solid is fine-grained); `className`→`class`, `tabIndex`→`tabindex`, React
 // CSSProperties → JSX.CSSProperties (kebab keys); the `xmlns` attribute is dropped
 // (the tooltip renders into an HTML portal div, not inside the SVG).
-import { createSignal, onCleanup, onMount, createEffect, on } from "solid-js";
-import type { JSX } from "solid-js";
+import { createEffect, createSignal, onSettled } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   AllowInDimension,
   AnimationDuration,
@@ -77,33 +77,31 @@ export const TooltipBoundingBox = (props: TooltipBoundingBoxProps): JSX.Element
     y: props.coordinate?.y ?? 0,
   });
 
-  onMount(() => {
+  onSettled(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setState({ dismissed: true, dismissedAtCoordinate: coordinate() });
       }
     };
     document.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => {
+    return () => {
       document.removeEventListener("keydown", handleKeyDown);
-    });
+    };
   });
 
   // Re-show after dismissal once the coordinate moves to a new spot. Both the
   // coordinate and the dismiss state are read in the compute (a tracking scope);
   // the apply only writes, so no untracked read fires.
   createEffect(
-    on(
-      () => ({ coord: coordinate(), st: state() }),
-      ({ coord, st }) => {
-        if (
-          st.dismissed &&
-          (coord.x !== st.dismissedAtCoordinate.x || coord.y !== st.dismissedAtCoordinate.y)
-        ) {
-          setState({ ...st, dismissed: false });
-        }
-      },
-    ),
+    () => ({ coord: coordinate(), st: state() }),
+    ({ coord, st }) => {
+      if (
+        st.dismissed &&
+        (coord.x !== st.dismissedAtCoordinate.x || coord.y !== st.dismissedAtCoordinate.y)
+      ) {
+        setState({ ...st, dismissed: false });
+      }
+    },
   );
 
   const translate = (): { cssProperties: JSX.CSSProperties; cssClasses: string } =>
@@ -147,7 +145,7 @@ export const TooltipBoundingBox = (props: TooltipBoundingBoxProps): JSX.Element
   };
 
   return (
-    <div tabIndex={-1} class={translate().cssClasses} style={outerStyle()} ref={props.innerRef}>
+    <div tabindex={-1} class={translate().cssClasses} style={outerStyle()} ref={props.innerRef}>
       {props.children}
     </div>
   );

package/src/component/responsiveContainerUtils.ts

@@ -2,7 +2,7 @@
 // Deviations: `CSSProperties` from csstype (camelCase, matching React's), and the
 // `satisfies Partial<Props>` on the defaults is dropped (the ResponsiveContainer
 // component is deferred) — kept as `as const`.
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { isPercent } from "../util/DataUtils";
 import type { Percent } from "../util/types";
 

package/src/container/ClipPathProvider.tsx

@@ -4,7 +4,7 @@
 // once); `return null` when no plot area → keyed `<Show>`; context-value-is-
 // provider; default `null` (not undefined, which would make `useContext` throw).
 import { createContext, useContext, Show } from "solid-js";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { uniqueId } from "../util/DataUtils";
 import { usePlotArea } from "../hooks";
 
@@ -24,14 +24,14 @@ export const ClipPathProvider = (props: { children: JSX.Element }): JSX.Element
   return (
     <Show when={plotArea()}>
       {(area) => (
-        <ClipPathIdContext.Provider value={clipPathId}>
+        <ClipPathIdContext value={clipPathId}>
           <defs>
             <clipPath id={clipPathId}>
               <rect x={area().x} y={area().y} height={area().height} width={area().width} />
             </clipPath>
           </defs>
           {props.children}
-        </ClipPathIdContext.Provider>
+        </ClipPathIdContext>
       )}
     </Show>
   );

package/src/container/Layer.tsx

@@ -1,9 +1,9 @@
-import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/container/Layer.tsx (commit 7a23854).
 // Solid deviations: `className` → `class` (Omit the wide SVG `class`); `clsx` →
-// `class={[...].filter(Boolean).join(" ")}`; `forwardRef` → `ref` prop; no destructuring (omit + props).
+// `class={[...]}`; `forwardRef` → `ref` prop; no destructuring (omit + props).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
 
 interface LayerOwnProps {
@@ -28,8 +28,8 @@ export type LayerProps = Omit<
 export const Layer = (props: LayerProps): JSX.Element => {
   return (
     <g
-      class={["recharts-layer", props.class].filter(Boolean).join(" ")}
-      {...svgPropertiesAndEvents({ ...splitProps(props, ["class", "children", "ref"])[1] })}
+      class={["recharts-layer", props.class]}
+      {...svgPropertiesAndEvents({ ...omit(props, "class", "children", "ref") })}
       ref={props.ref}
     >
       {props.children}

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 "solid-js";
+import type { JSX } from "@solidjs/web";
 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 type { JSX } from "solid-js";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
 export interface CartesianViewBox {
   x?: number;
@@ -37,7 +37,8 @@ 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 = splitProps(props, [
+  const rest = omit(
+    props,
     "children",
     "width",
     "height",
@@ -47,14 +48,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].filter(Boolean).join(" ")}
+      class={["recharts-surface", props.class]}
       width={props.width}
       height={props.height}
       style={props.style}

package/src/context/ErrorBarContext.tsx

@@ -9,7 +9,7 @@
 // cleanup remove → createEffect + onCleanup. useGraphicalItemId provides the id.
 import { createContext, useContext } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { AxisId } from "../state/cartesianAxisSlice";
 import type { ErrorBarDataPointFormatter } from "../cartesian/ErrorBar";
 import type { ErrorBarsSettings } from "../state/errorBarSlice";
@@ -45,7 +45,7 @@ export function SetErrorBarContext(
     dataPointFormatter: props.dataPointFormatter,
     errorBarOffset: props.errorBarOffset,
   });
-  return <ErrorBarContext.Provider value={value}>{props.children}</ErrorBarContext.Provider>;
+  return <ErrorBarContext value={value}>{props.children}</ErrorBarContext>;
 }
 
 export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useContext(ErrorBarContext);

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 "solid-js";
+import type { JSX } from "@solidjs/web";
 
 const PanoramaContext = createContext<boolean | null>(null);
 
 export const useIsPanorama = (): boolean => useContext(PanoramaContext) != null;
 
 export const PanoramaContextProvider = (props: { children: JSX.Element }): JSX.Element => (
-  <PanoramaContext.Provider value={true}>{props.children}</PanoramaContext.Provider>
+  <PanoramaContext value={true}>{props.children}</PanoramaContext>
 );

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 "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useUniqueId } from "../util/useUniqueId";
 import { GraphicalItemId } from "../state/graphicalItemsSlice";
 
@@ -32,9 +32,7 @@ const GraphicalItemIdContext = createContext<GraphicalItemId | null>(null);
 export const RegisterGraphicalItemId = (props: IdSetter): JSX.Element => {
   const resolvedId = useUniqueId(`recharts-${props.type}`, props.id);
   return (
-    <GraphicalItemIdContext.Provider value={resolvedId}>
-      {props.children(resolvedId)}
-    </GraphicalItemIdContext.Provider>
+    <GraphicalItemIdContext value={resolvedId}>{props.children(resolvedId)}</GraphicalItemIdContext>
   );
 };