vuejs / repl

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

[Bug] There are some problem with js-eval runtime #46

Closed langren1353 closed 2 years ago

langren1353 commented 2 years ago

Problem 1.

in file repl\src\output\srcdoc.html#55

Promise.resolve event and script code eval sometimes run at a wrong time. which may cause CSS code inject failed: from source code we want window.__css__ = xxxxxxCode evaluate before document.getElementById('__sfc-styles').innerHTML = window.__css__ But this will cause when we use window.__css__ , it is still nothing image

Resovle:

window.__next__ = () => {
    setTimeout(() => resolve(), 0)
}

it is a microtask vs macrotask problem

Problem 2.

in file Preview.vue#152

sometimes event not fire when we are typing, especially in App.vue with style tag,change watch fuction will fix this.

About these two problem,I create a PR at https://github.com/vuejs/repl/pull/47