feat: bundled locale

packages/frontend/.storybook/preview.ts

@@ -55,7 +55,6 @@ function initLocalStorage() {
 		...userDetailed(),
 		policies: {},
 	}));
-	localStorage.setItem('locale', JSON.stringify(locale));
 }
 
 initialize({
@@ -70,13 +69,17 @@ queueMicrotask(() => {
 		import('../src/theme.js'),
 		import('../src/preferences.js'),
 		import('../src/os.js'),
-	]).then(([{ default: components }, { default: directives }, { default: widgets }, { applyTheme }, { prefer }, os]) => {
+		import('../src/i18n.js'),
+		import('../../frontend-shared/js/config.js'),
+	]).then(([{ default: components }, { default: directives }, { default: widgets }, { applyTheme }, { prefer }, os, { updateI18n }, { updateLocale }]) => {
 		setup((app) => {
 			moduleInitialized = true;
 			if (app[appInitialized]) {
 				return;
 			}
 			app[appInitialized] = true;
+			updateLocale(locale);
+			updateI18n(locale);
 			loadTheme(applyTheme);
 			components(app);
 			directives(app);

packages/frontend/src/boot/common.ts

@@ -78,22 +78,6 @@ export async function common(createVue: () => App<Element>) {
 	}
 	//#endregion
 
-	//#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`);
-		if (res.status === 200) {
-			const newLocale = await res.text();
-			const parsedNewLocale = JSON.parse(newLocale);
-			miLocalStorage.setItem('locale', newLocale);
-			miLocalStorage.setItem('localeVersion', version);
-			updateLocale(parsedNewLocale);
-			updateI18n(parsedNewLocale);
-		}
-	}
-	//#endregion
-
 	// タッチデバイスでCSSの:hoverを機能させる
 	window.document.addEventListener('touchend', () => {}, { passive: true });
 

packages/frontend/src/local-storage.ts

@@ -23,8 +23,8 @@ export type Keys = (
 	'fontSize' |
 	'ui' |
 	'ui_temp' |
-	'locale' |
-	'localeVersion' |
+	'locale' | // DEPRECATED
+	'localeVersion' | // DEPRECATED
 	'theme' |
 	'themeId' |
 	'customCss' |

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

@@ -606,8 +606,6 @@ const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies');
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
-	miLocalStorage.removeItem('locale');
-	miLocalStorage.removeItem('localeVersion');
 });
 
 watch([

packages/frontend/src/utility/clear-cache.ts

@@ -13,8 +13,10 @@ export async function clearCache() {
 	os.waiting();
 	miLocalStorage.removeItem('instance');
 	miLocalStorage.removeItem('instanceCachedAt');
+	//#region deprecated
 	miLocalStorage.removeItem('locale');
 	miLocalStorage.removeItem('localeVersion');
+	//#endregion
 	miLocalStorage.removeItem('theme');
 	miLocalStorage.removeItem('emojis');
 	miLocalStorage.removeItem('lastEmojisFetchedAt');

packages/frontend/vite.config.ts

@@ -99,6 +99,30 @@ export function getConfig(): UserConfig {
 			pluginVue(),
 			pluginUnwindCssModuleClassName(),
 			pluginJson5(),
+			{
+				name: 'misskey:locale',
+				load: {
+					async handler(id) {
+						if (id.startsWith('locale:')) {
+							const locale = id.slice('locale:'.length);
+							return `
+								import { updateLocale } from '@@/js/config.js';
+								updateLocale(JSON.parse(${JSON.stringify(JSON.stringify(locales[locale]))}));
+							`;
+						}
+					},
+				},
+				resolveId: {
+					async handler(source, importer, options) {
+						if (source.startsWith('locale:')) {
+							return source;
+						}
+						if (importer === path.resolve(__dirname, 'index.html') && source.startsWith('/locale:')) {
+							return source.slice(1);
+						}
+					},
+				},
+			},
 			...process.env.NODE_ENV === 'production'
 				? [
 					pluginReplace({
@@ -162,9 +186,7 @@ export function getConfig(): UserConfig {
 			],
 			manifest: 'manifest.json',
 			rollupOptions: {
-				input: {
-					app: './src/_boot_.ts',
-				},
+				input: ['@/_boot_.ts', '@@/js/config.ts', ...Object.keys(locales).map(locale => `locale:${locale}`)],
 				external: externalPackages.map(p => p.match),
 				output: {
 					manualChunks: {