wip

(cherry picked from commit cd665be463)

packages/frontend/src/boot/common.ts

@@ -25,6 +25,7 @@ import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
 import { setupRouter } from '@/router/main.js';
 import { createMainRouter } from '@/router/definition.js';
+import { DI } from '@/di.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`Misskey v${version}`);
@@ -234,8 +235,8 @@ export async function common(createVue: () => App<Element>) {
 	} catch (err) { /* empty */ }
 
 	const app = createVue();
-	app.provide('serverMetadata', serverMetadata);
-	app.provide('mediaProxy', new MediaProxy(serverMetadata, url));
+	app.provide(DI.serverMetadata, serverMetadata);
+	app.provide(DI.mediaProxy, new MediaProxy(serverMetadata, url));
 
 	setupRouter(app, createMainRouter);
 

packages/frontend/src/components/MkChannelList.vue

@@ -24,7 +24,9 @@ import MkChannelPreview from '@/components/MkChannelPreview.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	pagination: Paging;

packages/frontend/src/components/MkCropperDialog.vue

@@ -42,7 +42,9 @@ import { defaultStore } from '@/store.js';
 import { apiUrl } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const emit = defineEmits<{
 	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;

packages/frontend/src/components/MkDonation.vue

@@ -44,7 +44,9 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { miLocalStorage } from '@/local-storage.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;

packages/frontend/src/components/MkFeaturedPhotos.vue

@@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkForgotPassword.vue

@@ -47,7 +47,9 @@ import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'done'): void;

packages/frontend/src/components/MkFormDialog.vue

@@ -84,7 +84,9 @@ import XFile from './MkFormDialog.file.vue';
 import type { Form } from '@/scripts/form.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	title: string;

packages/frontend/src/components/MkInstanceCardMini.vue

@@ -20,7 +20,9 @@ import * as Misskey from 'misskey-js';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	instance: Misskey.entities.FederationInstance;

packages/frontend/src/components/MkInstanceTicker.vue

@@ -14,7 +14,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, inject } from 'vue';
 import { instanceName } from '@/config.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	instance?: {

packages/frontend/src/components/MkLink.vue

@@ -21,7 +21,9 @@ import { useTooltip } from '@/scripts/use-tooltip.js';
 import * as os from '@/os.js';
 import { MkABehavior } from '@/components/global/MkA.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	url: string;

packages/frontend/src/components/MkMediaImage.vue

@@ -60,7 +60,9 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { $i, iAmModerator } from '@/account.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = withDefaults(defineProps<{
 	image: Misskey.entities.DriveFile;

packages/frontend/src/components/MkMention.vue

@@ -22,7 +22,9 @@ import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { MkABehavior } from '@/components/global/MkA.vue';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	username: string;

packages/frontend/src/components/MkNote.vue

@@ -202,7 +202,9 @@ import { type Keymap } from '@/scripts/hotkey.js';
 import { focusPrev, focusNext } from '@/scripts/focus.js';
 import { getAppearNote } from '@/scripts/get-appear-note.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;

packages/frontend/src/components/MkNoteDetailed.vue

@@ -238,7 +238,9 @@ import MkButton from '@/components/MkButton.vue';
 import { getAppearNote } from '@/scripts/get-appear-note.js';
 import { type Keymap } from '@/scripts/hotkey.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;

packages/frontend/src/components/MkNotes.vue

@@ -38,7 +38,9 @@ import MkNote from '@/components/MkNote.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	pagination: Paging;

packages/frontend/src/components/MkNotification.vue

@@ -149,7 +149,9 @@ import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { signinRequired } from '@/account.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const $i = signinRequired();
 

packages/frontend/src/components/MkNotifications.vue

@@ -32,6 +32,9 @@ import MkNote from '@/components/MkNote.vue';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { notificationTypes } from '@@/js/const.js';
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { defaultStore } from '@/store.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import * as Misskey from 'misskey-js';

packages/frontend/src/components/MkPagination.vue

@@ -91,7 +91,9 @@ function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): M
 </script>
 <script lang="ts" setup>
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import MkButton from '@/components/MkButton.vue';
 
 const props = withDefaults(defineProps<{

packages/frontend/src/components/MkPostForm.vue

@@ -129,7 +129,9 @@ import { claimAchievement } from '@/scripts/achievements.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const $i = signinRequired();
 

packages/frontend/src/components/MkPushNotificationAllowButton.vue

@@ -48,7 +48,9 @@ import { apiWithDialog, promiseDialog } from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 defineProps<{
 	primary?: boolean;

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -90,7 +90,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	autoSet?: boolean;

packages/frontend/src/components/MkSignupDialog.rules.vue

@@ -70,7 +70,9 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const availableServerRules = serverMetadata.serverRules.length > 0;
 const availableTos = serverMetadata.tosUrl != null && serverMetadata.tosUrl !== '';

packages/frontend/src/components/MkSourceCodeAvailablePopup.vue

@@ -47,7 +47,9 @@ import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 import * as os from '@/os.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;

packages/frontend/src/components/MkTimeline.vue

@@ -28,7 +28,9 @@ import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { Paging } from '@/components/MkPagination.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';

packages/frontend/src/components/MkTutorialDialog.vue

@@ -161,7 +161,9 @@ import { host } from '@@/js/config.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import * as os from '@/os.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	initialPage?: number;

packages/frontend/src/components/MkUserInfo.vue

@@ -44,7 +44,9 @@ import { $i } from '@/account.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 import { defaultStore } from '@/store.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 defineProps<{
 	user: Misskey.entities.UserDetailed;

packages/frontend/src/components/MkUserList.vue

@@ -26,7 +26,9 @@ import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	pagination: Paging;

packages/frontend/src/components/MkUserPopup.vue

@@ -67,9 +67,10 @@ import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { $i } from '@/account.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import { DI } from '@/di.js';
 
-const serverMetadata = inject('serverMetadata');
-const mediaProxy = inject('mediaProxy');
+const serverMetadata = inject(DI.serverMetadata);
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	showing: boolean;

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -141,7 +141,9 @@ import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowB
 import { defaultStore } from '@/store.js';
 import * as os from '@/os.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -66,7 +66,9 @@ import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
 import { openInstanceMenu } from '@/ui/_common_/common.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 

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

@@ -50,7 +50,9 @@ import { defaultStore } from '@/store.js';
 import * as os from '@/os.js';
 import { $i } from '@/account.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 type Ad = (typeof serverMetadata)['ads'][number];
 

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

@@ -49,7 +49,9 @@ import { acct, userPage } from '@/filters/user.js';
 import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const animation = ref(defaultStore.state.animation);
 const squareAvatars = ref(defaultStore.state.squareAvatars);

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

@@ -35,7 +35,9 @@ import * as sound from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
 import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	name: string;

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

@@ -19,7 +19,9 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'retry'): void;

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

@@ -32,7 +32,9 @@ import * as os from '@/os.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { MkABehavior } from '@/components/global/MkA.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 function safeURIDecode(str: string): string {
 	try {

packages/frontend/src/components/page/page.text.vue

@@ -18,7 +18,9 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const MkUrlPreview = defineAsyncComponent(() => import('@/components/MkUrlPreview.vue'));
 

packages/frontend/src/di.ts

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { InjectionKey } from 'vue';
+import * as Misskey from 'misskey-js';
+import { MediaProxy } from '@@/js/media-proxy.js';
+
+export const DI = {
+	serverMetadata: Symbol() as InjectionKey<Misskey.entities.MetaDetailed>,
+	mediaProxy: Symbol() as InjectionKey<MediaProxy>,
+};

packages/frontend/src/pages/_error_.vue

@@ -37,7 +37,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { defaultStore } from '@/store.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	error?: Error;

packages/frontend/src/pages/about-misskey.vue

@@ -145,7 +145,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
 import { $i } from '@/account.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const patronsWithIcon = [{
 	name: 'カイヤン',

packages/frontend/src/pages/about.overview.vue

@@ -139,7 +139,9 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const initStats = () => misskeyApi('stats', {});
 </script>

packages/frontend/src/pages/admin/branding.vue

@@ -119,7 +119,9 @@ import MkButton from '@/components/MkButton.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
 import { host } from '@@/js/config.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const iconUrl = ref<string | null>(null);
 const app192IconUrl = ref<string | null>(null);

packages/frontend/src/pages/admin/index.vue

@@ -42,7 +42,9 @@ import { lookupUser, lookupUserByEmail, lookupFile } from '@/scripts/admin-looku
 import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router/supplier.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const isEmpty = (x: string | null) => x == null || x === '';
 

packages/frontend/src/pages/admin/roles.editor.vue

@@ -611,7 +611,9 @@ import { i18n } from '@/i18n.js';
 import { ROLE_POLICIES } from '@@/js/const.js';
 import { deepClone } from '@/scripts/clone.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', v: any): void;

packages/frontend/src/pages/admin/roles.role.vue

@@ -75,7 +75,9 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { useRouter } from '@/router/supplier.js';
 
 const router = useRouter();

packages/frontend/src/pages/admin/roles.vue

@@ -256,7 +256,9 @@ import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { ROLE_POLICIES } from '@@/js/const.js';
 import { useRouter } from '@/router/supplier.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const router = useRouter();
 const baseRoleQ = ref('');

packages/frontend/src/pages/admin/server-rules.vue

@@ -50,7 +50,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 

packages/frontend/src/pages/admin/settings.vue

@@ -223,7 +223,9 @@ import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSelect from '@/components/MkSelect.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const name = ref<string | null>(null);
 const shortName = ref<string | null>(null);

packages/frontend/src/pages/ads.vue

@@ -20,7 +20,9 @@ import { inject } from 'vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 definePageMetadata(() => ({
 	title: i18n.ts.ads,

packages/frontend/src/pages/contact.vue

@@ -41,7 +41,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 definePageMetadata(() => ({
 	title: i18n.ts.inquiry,

packages/frontend/src/pages/drive.file.info.vue

@@ -83,7 +83,9 @@ import MkMediaList from '@/components/MkMediaList.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import bytes from '@/filters/bytes.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';

packages/frontend/src/pages/favorites.vue

@@ -32,7 +32,9 @@ import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const pagination = {
 	endpoint: 'i/favorites' as const,

packages/frontend/src/pages/follow-requests.vue

@@ -45,7 +45,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
 

packages/frontend/src/pages/instance-info.vue

@@ -155,7 +155,9 @@ import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { dateString } from '@/filters/date.js';
 import MkTextarea from '@/components/MkTextarea.vue';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	host: string;

packages/frontend/src/pages/invite.vue

@@ -47,7 +47,9 @@ import MkInviteCode from '@/components/MkInviteCode.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 const currentInviteLimit = ref<null | number>(null);

packages/frontend/src/pages/list.vue

@@ -44,7 +44,9 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkButton from '@/components/MkButton.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	listId: string;

packages/frontend/src/pages/my-antennas/index.vue

@@ -34,7 +34,9 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { antennasCache } from '@/cache.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const antennas = computed(() => antennasCache.value.value ?? []);
 

packages/frontend/src/pages/my-lists/index.vue

@@ -37,7 +37,9 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { userListsCache } from '@/cache.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { signinRequired } from '@/account.js';
 
 const $i = signinRequired();

packages/frontend/src/pages/not-found.vue

@@ -18,7 +18,9 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	showLoginPopup?: boolean;

packages/frontend/src/pages/page.vue

@@ -121,8 +121,12 @@ import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
 import { useRouter } from '@/router/supplier.js';
 import { MenuItem } from '@/types/menu';
 
-const serverMetadata = inject('serverMetadata');
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const router = useRouter();
 

packages/frontend/src/pages/role.vue

@@ -45,7 +45,9 @@ import { i18n } from '@/i18n.js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { instanceName } from '@@/js/config.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	role: string;

packages/frontend/src/pages/search.note.vue

@@ -67,7 +67,9 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import { $i } from '@/account.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	query?: string;

packages/frontend/src/pages/search.vue

@@ -32,7 +32,9 @@ import { isNotesSearchAvailable } from '@/scripts/check-permissions.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = withDefaults(defineProps<{
 	query?: string,

packages/frontend/src/pages/settings/apps.vue

@@ -53,7 +53,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const list = ref<InstanceType<typeof FormPagination>>();
 

packages/frontend/src/pages/settings/email.vue

@@ -59,7 +59,9 @@ import { signinRequired } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const $i = signinRequired();
 

packages/frontend/src/pages/settings/index.vue

@@ -38,7 +38,9 @@ import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReact
 import * as os from '@/os.js';
 import { useRouter } from '@/router/supplier.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const indexInfo = {
 	title: i18n.ts.settings,

packages/frontend/src/pages/settings/mute-block.vue

@@ -137,7 +137,9 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { signinRequired } from '@/account.js';
 import MkFolder from '@/components/MkFolder.vue';
 

packages/frontend/src/pages/settings/theme.vue

@@ -90,7 +90,9 @@ import { miLocalStorage } from '@/local-storage.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import * as os from '@/os.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({

packages/frontend/src/pages/timeline.vue

@@ -57,7 +57,9 @@ import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBa
 
 provide('shouldOmitHeaderTitle', true);
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();

packages/frontend/src/pages/user/home.vue

@@ -175,8 +175,10 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 import { useRouter } from '@/router/supplier.js';
 
-const serverMetadata = inject('serverMetadata');
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
+const mediaProxy = inject(DI.mediaProxy);
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);

packages/frontend/src/pages/user/index.files.vue

@@ -42,7 +42,9 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -45,8 +45,10 @@ import misskeysvg from '/client-assets/misskey.svg';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
 
-const serverMetadata = inject('serverMetadata');
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
+const mediaProxy = inject(DI.mediaProxy);
 
 const instances = ref<Misskey.entities.FederationInstance[]>();
 

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -57,7 +57,9 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {

packages/frontend/src/ui/_common_/navbar.vue

@@ -68,7 +68,9 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const iconOnly = ref(false);
 

packages/frontend/src/ui/_common_/statusbar-federation.vue

@@ -37,7 +37,9 @@ import { useInterval } from '@@/js/use-interval.js';
 import MarqueeText from '@/components/MkMarquee.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const props = defineProps<{
 	display?: 'marquee' | 'oneByOne';

packages/frontend/src/ui/classic.header.vue

@@ -56,7 +56,9 @@ import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const WINDOW_THRESHOLD = 1400;
 

packages/frontend/src/ui/classic.sidebar.vue

@@ -62,7 +62,9 @@ import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const WINDOW_THRESHOLD = 1400;
 

packages/frontend/src/ui/deck/tl-column.vue

@@ -43,7 +43,9 @@ import { SoundStore } from '@/store.js';
 import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
 import * as sound from '@/scripts/sound.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const props = defineProps<{
 	column: Column;

packages/frontend/src/ui/visitor.vue

@@ -81,7 +81,9 @@ import { i18n } from '@/i18n.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
 import { mainRouter } from '@/router/main.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 

packages/frontend/src/widgets/WidgetBirthdayFollowings.vue

@@ -32,7 +32,9 @@ import MkContainer from '@/components/MkContainer.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 import { $i } from '@/account.js';
 
 const name = i18n.ts._widgets.birthdayFollowings;

packages/frontend/src/widgets/WidgetFederation.vue

@@ -56,7 +56,9 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const instances = ref<Misskey.entities.FederationInstance[]>([]);
 const charts = ref<Misskey.entities.ChartsInstanceResponse[]>([]);

packages/frontend/src/widgets/WidgetInstanceCloud.vue

@@ -48,7 +48,9 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const cloud = shallowRef<InstanceType<typeof MkTagCloud> | null>();
 const activeInstances = shallowRef<Misskey.entities.FederationInstance[] | null>(null);

packages/frontend/src/widgets/WidgetInstanceInfo.vue

@@ -25,7 +25,9 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import { host } from '@@/js/config.js';
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const name = 'instanceInfo';
 

packages/frontend/src/widgets/WidgetPhotos.vue

@@ -56,7 +56,9 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const mediaProxy = inject('mediaProxy');
+import { DI } from '@/di.js';
+
+const mediaProxy = inject(DI.mediaProxy);
 
 const connection = useStream().useChannel('main');
 const images = ref<Misskey.entities.DriveFile[]>([]);

packages/frontend/src/widgets/WidgetRss.vue

@@ -32,7 +32,9 @@ import { url as base } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@@/js/use-interval.js';
 import { inject } from 'vue';
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const name = 'rss';
 

packages/frontend/src/widgets/WidgetTimeline.vue

@@ -80,7 +80,9 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const serverMetadata = inject('serverMetadata');
+import { DI } from '@/di.js';
+
+const serverMetadata = inject(DI.serverMetadata);
 
 const menuOpened = ref(false);