profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

perf(client): use shallowRef for html element ref

Browse source
This commit is contained in:
syuilo 2023-01-03 10:12:37 +09:00
parent a0af80f8c5
commit 2184240ef1
59 changed files with 114 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/frontend/src/components/MkAutocomplete.vue
View file

@ -16,7 +16,7 @@
</li>
</ol>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
<li v-for="emoji in emojis" tabindex="-1" :key="emoji.emoji" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<li v-for="emoji in emojis" :key="emoji.emoji" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<div class="emoji">
<MkEmoji :emoji="emoji.emoji"/>
</div>
@ -35,7 +35,8 @@
</template>
<script lang="ts">
import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import sanitizeHtml from 'sanitize-html';
import contains from '@/scripts/contains';
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
import { acct } from '@/filters/user';
@ -45,7 +46,6 @@ import { defaultStore } from '@/store';
import { emojilist } from '@/scripts/emojilist';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import sanitizeHtml from 'sanitize-html';
type EmojiDef = {
emoji: string;
@ -136,7 +136,7 @@ const emit = defineEmits<{
}>();
const suggests = ref<Element>();
const rootEl = ref<HTMLDivElement>();
const rootEl = shallowRef<HTMLDivElement>();
const fetching = ref(true);
const users = ref<any[]>([]);

4
packages/frontend/src/components/MkButton.vue
View file

@ -47,8 +47,8 @@ const emit = defineEmits<{
(ev: 'click', payload: MouseEvent): void;
}>();
let el = $ref<HTMLElement | null>(null);
let ripples = $ref<HTMLElement | null>(null);
let el = $shallowRef<HTMLElement | null>(null);
let ripples = $shallowRef<HTMLElement | null>(null);
onMounted(() => {
if (props.autofocus) {

6
packages/frontend/src/components/MkCaptcha.vue
View file

@ -6,7 +6,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
@ -42,7 +42,7 @@ const emit = defineEmits<{
const available = ref(false);
const captchaEl = ref<HTMLDivElement | undefined>();
const captchaEl = shallowRef<HTMLDivElement | undefined>();
const variable = computed(() => {
switch (props.provider) {
@ -62,7 +62,7 @@ const src = computed(() => {
}
});
const scriptId = computed(() => `script-${props.provider}`)
const scriptId = computed(() => `script-${props.provider}`);
const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);

4
packages/frontend/src/components/MkChart.vue
View file

@ -13,7 +13,7 @@
id-denylist violation when setting it. This is causing about 60+ lint issues.
As this is part of Chart.js's API it makes sense to disable the check here.
*/
import { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
import { Chart } from 'chart.js';
import 'chartjs-adapter-date-fns';
import { enUS } from 'date-fns/locale';
@ -102,7 +102,7 @@ let chartData: {
}[];
} = null;
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const fetching = ref(true);
const getDate = (ago: number) => {

2
packages/frontend/src/components/MkContextMenu.vue
View file

@ -22,7 +22,7 @@ const emit = defineEmits<{
(ev: 'closed'): void;
}>();
let rootEl = $ref<HTMLDivElement>();
let rootEl = $shallowRef<HTMLDivElement>();
let zIndex = $ref<number>(os.claimZIndex('high'));

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

@ -51,7 +51,7 @@ const props = defineProps<{
const imgUrl = getProxiedImageUrl(props.file.url);
let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
let imgEl = $ref<HTMLImageElement>();
let imgEl = $shallowRef<HTMLImageElement>();
let cropper: Cropper | null = null;
let loading = $ref(true);

4
packages/frontend/src/components/MkDrive.vue
View file

@ -88,7 +88,7 @@
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MkButton from './MkButton.vue';
import XNavFolder from '@/components/MkDrive.navFolder.vue';
@ -119,7 +119,7 @@ const emit = defineEmits<{
}>();
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
const fileInput = ref<HTMLInputElement>();
const fileInput = shallowRef<HTMLInputElement>();
const folder = ref<Misskey.entities.DriveFolder | null>(null);
const files = ref<Misskey.entities.DriveFile[]>([]);

6
packages/frontend/src/components/MkEmojiPicker.vue
View file

@ -77,7 +77,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import { ref, shallowRef, computed, watch, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import XSection from '@/components/MkEmojiPicker.section.vue';
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
@ -102,8 +102,8 @@ const emit = defineEmits<{
(ev: 'chosen', v: string): void;
}>();
const search = ref<HTMLInputElement>();
const emojis = ref<HTMLDivElement>();
const search = shallowRef<HTMLInputElement>();
const emojis = shallowRef<HTMLDivElement>();
const {
reactions: pinned,

4
packages/frontend/src/components/MkHeatmap.vue
View file

@ -27,8 +27,8 @@ const props = defineProps<{
src: string;
}>();
const rootEl = $ref<HTMLDivElement>(null);
const chartEl = $ref<HTMLCanvasElement>(null);
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);

2
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
cover: true,
});
const canvas = $ref<HTMLCanvasElement>();
const canvas = $shallowRef<HTMLCanvasElement>();
let loaded = $ref(false);
function draw() {

4
packages/frontend/src/components/MkInstanceStats.vue
View file

@ -94,8 +94,8 @@ const chartLimit = 500;
let chartSpan = $ref<'hour' | 'day'>('hour');
let chartSrc = $ref('active-users');
let heatmapSrc = $ref('active-users');
let subDoughnutEl = $ref<HTMLCanvasElement>();
let pubDoughnutEl = $ref<HTMLCanvasElement>();
let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
const { handler: externalTooltipHandler1 } = useChartTooltip({
position: 'middle',

2
packages/frontend/src/components/MkMediaBanner.vue
View file

@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
}>(), {
});
const audioEl = $ref<HTMLAudioElement | null>();
const audioEl = $shallowRef<HTMLAudioElement | null>();
let hide = $ref(true);
function volumechange() {

4
packages/frontend/src/components/MkMenu.child.vue
View file

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { on } from 'events';
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import MkMenu from './MkMenu.vue';
import { MenuItem } from '@/types/menu';
import * as os from '@/os';
@ -24,7 +24,7 @@ const emit = defineEmits<{
(ev: 'actioned'): void;
}>();
const el = ref<HTMLElement>();
const el = shallowRef<HTMLElement>();
const align = 'left';
function setPosition() {

4
packages/frontend/src/components/MkMenu.vue
View file

@ -78,7 +78,7 @@ const emit = defineEmits<{
(ev: 'close', actioned?: boolean): void;
}>();
let itemsEl = $ref<HTMLDivElement>();
let itemsEl = $shallowRef<HTMLDivElement>();
let items2: InnerMenuItem[] = $ref([]);
@ -112,7 +112,7 @@ watch(() => props.items, () => {
});
let childMenu = $ref<MenuItem[] | null>();
let childTarget = $ref<HTMLElement | null>();
let childTarget = $shallowRef<HTMLElement | null>();
function closeChild() {
childMenu = null;

2
packages/frontend/src/components/MkModal.vue
View file

@ -61,7 +61,7 @@ let maxHeight = $ref<number>();
let fixed = $ref(false);
let transformOrigin = $ref('center');
let showing = $ref(true);
let content = $ref<HTMLElement>();
let content = $shallowRef<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority);
const type = $computed<ModalTypes>(() => {
if (props.preferType === 'auto') {

4
packages/frontend/src/components/MkModalWindow.vue
View file

@ -42,8 +42,8 @@ const emit = defineEmits<{
}>();
let modal = $ref<InstanceType<typeof MkModal>>();
let rootEl = $ref<HTMLElement>();
let headerEl = $ref<HTMLElement>();
let rootEl = $shallowRef<HTMLElement>();
let headerEl = $shallowRef<HTMLElement>();
let bodyWidth = $ref(0);
let bodyHeight = $ref(0);

10
packages/frontend/src/components/MkNote.vue
View file

@ -101,7 +101,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, Ref } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
@ -156,11 +156,11 @@ const isRenote = (
note.poll == null
);
const el = ref<HTMLElement>();
const menuButton = ref<HTMLElement>();
const el = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
const renoteTime = ref<HTMLElement>();
const reactButton = ref<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);

10
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -112,7 +112,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
@ -166,11 +166,11 @@ const isRenote = (
note.poll == null
);
const el = ref<HTMLElement>();
const menuButton = ref<HTMLElement>();
const el = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
const renoteTime = ref<HTMLElement>();
const reactButton = ref<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);

4
packages/frontend/src/components/MkNotification.vue
View file

@ -73,7 +73,7 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, shallowRef, onMounted, onUnmounted, watch } from 'vue';
import * as misskey from 'misskey-js';
import XReactionIcon from '@/components/MkReactionIcon.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
@ -95,7 +95,7 @@ const props = withDefaults(defineProps<{
full: false,
});
const elRef = ref<HTMLElement>(null);
const elRef = shallowRef<HTMLElement>(null);
const reactionRef = ref(null);
let readObserver: IntersectionObserver | undefined;

4
packages/frontend/src/components/MkPagination.vue
View file

@ -32,7 +32,7 @@
</template>
<script lang="ts" setup>
import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, shallowRef, watch } from 'vue';
import * as misskey from 'misskey-js';
import * as os from '@/os';
import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
@ -74,7 +74,7 @@ const emit = defineEmits<{
type Item = { id: string; [another: string]: unknown; };
const rootEl = ref<HTMLElement>();
const rootEl = shallowRef<HTMLElement>();
const items = ref<Item[]>([]);
const queue = ref<Item[]>([]);
const offset = ref(0);

8
packages/frontend/src/components/MkPostForm.vue
View file

@ -128,10 +128,10 @@ const emit = defineEmits<{
(ev: 'esc'): void;
}>();
const textareaEl = $ref<HTMLTextAreaElement | null>(null);
const cwInputEl = $ref<HTMLInputElement | null>(null);
const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
const visibilityButton = $ref<HTMLElement | null>(null);
const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
const visibilityButton = $shallowRef<HTMLElement | null>(null);
let posting = $ref(false);
let posted = $ref(false);

4
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -12,7 +12,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { computed, onMounted, ref, shallowRef, watch } from 'vue';
import * as misskey from 'misskey-js';
import XDetails from '@/components/MkReactionsViewer.details.vue';
import XReactionIcon from '@/components/MkReactionIcon.vue';
@ -28,7 +28,7 @@ const props = defineProps<{
note: misskey.entities.Note;
}>();
const buttonRef = ref<HTMLElement>();
const buttonRef = shallowRef<HTMLElement>();
const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);

4
packages/frontend/src/components/MkRenoteButton.vue
View file

@ -14,7 +14,7 @@
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { computed, ref, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import XDetails from '@/components/MkUsersTooltip.vue';
import { pleaseLogin } from '@/scripts/please-login';
@ -28,7 +28,7 @@ const props = defineProps<{
count: number;
}>();
const buttonRef = ref<HTMLElement>();
const buttonRef = shallowRef<HTMLElement>();
const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);

4
packages/frontend/src/components/MkRetentionHeatmap.vue
View file

@ -23,8 +23,8 @@ import { initChart } from '@/scripts/init-chart';
initChart();
const rootEl = $ref<HTMLDivElement>(null);
const chartEl = $ref<HTMLCanvasElement>(null);
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);

4
packages/frontend/src/components/MkSparkle.vue
View file

@ -64,10 +64,10 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
const particles = ref([]);
const el = ref<HTMLElement>();
const el = shallowRef<HTMLElement>();
const width = ref(0);
const height = ref(0);
const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];

6
packages/frontend/src/components/MkTagCloud.vue
View file

@ -19,9 +19,9 @@ const computedStyle = getComputedStyle(document.documentElement);
const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
let available = $ref(false);
let rootEl = $ref<HTMLElement | null>(null);
let canvasEl = $ref<HTMLCanvasElement | null>(null);
let tagsEl = $ref<HTMLElement | null>(null);
let rootEl = $shallowRef<HTMLElement | null>(null);
let canvasEl = $shallowRef<HTMLCanvasElement | null>(null);
let tagsEl = $shallowRef<HTMLElement | null>(null);
let width = $ref(300);
watch($$(available), () => {

4
packages/frontend/src/components/MkTooltip.vue
View file

@ -10,7 +10,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import * as os from '@/os';
import { calcPopupPosition } from '@/scripts/popup-position';
@ -34,7 +34,7 @@ const emit = defineEmits<{
(ev: 'closed'): void;
}>();
const el = ref<HTMLElement>();
const el = shallowRef<HTMLElement>();
const zIndex = os.claimZIndex('high');
function setPosition() {

2
packages/frontend/src/components/MkVisibility.vue
View file

@ -22,7 +22,7 @@ const props = defineProps<{
},
}>();
const specified = $ref<HTMLElement>();
const specified = $shallowRef<HTMLElement>();
if (props.note.visibility === 'specified') {
useTooltip($$(specified), async (showing) => {

2
packages/frontend/src/components/MkWindow.vue
View file

@ -88,7 +88,7 @@ const emit = defineEmits<{
provide('inWindow', true);
let rootEl = $ref<HTMLElement | null>();
let rootEl = $shallowRef<HTMLElement | null>();
let showing = $ref(true);
let beforeClickedAt = 0;
let maximized = $ref(false);

2
packages/frontend/src/components/form/checkbox.vue
View file

@ -35,7 +35,7 @@ const emit = defineEmits<{
(ev: 'update:modelValue', v: boolean): void;
}>();
let button = $ref<HTMLElement>();
let button = $shallowRef<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;

2
packages/frontend/src/components/form/folder.vue
View file

@ -40,7 +40,7 @@ const props = withDefaults(defineProps<{
let opened = $ref(props.defaultOpen);
let openedAtLeastOnce = $ref(props.defaultOpen);
let root = $ref<HTMLElement>();
let root = $shallowRef<HTMLElement>();
function enter(el) {
const elementHeight = el.getBoundingClientRect().height;

8
packages/frontend/src/components/form/input.vue
View file

@ -34,7 +34,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
import { debounce } from 'throttle-debounce';
import MkButton from '@/components/MkButton.vue';
import { useInterval } from '@/scripts/use-interval';
@ -74,9 +74,9 @@ const focused = ref(false);
const changed = ref(false);
const invalid = ref(false);
const filled = computed(() => v.value !== '' && v.value != null);
const inputEl = ref<HTMLElement>();
const prefixEl = ref<HTMLElement>();
const suffixEl = ref<HTMLElement>();
const inputEl = shallowRef<HTMLElement>();
const prefixEl = shallowRef<HTMLElement>();
const suffixEl = shallowRef<HTMLElement>();
const height =
props.small ? 35 :
props.large ? 39 :

2
packages/frontend/src/components/form/switch.vue
View file

@ -34,7 +34,7 @@ const emit = defineEmits<{
(ev: 'update:modelValue', v: boolean): void;
}>();
let button = $ref<HTMLElement>();
let button = $shallowRef<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;

4
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -77,9 +77,9 @@ const metadata = injectPageMetadata();
const hideTitle = inject('shouldOmitHeaderTitle', false);
const thin_ = props.thin || inject('shouldHeaderThin', false);
const el = $ref<HTMLElement | undefined>(undefined);
const el = $shallowRef<HTMLElement | undefined>(undefined);
const tabRefs: Record<string, HTMLElement | null> = {};
const tabHighlightEl = $ref<HTMLElement | null>(null);
const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
const bg = ref<string | undefined>(undefined);
let narrow = $ref(false);
const hasTabs = $computed(() => props.tabs.length > 0);

5
packages/frontend/src/components/global/MkSpacer.vue
View file

@ -24,8 +24,8 @@ const props = withDefaults(defineProps<{
});
let ro: ResizeObserver;
let root = $ref<HTMLElement>();
let content = $ref<HTMLElement>();
let root = $shallowRef<HTMLElement>();
let content = $shallowRef<HTMLElement>();
let margin = $ref(props.marginMin);
const widthHistory = [null, null] as [number | null, number | null];
const heightHistory = [null, null] as [number | null, number | null];
@ -72,7 +72,6 @@ onMounted(() => {
const pastHeight = heightHistory.pop();
heightHistory.unshift(height);
if (pastWidth === width && pastHeight === height) {
return;
}

6
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -18,9 +18,9 @@ const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
<script lang="ts" setup>
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
const rootEl = $ref<HTMLElement>();
const headerEl = $ref<HTMLElement>();
const bodyEl = $ref<HTMLElement>();
const rootEl = $shallowRef<HTMLElement>();
const headerEl = $shallowRef<HTMLElement>();
const bodyEl = $shallowRef<HTMLElement>();
let headerHeight = $ref<string | undefined>();
let childStickyTop = $ref(0);

2
packages/frontend/src/pages/about-misskey.vue
View file

@ -156,7 +156,7 @@ const patrons = [
let easterEggReady = false;
let easterEggEmojis = $ref([]);
let easterEggEngine = $ref(null);
const containerEl = $ref<HTMLElement>();
const containerEl = $shallowRef<HTMLElement>();
function iconLoaded() {
const emojis = defaultStore.state.reactions;

6
packages/frontend/src/pages/admin/_header_.vue
View file

@ -28,7 +28,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
import { computed, onMounted, onUnmounted, ref, shallowRef, inject, watch, nextTick } from 'vue';
import tinycolor from 'tinycolor2';
import { popupMenu } from '@/os';
import { url } from '@/config';
@ -64,9 +64,9 @@ const emit = defineEmits<{
const metadata = injectPageMetadata();
const el = ref<HTMLElement>(null);
const el = shallowRef<HTMLElement>(null);
const tabRefs = {};
const tabHighlightEl = $ref<HTMLElement | null>(null);
const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
const bg = ref(null);
const height = ref(0);
const hasTabs = computed(() => {

2
packages/frontend/src/pages/admin/overview.active-users.vue
View file

@ -23,7 +23,7 @@ import { initChart } from '@/scripts/init-chart';
initChart();
const chartEl = $ref<HTMLCanvasElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 7;

4
packages/frontend/src/pages/admin/overview.ap-requests.vue
View file

@ -34,8 +34,8 @@ import { initChart } from '@/scripts/init-chart';
initChart();
const chartLimit = 50;
const chartEl = $ref<HTMLCanvasElement>();
const chartEl2 = $ref<HTMLCanvasElement>();
const chartEl = $shallowRef<HTMLCanvasElement>();
const chartEl2 = $shallowRef<HTMLCanvasElement>();
let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();

4
packages/frontend/src/pages/admin/overview.pie.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import { defaultStore } from '@/store';
@ -16,7 +16,7 @@ const props = defineProps<{
data: { name: string; value: number; color: string; onClick?: () => void }[];
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',

4
packages/frontend/src/pages/admin/overview.queue.chart.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { watch, onMounted, onUnmounted, ref } from 'vue';
import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import * as os from '@/os';
@ -19,7 +19,7 @@ const props = defineProps<{
type: string;
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip();

2
packages/frontend/src/pages/admin/overview.vue
View file

@ -82,7 +82,7 @@ import { defaultStore } from '@/store';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
import MkFolder from '@/components/MkFolder.vue';
const rootEl = $ref<HTMLElement>();
const rootEl = $shallowRef<HTMLElement>();
let serverInfo: any = $ref(null);
let topSubInstancesForPie: any = $ref(null);
let topPubInstancesForPie: any = $ref(null);

4
packages/frontend/src/pages/admin/queue.chart.chart.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { watch, onMounted, onUnmounted, ref } from 'vue';
import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import * as os from '@/os';
@ -19,7 +19,7 @@ const props = defineProps<{
type: string;
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip();

2
packages/frontend/src/pages/antenna-timeline.vue
View file

@ -34,7 +34,7 @@ const props = defineProps<{
let antenna = $ref(null);
let queue = $ref(0);
let rootEl = $ref<HTMLElement>();
let rootEl = $shallowRef<HTMLElement>();
let tlEl = $ref<InstanceType<typeof XTimeline>>();
const keymap = $computed(() => ({
't': focus,

4
packages/frontend/src/pages/messaging/messaging-room.form.vue
View file

@ -46,8 +46,8 @@ const props = defineProps<{
group?: Misskey.entities.UserGroup | null;
}>();
let textEl = $ref<HTMLTextAreaElement>();
let fileEl = $ref<HTMLInputElement>();
let textEl = $shallowRef<HTMLTextAreaElement>();
let fileEl = $shallowRef<HTMLInputElement>();
let text = $ref<string>('');
let file = $ref<Misskey.entities.DriveFile | null>(null);

2
packages/frontend/src/pages/messaging/messaging-room.vue
View file

@ -71,7 +71,7 @@ const props = defineProps<{
groupId?: string;
}>();
let rootEl = $ref<HTMLDivElement>();
let rootEl = $shallowRef<HTMLDivElement>();
let formEl = $ref<InstanceType<typeof XForm>>();
let pagingComponent = $ref<InstanceType<typeof MkPagination>>();

4
packages/frontend/src/pages/settings/index.vue
View file

@ -22,7 +22,7 @@
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue';
import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
import { i18n } from '@/i18n';
import MkInfo from '@/components/MkInfo.vue';
import MkSuperMenu from '@/components/MkSuperMenu.vue';
@ -40,7 +40,7 @@ const indexInfo = {
hideHeader: true,
};
const INFO = ref(indexInfo);
const el = ref<HTMLElement | null>(null);
const el = shallowRef<HTMLElement | null>(null);
const childInfo = ref(null);
const router = useRouter();

2
packages/frontend/src/pages/timeline.vue
View file

@ -42,7 +42,7 @@ const keymap = {
};
const tlComponent = $ref<InstanceType<typeof XTimeline>>();
const rootEl = $ref<HTMLElement>();
const rootEl = $shallowRef<HTMLElement>();
let queue = $ref(0);
const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });

2
packages/frontend/src/pages/user-list-timeline.vue
View file

@ -35,7 +35,7 @@ const props = defineProps<{
let list = $ref(null);
let queue = $ref(0);
let tlEl = $ref<InstanceType<typeof XTimeline>>();
let rootEl = $ref<HTMLElement>();
let rootEl = $shallowRef<HTMLElement>();
watch(() => props.listId, async () => {
list = await os.api('users/lists/show', {

4
packages/frontend/src/pages/user/activity.heatmap.vue
View file

@ -28,8 +28,8 @@ const props = defineProps<{
user: misskey.entities.User;
}>();
const rootEl = $ref<HTMLDivElement>(null);
const chartEl = $ref<HTMLCanvasElement>(null);
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);

2
packages/frontend/src/pages/user/activity.pv.vue
View file

@ -28,7 +28,7 @@ const props = defineProps<{
user: misskey.entities.User;
}>();
const chartEl = $ref<HTMLCanvasElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 30;

2
packages/frontend/src/ui/classic.vue
View file

@ -64,7 +64,7 @@ let fullView = $ref(false);
let globalHeaderHeight = $ref(0);
const wallpaper = localStorage.getItem('wallpaper') != null;
const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
let live2d = $ref<HTMLIFrameElement>();
let live2d = $shallowRef<HTMLIFrameElement>();
let widgetsLeft = $ref();
let widgetsRight = $ref();

2
packages/frontend/src/ui/deck.vue
View file

@ -125,7 +125,7 @@ function showSettings() {
os.pageWindow('/settings/deck');
}
let columnsEl = $ref<HTMLElement>();
let columnsEl = $shallowRef<HTMLElement>();
const addColumn = async (ev) => {
const columns = [

2
packages/frontend/src/ui/deck/column.vue
View file

@ -59,7 +59,7 @@ const emit = defineEmits<{
(ev: 'change-active-state', v: boolean): void;
}>();
let body = $ref<HTMLDivElement>();
let body = $shallowRef<HTMLDivElement>();
let dragging = $ref(false);
watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));

2
packages/frontend/src/ui/universal.vue
View file

@ -86,7 +86,7 @@ window.addEventListener('resize', () => {
});
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsEl = $ref<HTMLElement>();
const widgetsEl = $shallowRef<HTMLElement>();
const widgetsShowing = $ref(false);
provide('router', mainRouter);

2
packages/frontend/src/ui/universal.widgets.vue
View file

@ -31,7 +31,7 @@ const emit = defineEmits<{
(ev: 'mounted', el?: Element): void;
}>();
let rootEl = $ref<HTMLDivElement>();
let rootEl = $shallowRef<HTMLDivElement>();
const widgets = $computed(() => {
if (props.place === null) return defaultStore.reactiveState.widgets.value;

4
packages/frontend/src/widgets/aichan.vue
View file

@ -5,7 +5,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
@ -32,7 +32,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
emit,
);
const live2d = ref<HTMLIFrameElement>();
const live2d = shallowRef<HTMLIFrameElement>();
const touched = () => {
//if (this.live2d) this.live2d.changeExpression('gurugurume');

6
packages/frontend/src/widgets/slideshow.vue
View file

@ -12,7 +12,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { nextTick, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
@ -49,8 +49,8 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
const images = ref([]);
const fetching = ref(true);
const slideA = ref<HTMLElement>();
const slideB = ref<HTMLElement>();
const slideA = shallowRef<HTMLElement>();
const slideB = shallowRef<HTMLElement>();
const change = () => {
if (images.value.length === 0) return;