refactor: add ref types

Author: sxzz

src/Message.vue

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue'
 import type { CompilerError } from 'vue/compiler-sfc'
 
 const props = defineProps<{
-  err?: string | Error
+  err?: string | Error | false
   warn?: string | Error
 }>()
 

src/SplitPane.vue

@@ -54,6 +54,7 @@ function dragEnd() {
 
 function changeViewSize() {
   const el = previewRef.value
+  if (!el) return
   state.viewHeight = el.offsetHeight
   state.viewWidth = el.offsetWidth
 }

src/output/Preview.vue

@@ -19,9 +19,9 @@ const props = defineProps<{ show: boolean; ssr: boolean }>()
 const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
 
-const container = ref()
-const runtimeError = ref()
-const runtimeWarning = ref()
+const container = ref<HTMLDivElement>()
+const runtimeError = ref<string>()
+const runtimeWarning = ref<string>()
 
 let sandbox: HTMLIFrameElement
 let proxy: PreviewProxy
@@ -68,7 +68,7 @@ function createSandbox() {
     // clear prev sandbox
     proxy.destroy()
     stopUpdateWatcher && stopUpdateWatcher()
-    container.value.removeChild(sandbox)
+    container.value?.removeChild(sandbox)
   }
 
   sandbox = document.createElement('iframe')
@@ -101,7 +101,7 @@ function createSandbox() {
       previewOptions.value?.placeholderHTML || '',
     )
   sandbox.srcdoc = sandboxSrc
-  container.value.appendChild(sandbox)
+  container.value?.appendChild(sandbox)
 
   proxy = new PreviewProxy(sandbox, {
     on_fetch_progress: (progress: any) => {
@@ -169,8 +169,8 @@ async function updatePreview() {
   if (import.meta.env.PROD && clearConsole.value) {
     console.clear()
   }
-  runtimeError.value = null
-  runtimeWarning.value = null
+  runtimeError.value = undefined
+  runtimeWarning.value = undefined
 
   let isSSR = props.ssr
   if (store.value.vueVersion) {
@@ -290,7 +290,7 @@ defineExpose({ reload, container })
     class="iframe-container"
     :class="{ [theme]: previewTheme }"
   />
-  <Message :err="runtimeError && (previewOptions?.showRuntimeError ?? true)" />
+  <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
   <Message
     v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
     :warn="runtimeWarning"

src/types.ts

@@ -17,5 +17,6 @@ export type OutputModes = 'preview' | EditorMode
 
 export const injectKeyProps: InjectionKey<ToRefs<Required<Props>>> =
   Symbol('props')
-export const injectKeyPreviewRef: InjectionKey<ComputedRef<HTMLElement>> =
-  Symbol('preview-ref')
+export const injectKeyPreviewRef: InjectionKey<
+  ComputedRef<HTMLDivElement | undefined>
+> = Symbol('preview-ref')