perf: optimize instance preview.

uiwjs · May 5, 2023 · 2ad9807 · 2ad9807
1 parent 679d07c
commit 2ad9807
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -16,11 +16,15 @@ export default React.forwardRef<HTMLIFrameElement, RunWebProps>((props, ref) =>
 
   useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement, [frameRef]);
 
-  const srcDoc = useMemo(() => {
+  useMemo(() => {
     setIsLoaded(false);
     const jsString = js ? `<script type="text/javascript">${js}</script>` : '';
     const cssString = css ? `<style>${css}</style>` : '';
-    return `<!DOCTYPE html><html><head>${cssString}</head><body>${html}</body>${jsString}</html>`;
+    const result = `<!DOCTYPE html><html><head>${cssString}</head><body>${html}</body>${jsString}</html>`;
+    const blob = new Blob([result], { type: 'text/html' });
+    if (frameRef.current) {
+      frameRef.current.src = URL.createObjectURL(blob);
+    }
   }, [css, html, js]);
 
   function renderFrameContents() {
@@ -40,7 +44,6 @@ export default React.forwardRef<HTMLIFrameElement, RunWebProps>((props, ref) =>
         onLoad && onLoad(evn);
       }}
       ref={frameRef}
-      srcDoc={srcDoc}
     >
       {isLoaded && renderFrameContents()}
     </iframe>

diff --git a/website/pages/run/index.module.less b/website/pages/run/index.module.less
@@ -28,7 +28,7 @@
 }
 
 .editor {
-  font-size: 12px;
+  font-size: 16px;
   background-color: #fff;
   position: relative;
   overflow: hidden;

diff --git a/website/pages/run/index.tsx b/website/pages/run/index.tsx
@@ -78,7 +78,7 @@ export default function Run() {
             <div className={styles.editorCode}>
               <CodeEditor
                 value={htmlStr}
-                style={{ minHeight: '100%' }}
+                style={{ fontSize: 16, minHeight: '100%' }}
                 placeholder="Please enter HTML code."
                 onChange={(evn) => handleChange(evn.target.value, 'html')}
                 language="html"
@@ -96,7 +96,7 @@ export default function Run() {
             <div className={styles.editorCode}>
               <CodeEditor
                 value={jsStr}
-                style={{ minHeight: '100%' }}
+                style={{ fontSize: 16, minHeight: '100%' }}
                 placeholder="Please enter JavaScript code."
                 onChange={(evn) => handleChange(evn.target.value, 'js')}
                 language="js"
@@ -114,7 +114,7 @@ export default function Run() {
             <div className={styles.editorCode}>
               <CodeEditor
                 value={cssStr}
-                style={{ minHeight: '100%' }}
+                style={{ fontSize: 16, minHeight: '100%' }}
                 placeholder="Please enter CSS code."
                 onChange={(evn) => handleChange(evn.target.value, 'css')}
                 language="css"