Optimize Playground

src/components/Playground/Output/Preview/Render.tsx

@@ -1,3 +1,4 @@
+import '@/components/Playground/Output/Preview/render.scss'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 
 interface RenderProps {
@@ -66,6 +67,7 @@ const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
 
     return (
         <iframe
+            data-component={'playground-output-preview-render'}
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}

src/components/Playground/Output/Preview/iframe.html

@@ -48,11 +48,6 @@
   });
 </script>
 <script type="module" id="appSrc"></script>
-<div id="root">
-  <div
-    style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
-    Loading...
-  </div>
-</div>
+<div id="root"></div>
 </body>
 </html>

src/components/Playground/Output/Preview/index.tsx

@@ -1,16 +1,16 @@
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
-import { ENTRY_FILE_NAME } from '@/components/Playground/files'
 import Render from '@/components/Playground/Output/Preview/Render'
 
 interface PreviewProps {
     iframeKey: string
     files: IFiles
     importMap: IImportMap
+    entryPoint: string
 }
 
-const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
+const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -19,7 +19,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     }
 
     useEffect(() => {
-        Compiler.compile(files, importMap, [ENTRY_FILE_NAME])
+        Compiler.compile(files, importMap, entryPoint)
             .then((result) => {
                 setCompiledCode(result.outputFiles[0].text)
             })
@@ -36,4 +36,6 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     )
 }
 
+Preview.Render = Render
+
 export default Preview

src/components/Playground/Output/Preview/preview.scss

@@ -3,9 +3,4 @@
   position: relative;
   width: 100%;
   height: 100%;
-
-  iframe {
-    border: none;
-    flex: 1;
-  }
 }

src/components/Playground/Output/Preview/render.scss

@@ -0,0 +1,6 @@
+[data-component=playground-output-preview-render] {
+  border: none;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}

src/components/Playground/Output/index.tsx

@@ -1,6 +1,6 @@
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
-import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Playground from '@/components/Playground'
 import Transform from '@/components/Playground/Output/Transform'
 import Preview from '@/components/Playground/Output/Preview'
 
@@ -8,14 +8,15 @@ interface OutputProps {
     files: IFiles
     selectedFileName: string
     importMap: IImportMap
+    entryPoint: string
 }
 
-const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
+const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
         <FlexBox data-component={'playground-code-output'}>
-            <FileSelector
+            <Playground.CodeEditor.FileSelector
                 files={{
                     Preview: { name: 'Preview', language: 'json', value: '' },
                     Transform: { name: 'Transform', language: 'json', value: '' }
@@ -29,6 +30,7 @@ const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
                     iframeKey={JSON.stringify(importMap)}
                     files={files}
                     importMap={importMap}
+                    entryPoint={entryPoint}
                 />
             )}
             {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}