theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workflow(sfc-playground): tweaks and commit links

Browse Source
This commit is contained in:
Evan You
2021-03-29 02:07:04 -04:00
parent 69b4727204
commit 3aaa53748b
6 changed files with 106 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/sfc-playground/src/output/Preview.vue
View File

@@ -30,26 +30,22 @@ async function updatePreview() {
const modules = compileModulesForPreview()
console.log(`successfully compiled ${modules.length} modules.`)
// reset modules
await proxy.eval(`
window.__modules__ = {}
window.__css__ = ''
`)
// evaluate modules
for (const mod of modules) {
await proxy.eval(mod)
}
// reboot
await proxy.eval(`
import { createApp as _createApp } from "${SANDBOX_VUE_URL}"
if (window.__app__) {
window.__app__.unmount()
document.getElementById('app').innerHTML = ''
}
document.getElementById('__sfc-styles').innerHTML = window.__css__
const app = window.__app__ = _createApp(__modules__["${MAIN_FILE}"].default)
app.config.errorHandler = e => console.error(e)
app.mount('#app')
`)
await proxy.eval([
`window.__modules__ = {};window.__css__ = ''`,
...modules,
`
import { createApp as _createApp } from "${SANDBOX_VUE_URL}"
if (window.__app__) {
window.__app__.unmount()
document.getElementById('app').innerHTML = ''
}
document.getElementById('__sfc-styles').innerHTML = window.__css__
const app = window.__app__ = _createApp(__modules__["${MAIN_FILE}"].default)
app.config.errorHandler = e => console.error(e)
app.mount('#app')`.trim()
])
} catch (e) {
runtimeError.value = e.stack
}

2
packages/sfc-playground/src/output/PreviewProxy.ts
View File

@@ -86,7 +86,7 @@ export class PreviewProxy {
}
}
eval(script: string) {
eval(script: string | string[]) {
return this.iframe_command('eval', { script })
}

39
packages/sfc-playground/src/output/srcdoc.html
View File

@@ -9,7 +9,7 @@
</style>
<style id="__sfc-styles"></style>
<script type="module">
let scriptEl
let scriptEls = []
window.__modules__ = {}
@@ -25,24 +25,41 @@
return Promise.resolve(window.__modules__[key])
}
function handle_message(ev) {
async function handle_message(ev) {
let { action, cmd_id } = ev.data;
const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
const send_reply = (payload) => send_message({ ...payload, cmd_id });
const send_ok = window.send_ok = () => send_reply({ action: 'cmd_ok' });
const send_ok = () => send_reply({ action: 'cmd_ok' });
const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
if (action === 'eval') {
try {
if (scriptEl) {
document.head.removeChild(scriptEl)
if (scriptEls.length) {
scriptEls.forEach(el => {
document.head.removeChild(el)
})
scriptEls.length = 0
}
scriptEl = document.createElement('script')
scriptEl.setAttribute('type', 'module')
// send ok in the module script to ensure sequential evaluation
// of multiple proxy.eval() calls
scriptEl.innerHTML = ev.data.args.script + `\nwindow.send_ok()`
document.head.appendChild(scriptEl)
let { script: scripts } = ev.data.args
if (typeof scripts === 'string') scripts = [scripts]
for (const script of scripts) {
const scriptEl = document.createElement('script')
scriptEl.setAttribute('type', 'module')
// send ok in the module script to ensure sequential evaluation
// of multiple proxy.eval() calls
const done = new Promise((resolve, reject) => {
window.__next__ = resolve
scriptEl.onerror = reject
})
scriptEl.innerHTML = script + `\nwindow.__next__()`
document.head.appendChild(scriptEl)
scriptEls.push(scriptEl)
await done
}
window.__next__ = undefined
send_ok()
} catch (e) {
send_error(e.message, e.stack);
}