perf: optimize instance preview.

jaywcjlove · jaywcjlove · commit 2ad9807a41bb · 2023-05-05T09:18:18.000+08:00
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"

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.editor {`
`31`		`- font-size: 12px;`
	`31`	`+ font-size: 16px;`
`32`	`32`	`background-color: #fff;`
`33`	`33`	`position: relative;`
`34`	`34`	`overflow: hidden;`