sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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

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;