Optimize Playground

src/components/Playground/CodeEditor/index.tsx

@@ -13,6 +13,7 @@ import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
+    showFileSelector?: boolean
     tsconfig?: ITsconfig
     files: IFiles
     readonly?: boolean
@@ -30,6 +31,7 @@ interface CodeEditorProps {
 
 const CodeEditor = ({
     theme,
+    showFileSelector = true,
     tsconfig,
     files,
     readonly,
@@ -119,6 +121,7 @@ const CodeEditor = ({
     return (
         <>
             <FlexBox data-component={'playground-code-editor'}>
+                {showFileSelector && (
                     <FileSelector
                         files={files}
                         readonly={readonly}
@@ -132,6 +135,7 @@ const CodeEditor = ({
                         onAddFile={handleOnAddFile}
                         onError={handleOnError}
                     />
+                )}
                 <Editor
                     tsconfig={tsconfig}
                     theme={theme}

src/components/Playground/Output/index.tsx

@@ -36,4 +36,7 @@ const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     )
 }
 
+Output.Preview = Preview
+Output.Transform = Transform
+
 export default Output

src/components/Playground/files.ts

@@ -4,6 +4,7 @@ import DiagnosticsOptions = languages.json.DiagnosticsOptions
 import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
 import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
 import importMapSchema from '@/components/Playground/import-map-schema.json'
+import { formatByteSize } from '@/util/common.tsx'
 
 export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'
@@ -41,6 +42,20 @@ export const base64ToStr = (base64: string) => {
     return ''
 }
 
+export const getFilesSize = (files: IFiles) =>
+    formatByteSize(strToU8(JSON.stringify(files)).byteLength)
+
+export const base64ToFiles = (base64: string): IFiles => {
+    try {
+        return JSON.parse(base64ToStr(base64)) as IFiles
+    } catch (e) {
+        console.error(e)
+        return {}
+    }
+}
+
+export const filesToBase64 = (files: IFiles): string => strToBase64(JSON.stringify(files))
+
 export const getFilesFromUrl = () => {
     let files: IFiles | undefined
     try {

src/components/Playground/index.tsx

@@ -98,4 +98,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
     )
 }
 
+Playground.CodeEditor = CodeEditor
+Playground.Output = Output
+
 export default Playground