Skip to content

Commit 3aaa537

Browse files
yyx990803yyx990803
committed
workflow(sfc-playground): tweaks and commit links
1 parent 69b4727 commit 3aaa537

File tree

6 files changed

+106
-64
lines changed

6 files changed

+106
-64
lines changed

‎packages/sfc-playground/src/Header.vue

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,44 @@
11
<template>
22
<nav>
33
<h1>Vue SFC Playground</h1>
4-
5-
<button class="share" @click="copyLink">
6-
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
7-
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
8-
<circle cx="18" cy="5" r="3"/>
9-
<circle cx="6" cy="12" r="3"/>
10-
<circle cx="18" cy="19" r="3"/>
11-
<path d="M8.59 13.51l6.83 3.98"/>
12-
<path d="M15.41 6.51l-6.82 3.98"/>
13-
</g>
14-
</svg>
15-
</button>
16-
17-
<button class="download" @click="downloadProject">
18-
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
19-
<g fill="#626262">
20-
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
21-
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
22-
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
23-
<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"/>
24-
</g>
25-
</svg>
26-
</button>
4+
<div class="links">
5+
<a class="commit-link" :href="`https://github.com/vuejs/vue-next/tree/${commit}`" target="_blank">
6+
vue@{{ commit }}
7+
</a>
8+
<a class="commit-link" href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">
9+
History
10+
</a>
11+
<button class="share" @click="copyLink">
12+
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
13+
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
14+
<circle cx="18" cy="5" r="3"/>
15+
<circle cx="6" cy="12" r="3"/>
16+
<circle cx="18" cy="19" r="3"/>
17+
<path d="M8.59 13.51l6.83 3.98"/>
18+
<path d="M15.41 6.51l-6.82 3.98"/>
19+
</g>
20+
</svg>
21+
</button>
22+
<button class="download" @click="downloadProject">
23+
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
24+
<g fill="#626262">
25+
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
26+
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
27+
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
28+
<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"/>
29+
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
30+
</g>
31+
</svg>
32+
</button>
33+
</div>
2734
</nav>
2835
</template>
2936

3037
<script setup lang="ts">
3138
import { downloadProject } from './download/download'
3239
40+
const commit = __COMMIT__
41+
3342
function copyLink() {
3443
navigator.clipboard.writeText(location.href)
3544
alert('Sharable URL has been copied to clipboard.')
@@ -45,23 +54,37 @@ nav {
4554
box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
4655
position: relative;
4756
z-index: 999;
57+
display: flex;
58+
justify-content: space-between;
4859
}
4960
5061
h1 {
5162
margin: 0;
5263
line-height: var(--nav-height);
5364
font-weight: 500;
65+
display: inline-block;
66+
vertical-align: middle;
67+
}
68+
69+
.commit-link {
70+
color: var(--color-branding);
71+
text-decoration: none;
72+
margin-left: 6px;
73+
vertical-align: middle;
74+
line-height: var(--nav-height);
5475
}
5576
5677
.share {
57-
position: absolute;
58-
top: 14px;
59-
right: 56px;
78+
position: relative;
79+
top: 6px;
6080
}
6181
6282
.download {
63-
position: absolute;
64-
top: 13px;
65-
right: 16px;
83+
position: relative;
84+
top: 8px;
85+
}
86+
87+
.commit-link {
88+
margin: 0 5px;
6689
}
6790
</style>

‎packages/sfc-playground/src/output/Preview.vue

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,22 @@ async function updatePreview() {
3030
const modules = compileModulesForPreview()
3131
console.log(`successfully compiled ${modules.length} modules.`)
3232
// reset modules
33-
await proxy.eval(`
34-
window.__modules__ = {}
35-
window.__css__ = ''
36-
`)
37-
// evaluate modules
38-
for (const mod of modules) {
39-
await proxy.eval(mod)
40-
}
41-
// reboot
42-
await proxy.eval(`
43-
import { createApp as _createApp } from "${SANDBOX_VUE_URL}"
44-
if (window.__app__) {
45-
window.__app__.unmount()
46-
document.getElementById('app').innerHTML = ''
47-
}
48-
document.getElementById('__sfc-styles').innerHTML = window.__css__
49-
const app = window.__app__ = _createApp(__modules__["${MAIN_FILE}"].default)
50-
app.config.errorHandler = e => console.error(e)
51-
app.mount('#app')
52-
`)
33+
await proxy.eval([
34+
`window.__modules__ = {};window.__css__ = ''`,
35+
...modules,
36+
`
37+
import { createApp as _createApp } from "${SANDBOX_VUE_URL}"
38+
39+
if (window.__app__) {
40+
window.__app__.unmount()
41+
document.getElementById('app').innerHTML = ''
42+
}
43+
44+
document.getElementById('__sfc-styles').innerHTML = window.__css__
45+
const app = window.__app__ = _createApp(__modules__["${MAIN_FILE}"].default)
46+
app.config.errorHandler = e => console.error(e)
47+
app.mount('#app')`.trim()
48+
])
5349
} catch (e) {
5450
runtimeError.value = e.stack
5551
}

‎packages/sfc-playground/src/output/PreviewProxy.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export class PreviewProxy {
8686
}
8787
}
8888

89-
eval(script: string) {
89+
eval(script: string | string[]) {
9090
return this.iframe_command('eval', { script })
9191
}
9292

‎packages/sfc-playground/src/output/srcdoc.html

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</style>
1010
<style id="__sfc-styles"></style>
1111
<script type="module">
12-
let scriptEl
12+
let scriptEls = []
1313

1414
window.__modules__ = {}
1515

@@ -25,24 +25,41 @@
2525
return Promise.resolve(window.__modules__[key])
2626
}
2727

28-
function handle_message(ev) {
28+
async function handle_message(ev) {
2929
let { action, cmd_id } = ev.data;
3030
const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
3131
const send_reply = (payload) => send_message({ ...payload, cmd_id });
32-
const send_ok = window.send_ok = () => send_reply({ action: 'cmd_ok' });
32+
const send_ok = () => send_reply({ action: 'cmd_ok' });
3333
const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
3434

3535
if (action === 'eval') {
3636
try {
37-
if (scriptEl) {
38-
document.head.removeChild(scriptEl)
37+
if (scriptEls.length) {
38+
scriptEls.forEach(el => {
39+
document.head.removeChild(el)
40+
})
41+
scriptEls.length = 0
3942
}
40-
scriptEl = document.createElement('script')
41-
scriptEl.setAttribute('type', 'module')
42-
// send ok in the module script to ensure sequential evaluation
43-
// of multiple proxy.eval() calls
44-
scriptEl.innerHTML = ev.data.args.script + `\nwindow.send_ok()`
45-
document.head.appendChild(scriptEl)
43+
44+
let { script: scripts } = ev.data.args
45+
if (typeof scripts === 'string') scripts = [scripts]
46+
47+
for (const script of scripts) {
48+
const scriptEl = document.createElement('script')
49+
scriptEl.setAttribute('type', 'module')
50+
// send ok in the module script to ensure sequential evaluation
51+
// of multiple proxy.eval() calls
52+
const done = new Promise((resolve, reject) => {
53+
window.__next__ = resolve
54+
scriptEl.onerror = reject
55+
})
56+
scriptEl.innerHTML = script + `\nwindow.__next__()`
57+
document.head.appendChild(scriptEl)
58+
scriptEls.push(scriptEl)
59+
await done
60+
}
61+
window.__next__ = undefined
62+
send_ok()
4663
} catch (e) {
4764
send_error(e.message, e.stack);
4865
}

‎packages/sfc-playground/src/store.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ let files: Store['files'] = {}
5050

5151
const savedFiles = location.hash.slice(1)
5252
if (savedFiles) {
53-
const saved = JSON.parse(decodeURIComponent(savedFiles))
53+
const saved = JSON.parse(atob(savedFiles))
5454
for (const filename in saved) {
5555
files[filename] = new File(filename, saved[filename])
5656
}
@@ -78,7 +78,7 @@ for (const file in store.files) {
7878
}
7979

8080
watchEffect(() => {
81-
location.hash = encodeURIComponent(JSON.stringify(exportFiles()))
81+
history.replaceState({}, '', '#' + btoa(JSON.stringify(exportFiles())))
8282
})
8383

8484
export function exportFiles() {

‎packages/sfc-playground/vite.config.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@ import fs from 'fs'
22
import path from 'path'
33
import { defineConfig, Plugin } from 'vite'
44
import vue from '@vitejs/plugin-vue'
5+
import execa from 'execa'
6+
7+
const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
58

69
export default defineConfig({
710
plugins: [vue(), copyVuePlugin()],
11+
define: {
12+
__COMMIT__: JSON.stringify(commit)
13+
},
814
optimizeDeps: {
915
exclude: ['consolidate']
1016
}
@@ -13,7 +19,7 @@ export default defineConfig({
1319
function copyVuePlugin(): Plugin {
1420
return {
1521
name: 'copy-vue',
16-
generateBundle(_opts, bundle) {
22+
generateBundle() {
1723
const filePath = path.resolve(
1824
__dirname,
1925
'../vue/dist/vue.runtime.esm-browser.js'

0 commit comments

Comments
 (0)