purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Upgrade to React 18 (#495)

Browse Source 
* chore: Upgrade to React 18

* runfix: Add children type to FC components

* chore: Remove @types/react
This commit is contained in:
Tatius Titus 2023-04-07 08:29:44 +03:30 committed by GitHub
parent fb7b1800cc
commit 30c2680b6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -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",

3
src/components/base/base-dialog.tsx
View File

@ -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;

7
src/components/base/base-error-boundary.tsx
View File

@ -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}

9
src/components/base/base-notice.tsx
View File

@ -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) => {

3
src/components/base/base-page.tsx
View File

@ -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) => {

12
src/components/setting/mods/setting-comp.tsx
View File

@ -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}

16
src/main.tsx
View File

@ -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>
);

39
yarn.lock
View File

@ -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"