solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/zIndex/componentZIndex.spec.tsx

@@ -0,0 +1,255 @@
+// Solid-recharts spec: components expose a `zIndex` prop wired to the chart's
+// z-index portal system (ZIndexLayer). A custom zIndex relocates the element into
+// a dedicated `.recharts-zIndex-layer_<n>` portal. recharts supports these props
+// but does not unit-test them on these components.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import {
+  Area,
+  AreaChart,
+  ErrorBar,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { render } from "@solidjs/testing-library";
+
+const data = [
+  { name: "a", uv: 100 },
+  { name: "b", uv: 200 },
+  { name: "c", uv: 300 },
+];
+
+const radarData = [
+  { subject: "Math", v: 120 },
+  { subject: "Eng", v: 98 },
+  { subject: "Hist", v: 86 },
+];
+
+function portalContains(container: Element, zIndex: number, childSelector: string): boolean {
+  const portal = container.querySelector(`.recharts-zIndex-layer_${zIndex}`);
+  return portal != null && portal.querySelector(childSelector) != null;
+}
+
+describe("component zIndex prop", () => {
+  it("ReferenceLine relocates into the requested z-index portal", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" />
+        <ReferenceLine y={150} zIndex={1201} />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1201, ".recharts-reference-line")).toBe(true);
+  });
+
+  it("ReferenceDot relocates into the requested z-index portal", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" />
+        <ReferenceDot x="b" y={200} r={6} zIndex={1202} />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1202, ".recharts-reference-dot")).toBe(true);
+  });
+
+  it("ReferenceArea relocates into the requested z-index portal", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" />
+        <ReferenceArea x1="a" x2="c" y1={0} y2={300} zIndex={1203} />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1203, ".recharts-reference-area")).toBe(true);
+  });
+
+  it("ErrorBar relocates into the requested z-index portal", () => {
+    const errData = [
+      { name: "a", uv: 100, err: 10 },
+      { name: "b", uv: 200, err: 20 },
+      { name: "c", uv: 300, err: 30 },
+    ];
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={errData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv">
+          <ErrorBar dataKey="err" zIndex={1205} />
+        </Line>
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1205, ".recharts-errorBar")).toBe(true);
+  });
+
+  it("XAxis relocates into the requested z-index portal", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" zIndex={1206} />
+        <YAxis />
+        <Line dataKey="uv" />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1206, ".recharts-xAxis")).toBe(true);
+  });
+
+  it("PolarGrid relocates into the requested z-index portal", () => {
+    const { container } = render(() => (
+      <RadarChart width={300} height={300} data={radarData}>
+        <PolarGrid zIndex={1204} />
+        <Radar dataKey="v" />
+      </RadarChart>
+    ));
+    flush();
+    expect(portalContains(container, 1204, ".recharts-polar-grid")).toBe(true);
+  });
+});
+
+// The graphical items (Line/Area/Scatter/Pie/Radar/RadialBar) each wrap their whole
+// item Layer in <ZIndexLayer> with a non-zero DEFAULT (areas:100, bars:300, lines:400,
+// scatters:600 — Pie/Radar reuse area, RadialBar reuses bar), so a user `zIndex`
+// relayers the entire item into its portal (recharts parity). These assert both the
+// default portal placement AND a custom `zIndex` relocation.
+describe("graphical item zIndex relayering", () => {
+  it("Line renders in its default (400) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" isAnimationActive={false} />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 400, ".recharts-line")).toBe(true);
+
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" zIndex={1210} isAnimationActive={false} />
+      </LineChart>
+    ));
+    flush();
+    expect(portalContains(container, 1210, ".recharts-line")).toBe(true);
+  });
+
+  it("Area renders in its default (100) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <AreaChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Area dataKey="uv" isAnimationActive={false} />
+      </AreaChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 100, ".recharts-area")).toBe(true);
+
+    const { container } = render(() => (
+      <AreaChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Area dataKey="uv" zIndex={1211} isAnimationActive={false} />
+      </AreaChart>
+    ));
+    flush();
+    expect(portalContains(container, 1211, ".recharts-area")).toBe(true);
+  });
+
+  it("Scatter renders in its default (600) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <ScatterChart width={300} height={300}>
+        <XAxis dataKey="name" />
+        <YAxis dataKey="uv" />
+        <Scatter data={data} dataKey="uv" isAnimationActive={false} />
+      </ScatterChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 600, ".recharts-scatter")).toBe(true);
+
+    const { container } = render(() => (
+      <ScatterChart width={300} height={300}>
+        <XAxis dataKey="name" />
+        <YAxis dataKey="uv" />
+        <Scatter data={data} dataKey="uv" zIndex={1212} isAnimationActive={false} />
+      </ScatterChart>
+    ));
+    flush();
+    expect(portalContains(container, 1212, ".recharts-scatter")).toBe(true);
+  });
+
+  it("Pie renders in its default (100) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <PieChart width={300} height={300}>
+        <Pie data={data} dataKey="uv" isAnimationActive={false} />
+      </PieChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 100, ".recharts-pie")).toBe(true);
+
+    const { container } = render(() => (
+      <PieChart width={300} height={300}>
+        <Pie data={data} dataKey="uv" zIndex={1213} isAnimationActive={false} />
+      </PieChart>
+    ));
+    flush();
+    expect(portalContains(container, 1213, ".recharts-pie")).toBe(true);
+  });
+
+  it("Radar renders in its default (100) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <RadarChart width={300} height={300} data={radarData}>
+        <Radar dataKey="v" isAnimationActive={false} />
+      </RadarChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 100, ".recharts-radar")).toBe(true);
+
+    const { container } = render(() => (
+      <RadarChart width={300} height={300} data={radarData}>
+        <Radar dataKey="v" zIndex={1214} isAnimationActive={false} />
+      </RadarChart>
+    ));
+    flush();
+    expect(portalContains(container, 1214, ".recharts-radar")).toBe(true);
+  });
+
+  it("RadialBar renders in its default (300) portal and relocates on a custom zIndex", () => {
+    const { container: dflt } = render(() => (
+      <RadialBarChart width={300} height={300} data={data}>
+        <RadialBar dataKey="uv" isAnimationActive={false} />
+      </RadialBarChart>
+    ));
+    flush();
+    expect(portalContains(dflt, 300, ".recharts-radial-bar-sectors")).toBe(true);
+
+    const { container } = render(() => (
+      <RadialBarChart width={300} height={300} data={data}>
+        <RadialBar dataKey="uv" zIndex={1215} isAnimationActive={false} />
+      </RadialBarChart>
+    ));
+    flush();
+    expect(portalContains(container, 1215, ".recharts-radial-bar-sectors")).toBe(true);
+  });
+});

package/test/zIndex/getZIndexFromUnknown.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
+import { getZIndexFromUnknown } from "../../src/zIndex/getZIndexFromUnknown";
+
+describe("getZIndexFromUnknown", () => {
+  it.each([undefined, null, true, false, "invalid", 42, { fill: "#000" }] as const)(
+    "should return default zIndex when input is %p",
+    (input) => {
+      const randomNumber = Math.floor(Math.random() * 1000);
+      const result = getZIndexFromUnknown(input, randomNumber);
+      expect(result).toBe(randomNumber);
+    },
+  );
+
+  it("should return custom zIndex for object with numeric zIndex", () => {
+    const customZIndex = 999;
+    const result = getZIndexFromUnknown({ fill: "#000", zIndex: customZIndex }, 100);
+    expect(result).toBe(customZIndex);
+  });
+
+  it("should return custom zIndex of 0 when explicitly set", () => {
+    const randomNumber = Math.floor(Math.random() * 1000);
+    const result = getZIndexFromUnknown({ zIndex: randomNumber }, 100);
+    expect(result).toBe(randomNumber);
+  });
+
+  it.each([
+    "100",
+    null,
+    undefined,
+    NaN,
+    Infinity,
+    -Infinity,
+    () => {},
+    [],
+    Symbol.for("100"),
+  ] as const)("should return default zIndex for input={zIndex: %s}", (zIndex) => {
+    const randomNumber = Math.floor(Math.random() * 1000);
+    const result = getZIndexFromUnknown({ zIndex }, randomNumber);
+    expect(result).toBe(randomNumber);
+  });
+
+  it.each([0, -0, -100, 5000, 123.456, Math.PI, DefaultZIndexes.barBackground] as const)(
+    "should handle edge case zIndex values: %p",
+    (zIndex) => {
+      const randomNumber = Math.floor(Math.random() * 1000);
+      const result = getZIndexFromUnknown({ zIndex }, randomNumber);
+      expect(result).toBe(zIndex);
+    },
+  );
+});

package/test/zIndex/multiChartZIndexIsolation.spec.tsx

@@ -0,0 +1,90 @@
+// Solid-recharts spec (no recharts counterpart): regression tests for cross-chart
+// z-index portal isolation. Two bugs once compounded here:
+//  1. zIndexSlice shallow-copied the module-level initial map, so every chart
+//     store shared the same ZIndexEntry objects — the last chart to register a
+//     portal <g> hijacked every other chart's portal target.
+//  2. ZIndexLayer parented its <Portal> to the component owner without disposing
+//     it when the keyed target changed, so content ALSO stayed in the stale
+//     target — bar rectangles rendered duplicated inside a sibling pie chart.
+import { describe, expect, it } from "vitest";
+import { createSignal, flush, Show } from "solid-js";
+import { Bar, BarChart, Pie, PieChart } from "../../src";
+import { assertNotNull } from "../helper/assertNotNull";
+import { render } from "@solidjs/testing-library";
+
+const barData = [
+  { name: "a", uv: 100 },
+  { name: "b", uv: 200 },
+  { name: "c", uv: 300 },
+];
+
+const pieData = [
+  { name: "x", value: 40 },
+  { name: "y", value: 30 },
+  { name: "z", value: 30 },
+];
+
+describe("multi-chart zIndex portal isolation", () => {
+  it("keeps bar layers in their own chart when two charts mount together", () => {
+    const { container } = render(() => (
+      <>
+        <BarChart width={300} height={300} data={barData}>
+          <Bar dataKey="uv" isAnimationActive={false} />
+        </BarChart>
+        <PieChart width={300} height={300}>
+          <Pie data={pieData} dataKey="value" isAnimationActive={false} />
+        </PieChart>
+      </>
+    ));
+    flush();
+
+    const surfaces = container.querySelectorAll("svg.recharts-surface");
+    expect(surfaces).toHaveLength(2);
+    const [barSvg, pieSvg] = Array.from(surfaces);
+    assertNotNull(barSvg);
+    assertNotNull(pieSvg);
+
+    expect(barSvg.querySelectorAll(".recharts-bar")).toHaveLength(1);
+    expect(barSvg.querySelectorAll(".recharts-sector")).toHaveLength(0);
+    expect(pieSvg.querySelectorAll(".recharts-bar")).toHaveLength(0);
+    expect(pieSvg.querySelectorAll(".recharts-sector").length).toBeGreaterThan(0);
+
+    // No duplicated bar layer anywhere (a stale, undisposed portal would leave
+    // a second copy behind).
+    expect(document.querySelectorAll(".recharts-bar")).toHaveLength(1);
+  });
+
+  it("keeps bar layers in their own chart when a second chart mounts later", () => {
+    const [showPie, setShowPie] = createSignal(false);
+    const { container } = render(() => (
+      <>
+        <BarChart width={300} height={300} data={barData}>
+          <Bar dataKey="uv" isAnimationActive={false} />
+        </BarChart>
+        <Show when={showPie()}>
+          <PieChart width={300} height={300}>
+            <Pie data={pieData} dataKey="value" isAnimationActive={false} />
+          </PieChart>
+        </Show>
+      </>
+    ));
+    flush();
+    expect(container.querySelectorAll("svg.recharts-surface")).toHaveLength(1);
+
+    // Mounting the pie later used to overwrite the bar chart's registered portal
+    // element (shared slice state) and re-portal the bars into the pie's svg.
+    setShowPie(true);
+    flush();
+
+    const surfaces = container.querySelectorAll("svg.recharts-surface");
+    expect(surfaces).toHaveLength(2);
+    const [barSvg, pieSvg] = Array.from(surfaces);
+    assertNotNull(barSvg);
+    assertNotNull(pieSvg);
+
+    expect(barSvg.querySelectorAll(".recharts-bar")).toHaveLength(1);
+    expect(pieSvg.querySelectorAll(".recharts-bar")).toHaveLength(0);
+    expect(pieSvg.querySelectorAll(".recharts-sector").length).toBeGreaterThan(0);
+    expect(document.querySelectorAll(".recharts-bar")).toHaveLength(1);
+  });
+});

package/test/zIndex/zIndexSelectors.spec.ts

@@ -0,0 +1,172 @@
+import { flush } from "solid-js";
+import { describe, it, expect } from "vitest";
+import { createRechartsStore } from "../../src/state/store";
+import {
+  selectZIndexPortalElement,
+  selectAllRegisteredZIndexes,
+} from "../../src/zIndex/zIndexSelectors";
+
+describe("zIndexSelectors", () => {
+  describe("selectZIndexPortalElement", () => {
+    it("should select zIndex portal elements correctly", () => {
+      const store = createRechartsStore();
+
+      expect(selectZIndexPortalElement(store.state, 1, false)).toBeUndefined();
+      expect(selectZIndexPortalElement(store.state, -1, false)).toBeUndefined();
+
+      const element1 = document.createElement("div");
+      const element2 = document.createElement("div");
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: 1,
+        element: element1,
+        isPanorama: false,
+      });
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: -1,
+        element: element2,
+        isPanorama: false,
+      });
+      flush();
+
+      expect(selectZIndexPortalElement(store.state, 1, false)).toBe(element1);
+      expect(selectZIndexPortalElement(store.state, -1, false)).toBe(element2);
+
+      store.actions.zIndex.unregisterZIndexPortalElement({ zIndex: 1, isPanorama: false });
+      flush();
+      expect(selectZIndexPortalElement(store.state, 1, false)).toBeUndefined();
+      expect(selectZIndexPortalElement(store.state, -1, false)).toBe(element2);
+    });
+
+    it("should return undefined for undefined zIndex", () => {
+      const store = createRechartsStore();
+      expect(selectZIndexPortalElement(store.state, undefined, true)).toBeUndefined();
+      expect(selectZIndexPortalElement(store.state, undefined, false)).toBeUndefined();
+    });
+
+    it("should differentiate between panorama and main chart", () => {
+      const store = createRechartsStore();
+
+      const mainElement = document.createElement("div");
+      const panoramaElement = document.createElement("div");
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: 10,
+        element: mainElement,
+        isPanorama: false,
+      });
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: 10,
+        element: panoramaElement,
+        isPanorama: true,
+      });
+      flush();
+
+      expect(selectZIndexPortalElement(store.state, 10, false)).toBe(mainElement);
+      expect(selectZIndexPortalElement(store.state, 10, true)).toBe(panoramaElement);
+    });
+  });
+
+  describe("selectAllRegisteredZIndexes", () => {
+    it("should select all registered zIndexes correctly", () => {
+      const store = createRechartsStore();
+
+      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
+        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 2 });
+      store.actions.zIndex.registerZIndexPortal({ zIndex: -3 });
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 1 });
+
+      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
+        -100, -50, -3, 1, 2, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      store.actions.zIndex.unregisterZIndexPortal({ zIndex: 1 });
+      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
+        -100, -50, -3, 2, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      store.actions.zIndex.unregisterZIndexPortal({ zIndex: -3 });
+      store.actions.zIndex.unregisterZIndexPortal({ zIndex: 2 });
+      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
+        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+    });
+
+    it("should memoize results based on array contents", () => {
+      const store = createRechartsStore();
+
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 5 });
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 10 });
+
+      const firstSelection = selectAllRegisteredZIndexes(store.state);
+      const secondSelection = selectAllRegisteredZIndexes(store.state);
+
+      expect(firstSelection).toBe(secondSelection);
+
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 15 });
+
+      const thirdSelection = selectAllRegisteredZIndexes(store.state);
+      expect(thirdSelection).not.toBe(firstSelection);
+      expect(thirdSelection).toEqual([
+        -100, -50, 5, 10, 15, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      const element1 = document.createElement("div");
+      const element2 = document.createElement("div");
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: 5,
+        element: element1,
+        isPanorama: false,
+      });
+      store.actions.zIndex.registerZIndexPortalElement({
+        zIndex: 5,
+        element: element2,
+        isPanorama: true,
+      });
+      const fourthSelection = selectAllRegisteredZIndexes(store.state);
+      expect(fourthSelection).toBe(thirdSelection);
+    });
+
+    it("should not duplicate zIndex when registered multiple times", () => {
+      const store = createRechartsStore();
+
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 50 });
+      const firstSelection = selectAllRegisteredZIndexes(store.state);
+      expect(firstSelection).toEqual([
+        -100, -50, 50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      store.actions.zIndex.registerZIndexPortal({ zIndex: 50 });
+      const secondSelection = selectAllRegisteredZIndexes(store.state);
+      expect(secondSelection).toEqual([
+        -100, -50, 50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+      expect(secondSelection).toBe(firstSelection);
+    });
+
+    it("should not affect zIndex list when only registering/unregistering portal element", () => {
+      const store = createRechartsStore();
+
+      const initialSelection = selectAllRegisteredZIndexes(store.state);
+      expect(initialSelection).toEqual([
+        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+
+      const element = document.createElement("div");
+      store.actions.zIndex.registerZIndexPortalElement({ zIndex: 100, element, isPanorama: false });
+      const afterRegister = selectAllRegisteredZIndexes(store.state);
+      expect(afterRegister).toEqual([
+        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+      expect(afterRegister).toBe(initialSelection);
+
+      store.actions.zIndex.unregisterZIndexPortalElement({ zIndex: 100, isPanorama: false });
+      const afterUnregister = selectAllRegisteredZIndexes(store.state);
+      expect(afterUnregister).toEqual([
+        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
+      ]);
+      expect(afterUnregister).toBe(initialSelection);
+    });
+  });
+});

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    // recharts specs rely on vitest globals (we run with `globals: true`) and a
+    // few sources read `process.env`; match the reference tsconfig's ambient
+    // types. Scoped to this package so app/dev and the testing-library package
+    // keep the lean base `types`.
+    "types": ["@testing-library/jest-dom", "node", "vitest/globals"]
+  },
+  "include": ["src", "test"]
+}

package/src/util/DirectPortal.tsx

@@ -1,107 +0,0 @@
-import { createEffect, createRoot, on, onCleanup } from "solid-js";
-import type { JSX } from "solid-js";
-import { insert, isServer } from "solid-js/web";
-
-export interface DirectPortalProps {
-  mount: Element;
-  children: JSX.Element;
-}
-
-interface PortalRange {
-  placeholder: Text;
-  start: Comment;
-  end: Comment;
-  sequence: number;
-}
-
-const rangesByMount = new WeakMap<Element, PortalRange[]>();
-let nextSequence = 0;
-
-function reorderRanges(mount: Element, ranges: PortalRange[]): void {
-  ranges.sort((left, right) => {
-    const position = left.placeholder.compareDocumentPosition(right.placeholder);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-      return -1;
-    }
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-      return 1;
-    }
-    return left.sequence - right.sequence;
-  });
-
-  const fragment = document.createDocumentFragment();
-  ranges.forEach((range) => {
-    let node: Node | null = range.start;
-    while (node != null) {
-      const next: Node | null = node.nextSibling;
-      fragment.append(node);
-      if (node === range.end) {
-        break;
-      }
-      node = next;
-    }
-  });
-  mount.append(fragment);
-}
-
-/**
- * Portal content directly into a target without Solid 1's wrapper div/g.
- *
- * Recharts exposes the portal DOM shape, so the wrapper added by Solid 1's
- * built-in Portal would break direct-child selectors and SVG parity.
- */
-export function DirectPortal(props: DirectPortalProps): JSX.Element {
-  if (isServer) {
-    return null;
-  }
-
-  const placeholder = document.createTextNode("");
-
-  createEffect(
-    on(
-      () => props.mount,
-      (mount) => {
-        const start = document.createComment("solid-recharts-portal-start");
-        const end = document.createComment("solid-recharts-portal-end");
-        mount.append(start, end);
-
-        const dispose = createRoot((disposeRoot) => {
-          insert(mount, () => props.children, end);
-          return disposeRoot;
-        });
-        const range: PortalRange = {
-          placeholder,
-          start,
-          end,
-          sequence: nextSequence,
-        };
-        nextSequence += 1;
-        const ranges = rangesByMount.get(mount) ?? [];
-        ranges.push(range);
-        rangesByMount.set(mount, ranges);
-        reorderRanges(mount, ranges);
-
-        onCleanup(() => {
-          dispose();
-          let node: ChildNode | null = start.nextSibling;
-          while (node != null && node !== end) {
-            const next: ChildNode | null = node.nextSibling;
-            node.remove();
-            node = next;
-          }
-          start.remove();
-          end.remove();
-          const index = ranges.indexOf(range);
-          if (index >= 0) {
-            ranges.splice(index, 1);
-          }
-          if (ranges.length === 0) {
-            rangesByMount.delete(mount);
-          }
-        });
-      },
-    ),
-  );
-
-  return placeholder;
-}