feat: initial implementation of solid-highcharts

Author: thedanchez

bun.lock

@@ -1,5 +1,5 @@
 {
-  "name": "template-solidjs-library",
+  "name": "@dschz/solid-highcharts",
   "version": "0.0.0",
   "license": "MIT",
   "exports": "./src/index.tsx",

jsr.json

@@ -1,17 +1,17 @@
 {
-  "name": "template-solidjs-library",
+  "name": "@dschz/solid-highcharts",
   "version": "0.0.0",
-  "description": "Template for SolidJS library using tsup for bundling. Configured with Bun, NVM, TypeScript, ESLint, Prettier, Vitest, and GHA",
+  "description": "SolidJS wrapper for Highcharts",
   "type": "module",
   "author": "Daniel Sanchez <dsanc89@icloud.com>",
   "license": "MIT",
-  "homepage": "https://github.com/thedanchez/template-solidjs-library#readme",
+  "homepage": "https://github.com/dsnchz/solid-highcharts#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/thedanchez/template-solidjs-library.git"
+    "url": "https://github.com/dsnchz/solid-highcharts.git"
   },
   "bugs": {
-    "url": "https://github.com/thedanchez/template-solidjs-library/issues"
+    "url": "https://github.com/dsnchz/solid-highcharts/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -63,6 +63,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-solid": "^0.14.5",
     "globals": "^16.1.0",
+    "highcharts": "^12.2.0",
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
     "prettier": "^3.5.3",
@@ -77,6 +78,7 @@
     "vitest": "^3.1.3"
   },
   "peerDependencies": {
+    "highcharts": ">=12.0.0",
     "solid-js": ">=1.6.0"
   }
 }

package.json

@@ -0,0 +1,142 @@
+import { render } from "@solidjs/testing-library";
+import type * as Highcharts from "highcharts";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { createChartComponent, type HighchartsConstructor } from "../createChartComponent";
+import type { HighchartsModule } from "../types";
+
+// Mock Highcharts
+const mockChart = {
+  update: vi.fn(),
+  destroy: vi.fn(),
+  container: {} as HTMLElement,
+  options: {} as Highcharts.Options,
+  series: [],
+  addSeries: vi.fn(),
+  removeSeries: vi.fn(),
+  redraw: vi.fn(),
+  reflow: vi.fn(),
+  exportChart: vi.fn(),
+  print: vi.fn(),
+  getSVG: vi.fn(),
+  getCSV: vi.fn(),
+  getTable: vi.fn(),
+  setTitle: vi.fn(),
+  setSize: vi.fn(),
+  showLoading: vi.fn(),
+  hideLoading: vi.fn(),
+} as Partial<Highcharts.Chart> as Highcharts.Chart;
+
+const MockHighchartsModule = {
+  chart: vi.fn((_container, _options, _onCreateChart) => {
+    _onCreateChart?.(mockChart);
+    return mockChart;
+  }),
+  stockChart: vi.fn(() => mockChart),
+  mapChart: vi.fn(() => mockChart),
+  ganttChart: vi.fn(() => mockChart),
+  Chart: vi.fn(() => mockChart),
+  SVGRenderer: vi.fn(),
+  VMLRenderer: vi.fn(),
+  color: vi.fn(),
+  dateFormat: vi.fn(),
+  numberFormat: vi.fn(),
+  merge: vi.fn(),
+  extend: vi.fn(),
+  each: vi.fn(),
+  pick: vi.fn(),
+  wrap: vi.fn(),
+  addEvent: vi.fn(),
+  removeEvent: vi.fn(),
+  fireEvent: vi.fn(),
+  animate: vi.fn(),
+  stop: vi.fn(),
+  getOptions: vi.fn(),
+  setOptions: vi.fn(),
+  // Add version to satisfy type requirements
+  version: "12.0.0",
+} as unknown as HighchartsModule;
+
+describe("createChartComponent", () => {
+  let defaultOptions: Highcharts.Options;
+  let ref: HTMLDivElement | undefined;
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    ref = undefined;
+    defaultOptions = {
+      title: { text: "Test Chart" },
+      series: [{ type: "line", data: [1, 2, 3] }],
+    };
+  });
+
+  test("throws when passing invalid constructor", () => {
+    expect(() =>
+      createChartComponent(MockHighchartsModule, "invalidConstructor" as HighchartsConstructor),
+    ).toThrow();
+  });
+
+  test("can render using chart constructor", () => {
+    const Chart = createChartComponent(MockHighchartsModule);
+
+    const { container } = render(() => <Chart {...defaultOptions} ref={(c) => (ref = c)} />);
+
+    expect(container).toBeInTheDocument();
+    expect(MockHighchartsModule.chart).toHaveBeenCalledWith(ref, defaultOptions, undefined);
+  });
+
+  test("can render using stockChart constructor", () => {
+    const StockChart = createChartComponent(MockHighchartsModule, "stockChart");
+
+    const { container } = render(() => <StockChart {...defaultOptions} ref={(c) => (ref = c)} />);
+
+    expect(container).toBeInTheDocument();
+    expect(MockHighchartsModule.stockChart).toHaveBeenCalledWith(ref, defaultOptions, undefined);
+  });
+
+  test("can render using mapChart constructor", () => {
+    const MapChart = createChartComponent(MockHighchartsModule, "mapChart");
+
+    const { container } = render(() => <MapChart {...defaultOptions} ref={(c) => (ref = c)} />);
+
+    expect(container).toBeInTheDocument();
+    expect(MockHighchartsModule.mapChart).toHaveBeenCalledWith(ref, defaultOptions, undefined);
+  });
+
+  test("can render using ganttChart constructor", () => {
+    const GanttChart = createChartComponent(MockHighchartsModule, "ganttChart");
+
+    const { container } = render(() => <GanttChart {...defaultOptions} ref={(c) => (ref = c)} />);
+
+    expect(container).toBeInTheDocument();
+    expect(MockHighchartsModule.ganttChart).toHaveBeenCalledWith(ref, defaultOptions, undefined);
+  });
+
+  test("destroys the chart when unmounting", () => {
+    const Chart = createChartComponent(MockHighchartsModule, "chart");
+    let chartInstance!: Highcharts.Chart;
+
+    const { container, unmount } = render(() => (
+      <Chart
+        {...defaultOptions}
+        ref={(c) => (ref = c)}
+        onCreateChart={(c) => {
+          chartInstance = c;
+        }}
+      />
+    ));
+
+    expect(container).toBeInTheDocument();
+    expect(MockHighchartsModule.chart).toHaveBeenCalledWith(
+      ref,
+      defaultOptions,
+      expect.any(Function),
+    );
+
+    expect(chartInstance).toBeDefined();
+
+    unmount();
+
+    expect(chartInstance.destroy).toHaveBeenCalledTimes(1);
+  });
+});

src/__tests__/createChartComponent.test.tsx

@@ -0,0 +1,133 @@
+import { createEffect, type JSX, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+
+import type { HighchartsModule } from "./types";
+
+/**
+ * Supported Highcharts constructor types.
+ * Each constructor type corresponds to a different chart variant.
+ */
+export type HighchartsConstructor = "chart" | "stockChart" | "mapChart" | "ganttChart";
+
+/**
+ * Props for Highcharts chart components.
+ * Extends Highcharts.Options with additional SolidJS-specific properties.
+ *
+ * @example
+ * ```tsx
+ * const chartProps: HighchartsComponentProps = {
+ *   title: { text: 'My Chart' },
+ *   series: [{ type: 'line', data: [1, 2, 3] }],
+ *   onCreateChart: (chart) => console.log('Chart created:', chart),
+ *   class: 'my-chart-container'
+ * };
+ * ```
+ */
+export type HighchartsComponentProps = Highcharts.Options & {
+  /**
+   * Callback function called when the chart is successfully created.
+   * Receives the Highcharts chart instance as a parameter.
+   */
+  readonly onCreateChart?: Highcharts.ChartCallbackFunction;
+
+  /**
+   * Ref callback to access the chart container div element.
+   * Called with the HTMLDivElement that contains the chart.
+   */
+  readonly ref?: (container: HTMLDivElement) => void;
+
+  /** CSS class name to apply to the chart container. */
+  readonly class?: string;
+
+  /** CSS styles to apply to the chart container. */
+  readonly style?: JSX.CSSProperties;
+};
+
+/**
+ * Creates a SolidJS component for rendering Highcharts charts.
+ *
+ * This is the core factory function that creates chart components with proper
+ * SolidJS integration, including reactive updates and cleanup.
+ *
+ * @param HighchartsModule - The Highcharts module to use (core, stock, maps, or gantt)
+ * @param constructor - The chart constructor type to use (defaults to "chart")
+ * @returns A SolidJS component function that renders Highcharts charts
+ *
+ * @throws {Error} When the specified constructor is not found on the Highcharts module
+ *
+ * @example
+ * ```tsx
+ * import Highcharts from 'highcharts';
+ * import { createChartComponent } from '@dschz/solid-highcharts';
+ *
+ * const Chart = createChartComponent(Highcharts, 'chart');
+ *
+ * function App() {
+ *   return (
+ *     <Chart
+ *       title={{ text: 'My Chart' }}
+ *       series={[{ type: 'line', data: [1, 2, 3] }]}
+ *       onCreateChart={(chart) => console.log('Chart ready!', chart)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Using with Highcharts Stock:
+ * ```tsx
+ * import Highcharts from 'highcharts/highstock';
+ *
+ * const StockChart = createChartComponent(Highcharts, 'stockChart');
+ *
+ * function StockApp() {
+ *   return (
+ *     <StockChart
+ *       title={{ text: 'Stock Price' }}
+ *       series={[{ type: 'candlestick', data: stockData }]}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const createChartComponent = (
+  HighchartsModule: HighchartsModule,
+  constructor: HighchartsConstructor = "chart",
+) => {
+  if (typeof HighchartsModule[constructor] !== "function") {
+    throw new Error(
+      `[solid-highcharts] Constructor "${constructor}" not found on Highcharts module. ` +
+        `Did you import the correct variant (e.g., highstock, highmaps)?`,
+    );
+  }
+
+  return (props: HighchartsComponentProps) => {
+    let container!: HTMLDivElement;
+    let chart!: Highcharts.Chart;
+
+    const [local, options] = splitProps(props, ["style", "class", "ref", "onCreateChart"]);
+
+    const _local = mergeProps(
+      {
+        style: {} as JSX.CSSProperties,
+      },
+      local,
+    );
+
+    const _options = mergeProps({}, options);
+
+    onMount(() => {
+      _local.ref?.(container);
+      chart = HighchartsModule[constructor](container, _options, _local.onCreateChart);
+    });
+
+    createEffect(() => {
+      chart?.update(options, true, true);
+    });
+
+    onCleanup(() => {
+      chart?.destroy();
+    });
+
+    return <div ref={container} class={_local.class} style={_local.style} />;
+  };
+};