From ae71d36c7f1ed710300d912056f3abb3c326b16f Mon Sep 17 00:00:00 2001 From: Zephyr Lykos Date: Fri, 23 Feb 2024 18:24:34 +0800 Subject: [PATCH] cleanup: wip part 2 We have a working vite config now --- package.json | 2 + resources/assets/src/components/Captcha.tsx | 2 +- .../assets/src/components/ViewerSkeleton.tsx | 24 +++--- resources/assets/src/scripts/toast.tsx | 2 +- .../admin/PlayersManagement/LoadingCard.tsx | 41 +++++---- .../admin/PlayersManagement/LoadingRow.tsx | 19 ++--- .../views/admin/PlayersManagement/index.tsx | 6 +- .../views/admin/PluginsManagement/index.tsx | 6 +- .../src/views/admin/PluginsMarket/index.tsx | 18 ++-- .../views/admin/ReportsManagement/index.tsx | 6 +- .../src/views/admin/Translations/index.tsx | 6 +- .../admin/UsersManagement/LoadingCard.tsx | 83 +++++++++---------- .../admin/UsersManagement/LoadingRow.tsx | 19 ++--- .../src/views/admin/UsersManagement/index.tsx | 6 +- resources/assets/src/views/auth/Forgot.tsx | 11 +-- resources/assets/src/views/auth/Login.tsx | 13 ++- .../assets/src/views/auth/Registration.tsx | 9 +- resources/assets/src/views/auth/Reset.tsx | 8 +- .../assets/src/views/skinlib/Show/index.tsx | 6 +- .../src/views/skinlib/SkinLibrary/index.tsx | 6 +- resources/assets/src/views/skinlib/Upload.tsx | 6 +- .../views/user/Closet/LoadingClosetItem.tsx | 33 ++++---- .../assets/src/views/user/Closet/index.tsx | 2 +- .../assets/src/views/user/Dashboard/index.tsx | 10 +-- .../assets/src/views/user/OAuth/index.tsx | 6 +- .../src/views/user/Players/LoadingRow.tsx | 19 ++--- .../assets/src/views/user/Players/index.tsx | 6 +- .../src/views/widgets/EmailVerification.tsx | 2 +- .../src/views/widgets/NotificationsList.tsx | 2 +- .../tests/components/EmailSuggestion.test.tsx | 2 +- vite.config.ts | 8 +- yarn.lock | 21 ++++- 32 files changed, 207 insertions(+), 203 deletions(-) diff --git a/package.json b/package.json index 3f6fc912..4303e4fa 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "postcss": "^8.4.35", "typescript": "^5.3.3", "vite": "^5.1.4", + "vite-plugin-top-level-await": "^1.4.1", "vite-plugin-wasm": "^3.3.0", "vitest": "^1.3.1", "xo": "^0.57.0" @@ -109,6 +110,7 @@ "extends": [ "xo", "xo-react", + "plugin:react/jsx-runtime", "./node_modules/xo/config/plugins.cjs" ], "rules": { diff --git a/resources/assets/src/components/Captcha.tsx b/resources/assets/src/components/Captcha.tsx index 4d3f2015..d18a1698 100644 --- a/resources/assets/src/components/Captcha.tsx +++ b/resources/assets/src/components/Captcha.tsx @@ -1,5 +1,5 @@ /** @jsxImportSource @emotion/react */ -import * as React from 'react'; +import React from 'react'; import Reaptcha from 'reaptcha'; import {emit, on} from '@/scripts/event'; import {t} from '@/scripts/i18n'; diff --git a/resources/assets/src/components/ViewerSkeleton.tsx b/resources/assets/src/components/ViewerSkeleton.tsx index 9c94ebfc..603f52eb 100644 --- a/resources/assets/src/components/ViewerSkeleton.tsx +++ b/resources/assets/src/components/ViewerSkeleton.tsx @@ -1,17 +1,17 @@ -import React from 'react'; import {t} from '@/scripts/i18n'; -const ViewerSkeleton: React.FC = () => ( -
-
-
-

- {t('general.texturePreview')} -

+export default function ViewerSkeleton() { + return ( +
+
+
+

+ {t('general.texturePreview')} +

+
+
-
-
-); + ); +} -export default ViewerSkeleton; diff --git a/resources/assets/src/scripts/toast.tsx b/resources/assets/src/scripts/toast.tsx index 71ae55e6..aaa6d158 100644 --- a/resources/assets/src/scripts/toast.tsx +++ b/resources/assets/src/scripts/toast.tsx @@ -10,7 +10,7 @@ type ToastQueue = QueueElement[]; const TOAST_EVENT = Symbol('toast'); const CLEAR_EVENT = Symbol('clear'); -export const ToastContainer: React.FC = () => { +export function ToastContainer() { const [queue, setQueue] = useState([]); const handleClose = (id: string) => { diff --git a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx index 43ad9e01..b3bdec14 100644 --- a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx +++ b/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; import clsx from 'clsx'; @@ -10,28 +9,28 @@ const ShrinkedSkeleton = styled(Skeleton)<{width?: string}>` width: ${properties => properties.width}; `; -const LoadingCard: React.FC = () => ( - -
- -
-
-
-
- -
-
+export default function LoadingCard() { + return ( + +
+
-
-
- +
+
+
+ +
+
- +
+ +
+
+ +
-
- -); - -export default LoadingCard; + + ); +} diff --git a/resources/assets/src/views/admin/PlayersManagement/LoadingRow.tsx b/resources/assets/src/views/admin/PlayersManagement/LoadingRow.tsx index af7c1a62..97fa8dbe 100644 --- a/resources/assets/src/views/admin/PlayersManagement/LoadingRow.tsx +++ b/resources/assets/src/views/admin/PlayersManagement/LoadingRow.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; @@ -6,12 +5,12 @@ const ThickSkeleton = styled(Skeleton)` line-height: 2; `; -const LoadingRow: React.FC = () => ( - - - - - -); - -export default LoadingRow; +export default function LoadingRow() { + return ( + + + + + + ); +} diff --git a/resources/assets/src/views/admin/PlayersManagement/index.tsx b/resources/assets/src/views/admin/PlayersManagement/index.tsx index e4609b14..cdaabee3 100644 --- a/resources/assets/src/views/admin/PlayersManagement/index.tsx +++ b/resources/assets/src/views/admin/PlayersManagement/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect, useLayoutEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import {useImmer} from 'use-immer'; import Header from '../UsersManagement/Header'; import Card from './Card'; @@ -15,7 +15,7 @@ import {toast, showModal} from '@/scripts/notify'; import urls from '@/scripts/urls'; import Pagination from '@/components/Pagination'; -const PlayersManagement: React.FC = () => { +function PlayersManagement() { const [players, setPlayers] = useImmer([]); const [page, setPage] = useState(1); const [totalPages, setTotalPages] = useState(1); @@ -274,4 +274,4 @@ const PlayersManagement: React.FC = () => { ); }; -export default hot(PlayersManagement); +export default PlayersManagement; diff --git a/resources/assets/src/views/admin/PluginsManagement/index.tsx b/resources/assets/src/views/admin/PluginsManagement/index.tsx index 0a364c7e..36af90e7 100644 --- a/resources/assets/src/views/admin/PluginsManagement/index.tsx +++ b/resources/assets/src/views/admin/PluginsManagement/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import {useImmer} from 'use-immer'; import InfoBox from './InfoBox'; import type {Plugin} from './types'; @@ -9,7 +9,7 @@ import {toast, showModal} from '@/scripts/notify'; import FileInput from '@/components/FileInput'; import Loading from '@/components/Loading'; -const PluginsManagement: React.FC = () => { +function PluginsManagement() { const [isLoading, setIsLoading] = useState(true); const [plugins, setPlugins] = useImmer([]); const [file, setFile] = useState(null); @@ -245,4 +245,4 @@ const PluginsManagement: React.FC = () => { ); }; -export default hot(PluginsManagement); +export default PluginsManagement; diff --git a/resources/assets/src/views/admin/PluginsMarket/index.tsx b/resources/assets/src/views/admin/PluginsMarket/index.tsx index 9a47429c..ef3e46d5 100644 --- a/resources/assets/src/views/admin/PluginsMarket/index.tsx +++ b/resources/assets/src/views/admin/PluginsMarket/index.tsx @@ -1,5 +1,4 @@ -import React, {useState, useEffect, useMemo} from 'react'; -import {hot} from 'react-hot-loader/root'; +import {useState, useEffect, useMemo} from 'react'; import {enableMapSet} from 'immer'; import {useImmer} from 'use-immer'; import type {Plugin} from './types'; @@ -12,7 +11,7 @@ import Pagination from '@/components/Pagination'; enableMapSet(); -const PluginsMarket: React.FC = () => { +export default function PluginsMarket() { const [plugins, setPlugins] = useImmer([]); const [isLoading, setIsLoading] = useState(true); const [search, setSearch] = useState(''); @@ -38,7 +37,7 @@ const PluginsMarket: React.FC = () => { setIsLoading(false); }; - getPlugins(); + void getPlugins(); }, []); const handleSearchChange = (event: React.ChangeEvent) => { @@ -74,7 +73,7 @@ const PluginsMarket: React.FC = () => { plugins[index].installed = plugins[index].version; }); } else { - showModal({ + void showModal({ mode: 'alert', children: (
@@ -107,7 +106,7 @@ const PluginsMarket: React.FC = () => { return; } - handleInstall(plugin, index); + void handleInstall(plugin, index); }; const pagedPlugins = searchedPlugins.slice((page - 1) * 10, page * 10); @@ -148,8 +147,8 @@ const PluginsMarket: React.FC = () => { key={plugin.name} plugin={plugin} isInstalling={installings.has(plugin.name)} - onInstall={async () => handleInstall(plugin, (page - 1) * 10 + i)} - onUpdate={async () => handleUpdate(plugin, (page - 1) * 10 + i)} + onInstall={async () => handleInstall(plugin, ((page - 1) * 10) + i)} + onUpdate={async () => handleUpdate(plugin, ((page - 1) * 10) + i)} /> ))} @@ -163,6 +162,5 @@ const PluginsMarket: React.FC = () => {
); -}; +} -export default hot(PluginsMarket); diff --git a/resources/assets/src/views/admin/ReportsManagement/index.tsx b/resources/assets/src/views/admin/ReportsManagement/index.tsx index aa621ee1..5c82eeeb 100644 --- a/resources/assets/src/views/admin/ReportsManagement/index.tsx +++ b/resources/assets/src/views/admin/ReportsManagement/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import {useImmer} from 'use-immer'; import type {Report, Status} from './types'; import ImageBox from './ImageBox'; @@ -13,7 +13,7 @@ import ViewerSkeleton from '@/components/ViewerSkeleton'; const Previewer = React.lazy(async () => import('@/components/Viewer')); -const ReportsManagement: React.FC = () => { +function ReportsManagement() { const [reports, setReports] = useImmer([]); const [page, setPage] = useState(1); const [totalPages, setTotalPages] = useState(1); @@ -152,4 +152,4 @@ const ReportsManagement: React.FC = () => { ); }; -export default hot(ReportsManagement); +export default ReportsManagement; diff --git a/resources/assets/src/views/admin/Translations/index.tsx b/resources/assets/src/views/admin/Translations/index.tsx index 054cb786..cac564a4 100644 --- a/resources/assets/src/views/admin/Translations/index.tsx +++ b/resources/assets/src/views/admin/Translations/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import {useImmer} from 'use-immer'; import type {Line} from './types'; import Row from './Row'; @@ -10,7 +10,7 @@ import type {Paginator} from '@/scripts/types'; import Loading from '@/components/Loading'; import Pagination from '@/components/Pagination'; -const Translations: React.FC = () => { +function Translations() { const [lines, setLines] = useImmer([]); const [isLoading, setIsLoading] = useState(true); const [page, setPage] = useState(1); @@ -118,4 +118,4 @@ const Translations: React.FC = () => { ); }; -export default hot(Translations); +export default Translations; diff --git a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx index ddb74748..33efde31 100644 --- a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx +++ b/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; import clsx from 'clsx'; @@ -11,51 +10,51 @@ const ShrinkedSkeleton = styled(Skeleton)<{width?: string}>` const isDarkMode = document.body.classList.contains('dark-mode'); -const LoadingCard: React.FC = () => ( - - - - -
-
-
- -
-
-
-
-
- +export default function LoadingCard() { + return ( + + + + +
+
+
+ +
+
- -
- -
- {t('general.user.score')} - - - +
+
-
- {t('admin.permission')} - - - +
+
-
- {t('admin.verification')} - - - + +
+ {t('general.user.score')} + + + +
+
+ {t('admin.permission')} + + + +
+
+ {t('admin.verification')} + + + +
+ +
+
- -
-
-
- -); - -export default LoadingCard; + + ); +} diff --git a/resources/assets/src/views/admin/UsersManagement/LoadingRow.tsx b/resources/assets/src/views/admin/UsersManagement/LoadingRow.tsx index 7c9a5de7..8166dd0c 100644 --- a/resources/assets/src/views/admin/UsersManagement/LoadingRow.tsx +++ b/resources/assets/src/views/admin/UsersManagement/LoadingRow.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; @@ -6,12 +5,12 @@ const ThickSkeleton = styled(Skeleton)` line-height: 2; `; -const LoadingRow: React.FC = () => ( - - - - - -); - -export default LoadingRow; +export default function LoadingRow() { + return ( + + + + + + ); +} diff --git a/resources/assets/src/views/admin/UsersManagement/index.tsx b/resources/assets/src/views/admin/UsersManagement/index.tsx index b8aa8390..3b2f8bce 100644 --- a/resources/assets/src/views/admin/UsersManagement/index.tsx +++ b/resources/assets/src/views/admin/UsersManagement/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect, useLayoutEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import {useImmer} from 'use-immer'; import Header from './Header'; import Card from './Card'; @@ -16,7 +16,7 @@ import urls from '@/scripts/urls'; import type {Props as ModalInputProperties} from '@/components/ModalInput'; import Pagination from '@/components/Pagination'; -const UsersManagement: React.FC = () => { +function UsersManagement() { const [users, setUsers] = useImmer([]); const [page, setPage] = useState(1); const [totalPages, setTotalPages] = useState(1); @@ -366,4 +366,4 @@ const UsersManagement: React.FC = () => { ); }; -export default hot(UsersManagement); +export default UsersManagement; diff --git a/resources/assets/src/views/auth/Forgot.tsx b/resources/assets/src/views/auth/Forgot.tsx index 0d46fffe..81b8a4be 100644 --- a/resources/assets/src/views/auth/Forgot.tsx +++ b/resources/assets/src/views/auth/Forgot.tsx @@ -1,5 +1,4 @@ -import React, {useState, useRef} from 'react'; -import {hot} from 'react-hot-loader/root'; +import {useState, useRef} from 'react'; import useEmitMounted from '@/scripts/hooks/useEmitMounted'; import {t} from '@/scripts/i18n'; import * as fetch from '@/scripts/net'; @@ -8,12 +7,12 @@ import Alert from '@/components/Alert'; import Captcha from '@/components/Captcha'; import EmailSuggestion from '@/components/EmailSuggestion'; -const Forgot: React.FC = () => { +export default function Forgot() { const [email, setEmail] = useState(''); const [isSending, setIsSending] = useState(false); const [successMessage, setSuccessMessage] = useState(''); const [warningMessage, setWarningMessage] = useState(''); - const reference = useRef(null); + const reference = useRef(null); useEmitMounted(); @@ -70,6 +69,4 @@ const Forgot: React.FC = () => {
); -}; - -export default hot(Forgot); +} diff --git a/resources/assets/src/views/auth/Login.tsx b/resources/assets/src/views/auth/Login.tsx index e4052030..a4e7a8d5 100644 --- a/resources/assets/src/views/auth/Login.tsx +++ b/resources/assets/src/views/auth/Login.tsx @@ -1,5 +1,4 @@ import React, {useState, useRef, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'; import useEmitMounted from '@/scripts/hooks/useEmitMounted'; import {t} from '@/scripts/i18n'; @@ -28,14 +27,14 @@ function isSuccessfulResponse( return response.code === 0; } -const Login: React.FC = () => { +export default function Login() { const [identification, setIdentification] = useState(''); const [password, setPassword] = useState(''); const [remember, setRemember] = useState(false); const [hasTooManyFails, setHasTooManyFails] = useState(false); const [isPending, setIsPending] = useState(false); const [warningMessage, setWarningMessage] = useState(''); - const reference = useRef(null); + const reference = useRef(null); const recaptcha = useBlessingExtra('recaptcha'); const invisibleRecaptcha = useBlessingExtra('invisible'); @@ -77,13 +76,13 @@ const Login: React.FC = () => { if (recaptcha) { // No need to notify if using invisible recaptcha if (!invisibleRecaptcha) { - showModal({ + void showModal({ mode: 'alert', text: t('auth.tooManyFails.recaptcha'), }); } } else { - showModal({ + void showModal({ mode: 'alert', text: t('auth.tooManyFails.captcha'), }); @@ -152,6 +151,4 @@ const Login: React.FC = () => { ); -}; - -export default hot(Login); +} diff --git a/resources/assets/src/views/auth/Registration.tsx b/resources/assets/src/views/auth/Registration.tsx index c44f4d47..d55d199f 100644 --- a/resources/assets/src/views/auth/Registration.tsx +++ b/resources/assets/src/views/auth/Registration.tsx @@ -1,5 +1,4 @@ -import React, {useState, useRef} from 'react'; -import {hot} from 'react-hot-loader/root'; +import {useState, useRef} from 'react'; import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'; import useEmitMounted from '@/scripts/hooks/useEmitMounted'; import {t} from '@/scripts/i18n'; @@ -10,7 +9,7 @@ import Alert from '@/components/Alert'; import Captcha from '@/components/Captcha'; import EmailSuggestion from '@/components/EmailSuggestion'; -const Registration: React.FC = () => { +export default function Registration() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmation, setConfirmation] = useState(''); @@ -174,6 +173,4 @@ const Registration: React.FC = () => {
); -}; - -export default hot(Registration); +} diff --git a/resources/assets/src/views/auth/Reset.tsx b/resources/assets/src/views/auth/Reset.tsx index c0ab537b..a5a652a8 100644 --- a/resources/assets/src/views/auth/Reset.tsx +++ b/resources/assets/src/views/auth/Reset.tsx @@ -1,5 +1,4 @@ -import React, {useState} from 'react'; -import {hot} from 'react-hot-loader/root'; +import {useState} from 'react'; import useEmitMounted from '@/scripts/hooks/useEmitMounted'; import {t} from '@/scripts/i18n'; import * as fetch from '@/scripts/net'; @@ -7,7 +6,7 @@ import {toast} from '@/scripts/notify'; import urls from '@/scripts/urls'; import Alert from '@/components/Alert'; -const Reset: React.FC = () => { +export default function Reset() { const [password, setPassword] = useState(''); const [confirmation, setConfirmation] = useState(''); const [warningMessage, setWarningMessage] = useState(''); @@ -106,6 +105,5 @@ const Reset: React.FC = () => { ); -}; +} -export default hot(Reset); diff --git a/resources/assets/src/views/skinlib/Show/index.tsx b/resources/assets/src/views/skinlib/Show/index.tsx index 4c7ab2f8..b0c9217b 100644 --- a/resources/assets/src/views/skinlib/Show/index.tsx +++ b/resources/assets/src/views/skinlib/Show/index.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react'; import {createPortal} from 'react-dom'; -import {hot} from 'react-hot-loader/root'; +; import Skeleton from 'react-loading-skeleton'; import addClosetItem from './addClosetItem'; import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'; @@ -24,7 +24,7 @@ export type Badge = { const Previewer = React.lazy(async () => import('@/components/Viewer')); -const Show: React.FC = () => { +function Show() { const [texture, setTexture] = useState({} as Texture); const [isLoading, setIsLoading] = useState(true); const [showModalApply, setShowModalApply] = useState(false); @@ -495,4 +495,4 @@ const Show: React.FC = () => { ); }; -export default hot(Show); +export default Show; diff --git a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx index 0b8c3fbc..f0199615 100644 --- a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx +++ b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import addClosetItem from '../Show/addClosetItem'; import FilterSelector from './FilterSelector'; import Button from './Button'; @@ -16,7 +16,7 @@ import Loading from '@/components/Loading'; import Pagination from '@/components/Pagination'; import removeClosetItem from '@/views/user/Closet/removeClosetItem'; -const SkinLibrary: React.FC = () => { +function SkinLibrary() { const [isLoading, setIsLoading] = useState(true); const [items, setItems] = useState([]); const [closet, setCloset] = useState([]); @@ -301,4 +301,4 @@ const SkinLibrary: React.FC = () => { ); }; -export default hot(SkinLibrary); +export default SkinLibrary; diff --git a/resources/assets/src/views/skinlib/Upload.tsx b/resources/assets/src/views/skinlib/Upload.tsx index 13912114..629caad2 100644 --- a/resources/assets/src/views/skinlib/Upload.tsx +++ b/resources/assets/src/views/skinlib/Upload.tsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import ReactDOM from 'react-dom'; -import {hot} from 'react-hot-loader/root'; +; import {t} from '@/scripts/i18n'; import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'; import useEmitMounted from '@/scripts/hooks/useEmitMounted'; @@ -15,7 +15,7 @@ import ViewerSkeleton from '@/components/ViewerSkeleton'; const Previewer = React.lazy(async () => import('@/components/Viewer')); -const Upload: React.FC = () => { +function Upload() { const [name, setName] = useState(''); const [type, setType] = useState(TextureType.Steve); const [isPrivate, setIsPrivate] = useState(false); @@ -257,4 +257,4 @@ const Upload: React.FC = () => { ); }; -export default hot(Upload); +export default Upload; diff --git a/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx b/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx index 5402ba4e..101bcf60 100644 --- a/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx +++ b/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; import {Card, DropdownButton} from './styles'; @@ -7,20 +6,20 @@ const ItemNameSkeleton = styled(Skeleton)` width: 150px; `; -const LoadingClosetItem: React.FC = () => ( - -
-
-
- - - - - - +export default function LoadingClosetItem() { + return ( + +
+
+
+ + + + + + +
-
- -); - -export default LoadingClosetItem; + + ); +} diff --git a/resources/assets/src/views/user/Closet/index.tsx b/resources/assets/src/views/user/Closet/index.tsx index 862084d4..4d3a6622 100644 --- a/resources/assets/src/views/user/Closet/index.tsx +++ b/resources/assets/src/views/user/Closet/index.tsx @@ -295,4 +295,4 @@ function Closet() { ); } -export default hot(Closet); +export default Closet; diff --git a/resources/assets/src/views/user/Dashboard/index.tsx b/resources/assets/src/views/user/Dashboard/index.tsx index c7268555..e2b2867f 100644 --- a/resources/assets/src/views/user/Dashboard/index.tsx +++ b/resources/assets/src/views/user/Dashboard/index.tsx @@ -1,6 +1,5 @@ -import React, {useState, useEffect, useCallback} from 'react'; +import {useState, useEffect, useCallback} from 'react'; import styled from '@emotion/styled'; -import {hot} from 'react-hot-loader/root'; import InfoBox from './InfoBox'; import SignButton from './SignButton'; import * as scoreUtils from './scoreUtils'; @@ -42,7 +41,7 @@ const ScoreNotice = styled.p` margin-top: 20px; `; -const Dashboard: React.FC = () => { +export default function Dashboard() { const [loading, setLoading] = useState(false); const [players, setPlayers] = useState(0); const [storage, setStorage] = useState(0); @@ -72,7 +71,7 @@ const Dashboard: React.FC = () => { setLoading(false); }; - fetchInfo(); + void fetchInfo(); }, []); const handleSign = useCallback(async () => { @@ -157,6 +156,5 @@ const Dashboard: React.FC = () => {
); -}; +} -export default hot(Dashboard); diff --git a/resources/assets/src/views/user/OAuth/index.tsx b/resources/assets/src/views/user/OAuth/index.tsx index d14a3d98..04441f48 100644 --- a/resources/assets/src/views/user/OAuth/index.tsx +++ b/resources/assets/src/views/user/OAuth/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import Row from './Row'; import ModalCreate from './ModalCreate'; import type {App} from './types'; @@ -12,7 +12,7 @@ type Exception = { message: string; }; -const OAuth: React.FC = () => { +function OAuth() { const [apps, setApps] = useState([]); const [isLoading, setIsLoading] = useState(true); const [showModalCreate, setShowModalCreate] = useState(false); @@ -164,4 +164,4 @@ const OAuth: React.FC = () => { ); }; -export default hot(OAuth); +export default OAuth; diff --git a/resources/assets/src/views/user/Players/LoadingRow.tsx b/resources/assets/src/views/user/Players/LoadingRow.tsx index 102e34dd..5fbdb976 100644 --- a/resources/assets/src/views/user/Players/LoadingRow.tsx +++ b/resources/assets/src/views/user/Players/LoadingRow.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import Skeleton from 'react-loading-skeleton'; @@ -9,12 +8,12 @@ const ThickSkeleton = styled(Skeleton)` line-height: 2; `; -const RowLoading: React.FC = () => ( - - - - - -); - -export default RowLoading; +export default function RowLoading() { + return ( + + + + + + ); +} diff --git a/resources/assets/src/views/user/Players/index.tsx b/resources/assets/src/views/user/Players/index.tsx index a5e2a640..c099886c 100644 --- a/resources/assets/src/views/user/Players/index.tsx +++ b/resources/assets/src/views/user/Players/index.tsx @@ -1,5 +1,5 @@ import React, {useState, useEffect} from 'react'; -import {hot} from 'react-hot-loader/root'; +; import Row from './Row'; import LoadingRow from './LoadingRow'; import Previewer from './Previewer'; @@ -14,7 +14,7 @@ import {showModal, toast} from '@/scripts/notify'; import {type Player, TextureType} from '@/scripts/types'; import urls from '@/scripts/urls'; -const Players: React.FC = () => { +function Players() { const [players, setPlayers] = useState([]); const [isLoading, setIsLoading] = useState(true); const [selected, setSelected] = useState(0); @@ -253,4 +253,4 @@ const Players: React.FC = () => { ); }; -export default hot(Players); +export default Players; diff --git a/resources/assets/src/views/widgets/EmailVerification.tsx b/resources/assets/src/views/widgets/EmailVerification.tsx index bb778b9e..bd58e161 100644 --- a/resources/assets/src/views/widgets/EmailVerification.tsx +++ b/resources/assets/src/views/widgets/EmailVerification.tsx @@ -3,7 +3,7 @@ import {t} from '@/scripts/i18n'; import * as fetch from '@/scripts/net'; import {toast} from '@/scripts/notify'; -const EmailVerification: React.FC = () => { +function EmailVerification() { const [isSending, setIsSending] = useState(false); const send = async () => { diff --git a/resources/assets/src/views/widgets/NotificationsList.tsx b/resources/assets/src/views/widgets/NotificationsList.tsx index dd03ec2b..2d2b7d47 100644 --- a/resources/assets/src/views/widgets/NotificationsList.tsx +++ b/resources/assets/src/views/widgets/NotificationsList.tsx @@ -7,7 +7,7 @@ export type Notification = { title: string; }; -const NotificationsList: React.FC = () => { +function NotificationsList() { const [notifications, setNotifications] = useState([]); const [noUnreadText, setNoUnreadText] = useState(''); diff --git a/resources/assets/tests/components/EmailSuggestion.test.tsx b/resources/assets/tests/components/EmailSuggestion.test.tsx index cba2ace7..b3fb770c 100644 --- a/resources/assets/tests/components/EmailSuggestion.test.tsx +++ b/resources/assets/tests/components/EmailSuggestion.test.tsx @@ -4,7 +4,7 @@ import { render, fireEvent } from '@testing-library/react' import { on } from '@/scripts/event' import EmailSuggestion from '@/components/EmailSuggestion' -const Wrapper: React.FC = () => { +function Wrapper() { const [email, setEmail] = useState('') return diff --git a/vite.config.ts b/vite.config.ts index da2436f6..094aa4b0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,18 +1,22 @@ import {defineConfig, splitVendorChunkPlugin} from 'vite'; import react from '@vitejs/plugin-react-swc'; import wasm from 'vite-plugin-wasm'; +import topLevelAwait from 'vite-plugin-top-level-await'; import browserslistToEsbuild from 'browserslist-to-esbuild'; +const root = new URL('resources/assets/src/', import.meta.url); + export default defineConfig({ plugins: [ react(), wasm(), + topLevelAwait(), splitVendorChunkPlugin(), ], resolve: { alias: { - '@/': new URL('resources/assets/src/', import.meta.url).pathname, - readline: '@/scripts/cli/readline.ts', + '@/': root.pathname, + readline: new URL('scripts/cli/readline.ts', root).pathname, prompts: 'prompts/lib/index.js', }, }, diff --git a/yarn.lock b/yarn.lock index 536849e3..89cd0d76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -448,6 +448,11 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== +"@rollup/plugin-virtual@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz#17e17eeecb4c9fa1c0a6e72c9e5f66382fddbb82" + integrity sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A== + "@rollup/rollup-android-arm-eabi@4.12.0": version "4.12.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz#38c3abd1955a3c21d492af6b1a1dca4bb1d894d6" @@ -573,7 +578,7 @@ resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.2.tgz#c999ca7b68124d058b40a1431cdd6f56779670d5" integrity sha512-oV71rwiSpA5xre2C5570BhCsg1HF97SNLsZ/12xv7zayGzqr3yvFALFJN8tHKpqUdCB4FGPjoP3JFdV3i+1wUw== -"@swc/core@^1.3.107": +"@swc/core@^1.3.100", "@swc/core@^1.3.107": version "1.4.2" resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.4.2.tgz#310b0d5e93e47ca72f54150c8f9efcb434c39b17" integrity sha512-vWgY07R/eqj1/a0vsRKLI9o9klGZfpLNOVEnrv4nrccxBgYPjcf22IWwAoaBJ+wpA7Q4fVjCUM8lP0m01dpxcg== @@ -5887,6 +5892,11 @@ util-deprecate@~1.0.1: resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== +uuid@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== + validate-npm-package-license@^3.0.1: version "3.0.4" resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" @@ -5906,6 +5916,15 @@ vite-node@1.3.1: picocolors "^1.0.0" vite "^5.0.0" +vite-plugin-top-level-await@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.1.tgz#607dfe084157550fa33df18062b99ceea774cd9c" + integrity sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw== + dependencies: + "@rollup/plugin-virtual" "^3.0.2" + "@swc/core" "^1.3.100" + uuid "^9.0.1" + vite-plugin-wasm@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/vite-plugin-wasm/-/vite-plugin-wasm-3.3.0.tgz#2908ef2529bf8f33f4e549c8c6fda26ad273ca15"