refactor: get rid of forwardRef

packages/icons/utils/index.js

@@ -13,18 +13,18 @@ export function createIcon(name, svg, viewBox, defaultSize) {
     const [width, height] = defaultSize || []
     if (width === height && typeof width === 'number') throw new Error('Only define this when the icon is not a square')
 
-    let Icon
+    /** @type {import('react').ComponentType<import('@mui/material').SvgIconProps>} */ let Icon
     if (typeof svg === 'function') {
-        Icon = ({ sx, ...props }, ref) => {
+        Icon = ({ sx, ref, ...props }) => {
             const style = defaultSize ? { width, height, ...sx } : sx
             return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg(useTheme()))
         }
     } else {
-        Icon = ({ sx, ...props }, ref) => {
+        Icon = ({ sx, ref, ...props }) => {
             const style = defaultSize ? { width, height, ...sx } : sx
             return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg)
         }
     }
     Icon.displayName = `Icon (${name})`
-    return React.memo(React.forwardRef(Icon))
+    return /** @type {any} */ (React.memo(Icon))
 }

packages/icons/utils/internal.js

@@ -13,8 +13,8 @@ import { MaskIconPaletteContext } from './MaskIconPaletteContext.js'
  * @returns {React.ComponentType<import('./internal').GeneratedIconProps>}
  */
 export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
-    function Icon(/** @type {import('./internal').GeneratedIconProps} */ props, ref) {
-        let { size = 24, variant, color, sx, height, width, ...rest } = props
+    function Icon(/** @type {import('./internal').GeneratedIconProps} */ props) {
+        let { size = 24, variant, color, sx, height, width, ref, ...rest } = props
 
         const hasClickHandler = rest.onClick
 
@@ -80,7 +80,7 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
         return React.createElement(Box, iconProps)
     }
     Icon.displayName = name
-    return React.memo(React.forwardRef(Icon))
+    return React.memo(Icon)
 }
 
 function useDefaultPalette() {

packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx

@@ -1,22 +1,13 @@
-import {
-    forwardRef,
-    memo,
-    type PropsWithChildren,
-    type ReactNode,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-    useState,
-} from 'react'
+import { memo, type PropsWithChildren, type ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import type { AsyncState } from 'react-use/lib/useAsyncFn.js'
-import type { PluginWrapperComponent, Plugin, PluginWrapperMethods } from '@masknet/plugin-infra/content-script'
+import type { PluginWrapperComponentProps, Plugin, PluginWrapperMethods } from '@masknet/plugin-infra/content-script'
 import { MaskPostExtraPluginWrapper, useSharedTrans } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { Typography, useTheme } from '@mui/material'
 import { useCheckPermissions, useGrantPermissions } from '../DataSource/usePluginHostPermission.js'
 import { PossiblePluginSuggestionUISingle } from './DisabledPluginSuggestion.js'
 
-interface PermissionBoundaryProps extends PropsWithChildren<{}> {
+interface PermissionBoundaryProps extends PropsWithChildren {
     permissions: string[]
     fallback?:
         | ReactNode
@@ -38,58 +29,60 @@ const PermissionBoundary = memo<PermissionBoundaryProps>(function PermissionBoun
     return <>{children}</>
 })
 
-export const MaskPostExtraPluginWrapperWithPermission: PluginWrapperComponent<Plugin.SiteAdaptor.Definition> =
-    forwardRef((props, ref) => {
-        const wrapperMethodsRef = useRef<PluginWrapperMethods | null>(null)
-        const theme = useTheme()
-        const t = useSharedTrans()
-        const [open, setOpen] = useState<boolean>(false)
+export function MaskPostExtraPluginWrapperWithPermission({
+    ref,
+    ...props
+}: PluginWrapperComponentProps<Plugin.SiteAdaptor.Definition>) {
+    const wrapperMethodsRef = useRef<PluginWrapperMethods | null>(null)
+    const theme = useTheme()
+    const t = useSharedTrans()
+    const [open, setOpen] = useState<boolean>(false)
 
-        const refItem = useMemo((): PluginWrapperMethods => {
-            return {
-                setWidth: (width) => wrapperMethodsRef.current?.setWidth(width),
-                setWrap: (open) => {
-                    setOpen(open)
-                    wrapperMethodsRef.current?.setWrap(open)
-                },
-                setWrapperName: (name) => wrapperMethodsRef.current?.setWrapperName(name),
-            }
-        }, [])
+    const refItem = useMemo((): PluginWrapperMethods => {
+        return {
+            setWidth: (width) => wrapperMethodsRef.current?.setWidth(width),
+            setWrap: (open) => {
+                setOpen(open)
+                wrapperMethodsRef.current?.setWrap(open)
+            },
+            setWrapperName: (name) => wrapperMethodsRef.current?.setWrapperName(name),
+        }
+    }, [])
 
-        useImperativeHandle(ref, () => refItem, [refItem])
+    useImperativeHandle(ref, () => refItem, [refItem])
 
-        return (
-            <PermissionBoundary
-                permissions={props.definition.enableRequirement.host_permissions ?? EMPTY_LIST}
-                fallback={
-                    open ?
-                        <PossiblePluginSuggestionUISingle
-                            lackHostPermission
-                            define={props.definition}
-                            wrapperProps={props.definition.wrapperProps}
-                            content={
-                                <Typography
-                                    color={theme.palette.maskColor.publicMain}
-                                    fontSize={14}
-                                    marginBottom={3.25}
-                                    textAlign="left"
-                                    component="div"
-                                    px="18px">
-                                    {t.authorization_descriptions()}
-                                    <Typography component="div">
-                                        {props.definition.enableRequirement.host_permissions?.join(',')}
-                                    </Typography>
+    return (
+        <PermissionBoundary
+            permissions={props.definition.enableRequirement.host_permissions ?? EMPTY_LIST}
+            fallback={
+                open ?
+                    <PossiblePluginSuggestionUISingle
+                        lackHostPermission
+                        define={props.definition}
+                        wrapperProps={props.definition.wrapperProps}
+                        content={
+                            <Typography
+                                color={theme.palette.maskColor.publicMain}
+                                fontSize={14}
+                                marginBottom={3.25}
+                                textAlign="left"
+                                component="div"
+                                px="18px">
+                                {t.authorization_descriptions()}
+                                <Typography component="div">
+                                    {props.definition.enableRequirement.host_permissions?.join(',')}
                                 </Typography>
-                            }
-                        />
-                    :   undefined
-                }>
-                <MaskPostExtraPluginWrapper
-                    {...props}
-                    ref={(methods) => {
-                        if (methods) wrapperMethodsRef.current = methods
-                    }}
-                />
-            </PermissionBoundary>
-        )
-    })
+                            </Typography>
+                        }
+                    />
+                :   undefined
+            }>
+            <MaskPostExtraPluginWrapper
+                {...props}
+                ref={(methods) => {
+                    if (methods) wrapperMethodsRef.current = methods
+                }}
+            />
+        </PermissionBoundary>
+    )
+}

packages/mask/dashboard/components/PasswordField/index.tsx

@@ -1,17 +1,18 @@
-import { type ForwardedRef, useState, forwardRef } from 'react'
+import { useState } from 'react'
 import { type MaskTextFieldProps } from '@masknet/theme'
 import { IconButton, InputAdornment, TextField } from '@mui/material'
 import { Icons } from '@masknet/icons'
 
-type PasswordFieldProps = Exclude<MaskTextFieldProps, 'type'> & { show?: boolean }
+interface PasswordFieldProps extends Exclude<MaskTextFieldProps, 'type'> {
+    show?: boolean
+}
 
-const PasswordField = forwardRef(({ show = true, ...props }: PasswordFieldProps, ref: ForwardedRef<any>) => {
+export default function PasswordField({ show = true, ...props }: PasswordFieldProps) {
     const [showPassword, setShowPassword] = useState(false)
 
     return (
         <TextField
             {...props}
-            ref={ref}
             type={showPassword ? 'text' : 'password'}
             size="medium"
             InputProps={{
@@ -36,8 +37,4 @@ const PasswordField = forwardRef(({ show = true, ...props }: PasswordFieldProps,
             }}
         />
     )
-})
-
-PasswordField.displayName = 'PasswordField'
-
-export default PasswordField
+}

packages/mask/dashboard/components/SetupFrame/spline.tsx

@@ -1,13 +1,12 @@
-import { useEffect, useRef, useState, forwardRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Application } from '@splinetool/runtime'
-import ParentSize from './ParentSize.js'
 
 export interface SplineProps {
     scene: string
     onLoad?: (e: Application) => void
 }
 
-const Spline = forwardRef<HTMLDivElement, SplineProps>(({ scene, onLoad }, ref) => {
+export default function Spline({ scene, onLoad }: SplineProps) {
     const canvasRef = useRef<HTMLCanvasElement>(null)
     const [isLoading, setIsLoading] = useState(true)
 
@@ -31,11 +30,5 @@ const Spline = forwardRef<HTMLDivElement, SplineProps>(({ scene, onLoad }, ref)
         }
     }, [scene])
 
-    return (
-        <ParentSize ref={ref}>
-            {() => <canvas ref={canvasRef} style={{ display: isLoading ? 'none' : 'block' }} />}
-        </ParentSize>
-    )
-})
-
-export default Spline
+    return <canvas ref={canvasRef} style={{ display: isLoading ? 'none' : 'block' }} />
+}

packages/mask/dashboard/modals/BackupPreviewModal/index.tsx

@@ -1,6 +1,6 @@
-import type { SingletonModalRefCreator, BackupAccountType } from '@masknet/shared-base'
+import type { BackupAccountType, SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
-import { forwardRef, useState } from 'react'
+import { useState } from 'react'
 import { BackupPreviewDialog } from './BackupPreviewDialog.js'
 
 export interface BackupPreviewModalOpenProps {
@@ -11,7 +11,7 @@ export interface BackupPreviewModalOpenProps {
     abstract?: string
 }
 
-export const BackupPreviewModal = forwardRef<SingletonModalRefCreator<BackupPreviewModalOpenProps>>((props, ref) => {
+export function BackupPreviewModal({ ref }: SingletonModalProps<BackupPreviewModalOpenProps>) {
     const [isOverwrite, setIsOverwrite] = useState(false)
     const [code, setCode] = useState('')
     const [type, setType] = useState<BackupAccountType>()
@@ -47,4 +47,4 @@ export const BackupPreviewModal = forwardRef<SingletonModalRefCreator<BackupPrev
             abstract={abstract}
         />
     )
-})
+}

packages/mask/dashboard/modals/ConfirmModal/index.tsx

@@ -1,10 +1,10 @@
 import { InjectedDialog, useSharedTrans } from '@masknet/shared'
-import type { SingletonModalRefCreator } from '@masknet/shared-base'
+import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import { type ActionButtonProps, makeStyles, ActionButton } from '@masknet/theme'
 import { DialogContent, Typography, type DialogProps, Box } from '@mui/material'
 import { noop } from 'lodash-es'
-import { forwardRef, memo, useState, type ReactNode } from 'react'
+import { memo, useState, type ReactNode } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -92,7 +92,7 @@ const Dialog = memo<ConfirmDialogProps>(
     },
 )
 export type ConfirmDialogOpenProps = Omit<ConfirmDialogProps, 'open'>
-export const ConfirmDialog = forwardRef<SingletonModalRefCreator<ConfirmDialogOpenProps, boolean>>((_, ref) => {
+export function ConfirmDialog({ ref }: SingletonModalProps<ConfirmDialogOpenProps, boolean>) {
     const [props, setProps] = useState<ConfirmDialogOpenProps>({
         title: '',
         message: '',
@@ -105,4 +105,4 @@ export const ConfirmDialog = forwardRef<SingletonModalRefCreator<ConfirmDialogOp
         },
     })
     return <Dialog open={open} {...props} onClose={() => dispatch?.close(false)} onConfirm={props.onConfirm} />
-})
+}

packages/mask/dashboard/modals/MergeBackupModal/index.tsx

@@ -1,6 +1,6 @@
-import type { SingletonModalRefCreator, BackupAccountType } from '@masknet/shared-base'
+import type { BackupAccountType, SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
-import { forwardRef, useState } from 'react'
+import { useState } from 'react'
 import { MergeBackupDialog } from './MergeBackupDialog.js'
 
 export interface MergeBackupModalOpenProps {
@@ -13,7 +13,7 @@ export interface MergeBackupModalOpenProps {
     type: BackupAccountType
 }
 
-export const MergeBackupModal = forwardRef<SingletonModalRefCreator<MergeBackupModalOpenProps>>((props, ref) => {
+export function MergeBackupModal({ ref }: SingletonModalProps<MergeBackupModalOpenProps>) {
     const [downloadLink, setDownloadLink] = useState('')
     const [code, setCode] = useState('')
     const [type, setType] = useState<BackupAccountType>()
@@ -54,4 +54,4 @@ export const MergeBackupModal = forwardRef<SingletonModalRefCreator<MergeBackupM
             uploadedAt={uploadedAt}
         />
     )
-})
+}