Merge pull request #897 from wooferzfg/react-upgrade

Upgrade React to v18

.github/workflows/ci.yml

@@ -63,7 +63,7 @@ jobs:
         mv wasm-bindgen-${{ steps.wasm-bindgen.outputs.version }}-x86_64-unknown-linux-musl/wasm* .
 
     - name: Install npm packages
-      run: npm ci
+      run: npm ci -f
       env:
         DETECT_CHROMEDRIVER_VERSION: true
 

README.md

@@ -35,7 +35,7 @@ cargo install wasm-bindgen-cli
 You need to set up some npm modules before compiling the project:
 
 ```bash
-npm install
+npm install -f
 ```
 
 You are now ready to build livesplit-core, which powers LiveSplit One:

package.json

@@ -20,9 +20,9 @@
   "license": "ISC",
   "dependencies": {
     "@types/commonmark": "^0.27.5",
-    "@types/react": "^16.14.32",
+    "@types/react": "^18.3.3",
     "@types/react-color": "^3.0.12",
-    "@types/react-dom": "^16.9.16",
+    "@types/react-dom": "^18.3.0",
     "@types/react-resizable": "^3.0.3",
     "@types/react-sidebar": "^3.0.2",
     "@types/react-toggle": "^4.0.3",
@@ -30,14 +30,14 @@
     "commonmark-react-renderer": "^4.3.5",
     "fast-deep-equal": "^3.1.3",
     "idb": "^8.0.0",
-    "react": "^16.14.0",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-contextmenu": "^2.14.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.3.1",
     "react-linkifier": "^4.0.0",
     "react-resizable": "^3.0.4",
     "react-sidebar": "^3.0.2",
-    "react-toastify": "^9.1.1",
+    "react-toastify": "^10.0.5",
     "react-toggle": "^4.1.3",
     "resize-observer": "^1.0.4"
   },

src/index.tsx

@@ -29,12 +29,12 @@ try {
     const [
         { LiveSplit },
         React,
-        ReactDOM,
-        { toast, ToastContainer },
+        { createRoot },
+        { ToastContainer },
     ] = await Promise.all([
         import("./ui/LiveSplit"),
         import("react"),
-        import("react-dom"),
+        import("react-dom/client"),
         import("react-toastify"),
     ]);
 
@@ -81,7 +81,9 @@ try {
             // should still have the fallback fonts that we can fall back to.
         }
 
-        ReactDOM.render(
+        const container = document.getElementById("base");
+        const root = createRoot(container!);
+        root.render(
             <div>
                 <LiveSplit
                     splits={splits}
@@ -93,13 +95,12 @@ try {
                     generalSettings={generalSettings}
                 />
                 <ToastContainer
-                    position={toast.POSITION.BOTTOM_RIGHT}
+                    position="bottom-right"
                     toastClassName="toast-class"
                     bodyClassName="toast-body"
                     theme="dark"
                 />
             </div>,
-            document.getElementById("base"),
         );
     } catch (e: any) {
         if (e.name === "InvalidStateError") {

src/type-definitions/react-contextmenu.d.ts

@@ -0,0 +1,15 @@
+declare module "react-contextmenu" {
+    import { ReactNode } from "react";
+
+    export interface ContextMenuProps {
+        children?: ReactNode,
+    }
+
+    export interface ContextMenuTriggerProps {
+        children?: ReactNode,
+    }
+
+    export interface MenuItemProps {
+        children?: ReactNode,
+    }
+}

src/type-definitions/react-linkifier.d.ts

@@ -1,8 +1,9 @@
 declare module "react-linkifier" {
-    import { Component } from "react";
+    import { Component, ReactNode } from "react";
 
     export interface Props {
         target?: string,
+        children: ReactNode,
     }
 
     export default class Linkifier extends Component<Props> { }

src/ui/DragUpload.tsx

@@ -4,7 +4,7 @@ import { toast } from "react-toastify";
 import "../css/DragUpload.scss";
 
 export interface Props {
-    children: any,
+    children: React.ReactNode,
     importLayout?: (file: File) => Promise<void>,
     importSplits(file: File): Promise<void>,
 }

src/util/AutoRefresh.tsx

@@ -4,6 +4,7 @@ import { FRAME_RATE_AUTOMATIC, FrameRateSetting, batteryAwareFrameRate } from ".
 export interface Props {
     frameRate: FrameRateSetting,
     update(): void,
+    children: React.ReactNode,
 }
 
 export default class AutoRefresh extends React.Component<Props> {