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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/sfc-playground/src/Header.vue
View File

@ -1,35 +1,44 @@
<template> <template>
<nav> <nav>
<h1>Vue SFC Playground</h1> <h1>Vue SFC Playground</h1>
<div class="links">
<button class="share" @click="copyLink"> <a class="commit-link" :href="`https://github.com/vuejs/vue-next/tree/${commit}`" target="_blank">
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24"> vue@{{ commit }}
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> </a>
<circle cx="18" cy="5" r="3"/> <a class="commit-link" href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">
<circle cx="6" cy="12" r="3"/> History
<circle cx="18" cy="19" r="3"/> </a>
<path d="M8.59 13.51l6.83 3.98"/> <button class="share" @click="copyLink">
<path d="M15.41 6.51l-6.82 3.98"/> <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
</g> <g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
</svg> <circle cx="18" cy="5" r="3"/>
</button> <circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<button class="download" @click="downloadProject"> <path d="M8.59 13.51l6.83 3.98"/>
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24"> <path d="M15.41 6.51l-6.82 3.98"/>
<g fill="#626262"> </g>
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/> </svg>
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/> </button>
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/> <button class="download" @click="downloadProject">
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/><path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/> <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
</g> <g fill="#626262">
</svg> <rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
</button> <rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/>
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
</g>
</svg>
</button>
</div>
</nav> </nav>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { downloadProject } from './download/download' import { downloadProject } from './download/download'
const commit = __COMMIT__
function copyLink() { function copyLink() {
navigator.clipboard.writeText(location.href) navigator.clipboard.writeText(location.href)
alert('Sharable URL has been copied to clipboard.') alert('Sharable URL has been copied to clipboard.')
@ -45,23 +54,37 @@ nav {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.33); box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
position: relative; position: relative;
z-index: 999; z-index: 999;
display: flex;
justify-content: space-between;
} }
h1 { h1 {
margin: 0; margin: 0;
line-height: var(--nav-height); line-height: var(--nav-height);
font-weight: 500; font-weight: 500;
display: inline-block;
vertical-align: middle;
}
.commit-link {
color: var(--color-branding);
text-decoration: none;
margin-left: 6px;
vertical-align: middle;
line-height: var(--nav-height);
} }
.share { .share {
position: absolute; position: relative;
top: 14px; top: 6px;
right: 56px;
} }
.download { .download {
position: absolute; position: relative;
top: 13px; top: 8px;
right: 16px; }
.commit-link {
margin: 0 5px;
} }
</style> </style>

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

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

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

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

4
packages/sfc-playground/src/store.ts
View File

@ -50,7 +50,7 @@ let files: Store['files'] = {}
const savedFiles = location.hash.slice(1) const savedFiles = location.hash.slice(1)
if (savedFiles) { if (savedFiles) {
const saved = JSON.parse(decodeURIComponent(savedFiles)) const saved = JSON.parse(atob(savedFiles))
for (const filename in saved) { for (const filename in saved) {
files[filename] = new File(filename, saved[filename]) files[filename] = new File(filename, saved[filename])
} }
@ -78,7 +78,7 @@ for (const file in store.files) {
} }
watchEffect(() => { watchEffect(() => {
location.hash = encodeURIComponent(JSON.stringify(exportFiles())) history.replaceState({}, '', '#' + btoa(JSON.stringify(exportFiles())))
}) })
export function exportFiles() { export function exportFiles() {

8
packages/sfc-playground/vite.config.ts
View File

@ -2,9 +2,15 @@ import fs from 'fs'
import path from 'path' import path from 'path'
import { defineConfig, Plugin } from 'vite' import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import execa from 'execa'
const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
export default defineConfig({ export default defineConfig({
plugins: [vue(), copyVuePlugin()], plugins: [vue(), copyVuePlugin()],
define: {
__COMMIT__: JSON.stringify(commit)
},
optimizeDeps: { optimizeDeps: {
exclude: ['consolidate'] exclude: ['consolidate']
} }
@ -13,7 +19,7 @@ export default defineConfig({
function copyVuePlugin(): Plugin { function copyVuePlugin(): Plugin {
return { return {
name: 'copy-vue', name: 'copy-vue',
generateBundle(_opts, bundle) { generateBundle() {
const filePath = path.resolve( const filePath = path.resolve(
__dirname, __dirname,
'../vue/dist/vue.runtime.esm-browser.js' '../vue/dist/vue.runtime.esm-browser.js'