React 18 and Vite (#4510)

resources/scripts/hoc/RequireServerPermission.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import type { ReactNode } from 'react';
+
 import Can from '@/components/elements/Can';
 import { ServerError } from '@/components/elements/ScreenBlock';
 
 export interface RequireServerPermissionProps {
+    children?: ReactNode;
+
     permissions: string | string[];
 }
 
-const RequireServerPermission: React.FC<RequireServerPermissionProps> = ({ children, permissions }) => {
+function RequireServerPermission({ children, permissions }: RequireServerPermissionProps) {
     return (
         <Can
             action={permissions}
@@ -17,6 +20,6 @@ const RequireServerPermission: React.FC<RequireServerPermissionProps> = ({ child
             {children}
         </Can>
     );
-};
+}
 
 export default RequireServerPermission;

resources/scripts/hoc/asDialog.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import type { ComponentProps, ComponentType, FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Dialog, DialogProps, DialogWrapperContext, WrapperProps } from '@/components/elements/dialog';
 
 function asDialog(
-    initialProps?: WrapperProps
+    initialProps?: WrapperProps,
     // eslint-disable-next-line @typescript-eslint/ban-types
-): <P extends {}>(C: React.ComponentType<P>) => React.FunctionComponent<P & DialogProps> {
+): <P extends {}>(C: ComponentType<P>) => FunctionComponent<P & DialogProps> {
     return function (Component) {
         return function ({ open, onClose, ...rest }) {
             const [props, setProps] = useState<WrapperProps>(initialProps || {});
@@ -12,7 +13,7 @@ function asDialog(
             return (
                 <DialogWrapperContext.Provider value={{ props, setProps, close: onClose }}>
                     <Dialog {...props} open={open} onClose={onClose}>
-                        <Component {...(rest as React.ComponentProps<typeof Component>)} />
+                        <Component {...(rest as unknown as ComponentProps<typeof Component>)} />
                     </Dialog>
                 </DialogWrapperContext.Provider>
             );

resources/scripts/hoc/asModal.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
+import isEqual from 'react-fast-compare';
+
 import PortaledModal, { ModalProps } from '@/components/elements/Modal';
 import ModalContext, { ModalContextValues } from '@/context/ModalContext';
-import isEqual from 'react-fast-compare';
 
 export interface AsModalProps {
     visible: boolean;
@@ -16,14 +17,12 @@ interface State {
     propOverrides: Partial<SettableModalProps>;
 }
 
-type ExtendedComponentType<T> = (C: React.ComponentType<T>) => React.ComponentType<T & AsModalProps>;
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 function asModal<P extends {}>(
-    modalProps?: SettableModalProps | ((props: P) => SettableModalProps)
-): ExtendedComponentType<P> {
+    modalProps?: SettableModalProps | ((props: P) => SettableModalProps),
+): (Component: any) => any {
     return function (Component) {
-        return class extends React.PureComponent<P & AsModalProps, State> {
+        return class extends PureComponent<P & AsModalProps, State> {
             static displayName = `asModal(${Component.displayName})`;
 
             constructor(props: P & AsModalProps) {
@@ -47,7 +46,7 @@ function asModal<P extends {}>(
             /**
              * @this {React.PureComponent<P & AsModalProps, State>}
              */
-            componentDidUpdate(prevProps: Readonly<P & AsModalProps>, prevState: Readonly<State>) {
+            override componentDidUpdate(prevProps: Readonly<P & AsModalProps>, prevState: Readonly<State>) {
                 if (prevProps.visible && !this.props.visible) {
                     this.setState({ visible: false, propOverrides: {} });
                 } else if (!prevProps.visible && this.props.visible) {
@@ -60,15 +59,15 @@ function asModal<P extends {}>(
 
             dismiss = () => this.setState({ visible: false });
 
-            setPropOverrides: ModalContextValues['setPropOverrides'] = (value) =>
-                this.setState((state) => ({
+            setPropOverrides: ModalContextValues['setPropOverrides'] = value =>
+                this.setState(state => ({
                     propOverrides: !value ? {} : typeof value === 'function' ? value(state.propOverrides) : value,
                 }));
 
             /**
              * @this {React.PureComponent<P & AsModalProps, State>}
              */
-            render() {
+            override render() {
                 if (!this.state.render) return null;
 
                 return (