move to React 18 API

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## Unreleased
+### Bug fixes
+- Avoid deprecated React API
+
 ## [2.5.2] - 2022-07-21
 ### Bug fixes
 - Fix outgoing strucmotif query URL

src/viewer/index.ts

@@ -15,7 +15,6 @@ import { PluginSpec } from 'molstar/lib/mol-plugin/spec';
 
 import { ColorNames } from 'molstar/lib/mol-util/color/names';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { ModelLoader } from './helpers/model';
 import { PresetProps } from './helpers/preset';
@@ -49,6 +48,7 @@ import { GeometryExport } from 'molstar/lib/extensions/geo-export';
 import { Mp4Export } from 'molstar/lib/extensions/mp4-export';
 import { PartialCanvas3DProps } from 'molstar/lib/mol-canvas3d/canvas3d';
 import { RSCCScore } from './helpers/rscc/behavior';
+import { createRoot } from 'react-dom/client';
 
 /** package version, filled in at bundle build time */
 declare const __RCSB_MOLSTAR_VERSION__: string;
@@ -147,7 +147,12 @@ export class Viewer {
             },
             canvas3d: {
                 ...defaultSpec.canvas3d,
-                ...o.canvas3d
+                ...o.canvas3d,
+                renderer: {
+                    ...defaultSpec.canvas3d?.renderer,
+                    ...o.canvas3d?.renderer,
+                    backgroundColor: o.backgroundColor
+                }
             },
             components: {
                 ...defaultSpec.components,
@@ -212,10 +217,9 @@ export class Viewer {
                     this._plugin.representation.structure.registry.remove(MembraneOrientationRepresentationProvider);
                 }
 
-                ReactDOM.render(React.createElement(Plugin, { plugin: this._plugin }), element);
+                const root = createRoot(element);
+                root.render(React.createElement(Plugin, { plugin: this._plugin }));
 
-                const renderer = this._plugin.canvas3d!.props.renderer;
-                await PluginCommands.Canvas3D.SetSettings(this._plugin, { settings: { renderer: { ...renderer, backgroundColor: o.backgroundColor } } });
                 this._plugin.representation.structure.themes.colorThemeRegistry.add(SuperposeColorThemeProvider);
                 if (o.showNakbColorTheme) this._plugin.representation.structure.themes.colorThemeRegistry.add(NakbColorThemeProvider);