From 12ebceab49c2a56702fffdfc01bb8b0bc3a708ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Sun, 25 Jun 2023 00:01:44 +0800
Subject: [PATCH] feat: add `reload` function (#103)

---
 src/Repl.vue           | 13 ++++++++++++-
 src/output/Output.vue  |  9 ++++++++-
 src/output/Preview.vue |  9 +++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index c2c5feb3..dc17f941 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -2,7 +2,7 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { Store, ReplStore, SFCOptions } from './store'
-import { provide, toRef } from 'vue'
+import { provide, ref, toRef } from 'vue'
 import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
 
@@ -49,6 +49,7 @@ if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
 
+const outputRef = ref<InstanceType<typeof Output>>()
 const { store } = props
 const sfcOptions = (store.options = props.sfcOptions || {})
 if (!sfcOptions.script) {
@@ -74,6 +75,15 @@ provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
+
+/**
+ * Reload the preview iframe
+ */
+function reload() {
+  outputRef.value?.reload()
+}
+
+defineExpose({ reload })
 </script>
 
 <template>
@@ -84,6 +94,7 @@ provide('preview-options', props.previewOptions)
       </template>
       <template #right>
         <Output
+          ref="outputRef"
           :editorComponent="editor"
           :showCompileOutput="props.showCompileOutput"
           :ssr="!!props.ssr"
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 2bc92f05..6ff61a10 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
 }>()
 
 const store = inject('store') as Store
+const previewRef = ref<InstanceType<typeof Preview>>()
 const modes = computed(() =>
   props.showCompileOutput
     ? (['preview', 'js', 'css', 'ssr'] as const)
@@ -23,6 +24,12 @@ const mode = ref<OutputModes>(
     ? (store.initialOutputMode as OutputModes)
     : 'preview'
 )
+
+function reload() {
+  previewRef.value?.reload()
+}
+
+defineExpose({ reload })
 </script>
 
 <template>
@@ -37,7 +44,7 @@ const mode = ref<OutputModes>(
   </div>
 
   <div class="output-container">
-    <Preview :show="mode === 'preview'" :ssr="ssr" />
+    <Preview ref="previewRef" :show="mode === 'preview'" :ssr="ssr" />
     <props.editorComponent
       v-if="mode !== 'preview'"
       readonly
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 1cb13e79..ee20d4ad 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -259,6 +259,15 @@ async function updatePreview() {
     runtimeError.value = (e as Error).message
   }
 }
+
+/**
+ * Reload the preview iframe
+ */
+function reload() {
+  sandbox.contentWindow?.location.reload()
+}
+
+defineExpose({ reload })
 </script>
 
 <template>