From 30c2680b6f9f7c6980c3ee40a1e3dcd04e89ddbb Mon Sep 17 00:00:00 2001
From: Tatius Titus <129622680+tatiustaitus@users.noreply.github.com>
Date: Fri, 7 Apr 2023 08:29:44 +0330
Subject: [PATCH] chore: Upgrade to React 18 (#495)
* chore: Upgrade to React 18
* runfix: Add children type to FC components
* chore: Remove @types/react
---
package.json | 7 ++--
src/components/base/base-dialog.tsx | 3 +-
src/components/base/base-error-boundary.tsx | 7 +++-
src/components/base/base-notice.tsx | 9 +++--
src/components/base/base-page.tsx | 3 +-
src/components/setting/mods/setting-comp.tsx | 12 ++++--
src/main.tsx | 16 ++++++--
yarn.lock | 39 +++++++++-----------
8 files changed, 56 insertions(+), 40 deletions(-)
diff --git a/package.json b/package.json
index cab5f9d..5af5e36 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
"i18next": "^22.0.4",
"lodash-es": "^4.17.21",
"monaco-editor": "^0.34.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-hook-form": "^7.39.5",
"react-i18next": "^12.0.0",
@@ -49,8 +49,7 @@
"@types/js-cookie": "^3.0.2",
"@types/lodash": "^4.14.180",
"@types/lodash-es": "^4.17.7",
- "@types/react": "^17.0.0",
- "@types/react-dom": "^17.0.0",
+ "@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^2.0.1",
"adm-zip": "^0.5.9",
"cross-env": "^7.0.3",
diff --git a/src/components/base/base-dialog.tsx b/src/components/base/base-dialog.tsx
index 2c1e426..db4226c 100644
--- a/src/components/base/base-dialog.tsx
+++ b/src/components/base/base-dialog.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, useImperativeHandle, useState } from "react";
+import { ReactNode } from "react";
import {
Button,
Dialog,
@@ -18,6 +18,7 @@ interface Props {
disableCancel?: boolean;
disableFooter?: boolean;
contentSx?: SxProps<Theme>;
+ children?: ReactNode;
onOk?: () => void;
onCancel?: () => void;
onClose?: () => void;
diff --git a/src/components/base/base-error-boundary.tsx b/src/components/base/base-error-boundary.tsx
index 584fd8a..3c04508 100644
--- a/src/components/base/base-error-boundary.tsx
+++ b/src/components/base/base-error-boundary.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
function ErrorFallback({ error }: FallbackProps) {
@@ -9,7 +10,11 @@ function ErrorFallback({ error }: FallbackProps) {
);
}
-export const BaseErrorBoundary: React.FC = (props) => {
+interface BaseErrorBoundaryProps {
+ children?: ReactNode;
+}
+
+export const BaseErrorBoundary: React.FC<BaseErrorBoundaryProps> = (props) => {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
{props.children}
diff --git a/src/components/base/base-notice.tsx b/src/components/base/base-notice.tsx
index 6d45496..5849034 100644
--- a/src/components/base/base-notice.tsx
+++ b/src/components/base/base-notice.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
import { ReactNode, useState } from "react";
import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
@@ -77,13 +77,14 @@ export const Notice: NoticeInstance = (props) => {
const container = document.createElement("div");
parent.appendChild(container);
+ const root = createRoot(container);
const onUnmount = () => {
- const result = ReactDOM.unmountComponentAtNode(container);
- if (result && parent) setTimeout(() => parent.removeChild(container), 500);
+ root.unmount();
+ if (parent) setTimeout(() => parent.removeChild(container), 500);
};
- ReactDOM.render(<NoticeInner {...props} onClose={onUnmount} />, container);
+ root.render(<NoticeInner {...props} onClose={onUnmount} />);
};
(["info", "error", "success"] as const).forEach((type) => {
diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx
index fefaf82..869731a 100644
--- a/src/components/base/base-page.tsx
+++ b/src/components/base/base-page.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
import { Typography } from "@mui/material";
import { BaseErrorBoundary } from "./base-error-boundary";
@@ -6,6 +6,7 @@ interface Props {
title?: React.ReactNode; // the page title
header?: React.ReactNode; // something behind title
contentStyle?: React.CSSProperties;
+ children?: ReactNode;
}
export const BasePage: React.FC<Props> = (props) => {
diff --git a/src/components/setting/mods/setting-comp.tsx b/src/components/setting/mods/setting-comp.tsx
index 1464618..9b4225b 100644
--- a/src/components/setting/mods/setting-comp.tsx
+++ b/src/components/setting/mods/setting-comp.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
import {
Box,
List,
@@ -8,8 +8,9 @@ import {
} from "@mui/material";
interface ItemProps {
- label: React.ReactNode;
- extra?: React.ReactNode;
+ label: ReactNode;
+ extra?: ReactNode;
+ children?: ReactNode;
}
export const SettingItem: React.FC<ItemProps> = (props) => {
@@ -32,7 +33,10 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
);
};
-export const SettingList: React.FC<{ title: string }> = (props) => (
+export const SettingList: React.FC<{
+ title: string;
+ children: ReactNode;
+}> = (props) => (
<List>
<ListSubheader sx={{ background: "transparent" }} disableSticky>
{props.title}
diff --git a/src/main.tsx b/src/main.tsx
index b429b76..0b0cf98 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,19 +8,27 @@ if (!window.ResizeObserver) {
}
import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil";
import { BrowserRouter } from "react-router-dom";
import Layout from "./pages/_layout";
import "./services/i18n";
-ReactDOM.render(
+const mainElementId = "root";
+const container = document.getElementById(mainElementId);
+
+if (!container) {
+ throw new Error(
+ `No container '${mainElementId}' found to render application`
+ );
+}
+
+createRoot(container).render(
<React.StrictMode>
<RecoilRoot>
<BrowserRouter>
<Layout />
</BrowserRouter>
</RecoilRoot>
- </React.StrictMode>,
- document.getElementById("root")
+ </React.StrictMode>
);
diff --git a/yarn.lock b/yarn.lock
index c56952c..dc6111b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -916,10 +916,10 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-"@types/react-dom@^17.0.0":
- version "17.0.14"
- resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
- integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
+"@types/react-dom@^18.0.11":
+ version "18.0.11"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
+ integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
dependencies:
"@types/react" "*"
@@ -937,7 +937,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^17.0.0":
+"@types/react@*":
version "17.0.43"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -1995,14 +1995,13 @@ pump@^3.0.0:
end-of-stream "^1.1.0"
once "^1.3.1"
-react-dom@^17.0.2:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
- integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+ version "18.2.0"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+ integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
- scheduler "^0.20.2"
+ scheduler "^0.23.0"
react-error-boundary@^3.1.4:
version "3.1.4"
@@ -2072,13 +2071,12 @@ react-virtuoso@^3.1.3:
"@virtuoso.dev/react-urx" "^0.2.12"
"@virtuoso.dev/urx" "^0.2.12"
-react@^17.0.2:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
- integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+ version "18.2.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+ integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
readdirp@~3.6.0:
version "3.6.0"
@@ -2149,13 +2147,12 @@ sass@^1.54.0:
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
-scheduler@^0.20.2:
- version "0.20.2"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
- integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+ version "0.23.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+ integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
screenfull@^5.0.0:
version "5.2.0"
--
GitLab