cleanup: wip 6.2

resources/assets/src/index.tsx

@@ -6,7 +6,7 @@ import routes from './scripts/route';
 
 import './scripts/app';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
+// eslint-disable-next-line ts/naming-convention
 Object.assign(window, {React, ReactDOM, $});
 
 const route = routes.find(route =>
@@ -24,11 +24,12 @@ if (route) {
 			: null;
 
 		const root = createRoot(container!);
-		root.render(
+		root.render((
-<React.StrictMode>
+			<React.StrictMode>
 				<React.Suspense fallback={route.frame?.() ?? ''}>
-		<Component/>
+					<Component/>
- </React.Suspense>
+				</React.Suspense>
-			</React.StrictMode>,);
+			</React.StrictMode>
+		));
 	}
 }

resources/assets/src/views/skinlib/Upload.tsx

@@ -9,8 +9,8 @@ import {showModal, toast} from '@/scripts/notify';
 import {isAlex} from '@/scripts/textureUtils';
 import {TextureType} from '@/scripts/types';
 import urls from '@/scripts/urls';
-import React, {useState} from 'react';
+import {Suspense, useState} from 'react';
-import ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 
 const Previewer = React.lazy(async () => import('@/components/Viewer'));
 
@@ -19,7 +19,7 @@ function Upload() {
 	const [type, setType] = useState(TextureType.Steve);
 	const [isPrivate, setIsPrivate] = useState(false);
 	const [isUploading, setIsUploading] = useState(false);
-	const [file, setFile] = useState<File | undefined>(null);
+	const [file, setFile] = useState<File>();
 	const [texture, setTexture] = useState('');
 	const nameRule = useBlessingExtra<string>('rule');
 	const contentPolicy = useBlessingExtra<string>('contentPolicy');
@@ -47,9 +47,13 @@ function Upload() {
 	};
 
 	const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-		const files = event.target.files!;
+		const {files} = event.target;
+		if (!files) {
+			return;
+		}
+
 		const [file] = files;
-		if (file) {
+		if (file !== undefined) {
 			setFile(file);
 			if (!name && file.name.endsWith('.png')) {
 				setName(file.name.slice(0, -4));
@@ -239,14 +243,14 @@ function Upload() {
 				</div>
 			</div>
 			{container
-			&& ReactDOM.createPortal(
+			&& createPortal(
-				<React.Suspense fallback={<ViewerSkeleton/>}>
+				<Suspense fallback={<ViewerSkeleton/>}>
 					<Previewer
 						skin={type === TextureType.Cape ? undefined : texture}
 						cape={type === TextureType.Cape ? texture : undefined}
 						isAlex={type === TextureType.Alex}
 					/>
-				</React.Suspense>,
+				</Suspense>,
 				container,
 			)}
 		</>

resources/assets/src/views/user/Closet/Previewer.tsx

@@ -1,31 +1,35 @@
+import type {FC, ReactNode} from 'react';
 import ViewerSkeleton from '@/components/ViewerSkeleton';
 import useMount from '@/scripts/hooks/useMount';
-import React from 'react';
+import {
-import ReactDOM from 'react-dom';
+	lazy,
+	Suspense,
+} from 'react';
+import {createPortal} from 'react-dom';
 
-const Viewer = React.lazy(async () => import('@/components/Viewer'));
+const Viewer = lazy(async () => import('@/components/Viewer'));
 
 type Props = {
 	skin?: string;
 	cape?: string;
-	children: React.ReactNode;
+	children: ReactNode;
 	isAlex: boolean;
 };
 
-const Previewer: React.FC<Props> = props => {
+const Previewer: FC<Props> = props => {
 	const container = useMount('#previewer');
 
-	const skin = props.skin ? `${blessing.base_url}/textures/${props.skin}` : '';
+	const skin = props.skin === undefined ? '' : `${blessing.base_url}/textures/${props.skin}`;
-	const cape = props.cape ? `${blessing.base_url}/textures/${props.cape}` : '';
+	const cape = props.cape === undefined ? '' : `${blessing.base_url}/textures/${props.cape}`;
 
 	return (
 		container
-		&& ReactDOM.createPortal(
+		&& createPortal(
-			<React.Suspense fallback={<ViewerSkeleton/>}>
+			<Suspense fallback={<ViewerSkeleton/>}>
 				<Viewer showIndicator skin={skin} cape={cape} isAlex={props.isAlex}>
 					{props.children}
 				</Viewer>
-			</React.Suspense>,
+			</Suspense>,
 			container,
 		)
 	);

resources/assets/src/views/user/Players/Previewer.tsx

@@ -2,7 +2,7 @@ import ViewerSkeleton from '@/components/ViewerSkeleton';
 import useMount from '@/scripts/hooks/useMount';
 import {t} from '@/scripts/i18n';
 import React, {useState} from 'react';
-import ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 import Viewer2d from './Viewer2d';
 
 const Viewer3d = React.lazy(async () => import('@/components/Viewer'));
@@ -23,7 +23,7 @@ const Previewer: React.FC<Props> = props => {
 	};
 
 	const switcher = (
-		<button className='btn btn-default' onClick={switchMode}>
+		<button type='button' className='btn btn-default' onClick={switchMode}>
 			{is3d ? t('user.switch2dPreview') : t('user.switch3dPreview')}
 		</button>
 	);
@@ -32,7 +32,7 @@ const Previewer: React.FC<Props> = props => {
 
 	return (
 		container
-		&& ReactDOM.createPortal(
+		&& createPortal(
 			is3d
 				? (
 					<React.Suspense fallback={<ViewerSkeleton/>}>