From 1a52b40dfc2a15122cd3ac66296b265ea809338f Mon Sep 17 00:00:00 2001
From: Ben Saufley <ben.saufley@pmg.com>
Date: Thu, 20 Nov 2025 21:13:06 -0500
Subject: [PATCH 1/2] Swap out renderToStaticMarkup from react-dom/server for
 client-friendly renderer\ \ Resolves #544. I'm not clear on how TS plays into
 this - files are mostly .js with .d.ts files, but the build command is npx
 tsc, so it should accept TypeScript files fine. With that in mind, I used TS.

---
 Gantt.js                |  2 +-
 Highcharts.js           |  2 +-
 Maps.js                 |  2 +-
 Stock.js                |  2 +-
 renderToStaticMarkup.ts | 17 +++++++++++++++++
 5 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 renderToStaticMarkup.ts

diff --git a/Gantt.js b/Gantt.js
index 4ab3c91..3634a0f 100644
--- a/Gantt.js
+++ b/Gantt.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highcharts-gantt.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Highcharts.js b/Highcharts.js
index b7ed693..c9dc000 100644
--- a/Highcharts.js
+++ b/Highcharts.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highcharts.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Maps.js b/Maps.js
index 9ba2ba7..eeb71a5 100644
--- a/Maps.js
+++ b/Maps.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highmaps.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Stock.js b/Stock.js
index dbf45ba..a1a75c0 100644
--- a/Stock.js
+++ b/Stock.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highstock.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/renderToStaticMarkup.ts b/renderToStaticMarkup.ts
new file mode 100644
index 0000000..11c3533
--- /dev/null
+++ b/renderToStaticMarkup.ts
@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+
+/**
+ * Mimics react-dom/server's renderToStaticMarkup method for client environments,
+ * as suggested by React docs:
+ * https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code
+ */
+export default function renderToStaticMarkup(element: ReactElement): string {
+  const div = document.createElement("div");
+  const root = createRoot(div);
+  flushSync(() => {
+    root.render(element);
+  });
+  return div.innerHTML;
+}

From 2768131d30370afd1d1f5035547525f1ed21fbd1 Mon Sep 17 00:00:00 2001
From: Ben Saufley <ben.saufley@pmg.com>
Date: Thu, 20 Nov 2025 21:17:28 -0500
Subject: [PATCH 2/2] Add react-dom types peerDep

react-dom was already in use by the code now being replaced; this just makes sure types are taken care of
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 3140aec..ae23bf0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "peerDependencies": {
     "@types/react": ">=18",
+    "@types/react-dom": ">=18",
     "react": ">=18",
     "react-dom": ">=18",
     "highcharts": ">=12.0.0"