remove deprecated react methods (#1569)

heswell · web-flow · commit 27125f818e61 · 2025-04-14T17:32:16.000+01:00
diff --git a/vuu-ui/tools/vuu-showcase/scripts/html-template.ts b/vuu-ui/tools/vuu-showcase/scripts/html-template.ts
@@ -6,15 +6,16 @@ export default `<!doctype html>
     <title>Vuu Showcase</title>
     <script type="module">
       import React from "react";
-      import ReactDOM from "react-dom";
+      import {createRoot} from "react-dom/client";
       import { Showcase, ShowcaseStandalone } from "@finos/vuu-showcase";
       import { hasUrlParameter } from "@finos/vuu-utils";
       const { default: treeSource } = await import("/treeSourceJson.js");
-      const root = document.getElementById("root");
+      const container = document.getElementById("root");
+      const root = createRoot(container);
       if (hasUrlParameter("standalone")) {
-        ReactDOM.render(React.createElement(ShowcaseStandalone, { treeSource }), root);
+        root.render(React.createElement(ShowcaseStandalone, { treeSource }));
       } else {
-        ReactDOM.render(React.createElement(Showcase, { treeSource }), root);
+        root.render(React.createElement(Showcase, { treeSource }));
       }
     </script>
   </head>
diff --git a/vuu-ui/tools/vuu-showcase/src/root.ts b/vuu-ui/tools/vuu-showcase/src/root.ts
@@ -1,17 +1,19 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Showcase, ShowcaseStandalone } from "@finos/vuu-showcase";
 import { hasUrlParameter, TreeSourceNode } from "@finos/vuu-utils";
 
 function start(treeSource: TreeSourceNode[]) {
-  const root = document.getElementById("root");
-  if (hasUrlParameter("standalone")) {
-    ReactDOM.render(
-      React.createElement(ShowcaseStandalone, { treeSource }),
-      root,
-    );
+  const container = document.getElementById("root");
+  if (container) {
+    const root = createRoot(container);
+    if (hasUrlParameter("standalone")) {
+      root.render(React.createElement(ShowcaseStandalone, { treeSource }));
+    } else {
+      root.render(React.createElement(Showcase, { treeSource }));
+    }
   } else {
-    ReactDOM.render(React.createElement(Showcase, { treeSource }), root);
+    throw Error("document does not contain #root wlwmwnt");
   }
 }
 
