feat: upgrade react 18

web/package.json

@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.5",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "@vitejs/plugin-react": "^1.0.0",
@@ -29,7 +29,7 @@
     "prettier": "2.5.1",
     "tailwindcss": "^3.0.18",
     "typescript": "^4.3.2",
-    "vite": "^2.6.14"
+    "vite": "^2.9.0"
   },
   "license": "MIT"
 }

web/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import appContext from "../stores/appContext";
 import Provider from "../labs/Provider";
 import appStore from "../stores/appStore";
@@ -39,6 +39,7 @@ export function showDialog<T extends DialogProps>(
   props?: Omit<T, "destroy">
 ): DialogCallback {
   const tempDiv = document.createElement("div");
+  const dialog = createRoot(tempDiv);
   document.body.append(tempDiv);
 
   setTimeout(() => {
@@ -50,8 +51,8 @@ export function showDialog<T extends DialogProps>(
       tempDiv.firstElementChild?.classList.remove("showup");
       tempDiv.firstElementChild?.classList.add("showoff");
       setTimeout(() => {
+        dialog.unmount();
         tempDiv.remove();
-        ReactDOM.unmountComponentAtNode(tempDiv);
       }, ANIMATION_DURATION);
     },
   };
@@ -75,7 +76,7 @@ export function showDialog<T extends DialogProps>(
     );
   }
 
-  ReactDOM.render(Fragment, tempDiv);
+  dialog.render(Fragment);
 
   return cbs;
 }

web/src/components/Toast.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import ReactDOM from "react-dom";
+import { createRoot, Root } from "react-dom/client";
 import { TOAST_ANIMATION_DURATION } from "../helpers/consts";
 import "../less/toast.less";
 
@@ -39,7 +39,7 @@ const Toast: React.FC<ToastItemProps> = (props: ToastItemProps) => {
 class ToastHelper {
   private shownToastAmount = 0;
   private toastWrapper: HTMLDivElement;
-  private shownToastContainers: HTMLDivElement[] = [];
+  private shownToastContainers: [Root, HTMLDivElement][] = [];
 
   constructor() {
     const wrapperClassName = "toast-list-container";
@@ -63,10 +63,11 @@ class ToastHelper {
 
   private showToast = (config: ToastConfig) => {
     const tempDiv = document.createElement("div");
+    const toast = createRoot(tempDiv);
     tempDiv.className = `toast-wrapper ${config.type}`;
     this.toastWrapper.appendChild(tempDiv);
     this.shownToastAmount++;
-    this.shownToastContainers.push(tempDiv);
+    this.shownToastContainers.push([toast, tempDiv]);
 
     setTimeout(() => {
       tempDiv.classList.add("showup");
@@ -83,9 +84,9 @@ class ToastHelper {
 
           this.shownToastAmount--;
           if (this.shownToastAmount === 0) {
-            for (const d of this.shownToastContainers) {
-              ReactDOM.unmountComponentAtNode(d);
-              d.remove();
+            for (const [root, tempDiv] of this.shownToastContainers) {
+              root.unmount();
+              tempDiv.remove();
             }
             this.shownToastContainers.splice(0, this.shownToastContainers.length);
           }
@@ -93,7 +94,7 @@ class ToastHelper {
       },
     };
 
-    ReactDOM.render(<Toast {...config} destory={cbs.destory} />, tempDiv);
+    toast.render(<Toast {...config} destory={cbs.destory} />);
 
     return cbs;
   };

web/src/main.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import Provider from "./labs/Provider";
 import appContext from "./stores/appContext";
 import appStore from "./stores/appStore";
@@ -8,11 +8,12 @@ import "./helpers/polyfill";
 import "./less/global.less";
 import "./css/index.css";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container as HTMLElement);
+root.render(
   <React.StrictMode>
     <Provider store={appStore} context={appContext}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );