perf(client): use shallowRef instead of ref for template reference

This commit is contained in:
syuilo 2023-01-03 13:37:32 +09:00
parent 826e4502cb
commit c93f091ba8
46 changed files with 66 additions and 70 deletions

View File

@ -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() {

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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[]>([]);

View File

@ -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);

View File

@ -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);

View File

@ -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>

View File

@ -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;

View File

@ -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,

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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,

View File

@ -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);

View File

@ -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,

View File

@ -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(),

View File

@ -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>

View File

@ -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({

View File

@ -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');

View File

@ -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);

View File

@ -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({});

View File

@ -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();

View File

@ -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>

View File

@ -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];

View File

@ -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;

View File

@ -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');

View File

@ -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);

View File

@ -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;

View File

@ -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;

View File

@ -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');

View File

@ -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,
})); }));

View File

@ -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([]);

View File

@ -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');

View File

@ -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',

View File

@ -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,

View File

@ -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);

View File

@ -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, {

View File

@ -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,

View File

@ -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);

View File

@ -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);

View File

@ -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 () => {

View File

@ -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) {

View File

@ -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();

View File

@ -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) {