Optimize code

src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
@@ -19,7 +18,7 @@ interface EditorProps {
     onJumpFile?: (fileName: string) => void
 }
 
-const Editor: React.FC<EditorProps> = ({
+const Editor = ({
     tsConfig,
     files = {},
     selectedFileName = '',
@@ -28,7 +27,7 @@ const Editor: React.FC<EditorProps> = ({
     onChange,
     options,
     onJumpFile
-}) => {
+}: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()

src/components/Playground/CodeEditor/FileSelector/Item.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
 
 interface ItemProps {
     className?: string
@@ -7,7 +7,7 @@ interface ItemProps {
     value: string
     active?: boolean
     hasEditing?: boolean
-    setHasEditing?: React.Dispatch<React.SetStateAction<boolean>>
+    setHasEditing?: Dispatch<SetStateAction<boolean>>
     onOk?: (fileName: string) => void
     onCancel?: () => void
     onRemove?: (fileName: string) => void
@@ -15,7 +15,7 @@ interface ItemProps {
     onValidate?: (newFileName: string, oldFileName: string) => boolean
 }
 
-const Item: React.FC<ItemProps> = ({
+const Item = ({
     className,
     readonly = false,
     value,
@@ -28,7 +28,7 @@ const Item: React.FC<ItemProps> = ({
     onClick,
     onValidate,
     ...prop
-}) => {
+}: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
     const [creating, setCreating] = useState(prop.creating)
@@ -41,7 +41,7 @@ const Item: React.FC<ItemProps> = ({
         onClick?.()
     }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             event.preventDefault()
             finishNameFile()
@@ -89,11 +89,11 @@ const Item: React.FC<ItemProps> = ({
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setFileName(e.target.value)
     }
 
-    const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleOnDelete = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         if (hasEditing) {
             return

src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -22,7 +21,7 @@ interface FileSelectorProps {
     selectedFileName?: string
 }
 
-const FileSelector: React.FC<FileSelectorProps> = ({
+const FileSelector = ({
     files = {},
     onChange,
     onError,
@@ -32,7 +31,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onAddFile,
     onUpdateFileName,
     selectedFileName = ''
-}) => {
+}: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)

src/components/Playground/CodeEditor/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
@@ -29,7 +28,7 @@ interface CodeEditorProps {
     onError?: (msg: string) => void
 }
 
-const CodeEditor: React.FC<CodeEditorProps> = ({
+const CodeEditor = ({
     theme,
     tsConfig,
     files,
@@ -44,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onChangeFileContent,
     onError,
     ...props
-}) => {
+}: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
         (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )

src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,3 @@
-import React, { useRef, useState } from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
@@ -34,7 +33,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
+const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)

src/components/Playground/Output/Transform/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
@@ -13,7 +12,7 @@ interface OutputProps {
     theme?: ITheme
 }
 
-const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+const Transform = ({ file, theme }: OutputProps) => {
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
 

src/components/Playground/Output/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -11,7 +10,7 @@ interface OutputProps {
     importMap: IImportMap
 }
 
-const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (

src/components/Playground/index.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
@@ -17,11 +16,7 @@ interface PlaygroundProps {
     initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({
-    initFiles,
-    initImportMapRaw,
-    initTsConfigRaw
-}) => {
+const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)