Optimize code. Update templates.

src/components/Playground/CodeEditor/Editor/hooks.ts

@@ -50,6 +50,8 @@ export const useEditor = () => {
 
         onWatch(typeHelper)
 
+        typeHelper.acquireType(`import React from 'react'`)
+
         editor.onDidChangeModelContent(() => {
             typeHelper.acquireType(editor.getValue())
         })

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

@@ -2,13 +2,13 @@ import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
 import '@/components/Playground/CodeEditor/Editor/loader'
-import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
-    tsConfig?: ITsConfig
+    tsconfig?: ITsconfig
     files?: IFiles
     selectedFileName?: string
     readonly?: boolean
@@ -19,7 +19,7 @@ interface EditorProps {
 }
 
 const Editor = ({
-    tsConfig,
+    tsconfig,
     files = {},
     selectedFileName = '',
     readonly,
@@ -43,9 +43,9 @@ const Editor = ({
 
     const handleOnEditorWillMount = (monaco: Monaco) => {
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
-        tsConfig &&
+        tsconfig &&
             monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
-                tsConfig.compilerOptions
+                tsconfig.compilerOptions
             )
 
         files &&
@@ -93,11 +93,11 @@ const Editor = ({
     }, [file.name])
 
     useEffect(() => {
-        tsConfig &&
+        tsconfig &&
             monacoRef.current?.languages.typescript.typescriptDefaults.setCompilerOptions(
-                tsConfig.compilerOptions
+                tsconfig.compilerOptions
             )
-    }, [tsConfig])
+    }, [tsconfig])
 
     return (
         <>

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

@@ -88,7 +88,7 @@ const FileSelector = ({
         onChange?.(IMPORT_MAP_FILE_NAME)
     }
 
-    const editTsConfig = () => {
+    const editTsconfig = () => {
         if (hasEditing) {
             return
         }
@@ -200,7 +200,7 @@ const FileSelector = ({
                             <Item
                                 value={'tsconfig.json'}
                                 active={selectedFileName === TS_CONFIG_FILE_NAME}
-                                onClick={editTsConfig}
+                                onClick={editTsconfig}
                                 readonly
                             />
                         )}

src/components/Playground/CodeEditor/index.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {
     fileNameToLanguage,
     getFileNameList,
@@ -13,7 +13,7 @@ import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
-    tsConfig?: ITsConfig
+    tsconfig?: ITsconfig
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
@@ -30,7 +30,7 @@ interface CodeEditorProps {
 
 const CodeEditor = ({
     theme,
-    tsConfig,
+    tsconfig,
     files,
     readonly,
     readonlyFiles,
@@ -133,7 +133,7 @@ const CodeEditor = ({
                     onError={handleOnError}
                 />
                 <Editor
-                    tsConfig={tsConfig}
+                    tsconfig={tsconfig}
                     theme={theme}
                     selectedFileName={
                         onSelectedFileChange ? propsSelectedFileName : selectedFileName