refactor: fix component types, use defineModel

Author: sxzz

package.json

@@ -54,7 +54,7 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@types/codemirror": "^5.60.2",
     "@types/node": "^18.15.3",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@volar/monaco": "1.7.8",
     "@volar/typescript": "1.7.8",
     "@vue/language-service": "1.8.1",

pnpm-lock.yaml

@@ -1,25 +1,17 @@
 <script setup lang="ts">
 import CodeMirror, { type Props } from '../codemirror/CodeMirror.vue'
 import { computed } from 'vue'
-import type { PreviewMode } from './types'
+import type { EditorEmits, EditorProps } from './types'
 
 defineOptions({
   editorType: 'codemirror',
 })
 
-const props = defineProps<{
-  value: string
-  filename: string
-  readonly?: boolean
-  mode?: PreviewMode
-}>()
-
-const emits = defineEmits<{
-  (e: 'change', code: string): void
-}>()
+const props = defineProps<EditorProps>()
+const emit = defineEmits<EditorEmits>()
 
 const onChange = (code: string) => {
-  emits('change', code)
+  emit('change', code)
 }
 
 const modes: Record<string, Props['mode']> = {

src/editor/CodeMirrorEditor.vue

@@ -1,25 +1,16 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    modelValue?: boolean
-  }>(),
-  {
-    modelValue: false,
-  }
-)
-
-defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
+const visible = defineModel<boolean>()
 </script>
+
 <template>
-  <div class="wrapper" @click="$emit('update:modelValue', !modelValue)">
+  <div class="wrapper" @click="visible = !visible">
     <span>Show Error</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
   </div>
 </template>
+
 <style scoped>
 .wrapper {
   position: absolute;

src/editor/MessageToggle.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import Monaco from '../monaco/Monaco.vue'
-import type { PreviewMode } from './types'
+import type { EditorEmits, EditorProps } from './types'
 
-defineProps<{
-  value: string
-  filename: string
-  readonly?: boolean
-  mode?: PreviewMode
-}>()
-
-const emit = defineEmits<{
-  (e: 'change', code: string): void
-}>()
+defineProps<EditorProps>()
+const emit = defineEmits<EditorEmits>()
 
 defineOptions({
   editorType: 'monaco',

src/editor/MonacoEditor.vue

@@ -1,19 +1,22 @@
-import { Component } from 'vue'
+import { type FunctionalComponent } from 'vue'
 
 export type PreviewMode = 'js' | 'css' | 'ssr'
 
-interface EditorProps {
+export interface EditorProps {
   value: string
   filename: string
   readonly?: boolean
   mode?: PreviewMode
 }
 
-interface EditorEmits {
+export interface EditorEmits {
   (e: 'change', code: string): void
 }
 
-export type EditorComponentType = Component<EditorProps, EditorEmits> & {
+export type EditorComponentType = FunctionalComponent<
+  EditorProps,
+  { change: (code: string) => void }
+> & {
   editorType: 'monaco' | 'codemirror'
 }
 

src/editor/types.ts

@@ -3,7 +3,13 @@ import vue from '@vitejs/plugin-vue'
 import replace from '@rollup/plugin-replace'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      script: {
+        defineModel: true,
+      },
+    }),
+  ],
   resolve: {
     alias: {
       path: 'path-browserify',