fix: upgrade react-dom

TeselaGen · Jul 1, 2024 · 87c7b5c · 87c7b5c
1 parent 19d9867
commit 87c7b5c
Show file tree

Hide file tree

Showing 55 changed files with 2,242 additions and 2,667 deletions.
diff --git a/example-demos/oveViteDemo/src/index.jsx b/example-demos/oveViteDemo/src/index.jsx
@@ -1,6 +1,6 @@
 import "./shimGlobal";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { Loading } from "@teselagen/ui";
 
@@ -10,14 +10,16 @@ import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <Loading />
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx b/example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx
@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
diff --git a/helperUtils/renderDemo.js b/helperUtils/renderDemo.js
diff --git a/helperUtils/renderDemo.jsx b/helperUtils/renderDemo.jsx
@@ -0,0 +1,3 @@
+import { createRoot } from "react-dom/client";
+const root = createRoot(document.querySelector("#demo"));
+export default Demo => root.render(<Demo />);
diff --git a/packages/ove/demo/src/index.js → packages/ove/demo/src/index.jsx b/packages/ove/demo/src/index.js → packages/ove/demo/src/index.jsx
@@ -1,10 +1,6 @@
 import React, { useMemo } from "react";
 import { Provider } from "react-redux";
-
 import store from "./store";
-// import { createRoot } from "react-dom/client";
-import { render } from "react-dom";
-
 import {
   CircularView,
   RowView,
@@ -13,18 +9,17 @@ import {
   updateEditor,
   EnzymeViewer
 } from "../../src";
-
 import exampleSequenceData from "./exampleData/exampleSequenceData";
 import StandaloneDemo from "./StandaloneDemo";
 import SimpleCircularOrLinearViewDemo from "./SimpleCircularOrLinearViewDemo";
 import StandaloneAlignmentDemo from "./StandaloneAlignmentDemo";
 import AlignmentDemo from "./AlignmentDemo";
 import EditorDemo from "./EditorDemo";
 import VersionHistoryViewDemo from "./VersionHistoryViewDemo";
-
 import "./style.css";
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { DemoPage } from "@teselagen/shared-demo";
+import { createRoot } from "react-dom/client";
 
 const demos = {
   Editor: {
@@ -74,11 +69,9 @@ const demos = {
       return (
         <WrapSimpleDemo>
           <EnzymeViewer
-            {...{
-              sequence: enzyme.site,
-              reverseSnipPosition: enzyme.bottomSnipOffset,
-              forwardSnipPosition: enzyme.topSnipOffset
-            }}
+            sequence={enzyme.site}
+            reverseSnipPosition={enzyme.bottomSnipOffset}
+            forwardSnipPosition={enzyme.topSnipOffset}
           />
         </WrapSimpleDemo>
       );
@@ -131,5 +124,5 @@ const WrapSimpleDemo = ({ children }) => {
   return children;
 };
 
-// createRoot(document.querySelector("#demo")).render(<Demo />);
-render(<Demo />, document.querySelector("#demo"));
+const root = createRoot(document.querySelector("#demo"));
+root.render(<Demo />);
diff --git a/packages/ove/project.json b/packages/ove/project.json
@@ -67,7 +67,6 @@
       // "dependsOn": ["build:demo"],
       "command": "yarn gh-pages -a -d demo-dist"
     },
-
     "launch-e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {

diff --git a/packages/ove/src/AlignmentView/index.js b/packages/ove/src/AlignmentView/index.js
@@ -5,7 +5,7 @@ import {
   Draggable as DndDraggable
 } from "@hello-pangea/dnd";
 import Clipboard from "clipboard";
-import React from "react";
+import React, { createRef } from "react";
 import { connect } from "react-redux";
 import {
   Button,
@@ -33,7 +33,6 @@ import {
 } from "lodash-es";
 import { getSequenceDataBetweenRange } from "@teselagen/sequence-utils";
 import ReactList from "@teselagen/react-list";
-import ReactDOM from "react-dom";
 
 import { NonReduxEnhancedLinearView } from "../LinearView";
 import Minimap, { getTrimmedRangesToDisplay } from "./Minimap";
@@ -94,6 +93,7 @@ try {
 
 export class AlignmentView extends React.Component {
   bindOutsideChangeHelper = {};
+  InfiniteScroller = createRef();
   constructor(props) {
     super(props);
     window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
@@ -389,11 +389,12 @@ export class AlignmentView extends React.Component {
   setVerticalScrollRange = throttle(() => {
     if (
       this &&
-      this.InfiniteScroller &&
-      this.InfiniteScroller.getFractionalVisibleRange &&
+      this.InfiniteScroller.current &&
+      this.InfiniteScroller.current.getFractionalVisibleRange &&
       this.easyStore
     ) {
-      let [start, end] = this.InfiniteScroller.getFractionalVisibleRange();
+      let [start, end] =
+        this.InfiniteScroller.current.getFractionalVisibleRange();
       if (this.props.hasTemplate) {
         end = end + 1;
       }
@@ -495,7 +496,7 @@ export class AlignmentView extends React.Component {
     }
   };
   scrollYToTrack = trackIndex => {
-    this.InfiniteScroller.scrollTo(trackIndex);
+    this.InfiniteScroller.current.scrollTo(trackIndex);
   };
 
   estimateRowHeight = (index, cache) => {
@@ -1313,7 +1314,7 @@ export class AlignmentView extends React.Component {
                     sequenceLength={sequenceLength}
                     charWidth={this.getCharWidthInLinearView()}
                     row={{ start: 0, end: sequenceLength - 1 }}
-                  ></PerformantSelectionLayer>
+                  />
                   <PerformantCaret
                     leftMargin={this.state.nameDivWidth}
                     className="veAlignmentSelectionLayer"
@@ -1328,8 +1329,8 @@ export class AlignmentView extends React.Component {
                   ) : (
                     <ReactList
                       ref={c => {
-                        this.InfiniteScroller = c;
-                        const domNode = ReactDOM.findDOMNode(c);
+                        this.InfiniteScroller.current = c;
+                        const domNode = this.InfiniteScroller.current;
                         if (domNode instanceof HTMLElement) {
                           drop_provided.innerRef(domNode);
                         }
@@ -1632,23 +1633,23 @@ export class AlignmentView extends React.Component {
                     >
                       {this.state.saveMessageLoading ? (
                         <div>
-                          <Spinner size={15}></Spinner>
+                          <Spinner size={15} />
                         </div>
                       ) : (
-                        <Icon icon="tick-circle" intent="success"></Icon>
+                        <Icon icon="tick-circle" intent="success" />
                       )}{" "}
                       &nbsp;
                       {this.state.saveMessage}
                     </div>
                   )}
                 </div>
                 {hasTemplate ? (
-                  <React.Fragment>
+                  <>
                     <div className="alignmentTrackFixedToTop">
                       {getTrackVis([firstTrack], true, alignmentTracks)}
                     </div>
                     {getTrackVis(otherTracks, false, alignmentTracks)}
-                  </React.Fragment>
+                  </>
                 ) : (
                   getTrackVis(alignmentTracks, false, alignmentTracks)
                 )}
@@ -1668,49 +1669,46 @@ export class AlignmentView extends React.Component {
                 }}
               >
                 <Minimap
-                  {...{
-                    selectionLayerComp: (
-                      <React.Fragment>
-                        <PerformantSelectionLayer
-                          is
-                          hideCarets
-                          className="veAlignmentSelectionLayer veMinimapSelectionLayer"
-                          easyStore={this.easyStore}
-                          sequenceLength={sequenceLength}
-                          charWidth={this.getMinCharWidth(true)}
-                          row={{ start: 0, end: sequenceLength - 1 }}
-                        ></PerformantSelectionLayer>
-                        <PerformantCaret
-                          style={{
-                            opacity: 0.2
-                          }}
-                          className="veAlignmentSelectionLayer veMinimapSelectionLayer"
-                          sequenceLength={sequenceLength}
-                          charWidth={this.getMinCharWidth(true)}
-                          row={{ start: 0, end: sequenceLength - 1 }}
-                          easyStore={this.easyStore}
-                        />
-                      </React.Fragment>
-                    ),
-                    alignmentTracks,
-                    dimensions: {
-                      width: Math.max(this.state.width, 10) || 10
-                    },
-                    nameDivOffsetPercent: 0,
-                    // this.state.nameDivWidth / this.getMaxLinearViewWidth(),
-                    scrollYToTrack: this.scrollYToTrack,
-                    onSizeAdjust: this.onMinimapSizeAdjust,
-                    minSliderSize,
-                    laneHeight:
-                      minimapLaneHeight ||
-                      (alignmentTracks.length > 5 ? 10 : 17),
-                    laneSpacing:
-                      minimapLaneSpacing ||
-                      (alignmentTracks.length > 5 ? 2 : 1),
-                    easyStore: this.easyStore,
-                    numBpsShownInLinearView: this.getNumBpsShownInLinearView(),
-                    scrollAlignmentView: this.state.scrollAlignmentView
+                  selectionLayerComp={
+                    <>
+                      <PerformantSelectionLayer
+                        is
+                        hideCarets
+                        className="veAlignmentSelectionLayer veMinimapSelectionLayer"
+                        easyStore={this.easyStore}
+                        sequenceLength={sequenceLength}
+                        charWidth={this.getMinCharWidth(true)}
+                        row={{ start: 0, end: sequenceLength - 1 }}
+                      />
+                      <PerformantCaret
+                        style={{
+                          opacity: 0.2
+                        }}
+                        className="veAlignmentSelectionLayer veMinimapSelectionLayer"
+                        sequenceLength={sequenceLength}
+                        charWidth={this.getMinCharWidth(true)}
+                        row={{ start: 0, end: sequenceLength - 1 }}
+                        easyStore={this.easyStore}
+                      />
+                    </>
+                  }
+                  alignmentTracks={alignmentTracks}
+                  dimensions={{
+                    width: Math.max(this.state.width, 10) || 10
                   }}
+                  nameDivOffsetPercent={0}
+                  scrollYToTrack={this.scrollYToTrack}
+                  onSizeAdjust={this.onMinimapSizeAdjust}
+                  minSliderSize={minSliderSize}
+                  laneHeight={
+                    minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17)
+                  }
+                  laneSpacing={
+                    minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1)
+                  }
+                  easyStore={this.easyStore}
+                  numBpsShownInLinearView={this.getNumBpsShownInLinearView()}
+                  scrollAlignmentView={this.state.scrollAlignmentView}
                   onMinimapScrollX={this.scrollAlignmentToPercent}
                 />
               </div>