Optimize CodeEditor. CodeEditor add tsconfig support.

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 { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
+import { useUpdatedEffect } from '@/util/hooks'
+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)
-        } else {
-            delete files[IMPORT_MAP_FILE_NAME]
-            setFiles(files)
+            setImportMapRaw(content)
+            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>
     )
 }