perf(client): use shallowRef instead of ref for template reference
This commit is contained in:
		
							parent
							
								
									826e4502cb
								
							
						
					
					
						commit
						c93f091ba8
					
				
					 46 changed files with 66 additions and 70 deletions
				
			
		|  | @ -23,7 +23,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||||
| import { ref } from 'vue'; | import { ref, shallowRef } from 'vue'; | ||||||
| import * as Misskey from 'misskey-js'; | import * as Misskey from 'misskey-js'; | ||||||
| import XWindow from '@/components/MkWindow.vue'; | import XWindow from '@/components/MkWindow.vue'; | ||||||
| import MkTextarea from '@/components/form/textarea.vue'; | import MkTextarea from '@/components/form/textarea.vue'; | ||||||
|  | @ -40,7 +40,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const uiWindow = ref<InstanceType<typeof XWindow>>(); | const uiWindow = shallowRef<InstanceType<typeof XWindow>>(); | ||||||
| const comment = ref(props.initialComment || ''); | const comment = ref(props.initialComment || ''); | ||||||
| 
 | 
 | ||||||
| function send() { | function send() { | ||||||
|  |  | ||||||
|  | @ -50,7 +50,7 @@ const props = defineProps<{ | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const imgUrl = getProxiedImageUrl(props.file.url); | const imgUrl = getProxiedImageUrl(props.file.url); | ||||||
| let dialogEl = $ref<InstanceType<typeof XModalWindow>>(); | let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>(); | ||||||
| let imgEl = $shallowRef<HTMLImageElement>(); | let imgEl = $shallowRef<HTMLImageElement>(); | ||||||
| let cropper: Cropper | null = null; | let cropper: Cropper | null = null; | ||||||
| let loading = $ref(true); | let loading = $ref(true); | ||||||
|  |  | ||||||
|  | @ -39,7 +39,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { onBeforeUnmount, onMounted, ref } from 'vue'; | import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'; | ||||||
| import MkModal from '@/components/MkModal.vue'; | import MkModal from '@/components/MkModal.vue'; | ||||||
| import MkButton from '@/components/MkButton.vue'; | import MkButton from '@/components/MkButton.vue'; | ||||||
| import MkInput from '@/components/form/input.vue'; | import MkInput from '@/components/form/input.vue'; | ||||||
|  | @ -94,7 +94,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const modal = ref<InstanceType<typeof MkModal>>(); | const modal = shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| 
 | 
 | ||||||
| const inputValue = ref(props.input?.default || null); | const inputValue = ref(props.input?.default || null); | ||||||
| const selectedValue = ref(props.select?.default || null); | const selectedValue = ref(props.select?.default || null); | ||||||
|  |  | ||||||
|  | @ -118,7 +118,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void; | 	(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 fileInput = shallowRef<HTMLInputElement>(); | ||||||
| 
 | 
 | ||||||
| const folder = ref<Misskey.entities.DriveFolder | null>(null); | const folder = ref<Misskey.entities.DriveFolder | null>(null); | ||||||
|  |  | ||||||
|  | @ -19,7 +19,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref } from 'vue'; | import { ref, shallowRef } from 'vue'; | ||||||
| import * as Misskey from 'misskey-js'; | import * as Misskey from 'misskey-js'; | ||||||
| import XDrive from '@/components/MkDrive.vue'; | import XDrive from '@/components/MkDrive.vue'; | ||||||
| import XModalWindow from '@/components/MkModalWindow.vue'; | import XModalWindow from '@/components/MkModalWindow.vue'; | ||||||
|  | @ -38,7 +38,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const dialog = ref<InstanceType<typeof XModalWindow>>(); | const dialog = shallowRef<InstanceType<typeof XModalWindow>>(); | ||||||
| 
 | 
 | ||||||
| const selected = ref<Misskey.entities.DriveFile[]>([]); | const selected = ref<Misskey.entities.DriveFile[]>([]); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -26,7 +26,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref } from 'vue'; | import { shallowRef } from 'vue'; | ||||||
| import MkModal from '@/components/MkModal.vue'; | import MkModal from '@/components/MkModal.vue'; | ||||||
| import MkEmojiPicker from '@/components/MkEmojiPicker.vue'; | import MkEmojiPicker from '@/components/MkEmojiPicker.vue'; | ||||||
| import { defaultStore } from '@/store'; | import { defaultStore } from '@/store'; | ||||||
|  | @ -48,8 +48,8 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const modal = ref<InstanceType<typeof MkModal>>(); | const modal = shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| const picker = ref<InstanceType<typeof MkEmojiPicker>>(); | const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>(); | ||||||
| 
 | 
 | ||||||
| function chosen(emoji: any) { | function chosen(emoji: any) { | ||||||
| 	emit('done', emoji); | 	emit('done', emoji); | ||||||
|  |  | ||||||
|  | @ -37,7 +37,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const dialog = $ref<InstanceType<typeof XModalWindow>>(); | const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); | ||||||
| 
 | 
 | ||||||
| let caption = $ref(props.default); | let caption = $ref(props.default); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -28,7 +28,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const modal = $ref<InstanceType<typeof MkModal>>(); | const modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
|  |  | ||||||
|  | @ -44,7 +44,7 @@ const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'pop | ||||||
| 	deviceKind === 'smartphone' ? 'drawer' : | 	deviceKind === 'smartphone' ? 'drawer' : | ||||||
| 	'dialog'; | 	'dialog'; | ||||||
| 
 | 
 | ||||||
| const modal = $ref<InstanceType<typeof MkModal>>(); | const modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| 
 | 
 | ||||||
| const menu = defaultStore.state.menu; | const menu = defaultStore.state.menu; | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -82,7 +82,7 @@ let itemsEl = $shallowRef<HTMLDivElement>(); | ||||||
| 
 | 
 | ||||||
| let items2: InnerMenuItem[] = $ref([]); | let items2: InnerMenuItem[] = $ref([]); | ||||||
| 
 | 
 | ||||||
| let child = $ref<InstanceType<typeof XChild>>(); | let child = $shallowRef<InstanceType<typeof XChild>>(); | ||||||
| 
 | 
 | ||||||
| let keymap = $computed(() => ({ | let keymap = $computed(() => ({ | ||||||
| 	'up|k|shift+tab': focusUp, | 	'up|k|shift+tab': focusUp, | ||||||
|  |  | ||||||
|  | @ -49,7 +49,7 @@ router.addListener('push', ctx => { | ||||||
| 
 | 
 | ||||||
| let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); | let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); | ||||||
| let rootEl = $ref(); | let rootEl = $ref(); | ||||||
| let modal = $ref<InstanceType<typeof MkModal>>(); | let modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| let path = $ref(props.initialPath); | let path = $ref(props.initialPath); | ||||||
| let width = $ref(860); | let width = $ref(860); | ||||||
| let height = $ref(660); | let height = $ref(660); | ||||||
|  |  | ||||||
|  | @ -41,7 +41,7 @@ const emit = defineEmits<{ | ||||||
| 	(event: 'ok'): void; | 	(event: 'ok'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let modal = $ref<InstanceType<typeof MkModal>>(); | let modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| let rootEl = $shallowRef<HTMLElement>(); | let rootEl = $shallowRef<HTMLElement>(); | ||||||
| let headerEl = $shallowRef<HTMLElement>(); | let headerEl = $shallowRef<HTMLElement>(); | ||||||
| let bodyWidth = $ref(0); | let bodyWidth = $ref(0); | ||||||
|  |  | ||||||
|  | @ -158,7 +158,7 @@ const isRenote = ( | ||||||
| 
 | 
 | ||||||
| const el = shallowRef<HTMLElement>(); | const el = shallowRef<HTMLElement>(); | ||||||
| const menuButton = shallowRef<HTMLElement>(); | const menuButton = shallowRef<HTMLElement>(); | ||||||
| const renoteButton = ref<InstanceType<typeof MkRenoteButton>>(); | const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>(); | ||||||
| const renoteTime = shallowRef<HTMLElement>(); | const renoteTime = shallowRef<HTMLElement>(); | ||||||
| const reactButton = shallowRef<HTMLElement>(); | const reactButton = shallowRef<HTMLElement>(); | ||||||
| let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); | let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); | ||||||
|  |  | ||||||
|  | @ -168,7 +168,7 @@ const isRenote = ( | ||||||
| 
 | 
 | ||||||
| const el = shallowRef<HTMLElement>(); | const el = shallowRef<HTMLElement>(); | ||||||
| const menuButton = shallowRef<HTMLElement>(); | const menuButton = shallowRef<HTMLElement>(); | ||||||
| const renoteButton = ref<InstanceType<typeof MkRenoteButton>>(); | const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>(); | ||||||
| const renoteTime = shallowRef<HTMLElement>(); | const renoteTime = shallowRef<HTMLElement>(); | ||||||
| const reactButton = shallowRef<HTMLElement>(); | const reactButton = shallowRef<HTMLElement>(); | ||||||
| let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); | let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); | ||||||
|  |  | ||||||
|  | @ -18,7 +18,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref } from 'vue'; | import { shallowRef } from 'vue'; | ||||||
| import XNote from '@/components/MkNote.vue'; | import XNote from '@/components/MkNote.vue'; | ||||||
| import XList from '@/components/MkDateSeparatedList.vue'; | import XList from '@/components/MkDateSeparatedList.vue'; | ||||||
| import MkPagination, { Paging } from '@/components/MkPagination.vue'; | import MkPagination, { Paging } from '@/components/MkPagination.vue'; | ||||||
|  | @ -29,7 +29,7 @@ const props = defineProps<{ | ||||||
| 	noGap?: boolean; | 	noGap?: boolean; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const pagingComponent = ref<InstanceType<typeof MkPagination>>(); | const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| defineExpose({ | defineExpose({ | ||||||
| 	pagingComponent, | 	pagingComponent, | ||||||
|  |  | ||||||
|  | @ -56,7 +56,7 @@ const props = withDefaults(defineProps<{ | ||||||
| 
 | 
 | ||||||
| let includingTypes = $computed(() => props.includingTypes || []); | 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 typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({}); | ||||||
| let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle); | let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle); | ||||||
|  |  | ||||||
|  | @ -17,7 +17,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <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 { notificationTypes } from 'misskey-js'; | ||||||
| import MkPagination, { Paging } from '@/components/MkPagination.vue'; | import MkPagination, { Paging } from '@/components/MkPagination.vue'; | ||||||
| import XNotification from '@/components/MkNotification.vue'; | import XNotification from '@/components/MkNotification.vue'; | ||||||
|  | @ -33,7 +33,7 @@ const props = defineProps<{ | ||||||
| 	unreadOnly?: boolean; | 	unreadOnly?: boolean; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const pagingComponent = ref<InstanceType<typeof MkPagination>>(); | const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| const pagination: Paging = { | const pagination: Paging = { | ||||||
| 	endpoint: 'i/notifications' as const, | 	endpoint: 'i/notifications' as const, | ||||||
|  |  | ||||||
|  | @ -47,7 +47,7 @@ defineEmits<{ | ||||||
| const router = new Router(routes, props.initialPath); | const router = new Router(routes, props.initialPath); | ||||||
| 
 | 
 | ||||||
| let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); | 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; }[]>([{ | const history = $ref<{ path: string; key: any; }[]>([{ | ||||||
| 	path: router.getCurrentPath(), | 	path: router.getCurrentPath(), | ||||||
| 	key: router.getCurrentKey(), | 	key: router.getCurrentKey(), | ||||||
|  |  | ||||||
|  | @ -22,7 +22,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let modal = $ref<InstanceType<typeof MkModal>>(); | let modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
|  |  | ||||||
|  | @ -31,8 +31,8 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let modal = $ref<InstanceType<typeof MkModal>>(); | let modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| let form = $ref<InstanceType<typeof MkPostForm>>(); | let form = $shallowRef<InstanceType<typeof MkPostForm>>(); | ||||||
| 
 | 
 | ||||||
| function onPosted() { | function onPosted() { | ||||||
| 	modal.close({ | 	modal.close({ | ||||||
|  |  | ||||||
|  | @ -32,7 +32,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'cancelled'): void; | 	(ev: 'cancelled'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const dialog = $ref<InstanceType<typeof XModalWindow>>(); | const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); | ||||||
| 
 | 
 | ||||||
| function onClose() { | function onClose() { | ||||||
| 	emit('cancelled'); | 	emit('cancelled'); | ||||||
|  |  | ||||||
|  | @ -33,7 +33,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'closed'): void; | 	(ev: 'closed'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const dialog = $ref<InstanceType<typeof XModalWindow>>(); | const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); | ||||||
| 
 | 
 | ||||||
| function onSignup(res) { | function onSignup(res) { | ||||||
| 	emit('done', res); | 	emit('done', res); | ||||||
|  |  | ||||||
|  | @ -54,7 +54,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'done', result: { name: string | null, permissions: string[] }): void; | 	(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 name = $ref(props.initialName); | ||||||
| let permissions = $ref({}); | let permissions = $ref({}); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -10,14 +10,14 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref } from 'vue'; | import { shallowRef } from 'vue'; | ||||||
| import MkModal from '@/components/MkModal.vue'; | import MkModal from '@/components/MkModal.vue'; | ||||||
| import MkButton from '@/components/MkButton.vue'; | import MkButton from '@/components/MkButton.vue'; | ||||||
| import MkSparkle from '@/components/MkSparkle.vue'; | import MkSparkle from '@/components/MkSparkle.vue'; | ||||||
| import { version } from '@/config'; | import { version } from '@/config'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| 
 | 
 | ||||||
| const modal = ref<InstanceType<typeof MkModal>>(); | const modal = shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| 
 | 
 | ||||||
| const whatIsNew = () => { | const whatIsNew = () => { | ||||||
| 	modal.value.close(); | 	modal.value.close(); | ||||||
|  |  | ||||||
|  | @ -1,5 +1,5 @@ | ||||||
| <template> | <template> | ||||||
| <MkPagination ref="pagingComponent" :pagination="pagination"> | <MkPagination :pagination="pagination"> | ||||||
| 	<template #empty> | 	<template #empty> | ||||||
| 		<div class="_fullinfo"> | 		<div class="_fullinfo"> | ||||||
| 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> | 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> | ||||||
|  | @ -16,7 +16,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref } from 'vue'; | import { shallowRef } from 'vue'; | ||||||
| import MkUserInfo from '@/components/MkUserInfo.vue'; | import MkUserInfo from '@/components/MkUserInfo.vue'; | ||||||
| import MkPagination, { Paging } from '@/components/MkPagination.vue'; | import MkPagination, { Paging } from '@/components/MkPagination.vue'; | ||||||
| import { userPage } from '@/filters/user'; | import { userPage } from '@/filters/user'; | ||||||
|  | @ -26,8 +26,6 @@ const props = defineProps<{ | ||||||
| 	pagination: Paging; | 	pagination: Paging; | ||||||
| 	noGap?: boolean; | 	noGap?: boolean; | ||||||
| }>(); | }>(); | ||||||
| 
 |  | ||||||
| const pagingComponent = ref<InstanceType<typeof MkPagination>>(); |  | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
|  |  | ||||||
|  | @ -48,7 +48,7 @@ import * as misskey from 'misskey-js'; | ||||||
| import MkModal from '@/components/MkModal.vue'; | import MkModal from '@/components/MkModal.vue'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| 
 | 
 | ||||||
| const modal = $ref<InstanceType<typeof MkModal>>(); | const modal = $shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| 
 | 
 | ||||||
| const props = withDefaults(defineProps<{ | const props = withDefaults(defineProps<{ | ||||||
| 	currentVisibility: typeof misskey.noteVisibilities[number]; | 	currentVisibility: typeof misskey.noteVisibilities[number]; | ||||||
|  |  | ||||||
|  | @ -9,10 +9,10 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { watch, ref } from 'vue'; | import { watch, shallowRef } from 'vue'; | ||||||
| import MkModal from '@/components/MkModal.vue'; | import MkModal from '@/components/MkModal.vue'; | ||||||
| 
 | 
 | ||||||
| const modal = ref<InstanceType<typeof MkModal>>(); | const modal = shallowRef<InstanceType<typeof MkModal>>(); | ||||||
| 
 | 
 | ||||||
| const props = defineProps<{ | const props = defineProps<{ | ||||||
| 	success: boolean; | 	success: boolean; | ||||||
|  |  | ||||||
|  | @ -58,7 +58,7 @@ import * as os from '@/os'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| 
 | 
 | ||||||
| let reports = $ref<InstanceType<typeof MkPagination>>(); | let reports = $shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| let state = $ref('unresolved'); | let state = $ref('unresolved'); | ||||||
| let reporterOrigin = $ref('combined'); | let reporterOrigin = $ref('combined'); | ||||||
|  |  | ||||||
|  | @ -68,7 +68,7 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <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 XHeader from './_header_.vue'; | ||||||
| import MkButton from '@/components/MkButton.vue'; | import MkButton from '@/components/MkButton.vue'; | ||||||
| import MkInput from '@/components/form/input.vue'; | import MkInput from '@/components/form/input.vue'; | ||||||
|  | @ -81,7 +81,7 @@ import * as os from '@/os'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| 
 | 
 | ||||||
| const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>(); | const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| const tab = ref('local'); | const tab = ref('local'); | ||||||
| const query = ref(null); | const query = ref(null); | ||||||
|  |  | ||||||
|  | @ -43,10 +43,10 @@ const activeSincePrevTick = ref(0); | ||||||
| const active = ref(0); | const active = ref(0); | ||||||
| const delayed = ref(0); | const delayed = ref(0); | ||||||
| const waiting = ref(0); | const waiting = ref(0); | ||||||
| let chartProcess = $ref<InstanceType<typeof XChart>>(); | let chartProcess = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartActive = $ref<InstanceType<typeof XChart>>(); | let chartActive = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartDelayed = $ref<InstanceType<typeof XChart>>(); | let chartDelayed = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartWaiting = $ref<InstanceType<typeof XChart>>(); | let chartWaiting = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| 
 | 
 | ||||||
| const props = defineProps<{ | const props = defineProps<{ | ||||||
| 	domain: string; | 	domain: string; | ||||||
|  |  | ||||||
|  | @ -53,10 +53,10 @@ const active = ref(0); | ||||||
| const delayed = ref(0); | const delayed = ref(0); | ||||||
| const waiting = ref(0); | const waiting = ref(0); | ||||||
| const jobs = ref([]); | const jobs = ref([]); | ||||||
| let chartProcess = $ref<InstanceType<typeof XChart>>(); | let chartProcess = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartActive = $ref<InstanceType<typeof XChart>>(); | let chartActive = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartDelayed = $ref<InstanceType<typeof XChart>>(); | let chartDelayed = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| let chartWaiting = $ref<InstanceType<typeof XChart>>(); | let chartWaiting = $shallowRef<InstanceType<typeof XChart>>(); | ||||||
| 
 | 
 | ||||||
| const props = defineProps<{ | const props = defineProps<{ | ||||||
| 	domain: string; | 	domain: string; | ||||||
|  |  | ||||||
|  | @ -65,7 +65,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| import MkUserCardMini from '@/components/MkUserCardMini.vue'; | import MkUserCardMini from '@/components/MkUserCardMini.vue'; | ||||||
| import { dateString } from '@/filters/date'; | import { dateString } from '@/filters/date'; | ||||||
| 
 | 
 | ||||||
| let paginationComponent = $ref<InstanceType<typeof MkPagination>>(); | let paginationComponent = $shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| let sort = $ref('+createdAt'); | let sort = $ref('+createdAt'); | ||||||
| let state = $ref('all'); | let state = $ref('all'); | ||||||
|  |  | ||||||
|  | @ -35,7 +35,7 @@ const props = defineProps<{ | ||||||
| let antenna = $ref(null); | let antenna = $ref(null); | ||||||
| let queue = $ref(0); | let queue = $ref(0); | ||||||
| let rootEl = $shallowRef<HTMLElement>(); | let rootEl = $shallowRef<HTMLElement>(); | ||||||
| let tlEl = $ref<InstanceType<typeof XTimeline>>(); | let tlEl = $shallowRef<InstanceType<typeof XTimeline>>(); | ||||||
| const keymap = $computed(() => ({ | const keymap = $computed(() => ({ | ||||||
| 	't': focus, | 	't': focus, | ||||||
| })); | })); | ||||||
|  |  | ||||||
|  | @ -72,7 +72,7 @@ const props = defineProps<{ | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let origin = $ref('local'); | let origin = $ref('local'); | ||||||
| let tagsEl = $ref<InstanceType<typeof MkFolder>>(); | let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>(); | ||||||
| let tagsLocal = $ref([]); | let tagsLocal = $ref([]); | ||||||
| let tagsRemote = $ref([]); | let tagsRemote = $ref([]); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const props = withDefaults(defineProps<{ | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| let tab = $ref(props.initialTab); | let tab = $ref(props.initialTab); | ||||||
| let tagsEl = $ref<InstanceType<typeof MkFolder>>(); | let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>(); | ||||||
| let searchQuery = $ref(null); | let searchQuery = $ref(null); | ||||||
| let searchOrigin = $ref('combined'); | let searchOrigin = $ref('combined'); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -2,7 +2,7 @@ | ||||||
| <MkStickyContainer> | <MkStickyContainer> | ||||||
| 	<template #header><MkPageHeader/></template> | 	<template #header><MkPageHeader/></template> | ||||||
| 	<MkSpacer :content-max="800"> | 	<MkSpacer :content-max="800"> | ||||||
| 		<MkPagination ref="pagingComponent" :pagination="pagination"> | 		<MkPagination :pagination="pagination"> | ||||||
| 			<template #empty> | 			<template #empty> | ||||||
| 				<div class="_fullinfo"> | 				<div class="_fullinfo"> | ||||||
| 					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> | 					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> | ||||||
|  | @ -33,8 +33,6 @@ const pagination = { | ||||||
| 	limit: 10, | 	limit: 10, | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| const pagingComponent = ref<InstanceType<typeof MkPagination>>(); |  | ||||||
| 
 |  | ||||||
| definePageMetadata({ | definePageMetadata({ | ||||||
| 	title: i18n.ts.favorites, | 	title: i18n.ts.favorites, | ||||||
| 	icon: 'ti ti-star', | 	icon: 'ti ti-star', | ||||||
|  |  | ||||||
|  | @ -35,14 +35,14 @@ | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { ref, computed } from 'vue'; | import { shallowRef, computed } from 'vue'; | ||||||
| import MkPagination from '@/components/MkPagination.vue'; | import MkPagination from '@/components/MkPagination.vue'; | ||||||
| import { userPage, acct } from '@/filters/user'; | import { userPage, acct } from '@/filters/user'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| 
 | 
 | ||||||
| const paginationComponent = ref<InstanceType<typeof MkPagination>>(); | const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| const pagination = { | const pagination = { | ||||||
| 	endpoint: 'following/requests/list' as const, | 	endpoint: 'following/requests/list' as const, | ||||||
|  |  | ||||||
|  | @ -72,8 +72,8 @@ const props = defineProps<{ | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let rootEl = $shallowRef<HTMLDivElement>(); | let rootEl = $shallowRef<HTMLDivElement>(); | ||||||
| let formEl = $ref<InstanceType<typeof XForm>>(); | let formEl = $shallowRef<InstanceType<typeof XForm>>(); | ||||||
| let pagingComponent = $ref<InstanceType<typeof MkPagination>>(); | let pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| let fetching = $ref(true); | let fetching = $ref(true); | ||||||
| let user: Misskey.entities.UserDetailed | null = $ref(null); | let user: Misskey.entities.UserDetailed | null = $ref(null); | ||||||
|  |  | ||||||
|  | @ -29,7 +29,7 @@ const pagination = { | ||||||
| 	limit: 10, | 	limit: 10, | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| const pagingComponent = $ref<InstanceType<typeof MkPagination>>(); | const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| async function create() { | async function create() { | ||||||
| 	const { canceled, result } = await os.form(i18n.ts.createNewClip, { | 	const { canceled, result } = await os.form(i18n.ts.createNewClip, { | ||||||
|  |  | ||||||
|  | @ -25,7 +25,7 @@ import * as os from '@/os'; | ||||||
| import { i18n } from '@/i18n'; | import { i18n } from '@/i18n'; | ||||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| 
 | 
 | ||||||
| const pagingComponent = $ref<InstanceType<typeof MkPagination>>(); | const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); | ||||||
| 
 | 
 | ||||||
| const pagination = { | const pagination = { | ||||||
| 	endpoint: 'users/lists/list' as const, | 	endpoint: 'users/lists/list' as const, | ||||||
|  |  | ||||||
|  | @ -34,7 +34,7 @@ import { i18n } from '@/i18n'; | ||||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | import { definePageMetadata } from '@/scripts/page-metadata'; | ||||||
| import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue'; | import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue'; | ||||||
| 
 | 
 | ||||||
| let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>(); | let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>(); | ||||||
| let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer); | let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer); | ||||||
| let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false); | let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -41,7 +41,7 @@ const keymap = { | ||||||
| 	't': focus, | 	't': focus, | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| const tlComponent = $ref<InstanceType<typeof XTimeline>>(); | const tlComponent = $shallowRef<InstanceType<typeof XTimeline>>(); | ||||||
| const rootEl = $shallowRef<HTMLElement>(); | const rootEl = $shallowRef<HTMLElement>(); | ||||||
| 
 | 
 | ||||||
| let queue = $ref(0); | let queue = $ref(0); | ||||||
|  |  | ||||||
|  | @ -34,7 +34,7 @@ const props = defineProps<{ | ||||||
| 
 | 
 | ||||||
| let list = $ref(null); | let list = $ref(null); | ||||||
| let queue = $ref(0); | let queue = $ref(0); | ||||||
| let tlEl = $ref<InstanceType<typeof XTimeline>>(); | let tlEl = $shallowRef<InstanceType<typeof XTimeline>>(); | ||||||
| let rootEl = $shallowRef<HTMLElement>(); | let rootEl = $shallowRef<HTMLElement>(); | ||||||
| 
 | 
 | ||||||
| watch(() => props.listId, async () => { | watch(() => props.listId, async () => { | ||||||
|  |  | ||||||
|  | @ -26,7 +26,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; | 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| let timeline = $ref<InstanceType<typeof XTimeline>>(); | let timeline = $shallowRef<InstanceType<typeof XTimeline>>(); | ||||||
| 
 | 
 | ||||||
| onMounted(() => { | onMounted(() => { | ||||||
| 	if (props.column.antennaId == null) { | 	if (props.column.antennaId == null) { | ||||||
|  |  | ||||||
|  | @ -26,7 +26,7 @@ const emit = defineEmits<{ | ||||||
| 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; | 	(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) { | if (props.column.listId == null) { | ||||||
| 	setList(); | 	setList(); | ||||||
|  |  | ||||||
|  | @ -45,7 +45,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name, | ||||||
| 	emit, | 	emit, | ||||||
| ); | ); | ||||||
| 
 | 
 | ||||||
| let cloud = $ref<InstanceType<typeof MkTagCloud> | null>(); | let cloud = $shallowRef<InstanceType<typeof MkTagCloud> | null>(); | ||||||
| let activeInstances = $shallowRef(null); | let activeInstances = $shallowRef(null); | ||||||
| 
 | 
 | ||||||
| function onInstanceClick(i) { | function onInstanceClick(i) { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue