refactor: use useTemplateRef

src/Repl.vue

@@ -2,7 +2,7 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, provide, toRefs, useTemplateRef } from 'vue'
 import {
   type EditorComponentType,
   injectKeyPreviewRef,
@@ -63,7 +63,7 @@ if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
 
-const outputRef = ref<InstanceType<typeof Output>>()
+const outputRef = useTemplateRef('output')
 
 props.store.init()
 
@@ -94,7 +94,7 @@ defineExpose({ reload })
       </template>
       <template #[outputSlotName]>
         <Output
-          ref="outputRef"
+          ref="output"
           :editor-component="editor"
           :show-compile-output="props.showCompileOutput"
           :ssr="!!props.ssr"

src/SplitPane.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref } from 'vue'
+import { computed, inject, reactive, useTemplateRef } from 'vue'
 import { injectKeyPreviewRef, injectKeyProps } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
-const container = ref()
+const containerRef = useTemplateRef('container')
 const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
@@ -36,11 +36,11 @@ function dragStart(e: MouseEvent) {
 }
 
 function dragMove(e: MouseEvent) {
-  if (state.dragging) {
+  if (containerRef.value && state.dragging) {
     const position = isVertical.value ? e.pageY : e.pageX
     const totalSize = isVertical.value
-      ? container.value.offsetHeight
-      : container.value.offsetWidth
+      ? containerRef.value.offsetHeight
+      : containerRef.value.offsetWidth
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 

src/codemirror/CodeMirror.vue

@@ -1,10 +1,10 @@
 <template>
-  <div ref="el" class="editor" />
+  <div ref="container" class="editor" />
 </template>
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, ref, watchEffect } from 'vue'
+import { inject, onMounted, useTemplateRef, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 import { injectKeyProps } from '../../src/types'
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
-const el = ref()
+const el = useTemplateRef('container')
 const { autoResize, autoSave } = inject(injectKeyProps)!
 
 onMounted(() => {

src/editor/FileSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { injectKeyProps } from '../../src/types'
 import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
-import { type VNode, computed, inject, ref } from 'vue'
+import { type VNode, computed, inject, ref, useTemplateRef } from 'vue'
 
 const { store, showTsConfig, showImportMap } = inject(injectKeyProps)!
 
@@ -93,10 +93,10 @@ function editFileName(file: string) {
   pending.value = file
 }
 
-const fileSel = ref(null)
+const fileSelector = useTemplateRef('fileSelector')
 function horizontalScroll(e: WheelEvent) {
   e.preventDefault()
-  const el = fileSel.value! as HTMLElement
+  const el = fileSelector.value!
   const direction =
     Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
   const distance = 30 * (direction > 0 ? 1 : -1)
@@ -108,7 +108,7 @@ function horizontalScroll(e: WheelEvent) {
 
 <template>
   <div
-    ref="fileSel"
+    ref="fileSelector"
     class="file-selector"
     :class="{ 'has-import-map': showImportMap }"
     @wheel="horizontalScroll"

src/monaco/Monaco.vue

@@ -7,6 +7,7 @@ import {
   onMounted,
   ref,
   shallowRef,
+  useTemplateRef,
   watch,
 } from 'vue'
 import * as monaco from 'monaco-editor-core'
@@ -32,7 +33,7 @@ const emit = defineEmits<{
   (e: 'change', value: string): void
 }>()
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = useTemplateRef('container')
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 const {
@@ -172,7 +173,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="editor" />
+  <div ref="container" class="editor" />
 </template>
 
 <style>

src/output/Output.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import {
   type EditorComponentType,
   type OutputModes,
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 const { store } = inject(injectKeyProps)!
-const previewRef = ref<InstanceType<typeof Preview>>()
+const previewRef = useTemplateRef('preview')
 const modes = computed(() =>
   props.showCompileOutput
     ? (['preview', 'js', 'css', 'ssr'] as const)
@@ -53,7 +53,7 @@ defineExpose({ reload, previewRef })
   </div>
 
   <div class="output-container">
-    <Preview ref="previewRef" :show="mode === 'preview'" :ssr="ssr" />
+    <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
     <props.editorComponent
       v-if="mode !== 'preview'"
       readonly

src/output/Preview.vue

@@ -6,6 +6,7 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  useTemplateRef,
   watch,
   watchEffect,
 } from 'vue'
@@ -19,7 +20,7 @@ const props = defineProps<{ show: boolean; ssr: boolean }>()
 const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
 
-const container = ref<HTMLDivElement>()
+const containerRef = useTemplateRef('container')
 const runtimeError = ref<string>()
 const runtimeWarning = ref<string>()
 
@@ -68,7 +69,7 @@ function createSandbox() {
     // clear prev sandbox
     proxy.destroy()
     stopUpdateWatcher && stopUpdateWatcher()
-    container.value?.removeChild(sandbox)
+    containerRef.value?.removeChild(sandbox)
   }
 
   sandbox = document.createElement('iframe')
@@ -101,7 +102,7 @@ function createSandbox() {
       previewOptions.value?.placeholderHTML || '',
     )
   sandbox.srcdoc = sandboxSrc
-  container.value?.appendChild(sandbox)
+  containerRef.value?.appendChild(sandbox)
 
   proxy = new PreviewProxy(sandbox, {
     on_fetch_progress: (progress: any) => {
@@ -280,7 +281,7 @@ function reload() {
   sandbox.contentWindow?.location.reload()
 }
 
-defineExpose({ reload, container })
+defineExpose({ reload, container: containerRef })
 </script>
 
 <template>