sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkAbuseReportWindow.vue
View File

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

2
packages/frontend/src/components/MkCropperDialog.vue
View File

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

4
packages/frontend/src/components/MkDialog.vue
View File

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

2
packages/frontend/src/components/MkDrive.vue
View File

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

4
packages/frontend/src/components/MkDriveSelectDialog.vue
View File

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

6
packages/frontend/src/components/MkEmojiPickerDialog.vue
View File

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

2
packages/frontend/src/components/MkFileCaptionEditWindow.vue
View File

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

2
packages/frontend/src/components/MkImageViewer.vue
View File

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

2
packages/frontend/src/components/MkLaunchPad.vue
View File

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

2
packages/frontend/src/components/MkMenu.vue
View File

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

2
packages/frontend/src/components/MkModalPageWindow.vue
View File

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

2
packages/frontend/src/components/MkModalWindow.vue
View File

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

2
packages/frontend/src/components/MkNote.vue
View File

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

2
packages/frontend/src/components/MkNoteDetailed.vue
View File

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

4
packages/frontend/src/components/MkNotes.vue
View File

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

2
packages/frontend/src/components/MkNotificationSettingWindow.vue
View File

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

4
packages/frontend/src/components/MkNotifications.vue
View File

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

2
packages/frontend/src/components/MkPageWindow.vue
View File

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

2
packages/frontend/src/components/MkPopupMenu.vue
View File

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

4
packages/frontend/src/components/MkPostFormDialog.vue
View File

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

2
packages/frontend/src/components/MkSigninDialog.vue
View File

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

2
packages/frontend/src/components/MkSignupDialog.vue
View File

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

2
packages/frontend/src/components/MkTokenGenerateWindow.vue
View File

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

4
packages/frontend/src/components/MkUpdated.vue
View File

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

6
packages/frontend/src/components/MkUserList.vue
View File

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

2
packages/frontend/src/components/MkVisibilityPicker.vue
View File

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

4
packages/frontend/src/components/MkWaitingDialog.vue
View File

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