feat: add reload function (vuejs#103)

Author: Alfred-Skyblue

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"

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

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>