feat: adds initial implementation of solid-uplot

Author: thedanchez

bun.lock

@@ -4,7 +4,7 @@
   "license": "MIT",
   "exports": "./src/index.tsx",
   "publish": {
-    "include": ["LICENSE", "README.md", "src/**/*.tsx"],
+    "include": ["LICENSE", "README.md", "CHANGELOG.md", "src/**/*.tsx"],
     "exclude": ["**/*.test.tsx"]
   }
 }

jsr.json

@@ -57,24 +57,28 @@
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
     "@vitest/coverage-istanbul": "^3.1.3",
+    "canvas": "^3.1.0",
     "eslint": "^9.26.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-solid": "^0.14.5",
     "globals": "^16.1.0",
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
+    "path2d": "^0.2.2",
     "prettier": "^3.5.3",
     "solid-js": "^1.9.6",
     "tailwindcss": "^4.1.5",
     "tsup": "^8.4.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.0",
+    "uplot": "^1.6.32",
     "vite": "^6.3.5",
     "vite-plugin-solid": "^2.11.6",
     "vitest": "^3.1.3"
   },
   "peerDependencies": {
-    "solid-js": ">=1.6.0"
+    "solid-js": ">=1.6.0",
+    "uplot": ">=1.6.32"
   }
 }

package.json

@@ -1 +1,21 @@
 import "@testing-library/jest-dom/vitest";
+
+import { Path2D } from "path2d";
+import { vi } from "vitest";
+
+window.matchMedia = (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+});
+
+Object.defineProperty(window, "Path2D", {
+  value: Path2D,
+  writable: false,
+  configurable: true,
+});

setupTests.ts

@@ -0,0 +1,83 @@
+import "uplot/dist/uPlot.min.css";
+
+import {
+  createEffect,
+  type JSX,
+  mergeProps,
+  onCleanup,
+  type ParentProps,
+  splitProps,
+  untrack,
+} from "solid-js";
+import uPlot from "uplot";
+
+type SolidUplotProps = uPlot.Options & {
+  /** The ref of the uPlot instance */
+  readonly ref?: (el: HTMLDivElement) => void;
+  /** The id of the uPlot instance */
+  readonly id?: string;
+  /** The class name of the uPlot instance */
+  readonly class?: string;
+  /** Callback when uPlot instance is created */
+  readonly onCreate?: (u: uPlot, container: HTMLDivElement) => void;
+  /** Apply scale reset on redraw triggered by updated plot data (default: `true`) */
+  readonly resetScales?: boolean;
+  /** The style of the uPlot instance container */
+  readonly style?: JSX.CSSProperties;
+};
+
+export const SolidUplot = (props: ParentProps<SolidUplotProps>): JSX.Element => {
+  let container!: HTMLDivElement;
+  const [local, options] = splitProps(props, [
+    "class",
+    "children",
+    "id",
+    "onCreate",
+    "style",
+    "ref",
+  ]);
+
+  const _options = mergeProps({ data: [] as uPlot.AlignedData, resetScales: true }, options);
+  const [updateableOptions, newChartOptions] = splitProps(_options, [
+    "data",
+    "width",
+    "height",
+    "resetScales",
+  ]);
+
+  const size = () => ({ width: updateableOptions.width, height: updateableOptions.height });
+
+  createEffect(() => {
+    const initialSize = untrack(size);
+    const initialData = untrack(() => updateableOptions.data);
+    const chart = new uPlot({ ...newChartOptions, ...initialSize }, initialData, container);
+
+    local.onCreate?.(chart, container);
+
+    createEffect(() => {
+      chart.setSize(size());
+    });
+
+    createEffect(() => {
+      chart.setData(updateableOptions.data, updateableOptions.resetScales);
+    });
+
+    onCleanup(() => {
+      chart.destroy();
+    });
+  });
+
+  return (
+    <div
+      ref={(el) => {
+        container = el;
+        local.ref?.(el);
+      }}
+      id={local.id}
+      class={local.class}
+      style={local.style}
+    >
+      {local.children}
+    </div>
+  );
+};

src/SolidUplot.tsx

@@ -0,0 +1,229 @@
+import { cleanup, render, waitFor } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import uPlot from "uplot";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { SolidUplot } from "../SolidUplot";
+
+const DEFAULT_DATA: uPlot.AlignedData = [
+  [1, 2, 3, 4, 5], // x-values
+  [10, 20, 30, 40, 50], // y-values for the first series
+];
+
+const DEFAULT_OPTIONS: uPlot.Options = {
+  width: 400,
+  height: 300,
+  series: [
+    {},
+    {
+      label: "Series 1",
+      stroke: "red",
+    },
+  ],
+};
+
+describe("COMPONENT: <SolidUplot />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders with default props", async () => {
+    const onCreateSpy = vi.fn();
+
+    const { container } = render(() => (
+      <SolidUplot {...DEFAULT_OPTIONS} data={DEFAULT_DATA} onCreate={onCreateSpy} />
+    ));
+
+    await waitFor(() => expect(onCreateSpy).toHaveBeenCalled());
+
+    expect(container.querySelector("div")).not.toBeNull();
+  });
+
+  test("renders children inside the container", () => {
+    const { getByText } = render(() => (
+      <SolidUplot id="test-id" {...DEFAULT_OPTIONS} data={DEFAULT_DATA}>
+        <div data-testid="child-element">Child content</div>
+      </SolidUplot>
+    ));
+
+    expect(getByText("Child content")).toBeInTheDocument();
+  });
+
+  test("passes props to the container", () => {
+    const { container } = render(() => (
+      <SolidUplot
+        {...DEFAULT_OPTIONS}
+        id="test-id"
+        class="test-class"
+        style={{ width: "500px", height: "300px" }}
+        data={DEFAULT_DATA}
+      />
+    ));
+
+    const div = container.querySelector("div");
+
+    expect(div).toHaveAttribute("id", "test-id");
+    expect(div).toHaveAttribute("class", "test-class");
+    expect(div).toHaveStyle({ width: "500px", height: "300px" });
+  });
+
+  test("calls onCreate callback when plot is created", () => {
+    const onCreateMock = vi.fn();
+
+    render(() => <SolidUplot {...DEFAULT_OPTIONS} data={DEFAULT_DATA} onCreate={onCreateMock} />);
+
+    expect(onCreateMock).toHaveBeenCalledTimes(1);
+    expect(onCreateMock).toHaveBeenCalledWith(expect.any(Object), expect.any(HTMLDivElement));
+  });
+
+  test("reactively updates the chart size when width or height changes", async () => {
+    let chartInstance: uPlot;
+    const onCreateSpy = vi.fn((chart: uPlot) => {
+      chartInstance = chart;
+    });
+    const [dimensions, setDimensions] = createSignal({ width: 400, height: 300 });
+
+    render(() => (
+      <SolidUplot
+        {...DEFAULT_OPTIONS}
+        data={DEFAULT_DATA}
+        width={dimensions().width}
+        height={dimensions().height}
+        onCreate={onCreateSpy}
+      />
+    ));
+
+    await waitFor(() => expect(chartInstance).toBeDefined());
+
+    expect(chartInstance!.width).toBe(400);
+    expect(chartInstance!.height).toBe(300);
+
+    setDimensions({ width: 500, height: 400 }); // Trigger reactive update
+
+    expect(chartInstance!.width).toBe(500);
+    expect(chartInstance!.height).toBe(400);
+
+    expect(onCreateSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test("reactively updates the chart data when data changes", async () => {
+    let chartInstance: uPlot;
+
+    const onCreateSpy = vi.fn((chart: uPlot) => {
+      chartInstance = chart;
+    });
+
+    const [chartData, setChartData] = createSignal<uPlot.AlignedData>(DEFAULT_DATA);
+
+    render(() => <SolidUplot {...DEFAULT_OPTIONS} data={chartData()} onCreate={onCreateSpy} />);
+
+    await waitFor(() => expect(chartInstance).toBeDefined());
+
+    expect(chartInstance!.data).toEqual(DEFAULT_DATA);
+
+    const newData: uPlot.AlignedData = [
+      [1, 2, 3, 4, 5],
+      [15, 25, 35, 45, 55],
+    ];
+
+    setChartData(newData); // Trigger reactive update
+
+    expect(chartInstance!.data).toEqual(newData);
+  });
+
+  test("reactively applies resetScales option when updating data", async () => {
+    let chartInstance: uPlot;
+
+    const onCreateSpy = vi.fn((chart: uPlot) => {
+      chartInstance = chart;
+    });
+
+    const [chartData, setChartData] = createSignal<uPlot.AlignedData>(DEFAULT_DATA);
+    const [resetScales, setResetScales] = createSignal(false);
+
+    render(() => (
+      <SolidUplot
+        {...DEFAULT_OPTIONS}
+        data={chartData()}
+        resetScales={resetScales()}
+        onCreate={onCreateSpy}
+      />
+    ));
+
+    await waitFor(() => expect(chartInstance).toBeDefined());
+
+    vi.spyOn(chartInstance!, "setData");
+
+    // New data for the update
+    const newData: uPlot.AlignedData = [
+      [1, 2, 3, 4, 5],
+      [15, 25, 35, 45, 55],
+    ];
+
+    setChartData(newData);
+
+    expect(chartInstance!.setData).toHaveBeenCalledWith(newData, false);
+
+    setResetScales(true);
+
+    expect(chartInstance!.setData).toHaveBeenCalledWith(newData, true);
+
+    expect(onCreateSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test("destroys the chart when component is unmounted", async () => {
+    let chartInstance: uPlot;
+
+    const onCreateSpy = vi.fn((chart: uPlot) => {
+      chartInstance = chart;
+    });
+
+    const { unmount } = render(() => (
+      <SolidUplot {...DEFAULT_OPTIONS} data={DEFAULT_DATA} onCreate={onCreateSpy} />
+    ));
+
+    await waitFor(() => expect(onCreateSpy).toHaveBeenCalled());
+
+    vi.spyOn(chartInstance!, "destroy");
+
+    unmount();
+
+    expect(chartInstance!.destroy).toHaveBeenCalledTimes(1);
+  });
+
+  test("creates a new chart when a non-updateable prop changes (e.g. series)", async () => {
+    const onCreateSpy = vi.fn();
+
+    const initialSeries = [
+      {
+        label: "Series 1",
+        stroke: "red",
+      },
+    ] as uPlot.Series[];
+
+    const [data, setData] = createSignal<uPlot.AlignedData>(DEFAULT_DATA);
+    const [series, setSeries] = createSignal<uPlot.Series[]>(initialSeries);
+
+    render(() => (
+      <SolidUplot {...DEFAULT_OPTIONS} data={data()} series={series()} onCreate={onCreateSpy} />
+    ));
+
+    await waitFor(() => expect(onCreateSpy).toHaveBeenCalledTimes(1));
+
+    setData([...DEFAULT_DATA, [5, 15, 25, 35, 45]]);
+
+    setSeries([
+      ...initialSeries,
+      {
+        label: "Series 2",
+        stroke: "blue",
+      },
+    ]);
+
+    await waitFor(() => expect(onCreateSpy).toHaveBeenCalledTimes(2));
+  });
+});

src/__tests__/SolidUplot.test.tsx

@@ -1,2 +1,2 @@
-// Main library export site
-// Use playground app (via Vite) to test and document the library
+export { tooltipPlugin } from "./plugins/tooltip";
+export { SolidUplot } from "./SolidUplot";