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;
+}