From 3331d5cb4810a1b6926b3ee86d95f754b0eb1a25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Wed, 21 Jun 2023 12:19:24 +0800
Subject: [PATCH 1/2] feat: add `reload` function

---
 src/Repl.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Repl.vue b/src/Repl.vue
index 341d6b56..55ab788c 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -71,6 +71,18 @@ provide('autoresize', props.autoResize)
 provide('import-map', toRef(props, 'showImportMap'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
+
+/**
+ * Reload the preview iframe
+ */
+function reload() {
+  const sandbox = document.querySelector('iframe[sandbox]') as HTMLIFrameElement
+  if (sandbox) {
+    sandbox.contentWindow?.location.reload()
+  }
+}
+
+defineExpose({ reload })
 </script>
 
 <template>

From d09fd5e0dbf0134c2c9095d99e34ff1eda7c42c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Fri, 23 Jun 2023 09:57:19 +0800
Subject: [PATCH 2/2] chore: add the reload method to Preview

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

diff --git a/src/Repl.vue b/src/Repl.vue
index 55ab788c..aacc41c6 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'
 
@@ -47,6 +47,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) {
@@ -76,10 +77,7 @@ provide('preview-options', props.previewOptions)
  * Reload the preview iframe
  */
 function reload() {
-  const sandbox = document.querySelector('iframe[sandbox]') as HTMLIFrameElement
-  if (sandbox) {
-    sandbox.contentWindow?.location.reload()
-  }
+  outputRef.value?.reload()
 }
 
 defineExpose({ reload })
@@ -93,6 +91,7 @@ defineExpose({ reload })
       </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 30189541..57f60be7 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -264,6 +264,15 @@ async function updatePreview() {
     runtimeError.value = (e as Error).message
   }
 }
+
+/**
+ * Reload the preview iframe
+ */
+function reload() {
+  sandbox.contentWindow?.location.reload()
+}
+
+defineExpose({ reload })
 </script>
 
 <template>