From c93f091ba8c6f6d9ecf3c9a5c5a17bd532a58f54 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 3 Jan 2023 13:37:32 +0900 Subject: [PATCH] perf(client): use shallowRef instead of ref for template reference --- packages/frontend/src/components/MkAbuseReportWindow.vue | 4 ++-- packages/frontend/src/components/MkCropperDialog.vue | 2 +- packages/frontend/src/components/MkDialog.vue | 4 ++-- packages/frontend/src/components/MkDrive.vue | 2 +- packages/frontend/src/components/MkDriveSelectDialog.vue | 4 ++-- packages/frontend/src/components/MkEmojiPickerDialog.vue | 6 +++--- .../frontend/src/components/MkFileCaptionEditWindow.vue | 2 +- packages/frontend/src/components/MkImageViewer.vue | 2 +- packages/frontend/src/components/MkLaunchPad.vue | 2 +- packages/frontend/src/components/MkMenu.vue | 2 +- packages/frontend/src/components/MkModalPageWindow.vue | 2 +- packages/frontend/src/components/MkModalWindow.vue | 2 +- packages/frontend/src/components/MkNote.vue | 2 +- packages/frontend/src/components/MkNoteDetailed.vue | 2 +- packages/frontend/src/components/MkNotes.vue | 4 ++-- .../src/components/MkNotificationSettingWindow.vue | 2 +- packages/frontend/src/components/MkNotifications.vue | 4 ++-- packages/frontend/src/components/MkPageWindow.vue | 2 +- packages/frontend/src/components/MkPopupMenu.vue | 2 +- packages/frontend/src/components/MkPostFormDialog.vue | 4 ++-- packages/frontend/src/components/MkSigninDialog.vue | 2 +- packages/frontend/src/components/MkSignupDialog.vue | 2 +- .../frontend/src/components/MkTokenGenerateWindow.vue | 2 +- packages/frontend/src/components/MkUpdated.vue | 4 ++-- packages/frontend/src/components/MkUserList.vue | 6 ++---- packages/frontend/src/components/MkVisibilityPicker.vue | 2 +- packages/frontend/src/components/MkWaitingDialog.vue | 4 ++-- packages/frontend/src/pages/admin/abuses.vue | 2 +- packages/frontend/src/pages/admin/emojis.vue | 4 ++-- packages/frontend/src/pages/admin/overview.queue.vue | 8 ++++---- packages/frontend/src/pages/admin/queue.chart.vue | 8 ++++---- packages/frontend/src/pages/admin/users.vue | 2 +- packages/frontend/src/pages/antenna-timeline.vue | 2 +- packages/frontend/src/pages/explore.users.vue | 2 +- packages/frontend/src/pages/explore.vue | 2 +- packages/frontend/src/pages/favorites.vue | 4 +--- packages/frontend/src/pages/follow-requests.vue | 4 ++-- packages/frontend/src/pages/messaging/messaging-room.vue | 4 ++-- packages/frontend/src/pages/my-clips/index.vue | 2 +- packages/frontend/src/pages/my-lists/index.vue | 2 +- packages/frontend/src/pages/settings/notifications.vue | 2 +- packages/frontend/src/pages/timeline.vue | 2 +- packages/frontend/src/pages/user-list-timeline.vue | 2 +- packages/frontend/src/ui/deck/antenna-column.vue | 2 +- packages/frontend/src/ui/deck/list-column.vue | 2 +- packages/frontend/src/widgets/instance-cloud.vue | 2 +- 46 files changed, 66 insertions(+), 70 deletions(-) diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue index 039f77c859..ab90ed357a 100644 --- a/packages/frontend/src/components/MkAbuseReportWindow.vue +++ b/packages/frontend/src/components/MkAbuseReportWindow.vue @@ -23,7 +23,7 @@ </template> <script setup lang="ts"> -import { ref } from 'vue'; +import { ref, shallowRef } from 'vue'; import * as Misskey from 'misskey-js'; import XWindow from '@/components/MkWindow.vue'; import MkTextarea from '@/components/form/textarea.vue'; @@ -40,7 +40,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const uiWindow = ref<InstanceType<typeof XWindow>>(); +const uiWindow = shallowRef<InstanceType<typeof XWindow>>(); const comment = ref(props.initialComment || ''); function send() { diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue index 3ff73d6669..f00fef12f1 100644 --- a/packages/frontend/src/components/MkCropperDialog.vue +++ b/packages/frontend/src/components/MkCropperDialog.vue @@ -50,7 +50,7 @@ const props = defineProps<{ }>(); const imgUrl = getProxiedImageUrl(props.file.url); -let dialogEl = $ref<InstanceType<typeof XModalWindow>>(); +let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>(); let imgEl = $shallowRef<HTMLImageElement>(); let cropper: Cropper | null = null; let loading = $ref(true); diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index 374ecd8abf..18c9f9203c 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -39,7 +39,7 @@ </template> <script lang="ts" setup> -import { onBeforeUnmount, onMounted, ref } from 'vue'; +import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'; import MkModal from '@/components/MkModal.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; @@ -94,7 +94,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const modal = ref<InstanceType<typeof MkModal>>(); +const modal = shallowRef<InstanceType<typeof MkModal>>(); const inputValue = ref(props.input?.default || null); const selectedValue = ref(props.select?.default || null); diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 843c5f1c54..112a64f52d 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -118,7 +118,7 @@ const emit = defineEmits<{ (ev: 'open-folder', v: Misskey.entities.DriveFolder): void; }>(); -const loadMoreFiles = ref<InstanceType<typeof MkButton>>(); +const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>(); const fileInput = shallowRef<HTMLInputElement>(); const folder = ref<Misskey.entities.DriveFolder | null>(null); diff --git a/packages/frontend/src/components/MkDriveSelectDialog.vue b/packages/frontend/src/components/MkDriveSelectDialog.vue index 3ee821b539..6a96e758fa 100644 --- a/packages/frontend/src/components/MkDriveSelectDialog.vue +++ b/packages/frontend/src/components/MkDriveSelectDialog.vue @@ -19,7 +19,7 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, shallowRef } from 'vue'; import * as Misskey from 'misskey-js'; import XDrive from '@/components/MkDrive.vue'; import XModalWindow from '@/components/MkModalWindow.vue'; @@ -38,7 +38,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const dialog = ref<InstanceType<typeof XModalWindow>>(); +const dialog = shallowRef<InstanceType<typeof XModalWindow>>(); const selected = ref<Misskey.entities.DriveFile[]>([]); diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 3b41f9d75b..da68ecd809 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -26,7 +26,7 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { shallowRef } from 'vue'; import MkModal from '@/components/MkModal.vue'; import MkEmojiPicker from '@/components/MkEmojiPicker.vue'; import { defaultStore } from '@/store'; @@ -48,8 +48,8 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const modal = ref<InstanceType<typeof MkModal>>(); -const picker = ref<InstanceType<typeof MkEmojiPicker>>(); +const modal = shallowRef<InstanceType<typeof MkModal>>(); +const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>(); function chosen(emoji: any) { emit('done', emoji); diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.vue b/packages/frontend/src/components/MkFileCaptionEditWindow.vue index e6b6c468ac..b3bd194dc3 100644 --- a/packages/frontend/src/components/MkFileCaptionEditWindow.vue +++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue @@ -37,7 +37,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const dialog = $ref<InstanceType<typeof XModalWindow>>(); +const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); let caption = $ref(props.default); diff --git a/packages/frontend/src/components/MkImageViewer.vue b/packages/frontend/src/components/MkImageViewer.vue index f074b1a2f2..22b7c12e38 100644 --- a/packages/frontend/src/components/MkImageViewer.vue +++ b/packages/frontend/src/components/MkImageViewer.vue @@ -28,7 +28,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const modal = $ref<InstanceType<typeof MkModal>>(); +const modal = $shallowRef<InstanceType<typeof MkModal>>(); </script> <style lang="scss" scoped> diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 1ccc648c72..3ea90712a0 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -44,7 +44,7 @@ const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'pop deviceKind === 'smartphone' ? 'drawer' : 'dialog'; -const modal = $ref<InstanceType<typeof MkModal>>(); +const modal = $shallowRef<InstanceType<typeof MkModal>>(); const menu = defaultStore.state.menu; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 0db0767fac..808b2e8b81 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -82,7 +82,7 @@ let itemsEl = $shallowRef<HTMLDivElement>(); let items2: InnerMenuItem[] = $ref([]); -let child = $ref<InstanceType<typeof XChild>>(); +let child = $shallowRef<InstanceType<typeof XChild>>(); let keymap = $computed(() => ({ 'up|k|shift+tab': focusUp, diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue index 645da6a49c..2791d5ceb9 100644 --- a/packages/frontend/src/components/MkModalPageWindow.vue +++ b/packages/frontend/src/components/MkModalPageWindow.vue @@ -49,7 +49,7 @@ router.addListener('push', ctx => { let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let rootEl = $ref(); -let modal = $ref<InstanceType<typeof MkModal>>(); +let modal = $shallowRef<InstanceType<typeof MkModal>>(); let path = $ref(props.initialPath); let width = $ref(860); let height = $ref(660); diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue index bd7146ab88..1e93f01c8d 100644 --- a/packages/frontend/src/components/MkModalWindow.vue +++ b/packages/frontend/src/components/MkModalWindow.vue @@ -41,7 +41,7 @@ const emit = defineEmits<{ (event: 'ok'): void; }>(); -let modal = $ref<InstanceType<typeof MkModal>>(); +let modal = $shallowRef<InstanceType<typeof MkModal>>(); let rootEl = $shallowRef<HTMLElement>(); let headerEl = $shallowRef<HTMLElement>(); let bodyWidth = $ref(0); diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 4bbd44122d..883368a21a 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -158,7 +158,7 @@ const isRenote = ( const el = shallowRef<HTMLElement>(); const menuButton = shallowRef<HTMLElement>(); -const renoteButton = ref<InstanceType<typeof MkRenoteButton>>(); +const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>(); const renoteTime = shallowRef<HTMLElement>(); const reactButton = shallowRef<HTMLElement>(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 31188704ab..bac9c58b50 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -168,7 +168,7 @@ const isRenote = ( const el = shallowRef<HTMLElement>(); const menuButton = shallowRef<HTMLElement>(); -const renoteButton = ref<InstanceType<typeof MkRenoteButton>>(); +const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>(); const renoteTime = shallowRef<HTMLElement>(); const reactButton = shallowRef<HTMLElement>(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index 5abcdc2298..0d77597531 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -18,7 +18,7 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { shallowRef } from 'vue'; import XNote from '@/components/MkNote.vue'; import XList from '@/components/MkDateSeparatedList.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; @@ -29,7 +29,7 @@ const props = defineProps<{ noGap?: boolean; }>(); -const pagingComponent = ref<InstanceType<typeof MkPagination>>(); +const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>(); defineExpose({ pagingComponent, diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.vue b/packages/frontend/src/components/MkNotificationSettingWindow.vue index 92165ef476..754d8d687b 100644 --- a/packages/frontend/src/components/MkNotificationSettingWindow.vue +++ b/packages/frontend/src/components/MkNotificationSettingWindow.vue @@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{ let includingTypes = $computed(() => props.includingTypes || []); -const dialog = $ref<InstanceType<typeof XModalWindow>>(); +const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({}); let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle); diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 0e1cc06743..18aa76deeb 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -17,7 +17,7 @@ </template> <script lang="ts" setup> -import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue'; +import { defineComponent, markRaw, onUnmounted, onMounted, computed, shallowRef } from 'vue'; import { notificationTypes } from 'misskey-js'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; import XNotification from '@/components/MkNotification.vue'; @@ -33,7 +33,7 @@ const props = defineProps<{ unreadOnly?: boolean; }>(); -const pagingComponent = ref<InstanceType<typeof MkPagination>>(); +const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>(); const pagination: Paging = { endpoint: 'i/notifications' as const, diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue index d47823c71f..e25737d50c 100644 --- a/packages/frontend/src/components/MkPageWindow.vue +++ b/packages/frontend/src/components/MkPageWindow.vue @@ -47,7 +47,7 @@ defineEmits<{ const router = new Router(routes, props.initialPath); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); -let windowEl = $ref<InstanceType<typeof XWindow>>(); +let windowEl = $shallowRef<InstanceType<typeof XWindow>>(); const history = $ref<{ path: string; key: any; }[]>([{ path: router.getCurrentPath(), key: router.getCurrentKey(), diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue index f04c7f5618..b5987715a9 100644 --- a/packages/frontend/src/components/MkPopupMenu.vue +++ b/packages/frontend/src/components/MkPopupMenu.vue @@ -22,7 +22,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -let modal = $ref<InstanceType<typeof MkModal>>(); +let modal = $shallowRef<InstanceType<typeof MkModal>>(); </script> <style lang="scss" scoped> diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue index 71c07ed658..f71dbdfdab 100644 --- a/packages/frontend/src/components/MkPostFormDialog.vue +++ b/packages/frontend/src/components/MkPostFormDialog.vue @@ -31,8 +31,8 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -let modal = $ref<InstanceType<typeof MkModal>>(); -let form = $ref<InstanceType<typeof MkPostForm>>(); +let modal = $shallowRef<InstanceType<typeof MkModal>>(); +let form = $shallowRef<InstanceType<typeof MkPostForm>>(); function onPosted() { modal.close({ diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue index fd27244516..5015d09e64 100644 --- a/packages/frontend/src/components/MkSigninDialog.vue +++ b/packages/frontend/src/components/MkSigninDialog.vue @@ -32,7 +32,7 @@ const emit = defineEmits<{ (ev: 'cancelled'): void; }>(); -const dialog = $ref<InstanceType<typeof XModalWindow>>(); +const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); function onClose() { emit('cancelled'); diff --git a/packages/frontend/src/components/MkSignupDialog.vue b/packages/frontend/src/components/MkSignupDialog.vue index 77497021c3..e1b76474a0 100644 --- a/packages/frontend/src/components/MkSignupDialog.vue +++ b/packages/frontend/src/components/MkSignupDialog.vue @@ -33,7 +33,7 @@ const emit = defineEmits<{ (ev: 'closed'): void; }>(); -const dialog = $ref<InstanceType<typeof XModalWindow>>(); +const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); function onSignup(res) { emit('done', res); diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue index b846034a24..8d5b6f8635 100644 --- a/packages/frontend/src/components/MkTokenGenerateWindow.vue +++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue @@ -54,7 +54,7 @@ const emit = defineEmits<{ (ev: 'done', result: { name: string | null, permissions: string[] }): void; }>(); -const dialog = $ref<InstanceType<typeof XModalWindow>>(); +const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); let name = $ref(props.initialName); let permissions = $ref({}); diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue index 48aeb30224..2f2864220e 100644 --- a/packages/frontend/src/components/MkUpdated.vue +++ b/packages/frontend/src/components/MkUpdated.vue @@ -10,14 +10,14 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { shallowRef } from 'vue'; import MkModal from '@/components/MkModal.vue'; import MkButton from '@/components/MkButton.vue'; import MkSparkle from '@/components/MkSparkle.vue'; import { version } from '@/config'; import { i18n } from '@/i18n'; -const modal = ref<InstanceType<typeof MkModal>>(); +const modal = shallowRef<InstanceType<typeof MkModal>>(); const whatIsNew = () => { modal.value.close(); diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue index e1f47c7673..b7bc200a55 100644 --- a/packages/frontend/src/components/MkUserList.vue +++ b/packages/frontend/src/components/MkUserList.vue @@ -1,5 +1,5 @@ <template> -<MkPagination ref="pagingComponent" :pagination="pagination"> +<MkPagination :pagination="pagination"> <template #empty> <div class="_fullinfo"> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> @@ -16,7 +16,7 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { shallowRef } from 'vue'; import MkUserInfo from '@/components/MkUserInfo.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { userPage } from '@/filters/user'; @@ -26,8 +26,6 @@ const props = defineProps<{ pagination: Paging; noGap?: boolean; }>(); - -const pagingComponent = ref<InstanceType<typeof MkPagination>>(); </script> <style lang="scss" scoped> diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue index 8f0bcdeae8..99b5d93d5f 100644 --- a/packages/frontend/src/components/MkVisibilityPicker.vue +++ b/packages/frontend/src/components/MkVisibilityPicker.vue @@ -48,7 +48,7 @@ import * as misskey from 'misskey-js'; import MkModal from '@/components/MkModal.vue'; import { i18n } from '@/i18n'; -const modal = $ref<InstanceType<typeof MkModal>>(); +const modal = $shallowRef<InstanceType<typeof MkModal>>(); const props = withDefaults(defineProps<{ currentVisibility: typeof misskey.noteVisibilities[number]; diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue index f4a9f4f22c..984cdc5266 100644 --- a/packages/frontend/src/components/MkWaitingDialog.vue +++ b/packages/frontend/src/components/MkWaitingDialog.vue @@ -9,10 +9,10 @@ </template> <script lang="ts" setup> -import { watch, ref } from 'vue'; +import { watch, shallowRef } from 'vue'; import MkModal from '@/components/MkModal.vue'; -const modal = ref<InstanceType<typeof MkModal>>(); +const modal = shallowRef<InstanceType<typeof MkModal>>(); const props = defineProps<{ success: boolean; diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue index 973ec871ab..3bff312b8b 100644 --- a/packages/frontend/src/pages/admin/abuses.vue +++ b/packages/frontend/src/pages/admin/abuses.vue @@ -58,7 +58,7 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -let reports = $ref<InstanceType<typeof MkPagination>>(); +let reports = $shallowRef<InstanceType<typeof MkPagination>>(); let state = $ref('unresolved'); let reporterOrigin = $ref('combined'); diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue index 4bd78a6a5f..3d56ab1962 100644 --- a/packages/frontend/src/pages/admin/emojis.vue +++ b/packages/frontend/src/pages/admin/emojis.vue @@ -68,7 +68,7 @@ </template> <script lang="ts" setup> -import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue'; +import { computed, defineAsyncComponent, defineComponent, ref, shallowRef } from 'vue'; import XHeader from './_header_.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; @@ -81,7 +81,7 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>(); +const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>(); const tab = ref('local'); const query = ref(null); diff --git a/packages/frontend/src/pages/admin/overview.queue.vue b/packages/frontend/src/pages/admin/overview.queue.vue index 72ebddc72f..7e58882938 100644 --- a/packages/frontend/src/pages/admin/overview.queue.vue +++ b/packages/frontend/src/pages/admin/overview.queue.vue @@ -43,10 +43,10 @@ const activeSincePrevTick = ref(0); const active = ref(0); const delayed = ref(0); const waiting = ref(0); -let chartProcess = $ref<InstanceType<typeof XChart>>(); -let chartActive = $ref<InstanceType<typeof XChart>>(); -let chartDelayed = $ref<InstanceType<typeof XChart>>(); -let chartWaiting = $ref<InstanceType<typeof XChart>>(); +let chartProcess = $shallowRef<InstanceType<typeof XChart>>(); +let chartActive = $shallowRef<InstanceType<typeof XChart>>(); +let chartDelayed = $shallowRef<InstanceType<typeof XChart>>(); +let chartWaiting = $shallowRef<InstanceType<typeof XChart>>(); const props = defineProps<{ domain: string; diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue index 186a22c43e..7f1dc2cd77 100644 --- a/packages/frontend/src/pages/admin/queue.chart.vue +++ b/packages/frontend/src/pages/admin/queue.chart.vue @@ -53,10 +53,10 @@ const active = ref(0); const delayed = ref(0); const waiting = ref(0); const jobs = ref([]); -let chartProcess = $ref<InstanceType<typeof XChart>>(); -let chartActive = $ref<InstanceType<typeof XChart>>(); -let chartDelayed = $ref<InstanceType<typeof XChart>>(); -let chartWaiting = $ref<InstanceType<typeof XChart>>(); +let chartProcess = $shallowRef<InstanceType<typeof XChart>>(); +let chartActive = $shallowRef<InstanceType<typeof XChart>>(); +let chartDelayed = $shallowRef<InstanceType<typeof XChart>>(); +let chartWaiting = $shallowRef<InstanceType<typeof XChart>>(); const props = defineProps<{ domain: string; diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue index 24ce98a02f..16fa45b1fc 100644 --- a/packages/frontend/src/pages/admin/users.vue +++ b/packages/frontend/src/pages/admin/users.vue @@ -65,7 +65,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import { dateString } from '@/filters/date'; -let paginationComponent = $ref<InstanceType<typeof MkPagination>>(); +let paginationComponent = $shallowRef<InstanceType<typeof MkPagination>>(); let sort = $ref('+createdAt'); let state = $ref('all'); diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue index fd98ef5604..af7e95d543 100644 --- a/packages/frontend/src/pages/antenna-timeline.vue +++ b/packages/frontend/src/pages/antenna-timeline.vue @@ -35,7 +35,7 @@ const props = defineProps<{ let antenna = $ref(null); let queue = $ref(0); let rootEl = $shallowRef<HTMLElement>(); -let tlEl = $ref<InstanceType<typeof XTimeline>>(); +let tlEl = $shallowRef<InstanceType<typeof XTimeline>>(); const keymap = $computed(() => ({ 't': focus, })); diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue index bfee0a6c07..611ca0f003 100644 --- a/packages/frontend/src/pages/explore.users.vue +++ b/packages/frontend/src/pages/explore.users.vue @@ -72,7 +72,7 @@ const props = defineProps<{ }>(); let origin = $ref('local'); -let tagsEl = $ref<InstanceType<typeof MkFolder>>(); +let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>(); let tagsLocal = $ref([]); let tagsRemote = $ref([]); diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue index 3f6c239bc1..4494f6154d 100644 --- a/packages/frontend/src/pages/explore.vue +++ b/packages/frontend/src/pages/explore.vue @@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{ }); let tab = $ref(props.initialTab); -let tagsEl = $ref<InstanceType<typeof MkFolder>>(); +let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>(); let searchQuery = $ref(null); let searchOrigin = $ref('combined'); diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue index ab47efec71..7fd660f93b 100644 --- a/packages/frontend/src/pages/favorites.vue +++ b/packages/frontend/src/pages/favorites.vue @@ -2,7 +2,7 @@ <MkStickyContainer> <template #header><MkPageHeader/></template> <MkSpacer :content-max="800"> - <MkPagination ref="pagingComponent" :pagination="pagination"> + <MkPagination :pagination="pagination"> <template #empty> <div class="_fullinfo"> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> @@ -33,8 +33,6 @@ const pagination = { limit: 10, }; -const pagingComponent = ref<InstanceType<typeof MkPagination>>(); - definePageMetadata({ title: i18n.ts.favorites, icon: 'ti ti-star', diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index b9d614b356..99401e1fc7 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -35,14 +35,14 @@ </template> <script lang="ts" setup> -import { ref, computed } from 'vue'; +import { shallowRef, computed } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; import { userPage, acct } from '@/filters/user'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -const paginationComponent = ref<InstanceType<typeof MkPagination>>(); +const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>(); const pagination = { endpoint: 'following/requests/list' as const, diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue index 0db431b083..f0a36fb8b1 100644 --- a/packages/frontend/src/pages/messaging/messaging-room.vue +++ b/packages/frontend/src/pages/messaging/messaging-room.vue @@ -72,8 +72,8 @@ const props = defineProps<{ }>(); let rootEl = $shallowRef<HTMLDivElement>(); -let formEl = $ref<InstanceType<typeof XForm>>(); -let pagingComponent = $ref<InstanceType<typeof MkPagination>>(); +let formEl = $shallowRef<InstanceType<typeof XForm>>(); +let pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); let fetching = $ref(true); let user: Misskey.entities.UserDetailed | null = $ref(null); diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue index dd6b5b3a37..6c0508134f 100644 --- a/packages/frontend/src/pages/my-clips/index.vue +++ b/packages/frontend/src/pages/my-clips/index.vue @@ -29,7 +29,7 @@ const pagination = { limit: 10, }; -const pagingComponent = $ref<InstanceType<typeof MkPagination>>(); +const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); async function create() { const { canceled, result } = await os.form(i18n.ts.createNewClip, { diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue index 3476436b27..510e0173df 100644 --- a/packages/frontend/src/pages/my-lists/index.vue +++ b/packages/frontend/src/pages/my-lists/index.vue @@ -25,7 +25,7 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -const pagingComponent = $ref<InstanceType<typeof MkPagination>>(); +const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); const pagination = { endpoint: 'users/lists/list' as const, diff --git a/packages/frontend/src/pages/settings/notifications.vue b/packages/frontend/src/pages/settings/notifications.vue index e85fede157..c1b7130245 100644 --- a/packages/frontend/src/pages/settings/notifications.vue +++ b/packages/frontend/src/pages/settings/notifications.vue @@ -34,7 +34,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue'; -let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>(); +let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>(); let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer); let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false); diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 640d940d91..75f62d38f7 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -41,7 +41,7 @@ const keymap = { 't': focus, }; -const tlComponent = $ref<InstanceType<typeof XTimeline>>(); +const tlComponent = $shallowRef<InstanceType<typeof XTimeline>>(); const rootEl = $shallowRef<HTMLElement>(); let queue = $ref(0); diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue index b69bbd575f..542c280594 100644 --- a/packages/frontend/src/pages/user-list-timeline.vue +++ b/packages/frontend/src/pages/user-list-timeline.vue @@ -34,7 +34,7 @@ const props = defineProps<{ let list = $ref(null); let queue = $ref(0); -let tlEl = $ref<InstanceType<typeof XTimeline>>(); +let tlEl = $shallowRef<InstanceType<typeof XTimeline>>(); let rootEl = $shallowRef<HTMLElement>(); watch(() => props.listId, async () => { diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue index ba14530662..53d744676c 100644 --- a/packages/frontend/src/ui/deck/antenna-column.vue +++ b/packages/frontend/src/ui/deck/antenna-column.vue @@ -26,7 +26,7 @@ const emit = defineEmits<{ (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); -let timeline = $ref<InstanceType<typeof XTimeline>>(); +let timeline = $shallowRef<InstanceType<typeof XTimeline>>(); onMounted(() => { if (props.column.antennaId == null) { diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue index d9f3f7b4e7..e31446ebb2 100644 --- a/packages/frontend/src/ui/deck/list-column.vue +++ b/packages/frontend/src/ui/deck/list-column.vue @@ -26,7 +26,7 @@ const emit = defineEmits<{ (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); -let timeline = $ref<InstanceType<typeof XTimeline>>(); +let timeline = $shallowRef<InstanceType<typeof XTimeline>>(); if (props.column.listId == null) { setList(); diff --git a/packages/frontend/src/widgets/instance-cloud.vue b/packages/frontend/src/widgets/instance-cloud.vue index 6d522ddbe8..1068c5ac4b 100644 --- a/packages/frontend/src/widgets/instance-cloud.vue +++ b/packages/frontend/src/widgets/instance-cloud.vue @@ -45,7 +45,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name, emit, ); -let cloud = $ref<InstanceType<typeof MkTagCloud> | null>(); +let cloud = $shallowRef<InstanceType<typeof MkTagCloud> | null>(); let activeInstances = $shallowRef(null); function onInstanceClick(i) {