翻訳ファイルをランタイムで読み込み

src/client/.eslintrc

@@ -1,9 +1,7 @@
 {
 	"globals": {
 		"_DEV_": false,
-		"_LANG_": false,
 		"_LANGS_": false,
-		"_LOCALE_": false,
 		"_VERSION_": false,
 		"_ENV_": false,
 		"_PERF_PREFIX_": false,

src/client/@types/global.d.ts

@@ -1,6 +1,4 @@
-declare const _LANG_: string;
 declare const _LANGS_: string[][];
-declare const _LOCALE_: Record<string, any>;
 declare const _VERSION_: string;
 declare const _ENV_: string;
 declare const _DEV_: boolean;

src/client/config.ts

@@ -6,9 +6,9 @@ export const hostname = address.hostname;
 export const url = address.origin;
 export const apiUrl = url + '/api';
 export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
-export const lang = _LANG_;
+export const lang = localStorage.getItem('lang');
 export const langs = _LANGS_;
-export const locale = _LOCALE_; // TODO: code splittingするため、翻訳ファイルを分割したうえでwebpackのimport alias使って読み込むようにしたい
+export const locale = JSON.parse(localStorage.getItem('locale'));
 export const version = _VERSION_;
 export const instanceName = siteName === 'Misskey' ? host : siteName;
 export const ui = localStorage.getItem('ui');

src/server/web/boot.js

@@ -1,7 +1,8 @@
 /**
  * BOOT LOADER
  * サーバーからレスポンスされるHTMLに埋め込まれるスクリプトで、以下の役割を持ちます。
- * - バージョンやユーザーの言語に基づいて適切なメインスクリプトを読み込む。
+ * - 翻訳ファイルをフェッチする。
+ * - バージョンに基づいて適切なメインスクリプトを読み込む。
  * - キャッシュされたコンパイル済みテーマを適用する。
  * - クライアントの設定値に基づいて対応するHTMLクラス等を設定する。
  * テーマをこの段階で設定するのは、メインスクリプトが読み込まれる間もテーマを適用したいためです。
@@ -10,27 +11,34 @@
 
 'use strict';
 
-// ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔
-{
-	//#region Script
+// ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
+(async () => {
+	const v = localStorage.getItem('v') || VERSION;
 
-	//#region Detect language
-	const supportedLangs = LANGS;
-	let lang = localStorage.getItem('lang');
-	if (lang == null || !supportedLangs.includes(lang)) {
-		if (supportedLangs.includes(navigator.language)) {
-			lang = navigator.language;
-		} else {
-			lang = supportedLangs.find(x => x.split('-')[0] === navigator.language);
+	//#region Detect language & fetch translations
+	if (localStorage.hasOwnProperty('locale')) {
+		// TODO: 非同期でlocaleの更新処理をする
+	} else {
+		const supportedLangs = LANGS;
+		let lang = localStorage.getItem('lang');
+		if (lang == null || !supportedLangs.includes(lang)) {
+			if (supportedLangs.includes(navigator.language)) {
+				lang = navigator.language;
+			} else {
+				lang = supportedLangs.find(x => x.split('-')[0] === navigator.language);
 
-			// Fallback
-			if (lang == null) lang = 'en-US';
+				// Fallback
+				if (lang == null) lang = 'en-US';
+			}
 		}
+
+		const res = await fetch(`/assets/locales/${lang}.${v}.json`);
+		const json = await res.json();
+		localStorage.setItem('locale', JSON.stringify(json));
 	}
 	//#endregion
 
-	const ver = localStorage.getItem('v') || VERSION;
-
+	//#region Script
 	const salt = localStorage.getItem('salt')
 		? `?salt=${localStorage.getItem('salt')}`
 		: '';
@@ -38,7 +46,7 @@
 	const head = document.getElementsByTagName('head')[0];
 
 	const script = document.createElement('script');
-	script.setAttribute('src', `/assets/app.${ver}.${lang}.js${salt}`);
+	script.setAttribute('src', `/assets/app.${v}.js${salt}`);
 	script.setAttribute('async', 'true');
 	script.setAttribute('defer', 'true');
 	head.appendChild(script);
@@ -56,7 +64,7 @@
 
 		const meta = await res.json();
 
-		if (meta.version != ver) {
+		if (meta.version != v) {
 			localStorage.setItem('v', meta.version);
 			alert(
 				'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +
@@ -113,4 +121,4 @@
 
 		location.reload();
 	}
-}
+})();