chore: use latest i18n v9 (#3059)

Author: shuuji3

CONTRIBUTING.md

@@ -90,7 +90,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
 
 ## Internationalization
 
-We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
+We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
 
 You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption.
 

config/i18n.ts

@@ -75,11 +75,13 @@ export const countryLocaleVariants: Record<string, (LocaleObjectData & { country
 
 const locales: LocaleObjectData[] = [
   {
+    // @ts-expect-error en used as placeholder
     code: 'en',
     file: 'en.json',
     name: 'English',
   },
   ({
+    // @ts-expect-error ar used as placeholder
     code: 'ar',
     file: 'ar.json',
     name: 'العربية',
@@ -110,6 +112,7 @@ const locales: LocaleObjectData[] = [
     },
   } satisfies LocaleObjectData),
   {
+    // @ts-expect-error ca used as placeholder
     code: 'ca',
     file: 'ca.json',
     name: 'Català',
@@ -150,6 +153,7 @@ const locales: LocaleObjectData[] = [
     name: 'Nederlands',
   },
   {
+    // @ts-expect-error es used as placeholder
     code: 'es',
     file: 'es.json',
     name: 'Español',
@@ -203,6 +207,7 @@ const locales: LocaleObjectData[] = [
     },
   },
   {
+    // @ts-expect-error pt used as placeholder
     code: 'pt',
     file: 'pt.json',
     name: 'Português',

netlify.toml

@@ -2,6 +2,9 @@
 publish = "dist"
 command = "pnpm run build"
 
+[build.environment]
+NODE_OPTIONS = '--max-old-space-size=4096'
+
 # Redirect to Discord server
 [[redirects]]
 from = "https://chat.elk.zone"

nuxt.config.ts

@@ -311,8 +311,12 @@ export default defineNuxtConfig({
     lazy: true,
     strategy: 'no_prefix',
     detectBrowserLanguage: false,
-    langDir: 'locales',
+    // relative to i18n dir on rootDir: not yet v4 compat layout
+    langDir: '../locales',
     defaultLocale: 'en-US',
+    experimental: {
+      generatedLocaleFilePathFormat: 'relative',
+    },
     vueI18n: './config/i18n.config.ts',
   },
   pwa,

package.json

@@ -40,7 +40,7 @@
     "@nuxt/devtools": "^1.5.2",
     "@nuxt/test-utils": "^3.14.3",
     "@nuxtjs/color-mode": "^3.4.4",
-    "@nuxtjs/i18n": "^8.5.3",
+    "@nuxtjs/i18n": "^9.1.0",
     "@pinia/nuxt": "^0.5.4",
     "@tiptap/core": "2.2.4",
     "@tiptap/extension-bold": "2.2.4",
@@ -146,9 +146,8 @@
   "pnpm": {
     "patchedDependencies": {
       "pinceau": "patches/pinceau.patch",
-      "vue-i18n": "patches/vue-i18n.patch",
       "nuxt-security": "patches/nuxt-security.patch",
-      "nuxt": "patches/nuxt.patch"
+      "@nuxtjs/[email protected]": "patches/@[email protected].patch"
     }
   },
   "resolutions": {

patches/@[email protected]

@@ -0,0 +1,13 @@
+diff --git a/dist/module.mjs b/dist/module.mjs
+index b6def32f8bde5516e6ee0a25f153b01803f55683..897b44120533fdb74b33d9d4dff1d21b910073ca 100644
+--- a/dist/module.mjs
++++ b/dist/module.mjs
+@@ -1462,7 +1462,7 @@ async function extendBundler({ options: nuxtOptions }, nuxt) {
+     fullInstall: nuxtOptions.bundle.fullInstall,
+     onlyLocales: nuxtOptions.bundle.onlyLocales,
+     dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
+-    optimizeTranslationDirective: true,
++    optimizeTranslationDirective: false,
+     strictMessage: nuxtOptions.compilation.strictMessage,
+     escapeHtml: nuxtOptions.compilation.escapeHtml,
+     defaultSFCLang: nuxtOptions.customBlocks.defaultSFCLang,

patches/nuxt.patch

@@ -1,3 +1,5 @@
+import type { Locale } from '#i18n'
+
 export default defineNuxtPlugin(async (nuxt) => {
   const t = nuxt.vueApp.config.globalProperties.$t
   const d = nuxt.vueApp.config.globalProperties.$d
@@ -11,14 +13,14 @@ export default defineNuxtPlugin(async (nuxt) => {
     const i18n = useNuxtApp().$i18n
     const { setLocale, locales } = i18n
     const userSettings = useUserSettings()
-    const lang = computed(() => userSettings.value.language)
+    const lang = computed(() => userSettings.value.language as Locale)
 
     const supportLanguages = unref(locales).map(locale => locale.code)
     if (!supportLanguages.includes(lang.value))
       userSettings.value.language = getDefaultLanguage(supportLanguages)
 
     if (lang.value !== i18n.locale)
-      await setLocale(userSettings.value.language)
+      await setLocale(userSettings.value.language as Locale)
 
     watch([lang, isHydrated], () => {
       if (isHydrated.value && lang.value !== i18n.locale)