workflow(sfc-playground): add reload function (#8674)

packages/sfc-playground/src/App.vue

@@ -18,6 +18,8 @@ if (import.meta.env.DEV) {
   )
 }
 
+const replRef = ref<InstanceType<typeof Repl>>()
+
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
 }
@@ -90,6 +92,10 @@ function toggleSSR() {
   store.setFiles(store.getFiles())
 }
 
+function reloadPage() {
+  replRef.value?.reload()
+}
+
 const theme = ref<'dark' | 'light'>('dark')
 function toggleTheme(isDark: boolean) {
   theme.value = isDark ? 'dark' : 'light'
@@ -108,9 +114,11 @@ onMounted(() => {
     @toggle-theme="toggleTheme"
     @toggle-dev="toggleDevMode"
     @toggle-ssr="toggleSSR"
+    @reload-page="reloadPage"
   />
   <Repl
     v-if="EditorComponent"
+    ref="replRef"
     :theme="theme"
     :editor="EditorComponent"
     @keydown.ctrl.s.prevent

packages/sfc-playground/src/Header.vue

@@ -6,6 +6,7 @@ import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
+import Reload from './icons/Reload.vue'
 import type { ReplStore } from '@vue/repl'
 import VersionSelect from './VersionSelect.vue'
 
@@ -14,7 +15,12 @@ const props = defineProps<{
   dev: boolean
   ssr: boolean
 }>()
-const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
+const emit = defineEmits([
+  'toggle-theme',
+  'toggle-ssr',
+  'toggle-dev',
+  'reload-page'
+])
 
 const { store } = props
 
@@ -105,6 +111,9 @@ function toggleDark() {
       <button title="Copy sharable URL" class="share" @click="copyLink">
         <Share />
       </button>
+      <button title="Reload page" class="reload" @click="$emit('reload-page')">
+        <Reload />
+      </button>
       <button
         title="Download project files"
         class="download"

packages/sfc-playground/src/icons/Reload.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg fill="currentColor" width="1.7em" height="1.7em" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+  </svg>
+</template>