From 7a8a7567894c9635bda1355763f69ae3853721b7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 1 Apr 2023 13:46:04 +0900
Subject: [PATCH] refactor(frontend): remove $instance

---
 packages/frontend/@types/vue.d.ts               |  2 --
 packages/frontend/src/components/MkDonation.vue |  3 ++-
 packages/frontend/src/init.ts                   |  1 -
 packages/frontend/src/pages/about.vue           | 17 +++++++++--------
 packages/frontend/src/pages/admin/index.vue     |  4 ++--
 .../frontend/src/pages/welcome.entrance.a.vue   |  2 +-
 .../src/ui/_common_/navbar-for-mobile.vue       |  5 +++--
 packages/frontend/src/ui/_common_/navbar.vue    |  7 ++++---
 packages/frontend/src/ui/classic.header.vue     |  4 +++-
 packages/frontend/src/ui/classic.sidebar.vue    |  4 +++-
 packages/frontend/src/ui/visitor/a.vue          |  6 ++++--
 packages/frontend/src/ui/visitor/kanban.vue     |  4 +++-
 .../frontend/src/widgets/WidgetInstanceInfo.vue |  7 ++++---
 13 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/packages/frontend/@types/vue.d.ts b/packages/frontend/@types/vue.d.ts
index 661f45570..13544a2f5 100644
--- a/packages/frontend/@types/vue.d.ts
+++ b/packages/frontend/@types/vue.d.ts
@@ -1,14 +1,12 @@
 /// <reference types="vue/macros-global" />
 
 import type { $i } from '@/account';
-import type { defaultStore } from '@/store';
 import type { instance } from '@/instance';
 import type { i18n } from '@/i18n';
 
 declare module 'vue' {
 	interface ComponentCustomProperties {
 		$i: typeof $i;
-		$instance: typeof instance;
 		$t: typeof i18n['t'];
 		$ts: typeof i18n['ts'];
 	}
diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue
index 9baa90ebf..b5ae4c6c4 100644
--- a/packages/frontend/src/components/MkDonation.vue
+++ b/packages/frontend/src/components/MkDonation.vue
@@ -14,7 +14,7 @@
 		<div :class="$style.text">
 			<I18n :src="i18n.ts.pleaseDonate" tag="span">
 				<template #host>
-					{{ $instance.name ?? host }}
+					{{ instance.name ?? host }}
 				</template>
 			</I18n>
 			<div style="margin-top: 0.2em;">
@@ -37,6 +37,7 @@ import { host } from '@/config';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { miLocalStorage } from '@/local-storage';
+import { instance } from '@/instance';
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;
diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
index 075a69dcd..87ba06d17 100644
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -201,7 +201,6 @@ if (_DEV_) {
 // TODO: 廃止
 app.config.globalProperties = {
 	$i,
-	$instance: instance,
 	$t: i18n.t,
 	$ts: i18n.ts,
 };
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index be0c1828a..d54d93eae 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -3,18 +3,18 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
 		<div class="_gaps_m">
-			<div class="fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+			<div class="fwhjspax" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 				<div class="content">
-					<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
+					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
 					<div class="name">
-						<b>{{ $instance.name ?? host }}</b>
+						<b>{{ instance.name ?? host }}</b>
 					</div>
 				</div>
 			</div>
 
 			<MkKeyValue>
 				<template #key>{{ i18n.ts.description }}</template>
-				<template #value><div v-html="$instance.description"></div></template>
+				<template #value><div v-html="instance.description"></div></template>
 			</MkKeyValue>
 
 			<FormSection>
@@ -23,7 +23,7 @@
 						<template #key>Misskey</template>
 						<template #value>{{ version }}</template>
 					</MkKeyValue>
-					<div v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
+					<div v-html="i18n.t('poweredByMisskeyDescription', { name: instance.name ?? host })">
 					</div>
 					<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
 				</div>
@@ -34,14 +34,14 @@
 					<FormSplit>
 						<MkKeyValue>
 							<template #key>{{ i18n.ts.administrator }}</template>
-							<template #value>{{ $instance.maintainerName }}</template>
+							<template #value>{{ instance.maintainerName }}</template>
 						</MkKeyValue>
 						<MkKeyValue>
 							<template #key>{{ i18n.ts.contact }}</template>
-							<template #value>{{ $instance.maintainerEmail }}</template>
+							<template #value>{{ instance.maintainerEmail }}</template>
 						</MkKeyValue>
 					</FormSplit>
-					<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ i18n.ts.tos }}</FormLink>
+					<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.tos }}</FormLink>
 				</div>
 			</FormSection>
 
@@ -101,6 +101,7 @@ import number from '@/filters/number';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { claimAchievement } from '@/scripts/achievements';
+import { instance } from '@/instance';
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 8aae39cba..963393d7e 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -4,7 +4,7 @@
 		<MkSpacer :content-max="700" :margin-min="16">
 			<div class="lxpfedzu">
 				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+					<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 				</div>
 
 				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
@@ -221,7 +221,7 @@ onUnmounted(() => {
 });
 
 watch(router.currentRef, (to) => {
-	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
+	if (to.route.path === '/admin' && to.child?.route.name == null && !narrow) {
 		router.replace('/admin/overview');
 	}
 });
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index b6f9b3eb2..4d8d76db1 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -14,7 +14,7 @@
 	</div>
 	<div class="contents">
 		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 			<div class="fg">
 				<h1>
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 935aceea7..866b898f7 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -2,9 +2,9 @@
 <div class="kmwsukvl">
 	<div class="body">
 		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<div class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button>
 		</div>
 		<div class="middle">
@@ -50,6 +50,7 @@ import { navbarItemDef } from '@/navbar';
 import { openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 3c161f679..3b4b16142 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -2,9 +2,9 @@
 <div class="mvcprjjd" :class="{ iconOnly }">
 	<div class="body">
 		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<div class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<button v-click-anime v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button>
 		</div>
 		<div class="middle">
@@ -60,6 +60,7 @@ import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
 const iconOnly = ref(false);
 
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 6d331ceb3..a0255d1bc 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<div class="left">
 			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+				<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
 			</button>
 			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="ti ti-home ti-fw"></i>
@@ -51,6 +51,7 @@ import { openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
 import { mainRouter } from '@/router';
 import { defaultStore } from '@/store';
+import { instance } from '@/instance';
 
 export default defineComponent({
 	components: {
@@ -65,6 +66,7 @@ export default defineComponent({
 			navbarItemDef: navbarItemDef,
 			settingsWindowed: false,
 			defaultStore,
+			instance,
 		};
 	},
 
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 30ec0dc29..14a81448f 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -33,7 +33,7 @@
 	<div class="divider"></div>
 	<div class="about">
 		<button v-click-anime class="item _button" @click="openInstanceMenu">
-			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
 		</button>
 	</div>
 	<!--<MisskeyLogo class="misskey"/>-->
@@ -52,6 +52,7 @@ import { StickySidebar } from '@/scripts/sticky-sidebar';
 import { mainRouter } from '@/router';
 //import MisskeyLogo from '@assets/client/misskey.svg';
 import { defaultStore } from '@/store';
+import { instance } from '@/instance';
 
 export default defineComponent({
 	components: {
@@ -68,6 +69,7 @@ export default defineComponent({
 			iconOnly: false,
 			settingsWindowed: false,
 			defaultStore,
+			instance,
 		};
 	},
 
diff --git a/packages/frontend/src/ui/visitor/a.vue b/packages/frontend/src/ui/visitor/a.vue
index 272e03da6..1ac5decf4 100644
--- a/packages/frontend/src/ui/visitor/a.vue
+++ b/packages/frontend/src/ui/visitor/a.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div>
 			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 			<div v-if="meta" class="about">
@@ -13,7 +13,7 @@
 			</div>
 		</div>
 	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div>
 			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 		</div>
@@ -44,6 +44,7 @@ import * as os from '@/os';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore, ColdDeviceStorage } from '@/store';
 import { mainRouter } from '@/router';
+import { instance } from '@/instance';
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -67,6 +68,7 @@ export default defineComponent({
 			mainRouter,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			defaultStore,
+			instance,
 		};
 	},
 
diff --git a/packages/frontend/src/ui/visitor/kanban.vue b/packages/frontend/src/ui/visitor/kanban.vue
index 05ded834e..25d925e67 100644
--- a/packages/frontend/src/ui/visitor/kanban.vue
+++ b/packages/frontend/src/ui/visitor/kanban.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
+<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ instance.backgroundImageUrl })` }">
 	<div class="back" :class="{ transparent }"></div>
 	<div class="contents">
 		<div class="wrapper">
@@ -45,6 +45,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
+import { instance } from '@/instance';
 
 export default defineComponent({
 	components: {
@@ -81,6 +82,7 @@ export default defineComponent({
 				endpoint: 'announcements',
 				limit: 10,
 			},
+			instance,
 		};
 	},
 
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 3a3b071b7..d702fd2cb 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="_panel">
-	<div :class="$style.container" :style="{ backgroundImage: $instance.bannerUrl ? `url(${ $instance.bannerUrl })` : null }">
+	<div :class="$style.container" :style="{ backgroundImage: instance.bannerUrl ? `url(${ instance.bannerUrl })` : null }">
 		<div :class="$style.iconContainer">
-			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
+			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
 		</div>
 		<div :class="$style.bodyContainer">
 			<div :class="$style.body">
-				<MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA>
+				<MkA :class="$style.name" to="/about" behavior="window">{{ instance.name }}</MkA>
 				<div :class="$style.host">{{ host }}</div>
 			</div>
 		</div>
@@ -18,6 +18,7 @@
 import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import { host } from '@/config';
+import { instance } from '@/instance';
 
 const name = 'instanceInfo';