perf?(frontend): DI.pageMetadata, DI.router

packages/frontend/src/components/MkPageWindow.vue

@@ -16,9 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<template #header>
-		<template v-if="pageMetadata">
-			<i v-if="pageMetadata.icon" :class="pageMetadata.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.title }}</span>
+		<template v-if="routingPageMetadataRef">
+			<i v-if="routingPageMetadataRef.icon" :class="routingPageMetadataRef.icon" style="margin-right: 0.5em;"></i>
+			<span>{{ routingPageMetadataRef.title }}</span>
 		</template>
 	</template>
 
@@ -38,11 +38,14 @@ import { popout as _popout } from '@/scripts/popout.js';
 import { copyText } from '@/scripts/tms/clipboard.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { i18n } from '@/i18n.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { openingWindowsCount } from '@/os.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { useRouterFactory } from '@/router/supplier.js';
 import { mainRouter } from '@/router/main.js';
+import { DI } from '@/di.js';
+
+const { routingPageMetadataRef } = useRoutingPageMetadata();
 
 const props = defineProps<{
 	initialPath: string;
@@ -56,7 +59,6 @@ const routerFactory = useRouterFactory();
 const windowRouter = routerFactory(props.initialPath);
 
 const contents = shallowRef<HTMLElement | null>(null);
-const pageMetadata = ref<null | PageMetadata>(null);
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
 const history = ref<{ path: string; key: string; }[]>([{
 	path: windowRouter.getCurrentPath(),
@@ -100,12 +102,7 @@ windowRouter.addListener('replace', ctx => {
 
 windowRouter.init();
 
-provide('router', windowRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, windowRouter);
 provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 provide('forceSpacerMin', true);

packages/frontend/src/components/global/MkPageHeader.vue

@@ -11,18 +11,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
 
-		<template v-if="pageMetadata">
+		<template v-if="pageMetadataRef">
 			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
-				<div v-if="pageMetadata.avatar" :class="$style.titleAvatarContainer">
-					<MkAvatar :class="$style.titleAvatar" :user="pageMetadata.avatar" indicator/>
+				<div v-if="pageMetadataRef.withUserAvatar" :class="$style.titleAvatarContainer">
+					<MkAvatar :class="$style.titleAvatar" :user="pageMetadataRef.withUserAvatar" indicator/>
 				</div>
-				<i v-else-if="pageMetadata.icon" :class="[$style.titleIcon, pageMetadata.icon]"></i>
+				<i v-else-if="pageMetadataRef.icon" :class="[$style.titleIcon, pageMetadataRef.icon]"></i>
 
 				<div :class="$style.title">
-					<MkUserName v-if="pageMetadata.userName" :user="pageMetadata.userName" :nowrap="true"/>
-					<div v-else-if="pageMetadata.title">{{ pageMetadata.title }}</div>
-					<div v-if="pageMetadata.subtitle" :class="$style.subtitle">
-						{{ pageMetadata.subtitle }}
+					<MkUserName v-if="pageMetadataRef.withUserName" :user="pageMetadataRef.withUserName" :nowrap="true"/>
+					<div v-else-if="pageMetadataRef.title">{{ pageMetadataRef.title }}</div>
+					<div v-if="pageMetadataRef.subtitle" :class="$style.subtitle">
+						{{ pageMetadataRef.subtitle }}
 					</div>
 				</div>
 			</div>
@@ -67,9 +67,11 @@ import { onMounted, onUnmounted, ref, inject, shallowRef, computed } from 'vue';
 import { scrollToTop } from '@@/js/scroll.js';
 import XTabs, { Tab } from './MkPageHeader.tabs.vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
-import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import MkButton from '@/components/MkButton.vue';
+import { DI } from '@/di.js';
+
+const pageMetadataRef = inject(DI.pageMetadata);
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
@@ -87,8 +89,6 @@ const emit = defineEmits<{
 	(ev: 'update:tab', key: string): void;
 }>();
 
-const pageMetadata = injectReactiveMetadata();
-
 const hideTitle = inject<boolean>('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject<boolean>('shouldHeaderThin', false);
 

packages/frontend/src/components/global/RouterView.vue

@@ -20,24 +20,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import { IRouter, Resolved } from '@/nirax.js';
+import { IRouter, Resolved, RouterEvent } from '@/nirax.js';
 import { defaultStore } from '@/store.js';
 import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
 
 const props = defineProps<{
 	router?: IRouter;
 	nested?: boolean;
 }>();
 
-const router = props.router ?? inject<IRouter | null>('router', null);
+const router = props.router ?? inject(DI.router, null);
 
 if (router == null) {
 	throw new Error('no router provided');
 }
 
-const currentDepth = inject<number>('routerCurrentDepth', 0);
-provide('routerCurrentDepth', currentDepth + 1);
+const currentDepth = inject(DI.routerDepth, 0);
+provide(DI.routerDepth, currentDepth + 1);
 
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (!props.nested) return current;
@@ -58,25 +59,24 @@ const currentPageComponent = shallowRef('component' in current.route ? current.r
 const currentPageProps = ref(current.props);
 const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
 
-function onChange({ resolved, key: newKey }) {
-	const current = resolveNested(resolved);
-	if (current == null || 'redirect' in current.route) return;
-	currentPageComponent.value = current.route.component;
-	currentPageProps.value = current.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+const onChange: RouterEvent['change'] = ({ resolved, key: newKey }) => {
+	const current_ = resolveNested(resolved);
+	if (current_ == null || 'redirect' in current_.route) return;
+	currentPageComponent.value = current_.route.component;
+	currentPageProps.value = current_.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(current_.props));
 
 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
 		if (clearCacheRequested.value) {
 			clearCacheRequested.value = false;
 		}
 	});
-}
+};
 
 router.addListener('change', onChange);
 
-// #region キャッシュ制御
-
+//#region キャッシュ制御
 /**
  * キャッシュクリアが有効になったら、全キャッシュをクリアする
  *
@@ -92,8 +92,7 @@ globalEvents.on('requestClearPageCache', () => {
 		clearCacheRequested.value = true;
 	}
 });
-
-// #endregion
+//#endregion
 
 onBeforeUnmount(() => {
 	router.removeListener('change', onChange);

packages/frontend/src/di.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { InjectionKey, ShallowRef } from 'vue';
+import type { IRouter } from '@/nirax.js';
+import type { PageMetadata, PageMetadataReceiver } from '@/scripts/page-metadata.js';
+
+export const DI = Object.freeze({
+	router: Symbol() as InjectionKey<IRouter>,
+	routerFactory: Symbol() as InjectionKey<((path: string) => IRouter)>,
+	routerDepth: Symbol() as InjectionKey<number>,
+	pageMetadata: Symbol() as InjectionKey<Readonly<ShallowRef<PageMetadata>>>,
+	pageMetadataReceiver: Symbol() as InjectionKey<PageMetadataReceiver>,
+});