From 5bc366e9b2642f596fd963ca591800923010b67c Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 18 Dec 2023 03:20:28 -0800
Subject: [PATCH 1/2] fix(preview): upgrade vue repl version

---
 packages/design-core/package.json             |  2 +-
 .../src/preview/src/preview/Preview.vue       | 26 +++++++------------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index 46556bba53..7010d4ac82 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -82,7 +82,7 @@
     "@opentiny/vue-renderless": "~3.10.0",
     "@opentiny/vue-theme": "~3.10.0",
     "@vue/babel-plugin-jsx": "1.1.1",
-    "@vue/repl": "^1.3.0",
+    "@vue/repl": "^2.9.0",
     "@vueuse/core": "^9.6.0",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index dbb768ee58..efcc1ce21d 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -1,5 +1,6 @@
 <template>
   <Repl
+    :editor="Monaco"
     :store="store"
     :sfcOptions="sfcOptions"
     :showCompileOutput="false"
@@ -10,7 +11,8 @@
 </template>
 
 <script>
-import { Repl, ReplStore, File, compileFile } from '@vue/repl'
+import { Repl, ReplStore } from '@vue/repl'
+import Monaco from '@vue/repl/monaco-editor'
 import vueJsx from '@vue/babel-plugin-jsx'
 import { transformSync } from '@babel/core'
 import { Notify } from '@opentiny/vue'
@@ -90,22 +92,11 @@ export default {
     store.setImportMap(importMap)
 
     // 相比store.setFiles，只要少了state.activeFile = state.files[filename]，因为改变activeFile会触发多余的文件解析
-    const setFiles = async (newFiles, mainfileName = 'App.vue') => {
-      const files = {}
-      Object.entries(newFiles).forEach(([fileName, fileCode]) => {
-        files[fileName] = new File(fileName, fileCode)
-      })
-      const compilingList = Object.values(files).map((file) => compileFile(store, file))
-
-      await Promise.all(compilingList)
-      store.state.mainFile = mainfileName
-      store.state.files = files
+    const setFiles = async (newFiles, mainFileName) => {
+      store.setFiles(newFiles, mainFileName)
       store.state.resetFlip = !store.state.resetFlip
     }
 
-    const files = store.getFiles()
-    Object.assign(files, srcFiles)
-
     const addUtilsImportMap = (utils = []) => {
       const utilsImportMaps = {}
       utils.forEach(({ type, content: { package: packageName, cdnLink } }) => {
@@ -119,7 +110,7 @@ export default {
 
     const params = getSearchParams()
 
-    const promiseList = [fetchCode(params), fetchMetaData(params), setFiles(files, 'Main.vue')]
+    const promiseList = [fetchCode(params), fetchMetaData(params), setFiles(srcFiles, 'src/Main.vue')]
     Promise.all(promiseList).then(([codeList, metaData]) => {
       addUtilsImportMap(metaData.utils || [])
       const codeErrorMsgs = codeList
@@ -165,7 +156,7 @@ export default {
       }
 
       const appJsCode = processAppJsCode(newFiles['app.js'], params.styles)
- 
+
       newFiles['app.js'] = appJsCode
 
       codeList.map(fixScriptLang).forEach(assignFiles)
@@ -180,7 +171,8 @@ export default {
 
     return {
       store,
-      sfcOptions
+      sfcOptions,
+      Monaco
     }
   }
 }

From ee6a6d16ed58b6dbb84ff1fa562cd3c59a4cd888 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 21 Dec 2023 19:37:32 -0800
Subject: [PATCH 2/2] fix(preview): optimized by review comment

---
 packages/design-core/src/preview/src/preview/Preview.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index efcc1ce21d..facd066768 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -93,7 +93,8 @@ export default {
 
     // 相比store.setFiles，只要少了state.activeFile = state.files[filename]，因为改变activeFile会触发多余的文件解析
     const setFiles = async (newFiles, mainFileName) => {
-      store.setFiles(newFiles, mainFileName)
+      await store.setFiles(newFiles, mainFileName)
+      // 强制更新 codeSandbox
       store.state.resetFlip = !store.state.resetFlip
     }
 
@@ -108,9 +109,9 @@ export default {
       store.setImportMap(newImportMap)
     }
 
-    const params = getSearchParams()
+    const queryParams = getSearchParams()
 
-    const promiseList = [fetchCode(params), fetchMetaData(params), setFiles(srcFiles, 'src/Main.vue')]
+    const promiseList = [fetchCode(queryParams), fetchMetaData(queryParams), setFiles(srcFiles, 'src/Main.vue')]
     Promise.all(promiseList).then(([codeList, metaData]) => {
       addUtilsImportMap(metaData.utils || [])
       const codeErrorMsgs = codeList
@@ -155,7 +156,7 @@ export default {
         newFiles[panelName] = panelValue
       }
 
-      const appJsCode = processAppJsCode(newFiles['app.js'], params.styles)
+      const appJsCode = processAppJsCode(newFiles['app.js'], queryParams.styles)
 
       newFiles['app.js'] = appJsCode