Optimize CodeEditor. CodeEditor add tsconfig support.

package-lock.json

@@ -1893,15 +1893,15 @@
       "peer": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
+      "version": "15.7.11",
-      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.42",
+      "version": "18.2.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.47.tgz",
-      "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
+      "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1910,18 +1910,18 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.17",
+      "version": "18.2.18",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.18.tgz",
-      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
+      "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
     "node_modules/@types/scheduler": {
-      "version": "0.16.3",
+      "version": "0.16.8",
-      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
       "dev": true
     },
     "node_modules/@types/semver": {

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

@@ -3,12 +3,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 } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
-import { fileNameToLanguage } from '@/components/Playground/files'
+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
     files?: IFiles
     selectedFileName?: string
     readonly?: boolean
@@ -19,6 +20,7 @@ interface EditorProps {
 }
 
 const Editor: React.FC<EditorProps> = ({
+    tsConfig,
     files = {},
     selectedFileName = '',
     readonly,
@@ -28,6 +30,7 @@ const Editor: React.FC<EditorProps> = ({
     onJumpFile
 }) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
+    const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
     const jsxSyntaxHighlightRef = useRef<{
         highlighter: (code?: string | undefined) => void
@@ -39,16 +42,12 @@ const Editor: React.FC<EditorProps> = ({
     const { total, finished, onWatch } = useTypesProgress()
     const file = files[selectedFileName] || { name: 'Untitled' }
 
-    const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+    const handleOnEditorWillMount = (monaco: Monaco) => {
-        editorRef.current = editor
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+        tsConfig &&
-            void editor.getAction('editor.action.formatDocument')?.run()
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
-        })
+                tsConfig.compilerOptions
-
+            )
-        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-            jsx: monaco.languages.typescript.JsxEmit.Preserve,
-            esModuleInterop: true
-        })
 
         files &&
             Object.entries(files).forEach(([key]) => {
@@ -60,6 +59,15 @@ const Editor: React.FC<EditorProps> = ({
                     )
                 }
             })
+    }
+
+    const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        editorRef.current = editor
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+            void editor.getAction('editor.action.formatDocument')?.run()
+        })
+
+        monacoRef.current = monaco
 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
@@ -85,6 +93,13 @@ const Editor: React.FC<EditorProps> = ({
         jsxSyntaxHighlightRef?.current?.highlighter?.()
     }, [file.name])
 
+    useEffect(() => {
+        tsConfig &&
+            monacoRef.current?.languages.typescript.typescriptDefaults.setCompilerOptions(
+                tsConfig.compilerOptions
+            )
+    }, [tsConfig])
+
     return (
         <>
             <div data-component={'playground-code-editor-editor'}>
@@ -95,6 +110,7 @@ const Editor: React.FC<EditorProps> = ({
                     language={file.language}
                     value={file.value}
                     onChange={onChange}
+                    beforeMount={handleOnEditorWillMount}
                     onMount={handleOnEditorDidMount}
                     options={{
                         ...MonacoEditorConfig,

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

@@ -85,6 +85,7 @@ const Item: React.FC<ItemProps> = ({
         setFileName(value)
         setTimeout(() => {
             inputRef.current?.focus()
+            inputRef.current?.setSelectionRange(0, inputRef.current?.value.lastIndexOf('.'))
         })
     }
 
@@ -119,6 +120,7 @@ const Item: React.FC<ItemProps> = ({
                         onChange={handleOnChange}
                         onBlur={finishNameFile}
                         onKeyDown={handleKeyDown}
+                        spellCheck={'false'}
                     />
                     <span className={'tab-item-input-mask'}>{fileName}</span>
                 </div>

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

@@ -3,7 +3,11 @@ import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'
-import { getFileNameList, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import {
+    getFileNameList,
+    IMPORT_MAP_FILE_NAME,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
 import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 
 interface FileSelectorProps {
@@ -85,6 +89,14 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         onChange?.(IMPORT_MAP_FILE_NAME)
     }
 
+    const editTsConfig = () => {
+        if (hasEditing) {
+            return
+        }
+
+        onChange?.(TS_CONFIG_FILE_NAME)
+    }
+
     const handleOnSaveTab = (value: string, item: string) => {
         if (creating) {
             onAddFile?.(value)
@@ -122,7 +134,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         onRemoveFile?.(fileName)
         if (fileName === selectedFileName) {
             const keys = getFileNameList(files).filter(
-                (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+                (item) =>
+                    ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) &&
+                    !files[item].hidden
             )
             const index = keys.indexOf(fileName) - 1
             if (index >= 0) {
@@ -137,7 +151,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         getFileNameList(files).length
             ? setTabs(
                   getFileNameList(files).filter(
-                      (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+                      (item) =>
+                          ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) &&
+                          !files[item].hidden
                   )
               )
             : setTabs([])
@@ -179,14 +195,24 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         </FlexBox>
                     </HideScrollbar>
                 </div>
-                {files[IMPORT_MAP_FILE_NAME] && (
+                {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
                     <div className={'sticky'}>
+                        {files[TS_CONFIG_FILE_NAME] && (
+                            <Item
+                                value={'tsconfig.json'}
+                                active={selectedFileName === TS_CONFIG_FILE_NAME}
+                                onClick={editTsConfig}
+                                readonly
+                            />
+                        )}
+                        {files[IMPORT_MAP_FILE_NAME] && (
                             <Item
                                 value={'Import Map'}
                                 active={selectedFileName === IMPORT_MAP_FILE_NAME}
                                 onClick={editImportMap}
                                 readonly
                             />
+                        )}
                     </div>
                 )}
             </div>

src/components/Playground/CodeEditor/index.tsx

@@ -2,17 +2,19 @@ import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
 import {
     fileNameToLanguage,
     getFileNameList,
-    IMPORT_MAP_FILE_NAME
+    IMPORT_MAP_FILE_NAME,
+    TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
+    tsConfig?: ITsConfig
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
@@ -29,6 +31,7 @@ interface CodeEditorProps {
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
     theme,
+    tsConfig,
     files,
     readonly,
     readonlyFiles,
@@ -43,7 +46,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     ...props
 }) => {
     const filteredFilesName = getFileNameList(files).filter(
-        (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+        (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )
     const propsSelectedFileName =
         props.selectedFileName || (filteredFilesName.length ? filteredFilesName[0] : '')
@@ -101,7 +104,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         }
     }
 
-    const handleOnChangeFileContent = _.debounce((code = '') => {
+    const handleOnChangeFileContent = _.debounce((code: string = '') => {
         if (!files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]) {
             return
         }
@@ -131,6 +134,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     onError={handleOnError}
                 />
                 <Editor
+                    tsConfig={tsConfig}
                     theme={theme}
                     selectedFileName={
                         onSelectedFileChange ? propsSelectedFileName : selectedFileName

src/components/Playground/files.ts

@@ -1,10 +1,18 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import { IFile, IFiles, IImportMap, ILanguage } from '@/components/Playground/shared'
+import { IFile, IFiles, IImportMap, ILanguage, ITsConfig } from '@/components/Playground/shared'
-import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
+import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
+import importMapSchema from '@/components/Playground/import-map-schema.json'
+import { languages } from 'monaco-editor'
+import DiagnosticsOptions = languages.json.DiagnosticsOptions
+import ScriptTarget = languages.typescript.ScriptTarget
+import ModuleKind = languages.typescript.ModuleKind
+import ModuleResolutionKind = languages.typescript.ModuleResolutionKind
+import JsxEmit = languages.typescript.JsxEmit
 
+export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
 export const ENTRY_FILE_NAME = 'main.tsx'
@@ -97,6 +105,28 @@ export const addReactImport = (code: string) => {
     return code
 }
 
+export const tsconfigJsonDiagnosticsOptions: DiagnosticsOptions = {
+    validate: true,
+    schemas: [
+        {
+            uri: 'tsconfig.json',
+            fileMatch: ['tsconfig.json'],
+            schema: {
+                type: 'object',
+                properties: tsconfigSchema
+            }
+        },
+        {
+            uri: 'import-map.json',
+            fileMatch: ['import-map.json'],
+            schema: {
+                type: 'object',
+                properties: importMapSchema
+            }
+        }
+    ]
+}
+
 export const initFiles: IFiles = getFilesFromUrl() || {
     [ENTRY_FILE_NAME]: {
         name: ENTRY_FILE_NAME,
@@ -123,15 +153,24 @@ export const initImportMap: IImportMap = {
     }
 }
 
-export const reactTemplateFiles = {
+export const initTsConfig: ITsConfig = {
-    [ENTRY_FILE_NAME]: {
+    compilerOptions: {
-        name: ENTRY_FILE_NAME,
+        target: ScriptTarget.ES2020,
-        language: fileNameToLanguage(ENTRY_FILE_NAME),
+        useDefineForClassFields: true,
-        value: main
+        module: ModuleKind.ESNext,
-    },
+        skipLibCheck: true,
-    [IMPORT_MAP_FILE_NAME]: {
+        moduleResolution: ModuleResolutionKind.NodeJs,
-        name: IMPORT_MAP_FILE_NAME,
+        allowImportingTsExtensions: true,
-        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
+        resolveJsonModule: true,
-        value: importMap
+        isolatedModules: true,
+        noEmit: true,
+        jsx: JsxEmit.ReactJSX,
+        strict: true,
+        noUnusedLocals: true,
+        noUnusedParameters: true,
+        noFallthroughCasesInSwitch: true,
+        composite: true,
+        types: ['node'],
+        allowSyntheticDefaultImports: true
     }
 }

src/components/Playground/import-map-schema.json

@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "type": "object",
+    "description": "Import map"
+  }
+}

src/components/Playground/index.tsx

@@ -1,39 +1,95 @@
-import React from 'react'
+import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
-import { IFiles, IImportMap } from '@/components/Playground/shared'
+import { useUpdatedEffect } from '@/util/hooks'
-import { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
+import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
+import {
+    IMPORT_MAP_FILE_NAME,
+    MAIN_FILE_NAME,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
 import FlexBox from '@/components/common/FlexBox'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Output from '@/components/Playground/Output'
 
 interface PlaygroundProps {
     initFiles: IFiles
-    initImportMap: IImportMap
+    initImportMapRaw: string
+    initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) => {
+const Playground: React.FC<PlaygroundProps> = ({
+    initFiles,
+    initImportMapRaw,
+    initTsConfigRaw
+}) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
-    const [importMap, setImportMap] = useState<IImportMap>(initImportMap)
+    const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
+    const [importMap, setImportMap] = useState<IImportMap>()
+    const [tsConfigRaw, setTsConfigRaw] = useState<string>(initTsConfigRaw)
+    const [tsConfig, setTsConfig] = useState<ITsConfig>()
+
+    if (!importMap) {
+        try {
+            setImportMap(JSON.parse(importMapRaw) as IImportMap)
+        } catch (e) {
+            setImportMap({ imports: {} })
+        }
+    }
+    if (!tsConfig) {
+        try {
+            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+        } catch (e) {
+            setTsConfig({ compilerOptions: {} })
+        }
+    }
 
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
         if (fileName === IMPORT_MAP_FILE_NAME) {
-            setImportMap(JSON.parse(content) as IImportMap)
+            setImportMapRaw(content)
-        } else {
+            return
+        }
+        if (fileName === TS_CONFIG_FILE_NAME) {
+            setTsConfigRaw(content)
+            return
+        }
+
         delete files[IMPORT_MAP_FILE_NAME]
+        delete files[TS_CONFIG_FILE_NAME]
         setFiles(files)
     }
+
+    useUpdatedEffect(() => {
+        try {
+            setImportMap(JSON.parse(importMapRaw) as IImportMap)
+        } catch (e) {
+            /* empty */
         }
+    }, [importMapRaw])
+
+    useUpdatedEffect(() => {
+        try {
+            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+        } catch (e) {
+            /* empty */
+        }
+    }, [tsConfigRaw])
 
     return (
         <FlexBox data-component={'playground'} direction={'horizontal'}>
             <CodeEditor
+                tsConfig={tsConfig}
                 files={{
                     ...files,
                     'import-map.json': {
                         name: IMPORT_MAP_FILE_NAME,
                         language: 'json',
-                        value: JSON.stringify(importMap, null, 2)
+                        value: importMapRaw
+                    },
+                    'tsconfig.json': {
+                        name: TS_CONFIG_FILE_NAME,
+                        language: 'json',
+                        value: tsConfigRaw
                     }
                 }}
                 selectedFileName={selectedFileName}
@@ -43,7 +99,7 @@ const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) =>
                 onChangeFileContent={handleOnChangeFileContent}
                 onSelectedFileChange={setSelectedFileName}
             />
-            <Output files={files} selectedFileName={selectedFileName} importMap={importMap} />
+            <Output files={files} selectedFileName={selectedFileName} importMap={importMap!} />
         </FlexBox>
     )
 }

src/components/Playground/shared.ts

@@ -1,4 +1,5 @@
-import { editor } from 'monaco-editor'
+import { editor, languages } from 'monaco-editor'
+import CompilerOptions = languages.typescript.CompilerOptions
 
 export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css' | 'xml'
 
@@ -17,6 +18,10 @@ export interface IImportMap {
     imports: Record<string, string>
 }
 
+export interface ITsConfig {
+    compilerOptions: CompilerOptions
+}
+
 export type ITheme = 'light' | 'vs-dark'
 
 export type IEditorOptions = editor.IStandaloneEditorConstructionOptions

src/components/Playground/tsconfig-schema.json

@@ -0,0 +1,820 @@
+{
+  "compilerOptions": {
+    "type": "object",
+    "description": "Instructs the TypeScript compiler how to compile .ts files.",
+    "properties": {
+      "allowJs": {
+        "description": "Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowJs"
+      },
+      "allowSyntheticDefaultImports": {
+        "description": "Allow 'import x from y' when a module doesn't have a default export.",
+        "type": "boolean",
+        "markdownDescription": "Allow 'import x from y' when a module doesn't have a default export.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports"
+      },
+      "allowUmdGlobalAccess": {
+        "description": "Allow accessing UMD globals from modules.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow accessing UMD globals from modules.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUmdGlobalAccess"
+      },
+      "allowUnreachableCode": {
+        "description": "Disable error reporting for unreachable code.",
+        "type": "boolean",
+        "markdownDescription": "Disable error reporting for unreachable code.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUnreachableCode"
+      },
+      "allowUnusedLabels": {
+        "description": "Disable error reporting for unused labels.",
+        "type": "boolean",
+        "markdownDescription": "Disable error reporting for unused labels.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUnusedLabels"
+      },
+      "alwaysStrict": {
+        "description": "Ensure 'use strict' is always emitted.",
+        "type": "boolean",
+        "markdownDescription": "Ensure 'use strict' is always emitted.\n\nSee more: https://www.typescriptlang.org/tsconfig#alwaysStrict"
+      },
+      "baseUrl": {
+        "description": "Specify the base directory to resolve non-relative module names.",
+        "type": "string",
+        "markdownDescription": "Specify the base directory to resolve non-relative module names.\n\nSee more: https://www.typescriptlang.org/tsconfig#baseUrl"
+      },
+      "charset": {
+        "description": "No longer supported. In early versions, manually set the text encoding for reading files.",
+        "type": "string",
+        "markdownDescription": "No longer supported. In early versions, manually set the text encoding for reading files.\n\nSee more: https://www.typescriptlang.org/tsconfig#charset"
+      },
+      "checkJs": {
+        "description": "Enable error reporting in type-checked JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting in type-checked JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#checkJs"
+      },
+      "declaration": {
+        "description": "Generate .d.ts files from TypeScript and JavaScript files in your project.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Generate .d.ts files from TypeScript and JavaScript files in your project.\n\nSee more: https://www.typescriptlang.org/tsconfig#declaration"
+      },
+      "declarationMap": {
+        "description": "Create sourcemaps for d.ts files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Create sourcemaps for d.ts files.\n\nSee more: https://www.typescriptlang.org/tsconfig#declarationMap"
+      },
+      "emitDeclarationOnly": {
+        "description": "Only output d.ts files and not JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Only output d.ts files and not JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitDeclarationOnly"
+      },
+      "declarationDir": {
+        "description": "Specify the output directory for generated declaration files.",
+        "type": ["string", "null"],
+        "markdownDescription": "Specify the output directory for generated declaration files.\n\nSee more: https://www.typescriptlang.org/tsconfig#declarationDir"
+      },
+      "disableSizeLimit": {
+        "description": "Remove the 20mb cap on total source code size for JavaScript files in the TypeScript language server.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Remove the 20mb cap on total source code size for JavaScript files in the TypeScript language server.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSizeLimit"
+      },
+      "disableSourceOfProjectReferenceRedirect": {
+        "description": "Disable preferring source files instead of declaration files when referencing composite projects",
+        "type": "boolean",
+        "markdownDescription": "Disable preferring source files instead of declaration files when referencing composite projects\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSourceOfProjectReferenceRedirect"
+      },
+      "downlevelIteration": {
+        "description": "Emit more compliant, but verbose and less performant JavaScript for iteration.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit more compliant, but verbose and less performant JavaScript for iteration.\n\nSee more: https://www.typescriptlang.org/tsconfig#downlevelIteration"
+      },
+      "emitBOM": {
+        "description": "Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitBOM"
+      },
+      "emitDecoratorMetadata": {
+        "description": "Emit design-type metadata for decorated declarations in source files.",
+        "type": "boolean",
+        "markdownDescription": "Emit design-type metadata for decorated declarations in source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitDecoratorMetadata"
+      },
+      "experimentalDecorators": {
+        "description": "Enable experimental support for TC39 stage 2 draft decorators.",
+        "type": "boolean",
+        "markdownDescription": "Enable experimental support for TC39 stage 2 draft decorators.\n\nSee more: https://www.typescriptlang.org/tsconfig#experimentalDecorators"
+      },
+      "forceConsistentCasingInFileNames": {
+        "description": "Ensure that casing is correct in imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure that casing is correct in imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames"
+      },
+      "importHelpers": {
+        "description": "Allow importing helper functions from tslib once per project, instead of including them per-file.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow importing helper functions from tslib once per project, instead of including them per-file.\n\nSee more: https://www.typescriptlang.org/tsconfig#importHelpers"
+      },
+      "inlineSourceMap": {
+        "description": "Include sourcemap files inside the emitted JavaScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Include sourcemap files inside the emitted JavaScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#inlineSourceMap"
+      },
+      "inlineSources": {
+        "description": "Include source code in the sourcemaps inside the emitted JavaScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Include source code in the sourcemaps inside the emitted JavaScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#inlineSources"
+      },
+      "isolatedModules": {
+        "description": "Ensure that each file can be safely transpiled without relying on other imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure that each file can be safely transpiled without relying on other imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#isolatedModules"
+      },
+      "jsx": {
+        "description": "Specify what JSX code is generated.",
+        "enum": [0, 1, 2, 3, 4, 5],
+        "markdownDescription": "Specify what JSX code is generated.\n\n0 = none\n\n1 = preserve\n\n2 = react\n\n3 = react-native\n\n4 = react-jsx\n\n5 = react-jsxdev"
+      },
+      "keyofStringsOnly": {
+        "description": "Make keyof only return strings instead of string, numbers or symbols. Legacy option.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Make keyof only return strings instead of string, numbers or symbols. Legacy option.\n\nSee more: https://www.typescriptlang.org/tsconfig#keyofStringsOnly"
+      },
+      "lib": {
+        "description": "Specify a set of bundled library declaration files that describe the target runtime environment.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string",
+          "anyOf": [
+            {
+              "enum": [
+                "ES5",
+                "ES6",
+                "ES2015",
+                "ES2015.Collection",
+                "ES2015.Core",
+                "ES2015.Generator",
+                "ES2015.Iterable",
+                "ES2015.Promise",
+                "ES2015.Proxy",
+                "ES2015.Reflect",
+                "ES2015.Symbol.WellKnown",
+                "ES2015.Symbol",
+                "ES2016",
+                "ES2016.Array.Include",
+                "ES2017",
+                "ES2017.Intl",
+                "ES2017.Object",
+                "ES2017.SharedMemory",
+                "ES2017.String",
+                "ES2017.TypedArrays",
+                "ES2018",
+                "ES2018.AsyncGenerator",
+                "ES2018.AsyncIterable",
+                "ES2018.Intl",
+                "ES2018.Promise",
+                "ES2018.Regexp",
+                "ES2019",
+                "ES2019.Array",
+                "ES2019.Intl",
+                "ES2019.Object",
+                "ES2019.String",
+                "ES2019.Symbol",
+                "ES2020",
+                "ES2020.BigInt",
+                "ES2020.Promise",
+                "ES2020.String",
+                "ES2020.Symbol.WellKnown",
+                "ESNext",
+                "ESNext.Array",
+                "ESNext.AsyncIterable",
+                "ESNext.BigInt",
+                "ESNext.Intl",
+                "ESNext.Promise",
+                "ESNext.String",
+                "ESNext.Symbol",
+                "DOM",
+                "DOM.Iterable",
+                "ScriptHost",
+                "WebWorker",
+                "WebWorker.ImportScripts",
+                "Webworker.Iterable",
+                "ES7",
+                "ES2021",
+                "ES2020.SharedMemory",
+                "ES2020.Intl",
+                "ES2020.Date",
+                "ES2020.Number",
+                "ES2021.Promise",
+                "ES2021.String",
+                "ES2021.WeakRef",
+                "ESNext.WeakRef",
+                "ES2021.Intl",
+                "ES2022",
+                "ES2022.Array",
+                "ES2022.Error",
+                "ES2022.Intl",
+                "ES2022.Object",
+                "ES2022.String",
+                "ES2022.SharedMemory",
+                "ES2022.RegExp",
+                "ES2023",
+                "ES2023.Array",
+                "Decorators",
+                "Decorators.Legacy",
+                "ES2017.Date",
+                "ES2023.Collection",
+                "ESNext.Decorators",
+                "ESNext.Disposable"
+              ]
+            },
+            {
+              "pattern": "^[Ee][Ss]5|[Ee][Ss]6|[Ee][Ss]7$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2015(\\.([Cc][Oo][Ll][Ll][Ee][Cc][Tt][Ii][Oo][Nn]|[Cc][Oo][Rr][Ee]|[Gg][Ee][Nn][Ee][Rr][Aa][Tt][Oo][Rr]|[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Pp][Rr][Oo][Xx][Yy]|[Rr][Ee][Ff][Ll][Ee][Cc][Tt]|[Ss][Yy][Mm][Bb][Oo][Ll]\\.[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2016(\\.[Aa][Rr][Rr][Aa][Yy]\\.[Ii][Nn][Cc][Ll][Uu][Dd][Ee])?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2017(\\.([Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Tt][Yy][Pp][Ee][Dd][Aa][Rr][Rr][Aa][Yy][Ss]|[Dd][Aa][Tt][Ee]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2018(\\.([Aa][Ss][Yy][Nn][Cc][Gg][Ee][Nn][Ee][Rr][Aa][Tt][Oo][Rr]|[Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Rr][Ee][Gg][Ee][Xx][Pp]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2019(\\.([Aa][Rr][Rr][Aa][Yy]|[Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2020(\\.([Bb][Ii][Gg][Ii][Nn][Tt]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]\\.[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Ii][Nn][Tt][Ll]|[Dd][Aa][Tt][Ee]|[Nn][Uu][Mm][Bb][Ee][Rr]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2021(\\.([Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ww][Ee][Aa][Kk][Rr][Ee][Ff]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2022(\\.([Aa][Rr][Rr][Aa][Yy]|[Ee][Rr][Rr][Oo][Rr]|[Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Rr][Ee][Gg][Ee][Xx][Pp]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2023(\\.([Aa][Rr][Rr][Aa][Yy]|[Cc][Oo][Ll][Ll][Ee][Cc][Tt][Ii][Oo][Nn]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss][Nn][Ee][Xx][Tt](\\.([Aa][Rr][Rr][Aa][Yy]|[Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Bb][Ii][Gg][Ii][Nn][Tt]|[Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]|[Ww][Ee][Aa][Kk][Rr][Ee][Ff]|[Dd][Ee][Cc][Oo][Rr][Aa][Tt][Oo][Rr][Ss]|[Dd][Ii][Ss][Pp][Oo][Ss][Aa][Bb][Ll][Ee]))?$"
+            },
+            {
+              "pattern": "^[Dd][Oo][Mm](\\.[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee])?$"
+            },
+            {
+              "pattern": "^[Ss][Cc][Rr][Ii][Pp][Tt][Hh][Oo][Ss][Tt]$"
+            },
+            {
+              "pattern": "^[Ww][Ee][Bb][Ww][Oo][Rr][Kk][Ee][Rr](\\.([Ii][Mm][Pp][Oo][Rr][Tt][Ss][Cc][Rr][Ii][Pp][Tt][Ss]|[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]))?$"
+            },
+            {
+              "pattern": "^[Dd][Ee][Cc][Oo][Rr][Aa][Tt][Oo][Rr][Ss](\\.([Ll][Ee][Gg][Aa][Cc][Yy]))?$"
+            }
+          ]
+        },
+        "markdownDescription": "Specify a set of bundled library declaration files that describe the target runtime environment.\n\nSee more: https://www.typescriptlang.org/tsconfig#lib"
+      },
+      "locale": {
+        "description": "Locale",
+        "type": "string",
+        "markdownDescription": "Locale"
+      },
+      "mapRoot": {
+        "description": "Specify the location where debugger should locate map files instead of generated locations.",
+        "type": "string",
+        "markdownDescription": "Specify the location where debugger should locate map files instead of generated locations.\n\nSee more: https://www.typescriptlang.org/tsconfig#mapRoot"
+      },
+      "maxNodeModuleJsDepth": {
+        "description": "Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`.",
+        "type": "number",
+        "default": 0,
+        "markdownDescription": "Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`.\n\nSee more: https://www.typescriptlang.org/tsconfig#maxNodeModuleJsDepth"
+      },
+      "module": {
+        "description": "Specify what module code is generated.",
+        "type": "number",
+        "enum": [0, 1, 2, 3, 4, 5, 99],
+        "markdownDescription": "Specify what module code is generated.\n\n0 = None\n\n1 = CommonJS\n\n2 = AMD\n\n3 = UMD\n\n4 = System\n\n5 = ES2015\n\n99 = ESNext"
+      },
+      "moduleResolution": {
+        "description": "Specify how TypeScript looks up a file from a given module specifier.",
+        "type": "number",
+        "enum": [1, 2],
+        "markdownDescription": "Specify how TypeScript looks up a file from a given module specifier.\n\n1 = Classic\n\n2 = NodeJs"
+      },
+      "newLine": {
+        "description": "Set the newline character for emitting files.",
+        "type": "string",
+        "enum": [0, 1],
+        "markdownDescription": "Set the newline character for emitting files.\n\n0 = CarriageReturnLineFeed\n\n1 = LineFeed"
+      },
+      "noEmit": {
+        "description": "Disable emitting file from a compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting file from a compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmit"
+      },
+      "noEmitHelpers": {
+        "description": "Disable generating custom helper functions like `__extends` in compiled output.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable generating custom helper functions like `__extends` in compiled output.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmitHelpers"
+      },
+      "noEmitOnError": {
+        "description": "Disable emitting files if any type checking errors are reported.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting files if any type checking errors are reported.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmitOnError"
+      },
+      "noErrorTruncation": {
+        "description": "Disable truncating types in error messages.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable truncating types in error messages.\n\nSee more: https://www.typescriptlang.org/tsconfig#noErrorTruncation"
+      },
+      "noFallthroughCasesInSwitch": {
+        "description": "Enable error reporting for fallthrough cases in switch statements.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting for fallthrough cases in switch statements.\n\nSee more: https://www.typescriptlang.org/tsconfig#noFallthroughCasesInSwitch"
+      },
+      "noImplicitAny": {
+        "description": "Enable error reporting for expressions and declarations with an implied `any` type..",
+        "type": "boolean",
+        "markdownDescription": "Enable error reporting for expressions and declarations with an implied `any` type..\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitAny"
+      },
+      "noImplicitReturns": {
+        "description": "Enable error reporting for codepaths that do not explicitly return in a function.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting for codepaths that do not explicitly return in a function.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitReturns"
+      },
+      "noImplicitThis": {
+        "description": "Enable error reporting when `this` is given the type `any`.",
+        "type": "boolean",
+        "markdownDescription": "Enable error reporting when `this` is given the type `any`.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitThis"
+      },
+      "noStrictGenericChecks": {
+        "description": "Disable strict checking of generic signatures in function types.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable strict checking of generic signatures in function types.\n\nSee more: https://www.typescriptlang.org/tsconfig#noStrictGenericChecks"
+      },
+      "noUnusedLocals": {
+        "description": "Enable error reporting when a local variables aren't read.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting when a local variables aren't read.\n\nSee more: https://www.typescriptlang.org/tsconfig#noUnusedLocals"
+      },
+      "noUnusedParameters": {
+        "description": "Raise an error when a function parameter isn't read",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Raise an error when a function parameter isn't read\n\nSee more: https://www.typescriptlang.org/tsconfig#noUnusedParameters"
+      },
+      "noImplicitUseStrict": {
+        "description": "Disable adding 'use strict' directives in emitted JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable adding 'use strict' directives in emitted JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitUseStrict"
+      },
+      "noLib": {
+        "description": "Disable including any library files, including the default lib.d.ts.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable including any library files, including the default lib.d.ts.\n\nSee more: https://www.typescriptlang.org/tsconfig#noLib"
+      },
+      "noResolve": {
+        "description": "Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project.\n\nSee more: https://www.typescriptlang.org/tsconfig#noResolve"
+      },
+      "out": {
+        "description": "Out",
+        "type": "string",
+        "markdownDescription": "Out"
+      },
+      "outFile": {
+        "description": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.",
+        "type": "string",
+        "markdownDescription": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.\n\nSee more: https://www.typescriptlang.org/tsconfig#outFile"
+      },
+      "outDir": {
+        "description": "Specify an output folder for all emitted files.",
+        "type": "string",
+        "markdownDescription": "Specify an output folder for all emitted files.\n\nSee more: https://www.typescriptlang.org/tsconfig#outDir"
+      },
+      "paths": {
+        "description": "Specify a set of entries that re-map imports to additional lookup locations.",
+        "type": "object",
+        "additionalProperties": {
+          "type": "array",
+          "uniqueItems": true,
+          "items": {
+            "type": "string",
+            "description": "Path mapping to be computed relative to baseUrl option."
+          }
+        },
+        "markdownDescription": "Specify a set of entries that re-map imports to additional lookup locations.\n\nSee more: https://www.typescriptlang.org/tsconfig#paths"
+      },
+      "preserveConstEnums": {
+        "description": "Disable erasing `const enum` declarations in generated code.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable erasing `const enum` declarations in generated code.\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveConstEnums"
+      },
+      "preserveSymlinks": {
+        "description": "Disable resolving symlinks to their realpath. This correlates to the same flag in node.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable resolving symlinks to their realpath. This correlates to the same flag in node.\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveSymlinks"
+      },
+      "project": {
+        "description": "Project",
+        "type": "string",
+        "markdownDescription": "Project"
+      },
+      "reactNamespace": {
+        "description": "Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit.",
+        "type": "string",
+        "default": "React",
+        "markdownDescription": "Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit.\n\nSee more: https://www.typescriptlang.org/tsconfig#reactNamespace"
+      },
+      "jsxFactory": {
+        "description": "Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'",
+        "type": "string",
+        "default": "React.createElement",
+        "markdownDescription": "Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxFactory"
+      },
+      "composite": {
+        "description": "Enable constraints that allow a TypeScript project to be used with project references.",
+        "type": "boolean",
+        "default": true,
+        "markdownDescription": "Enable constraints that allow a TypeScript project to be used with project references.\n\nSee more: https://www.typescriptlang.org/tsconfig#composite"
+      },
+      "removeComments": {
+        "description": "Disable emitting comments.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting comments.\n\nSee more: https://www.typescriptlang.org/tsconfig#removeComments"
+      },
+      "rootDir": {
+        "description": "Specify the root folder within your source files.",
+        "type": "string",
+        "markdownDescription": "Specify the root folder within your source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDir"
+      },
+      "rootDirs": {
+        "description": "Allow multiple folders to be treated as one when resolving modules.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Allow multiple folders to be treated as one when resolving modules.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDirs"
+      },
+      "skipLibCheck": {
+        "description": "Skip type checking all .d.ts files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Skip type checking all .d.ts files.\n\nSee more: https://www.typescriptlang.org/tsconfig#skipLibCheck"
+      },
+      "skipDefaultLibCheck": {
+        "description": "Skip type checking .d.ts files that are included with TypeScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Skip type checking .d.ts files that are included with TypeScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#skipDefaultLibCheck"
+      },
+      "sourceMap": {
+        "description": "Create source map files for emitted JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Create source map files for emitted JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#sourceMap"
+      },
+      "sourceRoot": {
+        "description": "Specify the root path for debuggers to find the reference source code.",
+        "type": "string",
+        "markdownDescription": "Specify the root path for debuggers to find the reference source code.\n\nSee more: https://www.typescriptlang.org/tsconfig#sourceRoot"
+      },
+      "strict": {
+        "description": "Enable all strict type checking options.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable all strict type checking options.\n\nSee more: https://www.typescriptlang.org/tsconfig#strict"
+      },
+      "strictFunctionTypes": {
+        "description": "When assigning functions, check to ensure parameters and the return values are subtype-compatible.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "When assigning functions, check to ensure parameters and the return values are subtype-compatible.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictFunctionTypes"
+      },
+      "strictBindCallApply": {
+        "description": "Check that the arguments for `bind`, `call`, and `apply` methods match the original function.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Check that the arguments for `bind`, `call`, and `apply` methods match the original function.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictBindCallApply"
+      },
+      "strictNullChecks": {
+        "description": "When type checking, take into account `null` and `undefined`.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "When type checking, take into account `null` and `undefined`.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictNullChecks"
+      },
+      "strictPropertyInitialization": {
+        "description": "Check for class properties that are declared but not set in the constructor.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Check for class properties that are declared but not set in the constructor.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictPropertyInitialization"
+      },
+      "stripInternal": {
+        "description": "Disable emitting declarations that have `@internal` in their JSDoc comments.",
+        "type": "boolean",
+        "markdownDescription": "Disable emitting declarations that have `@internal` in their JSDoc comments.\n\nSee more: https://www.typescriptlang.org/tsconfig#stripInternal"
+      },
+      "suppressExcessPropertyErrors": {
+        "description": "Disable reporting of excess property errors during the creation of object literals.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable reporting of excess property errors during the creation of object literals.\n\nSee more: https://www.typescriptlang.org/tsconfig#suppressExcessPropertyErrors"
+      },
+      "suppressImplicitAnyIndexErrors": {
+        "description": "Suppress `noImplicitAny` errors when indexing objects that lack index signatures.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Suppress `noImplicitAny` errors when indexing objects that lack index signatures.\n\nSee more: https://www.typescriptlang.org/tsconfig#suppressImplicitAnyIndexErrors"
+      },
+      "target": {
+        "description": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.",
+        "type": "number",
+        "default": "ES3",
+        "enum": [0, 1, 2, 3, 4, 5, 6, 7, 99, 100, 99],
+        "markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.\n\n0 = ES3\n\n1 = ES5\n\n2 = ES2015\n\n3 = ES2016\n\n4 = ES2017\n\n5 = ES2018\n\n6 = ES2019\n\n7 = ES2020\n\n99 = ESNext\n\n100 = JSON\n\n99 = Latest"
+      },
+      "traceResolution": {
+        "description": "Enable tracing of the name resolution process. Requires TypeScript version 2.0 or later.",
+        "type": "boolean",
+        "default": false
+      },
+      "resolveJsonModule": {
+        "description": "Enable importing .json files",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable importing .json files\n\nSee more: https://www.typescriptlang.org/tsconfig#resolveJsonModule"
+      },
+      "types": {
+        "description": "Specify type package names to be included without being referenced in a source file.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Specify type package names to be included without being referenced in a source file.\n\nSee more: https://www.typescriptlang.org/tsconfig#types"
+      },
+      "typeRoots": {
+        "description": "Specify multiple folders that act like `./node_modules/@types`.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Specify multiple folders that act like `./node_modules/@types`.\n\nSee more: https://www.typescriptlang.org/tsconfig#typeRoots"
+      },
+      "esModuleInterop": {
+        "description": "Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility.\n\nSee more: https://www.typescriptlang.org/tsconfig#esModuleInterop"
+      },
+      "useDefineForClassFields": {
+        "description": "Emit ECMAScript-standard-compliant class fields.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit ECMAScript-standard-compliant class fields.\n\nSee more: https://www.typescriptlang.org/tsconfig#useDefineForClassFields"
+      },
+
+      "allowArbitraryExtensions": {
+        "description": "Enable importing files with any extension, provided a declaration file is present.",
+        "type": "boolean",
+        "markdownDescription": "Enable importing files with any extension, provided a declaration file is present.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions"
+      },
+      "allowImportingTsExtensions": {
+        "description": "Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set.",
+        "type": "boolean",
+        "markdownDescription": "Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions"
+      },
+      "customConditions": {
+        "description": "Conditions to set in addition to the resolver-specific defaults when resolving imports.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Conditions to set in addition to the resolver-specific defaults when resolving imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#customConditions"
+      },
+      "diagnostics": {
+        "description": "Output compiler performance information after building.",
+        "type": "boolean",
+        "markdownDescription": "Output compiler performance information after building.\n\nSee more: https://www.typescriptlang.org/tsconfig#diagnostics"
+      },
+      "disableReferencedProjectLoad": {
+        "description": "Reduce the number of projects loaded automatically by TypeScript.",
+        "type": "boolean",
+        "markdownDescription": "Reduce the number of projects loaded automatically by TypeScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableReferencedProjectLoad"
+      },
+      "noPropertyAccessFromIndexSignature": {
+        "description": "Enforces using indexed accessors for keys declared using an indexed type",
+        "type": "boolean",
+        "markdownDescription": "Enforces using indexed accessors for keys declared using an indexed type\n\nSee more: https://www.typescriptlang.org/tsconfig#noPropertyAccessFromIndexSignature"
+      },
+      "exactOptionalPropertyTypes": {
+        "description": "Differentiate between undefined and not present when type checking",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Differentiate between undefined and not present when type checking\n\nSee more: https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes"
+      },
+      "incremental": {
+        "description": "Enable incremental compilation. Requires TypeScript version 3.4 or later.",
+        "type": "boolean"
+      },
+      "tsBuildInfoFile": {
+        "description": "Specify the folder for .tsbuildinfo incremental compilation files.",
+        "default": ".tsbuildinfo",
+        "type": "string",
+        "markdownDescription": "Specify the folder for .tsbuildinfo incremental compilation files.\n\nSee more: https://www.typescriptlang.org/tsconfig#tsBuildInfoFile"
+      },
+      "jsxFragmentFactory": {
+        "description": "Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'.",
+        "type": "string",
+        "default": "React.Fragment",
+        "markdownDescription": "Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'.\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxFragmentFactory"
+      },
+      "jsxImportSource": {
+        "description": "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx`.",
+        "type": "string",
+        "default": "react",
+        "markdownDescription": "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx`.\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxImportSource"
+      },
+      "listFiles": {
+        "description": "Print all of the files read during the compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Print all of the files read during the compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#listFiles"
+      },
+      "preserveValueImports": {
+        "description": "Preserve unused imported values in the JavaScript output that would otherwise be removed",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Preserve unused imported values in the JavaScript output that would otherwise be removed\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveValueImports"
+      },
+      "preserveWatchOutput": {
+        "description": "Disable wiping the console in watch mode",
+        "type": "boolean",
+        "markdownDescription": "Disable wiping the console in watch mode\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveWatchOutput"
+      },
+      "pretty": {
+        "description": "Enable color and formatting in output to make compiler errors easier to read",
+        "type": "boolean",
+        "default": true,
+        "markdownDescription": "Enable color and formatting in output to make compiler errors easier to read\n\nSee more: https://www.typescriptlang.org/tsconfig#pretty"
+      },
+      "useUnknownInCatchVariables": {
+        "description": "Default catch clause variables as `unknown` instead of `any`.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Default catch clause variables as `unknown` instead of `any`.\n\nSee more: https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables"
+      },
+      "watch": {
+        "description": "Watch input files.",
+        "type": "boolean"
+      },
+      "fallbackPolling": {
+        "description": "Specify the polling strategy to use when the system runs out of or doesn't support native file watchers. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "fixedPollingInterval",
+          "priorityPollingInterval",
+          "dynamicPriorityPolling",
+          "fixedInterval",
+          "priorityInterval",
+          "dynamicPriority",
+          "fixedChunkSize"
+        ]
+      },
+      "watchDirectory": {
+        "description": "Specify the strategy for watching directories under systems that lack recursive file-watching functionality. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "useFsEvents",
+          "fixedPollingInterval",
+          "dynamicPriorityPolling",
+          "fixedChunkSizePolling"
+        ],
+        "default": "useFsEvents"
+      },
+      "watchFile": {
+        "description": "Specify the strategy for watching individual files. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "fixedPollingInterval",
+          "priorityPollingInterval",
+          "dynamicPriorityPolling",
+          "useFsEvents",
+          "useFsEventsOnParentDirectory",
+          "fixedChunkSizePolling"
+        ],
+        "default": "useFsEvents"
+      },
+      "noUncheckedIndexedAccess": {
+        "description": "Add `undefined` to a type when accessed using an index.",
+        "type": "boolean",
+        "markdownDescription": "Add `undefined` to a type when accessed using an index.\n\nSee more: https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess"
+      },
+      "noImplicitOverride": {
+        "description": "Ensure overriding members in derived classes are marked with an override modifier.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure overriding members in derived classes are marked with an override modifier.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitOverride"
+      },
+      "generateCpuProfile": {
+        "description": "Emit a v8 CPU profile of the compiler run for debugging.",
+        "type": "string",
+        "default": "profile.cpuprofile",
+        "markdownDescription": "Emit a v8 CPU profile of the compiler run for debugging.\n\nSee more: https://www.typescriptlang.org/tsconfig#generateCpuProfile"
+      },
+      "plugins": {
+        "description": "Specify a list of language service plugins to include.",
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "description": "Plugin name.",
+              "type": "string"
+            }
+          }
+        },
+        "markdownDescription": "Specify a list of language service plugins to include.\n\nSee more: https://www.typescriptlang.org/tsconfig#plugins"
+      },
+      "listEmittedFiles": {
+        "description": "Print the names of emitted files after a compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Print the names of emitted files after a compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#listEmittedFiles"
+      },
+      "moduleDetection": {
+        "description": "Specify how TypeScript determine a file as module.",
+        "enum": ["auto", "legacy", "force"]
+      },
+      "importsNotUsedAsValues": {
+        "description": "Specify emit/checking behavior for imports that are only used for types.",
+        "default": "remove",
+        "enum": ["remove", "preserve", "error"]
+      },
+      "resolvePackageJsonExports": {
+        "description": "Use the package.json 'exports' field when resolving package imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Use the package.json 'exports' field when resolving package imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#resolvePackageJsonExports"
+      },
+      "resolvePackageJsonImports": {
+        "description": "Use the package.json 'imports' field when resolving imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Use the package.json 'imports' field when resolving imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#resolvePackageJsonImports"
+      },
+      "assumeChangesOnlyAffectDirectDependencies": {
+        "description": "Have recompiles in '--incremental' and '--watch' assume that changes within a file will only affect files directly depending on it. Requires TypeScript version 3.8 or later.",
+        "type": "boolean"
+      },
+      "extendedDiagnostics": {
+        "description": "Output more detailed compiler performance information after building.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Output more detailed compiler performance information after building.\n\nSee more: https://www.typescriptlang.org/tsconfig#extendedDiagnostics"
+      },
+      "listFilesOnly": {
+        "description": "Print names of files that are part of the compilation and then stop processing.",
+        "type": "boolean"
+      },
+      "disableSolutionSearching": {
+        "description": "Opt a project out of multi-project reference checking when editing.",
+        "type": "boolean",
+        "markdownDescription": "Opt a project out of multi-project reference checking when editing.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSolutionSearching"
+      },
+      "verbatimModuleSyntax": {
+        "description": "Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting.",
+        "type": "boolean",
+        "markdownDescription": "Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting.\n\nSee more: https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax"
+      }
+    }
+  }
+}

src/pages/OnlineEditor.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Playground from '@/components/Playground'
-import { initFiles, initImportMap } from '@/components/Playground/files.ts'
+import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files'
 
 const OnlineEditor: React.FC = () => {
     return (
         <>
             <FitFullscreen>
-                <Playground initFiles={initFiles} initImportMap={initImportMap} />
+                <Playground
+                    initFiles={initFiles}
+                    initImportMapRaw={JSON.stringify(initImportMap, null, 2)}
+                    initTsConfigRaw={JSON.stringify(initTsConfig, null, 2)}
+                />
             </FitFullscreen>
         </>
     )