Make use of @vueuse/core

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .ts,.vue src"
   },
   "dependencies": {
+    "@vueuse/core": "^10.9.0",
     "ace-code": "^1.32.8",
     "md5": "^2.3.0",
     "pinia": "^2.1.7",

src/components/Editor.vue

@@ -12,11 +12,12 @@ import {
   defineModel,
   onBeforeUnmount,
   onMounted,
-  watch,
   ref,
   useCssModule,
 } from 'vue';
 
+import { useResizeObserver } from '@vueuse/core';
+
 import { Ace, edit as aceEdit, config as aceConfig } from 'ace-code';
 import 'ace-code/src/ext/language_tools';
 import 'ace-code/styles/ace.css';
@@ -26,7 +27,6 @@ import * as RDT from '@/editor/rdt';
 import type ISelection from '@/types/selection';
 import type IIcon from '@/types/icon';
 
-import useClientSize from '@/composables/useClientSize';
 import bindEditorValue from '@/composables/bindEditorValue';
 import bindEditorSelection from '@/composables/bindEditorSelection';
 import bindEditorScroll from '@/composables/bindEditorScroll';
@@ -70,8 +70,7 @@ onBeforeUnmount(() => {
   editor.value = undefined;
 });
 
-const holderSize = useClientSize(holder);
-watch(holderSize, () => editor.value?.resize());
+useResizeObserver(holder, () => editor.value?.resize());
 
 class Completer implements Ace.Completer {
   private style = useCssModule();

src/composables/bindEditorScroll.ts

@@ -1,10 +1,9 @@
 import { watch, type Ref } from 'vue';
+import { whenever } from '@vueuse/core';
 import type { Ace } from 'ace-code';
 
-import onRefAssigned from './onRefAssigned';
-
 export default function bindEditorScroll(editor: Ref<Ace.Editor | undefined>, scroll: Ref<number | undefined>): void {
-  onRefAssigned(editor, (value) => {
+  whenever(editor, (value) => {
     const session = value.getSession();
     session.on('changeScrollTop', () => {
       const scrollTop = session.getScrollTop();

src/composables/bindEditorSelection.ts

@@ -1,8 +1,7 @@
 import { watch, type Ref } from 'vue';
+import { whenever } from '@vueuse/core';
 import type { Ace } from 'ace-code';
 
-import onRefAssigned from './onRefAssigned';
-
 import type ISelection from '@/types/selection';
 
 interface Renderer extends Ace.VirtualRenderer {
@@ -11,7 +10,7 @@ interface Renderer extends Ace.VirtualRenderer {
 }
 
 export default function bindEditorSelection(editorRef: Ref<Ace.Editor | undefined>, selection: Ref<ISelection | undefined>): void {
-  onRefAssigned(editorRef, (editor) => {
+  whenever(editorRef, (editor) => {
     applyRange(editor, toRange({ row: 0, offset: 0, length: 0 }));
 
     editor.selection.on('changeCursor', () => {

src/composables/bindEditorValue.ts

@@ -1,10 +1,9 @@
 import type { Ref } from 'vue';
+import { whenever } from '@vueuse/core';
 import type { Ace } from 'ace-code';
 
-import onRefAssigned from './onRefAssigned';
-
 export default function bindEditorValue(editor: Ref<Ace.Editor | undefined>, val: Ref<string | undefined>): void {
-  onRefAssigned(editor, (value) => {
+  whenever(editor, (value) => {
     if (val.value) {
       value.setValue(val.value);
     }