From 28492842f9799f62a27892af869e854fe6122461 Mon Sep 17 00:00:00 2001 From: XiNGRZ Date: Sun, 14 Apr 2024 13:26:35 +0800 Subject: [PATCH] Make use of @vueuse/core --- package-lock.json | 89 ++++++++++++++++++++++++++ package.json | 1 + src/components/Editor.vue | 7 +- src/composables/bindEditorScroll.ts | 5 +- src/composables/bindEditorSelection.ts | 5 +- src/composables/bindEditorValue.ts | 5 +- src/composables/onRefAssigned.ts | 9 --- src/composables/onRefUnassigned.ts | 9 --- src/composables/useClientSize.ts | 29 --------- 9 files changed, 99 insertions(+), 60 deletions(-) delete mode 100644 src/composables/onRefAssigned.ts delete mode 100644 src/composables/onRefUnassigned.ts delete mode 100644 src/composables/useClientSize.ts diff --git a/package-lock.json b/package-lock.json index b24f755..60ef59a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "rdt-editor", "version": "5.0", "dependencies": { + "@vueuse/core": "^10.9.0", "ace-code": "^1.32.8", "md5": "^2.3.0", "pinia": "^2.1.7", @@ -1485,6 +1486,11 @@ "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==", "dev": true }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", + "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.3.1.tgz", @@ -1931,6 +1937,89 @@ "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==", "dev": true }, + "node_modules/@vueuse/core": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz", + "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==", + "dependencies": { + "@types/web-bluetooth": "^0.0.20", + "@vueuse/metadata": "10.9.0", + "@vueuse/shared": "10.9.0", + "vue-demi": ">=0.14.7" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.7", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz", + "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz", + "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz", + "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==", + "dependencies": { + "vue-demi": ">=0.14.7" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.7", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz", + "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/ace-code": { "version": "1.32.8", "resolved": "https://registry.npmjs.org/ace-code/-/ace-code-1.32.8.tgz", diff --git a/package.json b/package.json index 403780a..ec588a5 100644 --- a/package.json +++ b/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", diff --git a/src/components/Editor.vue b/src/components/Editor.vue index fa613a9..9bdf367 100644 --- a/src/components/Editor.vue +++ b/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(); diff --git a/src/composables/bindEditorScroll.ts b/src/composables/bindEditorScroll.ts index d36edc5..7f34c48 100644 --- a/src/composables/bindEditorScroll.ts +++ b/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, scroll: Ref): void { - onRefAssigned(editor, (value) => { + whenever(editor, (value) => { const session = value.getSession(); session.on('changeScrollTop', () => { const scrollTop = session.getScrollTop(); diff --git a/src/composables/bindEditorSelection.ts b/src/composables/bindEditorSelection.ts index e7c640b..4c1269f 100644 --- a/src/composables/bindEditorSelection.ts +++ b/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, selection: Ref): void { - onRefAssigned(editorRef, (editor) => { + whenever(editorRef, (editor) => { applyRange(editor, toRange({ row: 0, offset: 0, length: 0 })); editor.selection.on('changeCursor', () => { diff --git a/src/composables/bindEditorValue.ts b/src/composables/bindEditorValue.ts index 8e132d6..bc68983 100644 --- a/src/composables/bindEditorValue.ts +++ b/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, val: Ref): void { - onRefAssigned(editor, (value) => { + whenever(editor, (value) => { if (val.value) { value.setValue(val.value); } diff --git a/src/composables/onRefAssigned.ts b/src/composables/onRefAssigned.ts deleted file mode 100644 index f223e42..0000000 --- a/src/composables/onRefAssigned.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { type WatchSource, type WatchStopHandle, watch } from 'vue'; - -export default function onRefAssigned(value: WatchSource, callback: (newValue: T) => void): WatchStopHandle { - return watch(value, (newValue, oldValue) => { - if (typeof newValue != 'undefined' && typeof oldValue == 'undefined') { - callback(newValue); - } - }); -} diff --git a/src/composables/onRefUnassigned.ts b/src/composables/onRefUnassigned.ts deleted file mode 100644 index 604035f..0000000 --- a/src/composables/onRefUnassigned.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { type WatchSource, type WatchStopHandle, watch } from 'vue'; - -export default function onRefUnassigned(value: WatchSource, callback: (oldValue: T) => void): WatchStopHandle { - return watch(value, (newValue, oldValue) => { - if (typeof newValue == 'undefined' && typeof oldValue != 'undefined') { - callback(oldValue); - } - }); -} diff --git a/src/composables/useClientSize.ts b/src/composables/useClientSize.ts deleted file mode 100644 index b77e44d..0000000 --- a/src/composables/useClientSize.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'; - -interface Size { - width: number; - height: number; -} - -export default function useClientSize(elementRef: Ref): Ref { - const getSize = (target: HTMLElement | undefined): Size | undefined => target && { - width: target.clientWidth, - height: target.clientHeight, - }; - - const size = ref(getSize(elementRef.value)); - - const observer = new ResizeObserver(() => { - size.value = getSize(elementRef.value); - }); - - onMounted(() => { - observer.observe(elementRef.value!); - }); - - onBeforeUnmount(() => { - observer.unobserve(elementRef.value!); - }); - - return size; -}