@revivejs/react-highcharts 17.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexandro Marques
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,142 @@
+# @revivejs/react-highcharts
+
+> A maintained **React 17 wrapper for Highcharts** with a thin component API, imperative ref access, `stockChart` support, and versioned live demos.
+
+[![npm version](https://img.shields.io/npm/v/@revivejs/react-highcharts.svg?style=flat-square)](https://www.npmjs.com/package/@revivejs/react-highcharts)
+[![npm downloads](https://img.shields.io/npm/dt/@revivejs/react-highcharts.svg?style=flat-square)](https://www.npmjs.com/package/@revivejs/react-highcharts)
+[![license](https://img.shields.io/npm/l/@revivejs/react-highcharts.svg?style=flat-square)](https://github.com/alexandroit/react-highcharts/blob/master/LICENSE)
+[![React 17](https://img.shields.io/badge/React-17-blue?style=flat-square&logo=react)](https://react.dev)
+[![Highcharts](https://img.shields.io/badge/Highcharts-12.5-navy?style=flat-square)](https://www.highcharts.com)
+
+**[Documentation & Live Demos](https://alexandroit.github.io/react-highcharts/)** | **[npm](https://www.npmjs.com/package/@revivejs/react-highcharts)** | **[Issues](https://github.com/alexandroit/react-highcharts/issues)** | **[Repository](https://github.com/alexandroit/react-highcharts)**
+
+**Latest version:** `17.0.0`
+
+## Why this library?
+
+`@revivejs/react-highcharts` is intentionally thin. It follows the common React + Highcharts pattern:
+
+- pass a `highcharts` instance
+- pass a single `options` object
+- choose the constructor with `constructorType`
+- access the live chart through a ref when you need imperative updates
+
+That makes it easy to keep React in charge of composition while still using the full Highcharts API.
+
+## React Version Compatibility
+
+| Package version | React version | Highcharts version | Demo link |
+| :---: | :---: | :---: | :--- |
+| **17.0.0** | **17.0.x** | **12.5.x** | [React 17 demo](https://alexandroit.github.io/react-highcharts/react-17/) |
+
+## Installation
+
+```bash
+npm install @revivejs/react-highcharts highcharts
+```
+
+## Basic Usage
+
+```tsx
+import Highcharts from 'highcharts';
+import { Chart } from '@revivejs/react-highcharts';
+
+const options: Highcharts.Options = {
+  title: { text: 'Quarterly revenue' },
+  series: [
+    {
+      type: 'line',
+      name: 'Revenue',
+      data: [14, 18, 22, 28]
+    }
+  ]
+};
+
+export function RevenueChart() {
+  return <Chart highcharts={Highcharts} options={options} />;
+}
+```
+
+## StockChart
+
+```tsx
+import Highcharts from 'highcharts/highstock';
+import { Chart } from '@revivejs/react-highcharts';
+
+export function PriceChart() {
+  return (
+    <Chart
+      highcharts={Highcharts}
+      constructorType="stockChart"
+      options={{
+        series: [{ type: 'line', data: [101, 104, 109, 111] }]
+      }}
+    />
+  );
+}
+```
+
+## Modules
+
+```tsx
+import Highcharts from 'highcharts';
+import {
+  Chart,
+  exposeHighchartsGlobals,
+  initHighchartsModules
+} from '@revivejs/react-highcharts';
+
+exposeHighchartsGlobals(Highcharts);
+
+const [{ default: Highcharts3D }, { default: HeatmapModule }] = await Promise.all([
+  import('highcharts/highcharts-3d.js'),
+  import('highcharts/modules/heatmap.js')
+]);
+
+initHighchartsModules(Highcharts, Highcharts3D, HeatmapModule);
+```
+
+## Imperative Access
+
+```tsx
+import { useRef } from 'react';
+import Highcharts from 'highcharts';
+import { Chart, type ChartHandle } from '@revivejs/react-highcharts';
+
+export function ControlledChart() {
+  const chartRef = useRef<ChartHandle>(null);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          chartRef.current?.chart?.series[0]?.addPoint(42);
+        }}
+      >
+        Add point
+      </button>
+      <Chart ref={chartRef} highcharts={Highcharts} options={{ series: [{ type: 'line', data: [10, 12, 16] }] }} />
+    </>
+  );
+}
+```
+
+## API
+
+| Prop | Type | Notes |
+| :--- | :--- | :--- |
+| `highcharts` | `typeof Highcharts` | Required. Pass the instance or bundle you want to use. |
+| `options` | `Highcharts.Options` | Required. Passed into the selected Highcharts constructor. |
+| `constructorType` | `'chart' \| 'stockChart' \| 'mapChart' \| 'ganttChart'` | Defaults to `'chart'`. |
+| `onChartReady` | `(chart) => void` | Called after the chart is created. |
+| `allowChartUpdate` | `boolean` | Defaults to `true`. |
+| `immutable` | `boolean` | Recreates the chart instead of calling `chart.update`. |
+| `updateArgs` | `[redraw, oneToOne, animation]` | Forwarded to `chart.update`. |
+| `containerProps` | `HTMLAttributes<HTMLDivElement>` | Additional props for the chart container. |
+
+## Changelog
+
+### 17.0.0
+- Initial React wrapper line
+- Added the first versioned docs app for React 17
+- Established the versioned docs structure used by later releases

package/dist/index.cjs

@@ -0,0 +1,143 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Chart: () => Chart,
+  exposeHighchartsGlobals: () => exposeHighchartsGlobals,
+  initHighchartsModules: () => initHighchartsModules
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Chart.tsx
+var import_react2 = require("react");
+
+// src/useIsomorphicLayoutEffect.ts
+var import_react = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+
+// src/Chart.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Chart = (0, import_react2.forwardRef)(function Chart2({
+  highcharts,
+  options,
+  constructorType = "chart",
+  onChartReady,
+  allowChartUpdate = true,
+  immutable = false,
+  updateArgs = [true, true, true],
+  containerProps
+}, ref) {
+  const containerRef = (0, import_react2.useRef)(null);
+  const chartRef = (0, import_react2.useRef)(null);
+  const skipNextUpdateRef = (0, import_react2.useRef)(true);
+  const onReadyRef = (0, import_react2.useRef)(onChartReady);
+  onReadyRef.current = onChartReady;
+  (0, import_react2.useImperativeHandle)(
+    ref,
+    () => ({
+      chart: chartRef.current,
+      container: containerRef.current
+    }),
+    []
+  );
+  function destroyChart() {
+    chartRef.current?.destroy();
+    chartRef.current = null;
+  }
+  function createChart() {
+    if (!containerRef.current) {
+      return;
+    }
+    const factory = highcharts[constructorType];
+    if (typeof factory !== "function") {
+      throw new Error(
+        `Unknown Highcharts constructor "${constructorType}". Make sure you passed the right Highcharts bundle.`
+      );
+    }
+    destroyChart();
+    chartRef.current = factory(containerRef.current, options, (chart) => {
+      onReadyRef.current?.(chart);
+    });
+    skipNextUpdateRef.current = true;
+  }
+  useIsomorphicLayoutEffect(() => {
+    createChart();
+    return () => {
+      destroyChart();
+    };
+  }, [highcharts, constructorType]);
+  useIsomorphicLayoutEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) {
+      return;
+    }
+    if (skipNextUpdateRef.current) {
+      skipNextUpdateRef.current = false;
+      return;
+    }
+    if (immutable) {
+      createChart();
+      return;
+    }
+    if (!allowChartUpdate) {
+      return;
+    }
+    chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);
+  }, [
+    options,
+    allowChartUpdate,
+    immutable,
+    updateArgs[0],
+    updateArgs[1],
+    updateArgs[2]
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...containerProps, ref: containerRef });
+});
+
+// src/modules.ts
+var appliedModules = /* @__PURE__ */ new WeakMap();
+function exposeHighchartsGlobals(highcharts) {
+  const scope = globalThis;
+  scope.Highcharts = highcharts;
+  scope._Highcharts = highcharts;
+}
+function initHighchartsModules(highcharts, ...modules) {
+  exposeHighchartsGlobals(highcharts);
+  const registry = appliedModules.get(highcharts) ?? /* @__PURE__ */ new Set();
+  for (const entry of modules) {
+    const factory = entry.default ?? entry;
+    if (registry.has(factory)) {
+      continue;
+    }
+    if (typeof factory === "function") {
+      factory(highcharts);
+      registry.add(factory);
+    }
+  }
+  appliedModules.set(highcharts, registry);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart,
+  exposeHighchartsGlobals,
+  initHighchartsModules
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["export { Chart } from './Chart';\nexport type { ChartHandle, ChartProps, ConstructorType } from './Chart';\nexport { exposeHighchartsGlobals, initHighchartsModules } from './modules';\nexport type { HighchartsModuleFactory } from './modules';\n","import type Highcharts from 'highcharts';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n  chart: Highcharts.Chart | null;\n  container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n  highcharts: typeof Highcharts;\n  options: Highcharts.Options;\n  constructorType?: ConstructorType;\n  onChartReady?: (chart: Highcharts.Chart) => void;\n  allowChartUpdate?: boolean;\n  immutable?: boolean;\n  updateArgs?: [\n    redraw?: boolean,\n    oneToOne?: boolean,\n    animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n  ];\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n  {\n    highcharts,\n    options,\n    constructorType = 'chart',\n    onChartReady,\n    allowChartUpdate = true,\n    immutable = false,\n    updateArgs = [true, true, true],\n    containerProps\n  },\n  ref\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartRef = useRef<Highcharts.Chart | null>(null);\n  const skipNextUpdateRef = useRef(true);\n  const onReadyRef = useRef(onChartReady);\n\n  onReadyRef.current = onChartReady;\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      chart: chartRef.current,\n      container: containerRef.current\n    }),\n    []\n  );\n\n  function destroyChart() {\n    chartRef.current?.destroy();\n    chartRef.current = null;\n  }\n\n  function createChart() {\n    if (!containerRef.current) {\n      return;\n    }\n\n    const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n    if (typeof factory !== 'function') {\n      throw new Error(\n        `Unknown Highcharts constructor \"${constructorType}\". ` +\n          'Make sure you passed the right Highcharts bundle.'\n      );\n    }\n\n    destroyChart();\n\n    chartRef.current = (\n      factory as (\n        container: HTMLElement,\n        options: Highcharts.Options,\n        callback?: (chart: Highcharts.Chart) => void\n      ) => Highcharts.Chart\n    )(containerRef.current, options, (chart) => {\n      onReadyRef.current?.(chart);\n    });\n\n    skipNextUpdateRef.current = true;\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    createChart();\n\n    return () => {\n      destroyChart();\n    };\n  }, [highcharts, constructorType]);\n\n  useIsomorphicLayoutEffect(() => {\n    const chart = chartRef.current;\n\n    if (!chart) {\n      return;\n    }\n\n    if (skipNextUpdateRef.current) {\n      skipNextUpdateRef.current = false;\n      return;\n    }\n\n    if (immutable) {\n      createChart();\n      return;\n    }\n\n    if (!allowChartUpdate) {\n      return;\n    }\n\n    chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n  }, [\n    options,\n    allowChartUpdate,\n    immutable,\n    updateArgs[0],\n    updateArgs[1],\n    updateArgs[2]\n  ]);\n\n  return <div {...containerProps} ref={containerRef} />;\n});\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import type Highcharts from 'highcharts';\n\nexport type HighchartsModuleFactory =\n  | ((highcharts: typeof Highcharts) => void)\n  | { default?: (highcharts: typeof Highcharts) => void };\n\ntype HighchartsGlobalScope = typeof globalThis & {\n  Highcharts?: typeof Highcharts;\n  _Highcharts?: typeof Highcharts;\n};\n\nconst appliedModules = new WeakMap<object, Set<unknown>>();\n\nexport function exposeHighchartsGlobals(highcharts: typeof Highcharts) {\n  const scope = globalThis as HighchartsGlobalScope;\n\n  scope.Highcharts = highcharts;\n  scope._Highcharts = highcharts;\n}\n\nexport function initHighchartsModules(\n  highcharts: typeof Highcharts,\n  ...modules: HighchartsModuleFactory[]\n) {\n  exposeHighchartsGlobals(highcharts);\n\n  const registry = appliedModules.get(highcharts) ?? new Set<unknown>();\n\n  for (const entry of modules) {\n    const factory = (entry as { default?: (highcharts: typeof Highcharts) => void }).default ?? entry;\n\n    if (registry.has(factory)) {\n      continue;\n    }\n\n    if (typeof factory === 'function') {\n      factory(highcharts);\n      registry.add(factory);\n    }\n  }\n\n  appliedModules.set(highcharts, registry);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAKO;;;ACNP,mBAA2C;AAEpC,IAAM,4BACX,OAAO,WAAW,cAAc,+BAAkB;;;ADkI3C;AAtGF,IAAM,YAAQ,0BAAoC,SAASC,OAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,aAAa,CAAC,MAAM,MAAM,IAAI;AAAA,EAC9B;AACF,GACA,KACA;AACA,QAAM,mBAAe,sBAA8B,IAAI;AACvD,QAAM,eAAW,sBAAgC,IAAI;AACrD,QAAM,wBAAoB,sBAAO,IAAI;AACrC,QAAM,iBAAa,sBAAO,YAAY;AAEtC,aAAW,UAAU;AAErB;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,OAAO,SAAS;AAAA,MAChB,WAAW,aAAa;AAAA,IAC1B;AAAA,IACA,CAAC;AAAA,EACH;AAEA,WAAS,eAAe;AACtB,aAAS,SAAS,QAAQ;AAC1B,aAAS,UAAU;AAAA,EACrB;AAEA,WAAS,cAAc;AACrB,QAAI,CAAC,aAAa,SAAS;AACzB;AAAA,IACF;AAEA,UAAM,UAAW,WAAkD,eAAe;AAElF,QAAI,OAAO,YAAY,YAAY;AACjC,YAAM,IAAI;AAAA,QACR,mCAAmC,eAAe;AAAA,MAEpD;AAAA,IACF;AAEA,iBAAa;AAEb,aAAS,UACP,QAKA,aAAa,SAAS,SAAS,CAAC,UAAU;AAC1C,iBAAW,UAAU,KAAK;AAAA,IAC5B,CAAC;AAED,sBAAkB,UAAU;AAAA,EAC9B;AAEA,4BAA0B,MAAM;AAC9B,gBAAY;AAEZ,WAAO,MAAM;AACX,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,4BAA0B,MAAM;AAC9B,UAAM,QAAQ,SAAS;AAEvB,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,UAAU;AAC5B;AAAA,IACF;AAEA,QAAI,WAAW;AACb,kBAAY;AACZ;AAAA,IACF;AAEA,QAAI,CAAC,kBAAkB;AACrB;AAAA,IACF;AAEA,UAAM,OAAO,SAAS,WAAW,CAAC,GAAG,WAAW,CAAC,GAAG,WAAW,CAAC,CAAC;AAAA,EACnE,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,EACd,CAAC;AAED,SAAO,4CAAC,SAAK,GAAG,gBAAgB,KAAK,cAAc;AACrD,CAAC;;;AE3HD,IAAM,iBAAiB,oBAAI,QAA8B;AAElD,SAAS,wBAAwB,YAA+B;AACrE,QAAM,QAAQ;AAEd,QAAM,aAAa;AACnB,QAAM,cAAc;AACtB;AAEO,SAAS,sBACd,eACG,SACH;AACA,0BAAwB,UAAU;AAElC,QAAM,WAAW,eAAe,IAAI,UAAU,KAAK,oBAAI,IAAa;AAEpE,aAAW,SAAS,SAAS;AAC3B,UAAM,UAAW,MAAgE,WAAW;AAE5F,QAAI,SAAS,IAAI,OAAO,GAAG;AACzB;AAAA,IACF;AAEA,QAAI,OAAO,YAAY,YAAY;AACjC,cAAQ,UAAU;AAClB,eAAS,IAAI,OAAO;AAAA,IACtB;AAAA,EACF;AAEA,iBAAe,IAAI,YAAY,QAAQ;AACzC;","names":["import_react","Chart"]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import Highcharts from 'highcharts';
+
+type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';
+interface ChartHandle {
+    chart: Highcharts.Chart | null;
+    container: HTMLDivElement | null;
+}
+interface ChartProps {
+    highcharts: typeof Highcharts;
+    options: Highcharts.Options;
+    constructorType?: ConstructorType;
+    onChartReady?: (chart: Highcharts.Chart) => void;
+    allowChartUpdate?: boolean;
+    immutable?: boolean;
+    updateArgs?: [
+        redraw?: boolean,
+        oneToOne?: boolean,
+        animation?: boolean | Partial<Highcharts.AnimationOptionsObject>
+    ];
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<ChartHandle>>;
+
+type HighchartsModuleFactory = ((highcharts: typeof Highcharts) => void) | {
+    default?: (highcharts: typeof Highcharts) => void;
+};
+declare function exposeHighchartsGlobals(highcharts: typeof Highcharts): void;
+declare function initHighchartsModules(highcharts: typeof Highcharts, ...modules: HighchartsModuleFactory[]): void;
+
+export { Chart, type ChartHandle, type ChartProps, type ConstructorType, type HighchartsModuleFactory, exposeHighchartsGlobals, initHighchartsModules };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import Highcharts from 'highcharts';
+
+type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';
+interface ChartHandle {
+    chart: Highcharts.Chart | null;
+    container: HTMLDivElement | null;
+}
+interface ChartProps {
+    highcharts: typeof Highcharts;
+    options: Highcharts.Options;
+    constructorType?: ConstructorType;
+    onChartReady?: (chart: Highcharts.Chart) => void;
+    allowChartUpdate?: boolean;
+    immutable?: boolean;
+    updateArgs?: [
+        redraw?: boolean,
+        oneToOne?: boolean,
+        animation?: boolean | Partial<Highcharts.AnimationOptionsObject>
+    ];
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<ChartHandle>>;
+
+type HighchartsModuleFactory = ((highcharts: typeof Highcharts) => void) | {
+    default?: (highcharts: typeof Highcharts) => void;
+};
+declare function exposeHighchartsGlobals(highcharts: typeof Highcharts): void;
+declare function initHighchartsModules(highcharts: typeof Highcharts, ...modules: HighchartsModuleFactory[]): void;
+
+export { Chart, type ChartHandle, type ChartProps, type ConstructorType, type HighchartsModuleFactory, exposeHighchartsGlobals, initHighchartsModules };

package/dist/index.js

@@ -0,0 +1,118 @@
+// src/Chart.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef
+} from "react";
+
+// src/useIsomorphicLayoutEffect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+// src/Chart.tsx
+import { jsx } from "react/jsx-runtime";
+var Chart = forwardRef(function Chart2({
+  highcharts,
+  options,
+  constructorType = "chart",
+  onChartReady,
+  allowChartUpdate = true,
+  immutable = false,
+  updateArgs = [true, true, true],
+  containerProps
+}, ref) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const skipNextUpdateRef = useRef(true);
+  const onReadyRef = useRef(onChartReady);
+  onReadyRef.current = onChartReady;
+  useImperativeHandle(
+    ref,
+    () => ({
+      chart: chartRef.current,
+      container: containerRef.current
+    }),
+    []
+  );
+  function destroyChart() {
+    chartRef.current?.destroy();
+    chartRef.current = null;
+  }
+  function createChart() {
+    if (!containerRef.current) {
+      return;
+    }
+    const factory = highcharts[constructorType];
+    if (typeof factory !== "function") {
+      throw new Error(
+        `Unknown Highcharts constructor "${constructorType}". Make sure you passed the right Highcharts bundle.`
+      );
+    }
+    destroyChart();
+    chartRef.current = factory(containerRef.current, options, (chart) => {
+      onReadyRef.current?.(chart);
+    });
+    skipNextUpdateRef.current = true;
+  }
+  useIsomorphicLayoutEffect(() => {
+    createChart();
+    return () => {
+      destroyChart();
+    };
+  }, [highcharts, constructorType]);
+  useIsomorphicLayoutEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) {
+      return;
+    }
+    if (skipNextUpdateRef.current) {
+      skipNextUpdateRef.current = false;
+      return;
+    }
+    if (immutable) {
+      createChart();
+      return;
+    }
+    if (!allowChartUpdate) {
+      return;
+    }
+    chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);
+  }, [
+    options,
+    allowChartUpdate,
+    immutable,
+    updateArgs[0],
+    updateArgs[1],
+    updateArgs[2]
+  ]);
+  return /* @__PURE__ */ jsx("div", { ...containerProps, ref: containerRef });
+});
+
+// src/modules.ts
+var appliedModules = /* @__PURE__ */ new WeakMap();
+function exposeHighchartsGlobals(highcharts) {
+  const scope = globalThis;
+  scope.Highcharts = highcharts;
+  scope._Highcharts = highcharts;
+}
+function initHighchartsModules(highcharts, ...modules) {
+  exposeHighchartsGlobals(highcharts);
+  const registry = appliedModules.get(highcharts) ?? /* @__PURE__ */ new Set();
+  for (const entry of modules) {
+    const factory = entry.default ?? entry;
+    if (registry.has(factory)) {
+      continue;
+    }
+    if (typeof factory === "function") {
+      factory(highcharts);
+      registry.add(factory);
+    }
+  }
+  appliedModules.set(highcharts, registry);
+}
+export {
+  Chart,
+  exposeHighchartsGlobals,
+  initHighchartsModules
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["import type Highcharts from 'highcharts';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n  chart: Highcharts.Chart | null;\n  container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n  highcharts: typeof Highcharts;\n  options: Highcharts.Options;\n  constructorType?: ConstructorType;\n  onChartReady?: (chart: Highcharts.Chart) => void;\n  allowChartUpdate?: boolean;\n  immutable?: boolean;\n  updateArgs?: [\n    redraw?: boolean,\n    oneToOne?: boolean,\n    animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n  ];\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n  {\n    highcharts,\n    options,\n    constructorType = 'chart',\n    onChartReady,\n    allowChartUpdate = true,\n    immutable = false,\n    updateArgs = [true, true, true],\n    containerProps\n  },\n  ref\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartRef = useRef<Highcharts.Chart | null>(null);\n  const skipNextUpdateRef = useRef(true);\n  const onReadyRef = useRef(onChartReady);\n\n  onReadyRef.current = onChartReady;\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      chart: chartRef.current,\n      container: containerRef.current\n    }),\n    []\n  );\n\n  function destroyChart() {\n    chartRef.current?.destroy();\n    chartRef.current = null;\n  }\n\n  function createChart() {\n    if (!containerRef.current) {\n      return;\n    }\n\n    const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n    if (typeof factory !== 'function') {\n      throw new Error(\n        `Unknown Highcharts constructor \"${constructorType}\". ` +\n          'Make sure you passed the right Highcharts bundle.'\n      );\n    }\n\n    destroyChart();\n\n    chartRef.current = (\n      factory as (\n        container: HTMLElement,\n        options: Highcharts.Options,\n        callback?: (chart: Highcharts.Chart) => void\n      ) => Highcharts.Chart\n    )(containerRef.current, options, (chart) => {\n      onReadyRef.current?.(chart);\n    });\n\n    skipNextUpdateRef.current = true;\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    createChart();\n\n    return () => {\n      destroyChart();\n    };\n  }, [highcharts, constructorType]);\n\n  useIsomorphicLayoutEffect(() => {\n    const chart = chartRef.current;\n\n    if (!chart) {\n      return;\n    }\n\n    if (skipNextUpdateRef.current) {\n      skipNextUpdateRef.current = false;\n      return;\n    }\n\n    if (immutable) {\n      createChart();\n      return;\n    }\n\n    if (!allowChartUpdate) {\n      return;\n    }\n\n    chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n  }, [\n    options,\n    allowChartUpdate,\n    immutable,\n    updateArgs[0],\n    updateArgs[1],\n    updateArgs[2]\n  ]);\n\n  return <div {...containerProps} ref={containerRef} />;\n});\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import type Highcharts from 'highcharts';\n\nexport type HighchartsModuleFactory =\n  | ((highcharts: typeof Highcharts) => void)\n  | { default?: (highcharts: typeof Highcharts) => void };\n\ntype HighchartsGlobalScope = typeof globalThis & {\n  Highcharts?: typeof Highcharts;\n  _Highcharts?: typeof Highcharts;\n};\n\nconst appliedModules = new WeakMap<object, Set<unknown>>();\n\nexport function exposeHighchartsGlobals(highcharts: typeof Highcharts) {\n  const scope = globalThis as HighchartsGlobalScope;\n\n  scope.Highcharts = highcharts;\n  scope._Highcharts = highcharts;\n}\n\nexport function initHighchartsModules(\n  highcharts: typeof Highcharts,\n  ...modules: HighchartsModuleFactory[]\n) {\n  exposeHighchartsGlobals(highcharts);\n\n  const registry = appliedModules.get(highcharts) ?? new Set<unknown>();\n\n  for (const entry of modules) {\n    const factory = (entry as { default?: (highcharts: typeof Highcharts) => void }).default ?? entry;\n\n    if (registry.has(factory)) {\n      continue;\n    }\n\n    if (typeof factory === 'function') {\n      factory(highcharts);\n      registry.add(factory);\n    }\n  }\n\n  appliedModules.set(highcharts, registry);\n}\n"],"mappings":";AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;;;ACNP,SAAS,WAAW,uBAAuB;AAEpC,IAAM,4BACX,OAAO,WAAW,cAAc,kBAAkB;;;ADkI3C;AAtGF,IAAM,QAAQ,WAAoC,SAASA,OAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,aAAa,CAAC,MAAM,MAAM,IAAI;AAAA,EAC9B;AACF,GACA,KACA;AACA,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,WAAW,OAAgC,IAAI;AACrD,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,OAAO,YAAY;AAEtC,aAAW,UAAU;AAErB;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,OAAO,SAAS;AAAA,MAChB,WAAW,aAAa;AAAA,IAC1B;AAAA,IACA,CAAC;AAAA,EACH;AAEA,WAAS,eAAe;AACtB,aAAS,SAAS,QAAQ;AAC1B,aAAS,UAAU;AAAA,EACrB;AAEA,WAAS,cAAc;AACrB,QAAI,CAAC,aAAa,SAAS;AACzB;AAAA,IACF;AAEA,UAAM,UAAW,WAAkD,eAAe;AAElF,QAAI,OAAO,YAAY,YAAY;AACjC,YAAM,IAAI;AAAA,QACR,mCAAmC,eAAe;AAAA,MAEpD;AAAA,IACF;AAEA,iBAAa;AAEb,aAAS,UACP,QAKA,aAAa,SAAS,SAAS,CAAC,UAAU;AAC1C,iBAAW,UAAU,KAAK;AAAA,IAC5B,CAAC;AAED,sBAAkB,UAAU;AAAA,EAC9B;AAEA,4BAA0B,MAAM;AAC9B,gBAAY;AAEZ,WAAO,MAAM;AACX,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,4BAA0B,MAAM;AAC9B,UAAM,QAAQ,SAAS;AAEvB,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,UAAU;AAC5B;AAAA,IACF;AAEA,QAAI,WAAW;AACb,kBAAY;AACZ;AAAA,IACF;AAEA,QAAI,CAAC,kBAAkB;AACrB;AAAA,IACF;AAEA,UAAM,OAAO,SAAS,WAAW,CAAC,GAAG,WAAW,CAAC,GAAG,WAAW,CAAC,CAAC;AAAA,EACnE,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,EACd,CAAC;AAED,SAAO,oBAAC,SAAK,GAAG,gBAAgB,KAAK,cAAc;AACrD,CAAC;;;AE3HD,IAAM,iBAAiB,oBAAI,QAA8B;AAElD,SAAS,wBAAwB,YAA+B;AACrE,QAAM,QAAQ;AAEd,QAAM,aAAa;AACnB,QAAM,cAAc;AACtB;AAEO,SAAS,sBACd,eACG,SACH;AACA,0BAAwB,UAAU;AAElC,QAAM,WAAW,eAAe,IAAI,UAAU,KAAK,oBAAI,IAAa;AAEpE,aAAW,SAAS,SAAS;AAC3B,UAAM,UAAW,MAAgE,WAAW;AAE5F,QAAI,SAAS,IAAI,OAAO,GAAG;AACzB;AAAA,IACF;AAEA,QAAI,OAAO,YAAY,YAAY;AACjC,cAAQ,UAAU;AAClB,eAAS,IAAI,OAAO;AAAA,IACtB;AAAA,EACF;AAEA,iBAAe,IAAI,YAAY,QAAQ;AACzC;","names":["Chart"]}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@revivejs/react-highcharts",
+  "version": "17.0.0",
+  "description": "A thin React 17 wrapper for Highcharts with versioned demos.",
+  "keywords": [
+    "react",
+    "react-library",
+    "typescript",
+    "highcharts",
+    "charts",
+    "react-highcharts",
+    "highcharts-react",
+    "stock-chart",
+    "heatmap",
+    "3d-chart",
+    "wrapper",
+    "ui-component",
+    "revived",
+    "maintained"
+  ],
+  "homepage": "https://alexandroit.github.io/react-highcharts/",
+  "bugs": {
+    "url": "https://github.com/alexandroit/react-highcharts/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexandroit/react-highcharts.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist docs/react-17",
+    "docs:install:react-17": "cd docs-src/react-17 && npm install",
+    "build:docs:react-17": "cd docs-src/react-17 && npm run build",
+    "build:docs": "npm run build:docs:react-17",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "highcharts": ">=12.5.0",
+    "react": ">=17.0.0 <18.0.0",
+    "react-dom": ">=17.0.0 <18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.91",
+    "@types/react-dom": "17.0.26",
+    "highcharts": "12.5.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
+  }
+}