fix: use client version of react-dom

Closes: #22

.github/workflows/lactame.yml

@@ -12,10 +12,10 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get package name
         run: echo "PACKAGE_NAME=$(jq .name package.json | tr -d '"')" >> $GITHUB_ENV
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: Install dependencies

.github/workflows/typedoc.yml

@@ -6,15 +6,15 @@ on:
     types: [published]
 
 env:
-  NODE_VERSION: 16.x
+  NODE_VERSION: 20.x
   ENTRY_FILE: 'src/index.ts'
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: Install dependencies

package.json

@@ -41,6 +41,7 @@
     "eslint": "^8.57.0",
     "eslint-config-cheminfo-react": "^10.1.0",
     "eslint-config-cheminfo-typescript": "^12.2.0",
+    "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/SVGBoxesTree.tsx

@@ -24,7 +24,7 @@ export function SVGBoxesTree(props) {
   }
   svgSize.width = Math.max(...width);
 
-  const svg = (
+  return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox={`0 0 ${svgSize.width} ${svgSize.height}`}
@@ -34,6 +34,4 @@ export function SVGBoxesTree(props) {
       {arrows}
     </svg>
   );
-
-  return svg;
 }

src/data/getBoxes.tsx

@@ -5,10 +5,12 @@ export function getBoxes(nodes) {
 }
 
 function appendBoxes(nodes, boxes) {
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
+  for (const node of nodes) {
     boxes.push(
-      <g key={i} transform={`translate(${node.position.x} ${node.position.y})`}>
+      <g
+        key={boxes.length}
+        transform={`translate(${node.position.x} ${node.position.y})`}
+      >
         {node.element}
       </g>,
     );

src/render.tsx

@@ -1,10 +1,14 @@
-import { renderToStaticMarkup } from 'react-dom/server';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { SVGBoxesTree } from './components/SVGBoxesTree';
 
 export function render(tree, options) {
-  const result = renderToStaticMarkup(
-    <SVGBoxesTree tree={tree} {...options} />,
-  );
-  return result;
+  const element = <SVGBoxesTree tree={tree} {...options} />;
+  const div = document.createElement('div');
+  const root = createRoot(div);
+  flushSync(() => {
+    root.render(element);
+  });
+  return div.innerHTML;
 }

vite.config.mts

@@ -1,6 +1,9 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
+  test: {
+    environment: 'jsdom'
+  }
 });