Skip to content

fix(preview): upgrade vue repl version #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kevinmoch merged 2 commits into from
Dec 22, 2023
Merged

fix(preview): upgrade vue repl version #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bc366e
fix(preview): upgrade vue repl version
chilingling Dec 18, 2023
ee6a6d1
fix(preview): optimized by review comment
chilingling Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/design-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
31 changes: 12 additions & 19 deletions packages/design-core/src/preview/src/preview/Preview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<Repl
:editor="Monaco"
:store="store"
:sfcOptions="sfcOptions"
:showCompileOutput="false"
Expand All @@ -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'
Expand Down Expand Up @@ -90,22 +92,12 @@ 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) => {
Comment thread
kevinmoch marked this conversation as resolved.
await store.setFiles(newFiles, mainFileName)
// 强制更新 codeSandbox
store.state.resetFlip = !store.state.resetFlip
Comment thread
kevinmoch marked this conversation as resolved.
}

const files = store.getFiles()
Object.assign(files, srcFiles)

const addUtilsImportMap = (utils = []) => {
const utilsImportMaps = {}
utils.forEach(({ type, content: { package: packageName, cdnLink } }) => {
Expand All @@ -117,9 +109,9 @@ export default {
store.setImportMap(newImportMap)
}

const params = getSearchParams()
const queryParams = getSearchParams()

const promiseList = [fetchCode(params), fetchMetaData(params), setFiles(files, 'Main.vue')]
const promiseList = [fetchCode(queryParams), fetchMetaData(queryParams), setFiles(srcFiles, 'src/Main.vue')]
Promise.all(promiseList).then(([codeList, metaData]) => {
Comment thread
kevinmoch marked this conversation as resolved.
addUtilsImportMap(metaData.utils || [])
const codeErrorMsgs = codeList
Expand Down Expand Up @@ -164,8 +156,8 @@ 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

codeList.map(fixScriptLang).forEach(assignFiles)
Expand All @@ -180,7 +172,8 @@ export default {

return {
store,
sfcOptions
sfcOptions,
Monaco
}
}
}
Expand Down