refactor: localesをworkspace管理下のパッケージに (#16895)

* refactor: localesをworkspace管理下のパッケージに

* fix copilot review

* move

* move

* rename

* fix ci

* revert unwanted indent changes

* fix

* fix

* fix

* fix

* 間違えてコミットしていたのを戻す

* 不要

* 追加漏れ

* ymlの場所だけ戻す

* localesの位置を戻したのでこの差分は不要

* 内容的にlocalesにある方が正しい

* i18nパッケージ用のREADME.mdを用意

* fix locale.yml

* fix locale.yml

---------

Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>

packages/frontend/.storybook/preload-locale.ts

@@ -4,7 +4,7 @@
  */
 
 import { writeFile } from 'node:fs/promises';
-import locales from '../../../locales/index.js';
+import locales from 'i18n';
 
 await writeFile(
 	new URL('locale.ts', import.meta.url),

packages/frontend/build.ts

@@ -2,7 +2,7 @@ import * as fs from 'fs/promises';
 import url from 'node:url';
 import path from 'node:path';
 import { execa } from 'execa';
-import locales from '../../locales/index.js';
+import locales from 'i18n';
 import { LocaleInliner } from '../frontend-builder/locale-inliner.js'
 import { createLogger } from '../frontend-builder/logger';
 

packages/frontend/lib/vite-plugin-watch-locales.ts

@@ -4,7 +4,7 @@
  */
 
 import path from 'node:path'
-import locales from '../../../locales/index.js';
+import locales from 'i18n';
 
 const localesDir = path.resolve(__dirname, '../../../locales')
 
@@ -13,14 +13,14 @@ const localesDir = path.resolve(__dirname, '../../../locales')
  * @returns {import('vite').Plugin}
  */
 export default function pluginWatchLocales() {
-  return {
-    name: 'watch-locales',
+	return {
+		name: 'watch-locales',
 
-    configureServer(server) {
-      const localeYmlPaths = Object.keys(locales).map(locale => path.join(localesDir, `${locale}.yml`));
+		configureServer(server) {
+			const localeYmlPaths = Object.keys(locales).map(locale => path.join(localesDir, `${locale}.yml`));
 
-      // watcherにパスを追加
-      server.watcher.add(localeYmlPaths);
+			// watcherにパスを追加
+			server.watcher.add(localeYmlPaths);
 
 			server.watcher.on('change', (filePath) => {
 				if (localeYmlPaths.includes(filePath)) {
@@ -31,6 +31,6 @@ export default function pluginWatchLocales() {
 					})
 				}
 			});
-    },
-  };
+		},
+	};
 }

packages/frontend/package.json

@@ -20,6 +20,7 @@
 		"@discordapp/twemoji": "16.0.1",
 		"@github/webauthn-json": "2.1.1",
 		"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+		"i18n": "workspace:*",
 		"@misskey-dev/browser-image-resizer": "2024.1.0",
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-replace": "6.0.3",

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

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts" generic="T extends string | ParameterizedString">
 import { computed, h } from 'vue';
-import type { ParameterizedString } from '../../../../../locales/index.js';
+import type { ParameterizedString } from 'i18n';
 
 const props = withDefaults(defineProps<{
 	src: T;
@@ -25,7 +25,7 @@ const slots = defineSlots<T extends ParameterizedString<infer R> ? { [K in R]: (
 const parsed = computed(() => {
 	let str = props.src as string;
 	const value: (string | { arg: string; })[] = [];
-	for (;;) {
+	for (; ;) {
 		const nextBracketOpen = str.indexOf('{');
 		const nextBracketClose = str.indexOf('}');
 

packages/frontend/src/i18n.ts

@@ -6,7 +6,7 @@
 import { markRaw } from 'vue';
 import { I18n } from '@@/js/i18n.js';
 import { locale } from '@@/js/locale.js';
-import type { Locale } from '../../../locales/index.js';
+import type { Locale } from 'i18n';
 
 export const i18n = markRaw(new I18n<Locale>(locale, _DEV_));
 

packages/frontend/test/i18n.test.ts

@@ -5,7 +5,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { I18n } from '../../frontend-shared/js/i18n.js'; // @@で参照できなかったので
-import type { ParameterizedString } from '../../../locales/index.js';
+import type { ParameterizedString } from 'i18n';
 
 // TODO: このテストはfrontend-sharedに移動する
 

packages/frontend/test/init.ts

@@ -7,13 +7,13 @@ import { vi } from 'vitest';
 import createFetchMock from 'vitest-fetch-mock';
 import type { Ref } from 'vue';
 import { ref } from 'vue';
+// Set i18n
+import locales from 'i18n';
+import { updateI18n } from '@/i18n.js';
 
 const fetchMocker = createFetchMock(vi);
 fetchMocker.enableMocks();
 
-// Set i18n
-import locales from '../../../locales/index.js';
-import { updateI18n } from '@/i18n.js';
 updateI18n(locales['en-US']);
 
 // XXX: misskey-js panics if WebSocket is not defined

packages/frontend/vite.config.ts

@@ -2,18 +2,18 @@ import path from 'path';
 import pluginReplace from '@rollup/plugin-replace';
 import pluginVue from '@vitejs/plugin-vue';
 import pluginGlsl from 'vite-plugin-glsl';
-import { defineConfig } from 'vite';
 import type { UserConfig } from 'vite';
+import { defineConfig } from 'vite';
 import * as yaml from 'js-yaml';
 import { promises as fsp } from 'fs';
 
-import locales from '../../locales/index.js';
+import locales from 'i18n';
 import meta from '../../package.json';
 import packageInfo from './package.json' with { type: 'json' };
 import pluginUnwindCssModuleClassName from './lib/rollup-plugin-unwind-css-module-class-name.js';
 import pluginJson5 from './vite.json5.js';
-import pluginCreateSearchIndex from './lib/vite-plugin-create-search-index.js';
 import type { Options as SearchIndexOptions } from './lib/vite-plugin-create-search-index.js';
+import pluginCreateSearchIndex from './lib/vite-plugin-create-search-index.js';
 import pluginWatchLocales from './lib/vite-plugin-watch-locales.js';
 import { pluginRemoveUnrefI18n } from '../frontend-builder/rollup-plugin-remove-unref-i18n.js';