From f3dc9d0e4f59bfa767a77db444fd71e55a0c0645 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 19 Jan 2024 18:28:53 +0800
Subject: [PATCH] Optimize Playground

---
 .../Playground/CodeEditor/index.tsx           | 30 +++++++++++--------
 src/components/Playground/Output/index.tsx    |  3 ++
 src/components/Playground/files.ts            | 15 ++++++++++
 src/components/Playground/index.tsx           |  3 ++
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index f1f30ab..c4bd636 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/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,19 +121,21 @@ const CodeEditor = ({
     return (
         <>
             <FlexBox data-component={'playground-code-editor'}>
-                <FileSelector
-                    files={files}
-                    readonly={readonly}
-                    notRemovableFiles={notRemovable}
-                    selectedFileName={
-                        onSelectedFileChange ? propsSelectedFileName : selectedFileName
-                    }
-                    onChange={handleOnChangeSelectedFile}
-                    onRemoveFile={handleOnRemoveFile}
-                    onUpdateFileName={handleOnUpdateFileName}
-                    onAddFile={handleOnAddFile}
-                    onError={handleOnError}
-                />
+                {showFileSelector && (
+                    <FileSelector
+                        files={files}
+                        readonly={readonly}
+                        notRemovableFiles={notRemovable}
+                        selectedFileName={
+                            onSelectedFileChange ? propsSelectedFileName : selectedFileName
+                        }
+                        onChange={handleOnChangeSelectedFile}
+                        onRemoveFile={handleOnRemoveFile}
+                        onUpdateFileName={handleOnUpdateFileName}
+                        onAddFile={handleOnAddFile}
+                        onError={handleOnError}
+                    />
+                )}
                 <Editor
                     tsconfig={tsconfig}
                     theme={theme}
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 5b58410..7325852 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/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
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index dfa88ec..5a7b143 100644
--- a/src/components/Playground/files.ts
+++ b/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 {
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 4eedc30..895ca03 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -98,4 +98,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
     )
 }
 
+Playground.CodeEditor = CodeEditor
+Playground.Output = Output
+
 export default Playground