vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
904 stars 159 forks source link

[bug]if activeFile !== mainFile, mainFile would not compile #224

Open chenyulun opened 6 months ago

chenyulun commented 6 months ago

src/store.ts if(activeFile.value !== mainFile.value)

// if
const activeFile = ref('app.vue')
const mainFile = ref('appWarp.vue')
  function init() {
    watchEffect(() =>
      compileFile(store, activeFile.value).then( //  not activeFile, sould be mainFile
        (errs) => (errors.value = errs),
      ),
    )
// ...
 for (const [filename, file] of Object.entries(files.value)) {
      if (filename !== mainFile.value) { // no compile mainFile.value
        compileFile(store, file).then((errs) => errors.value.push(...errs))
      }
    }

这种情况下,mainFile的file对象里面的compiled的js,css,ssr都是空的导致渲染不了

chenyulun commented 6 months ago

如何避免首次聚焦文件非入口文件的,导致入口文件不编译的问题, 或者最后遍历的时候判断条件去掉,或者 if (filename !== mainFile.value || activeFile.value !== mainFile.value) 首次如果入口文件不是聚焦文件,那也需要编译一次

chenyulun commented 6 months ago

by the way: 还有一个创建沙盒的时候,能保证所有文件都编译(异步)完成了吗?虽然速度很快,但是他们之间没有异步的等待, 如果要关联,得在File里面设置状态属性或者函数,读取的时候保证编译成功

还有一个想法就: 把编译动作集成到File类里面,读取compiled的时候再去编译,并且缓存,存在的情况下不再编译,修改后清除编译缓存,页面重新执行渲染的时候再编译,可以避免文件未使用的时候进行多次无意义的编译

这样好像会把很多都变成异步,也不太行

sxzz commented 3 months ago

Could you please provide a minimal reproduction for me? I'll appreciate it.