feat: add refresh preview button (#240)

src/App.vue

@@ -5,6 +5,7 @@ import { type ImportMap } from '@/utils/import-map'
 import { type UserOptions } from '@/composables/store'
 
 const loading = ref(true)
+const replRef = ref<InstanceType<typeof Repl>>()
 
 // enable experimental features
 const sfcOptions: SFCOptions = {
@@ -63,12 +64,17 @@ const dark = useDark()
 
 // persist state
 watchEffect(() => history.replaceState({}, '', `#${store.serialize()}`))
+
+const refreshPreview = () => {
+  replRef.value?.reload()
+}
 </script>
 
 <template>
   <div v-if="!loading" antialiased>
-    <Header :store="store" />
+    <Header :store="store" @refresh="refreshPreview" />
     <Repl
+      ref="replRef"
       :theme="dark ? 'dark' : 'light'"
       :store="store"
       :editor="Monaco"

src/components/Header.vue

@@ -10,6 +10,9 @@ import {
 const appVersion = import.meta.env.APP_VERSION
 const replVersion = import.meta.env.REPL_VERSION
 
+const emit = defineEmits<{
+  (e: 'refresh'): void
+}>()
 const nightly = ref(false)
 const dark = useDark()
 const toggleDark = useToggle(dark)
@@ -57,6 +60,10 @@ async function copyLink() {
   await navigator.clipboard.writeText(location.href)
   ElMessage.success('Sharable URL has been copied to clipboard.')
 }
+
+function refreshView() {
+  emit('refresh')
+}
 </script>
 
 <template>
@@ -109,6 +116,7 @@ async function copyLink() {
       </div>
 
       <div flex="~ gap-4" text-lg>
+        <button hover:color-primary i-ri-refresh-line @click="refreshView" />
         <button hover:color-primary i-ri-share-line @click="copyLink" />
         <button
           hover:color-primary