chore(frontend): 開発モード時に言語ファイルの変更を自動で反映するように (#16215)

* chore(frontend): 開発モード時に言語ファイルの変更を自動で反映するように

* fix message

* naming

* SPDX

1 files changed, 21 insertions, 2 deletions

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index c8098b6cf8..992bde9bd1 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -81,8 +81,10 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	//#region Detect language & fetch translations
 	const localeVersion = miLocalStorage.getItem('localeVersion');
 	const localeOutdated = (localeVersion == null || localeVersion !== version || locale == null);
-	if (localeOutdated) {
-		const res = await window.fetch(`/assets/locales/${lang}.${version}.json`);
+
+	async function fetchAndUpdateLocale({ useCache } = { useCache: true }) {
+		const fetchOptions: RequestInit | undefined = useCache ? undefined : { cache: 'no-store' };
+		const res = await window.fetch(`/assets/locales/${lang}.${version}.json`, fetchOptions);
 		if (res.status === 200) {
 			const newLocale = await res.text();
 			const parsedNewLocale = JSON.parse(newLocale);
@@ -92,6 +94,23 @@ export async function common(createVue: () => Promise<App<Element>>) {
 			updateI18n(parsedNewLocale);
 		}
 	}
+
+	if (localeOutdated) {
+		fetchAndUpdateLocale();
+	}
+
+	if (import.meta.hot) {
+		import.meta.hot.on('locale-update', async (updatedLang: string) => {
+			console.info(`Locale updated: ${updatedLang}`);
+			if (updatedLang === lang) {
+				await new Promise(resolve => {
+					window.setTimeout(resolve, 500);
+				});
+				await fetchAndUpdateLocale({ useCache: false });
+				window.location.reload();
+			}
+		});
+	}
 	//#endregion
 
 	// タッチデバイスでCSSの:hoverを機能させる