workflow(sfc-playground): tweaks and commit links

packages/sfc-playground/src/Header.vue

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

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

@@ -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
   }

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

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

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

@@ -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);
 					}

packages/sfc-playground/src/store.ts

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

packages/sfc-playground/vite.config.ts

@@ -2,9 +2,15 @@ import fs from 'fs'
 import path from 'path'
 import { defineConfig, Plugin } from 'vite'
 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({
   plugins: [vue(), copyVuePlugin()],
+  define: {
+    __COMMIT__: JSON.stringify(commit)
+  },
   optimizeDeps: {
     exclude: ['consolidate']
   }
@@ -13,7 +19,7 @@ export default defineConfig({
 function copyVuePlugin(): Plugin {
   return {
     name: 'copy-vue',
-    generateBundle(_opts, bundle) {
+    generateBundle() {
       const filePath = path.resolve(
         __dirname,
         '../vue/dist/vue.runtime.esm-browser.js'