fix: dev mode with i18n virtual modules

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

frontend/vite.config.ts

@@ -10,7 +10,7 @@ import UnoCSS from 'unocss/vite';
 import VueRouter from 'unplugin-vue-router/vite';
 import { defineConfig } from 'vite';
 import { JBundle, JMonorepo } from '@jellyfin-vue/vite-plugins';
-import { Ji18n } from '@jellyfin-vue/i18n/vite';
+import { genVirtualModules } from '@jellyfin-vue/i18n/vite';
 import { JellyfinVueUIToolkit } from '@jellyfin-vue/ui-toolkit/resolver';
 import virtualModules from './scripts/virtual-modules';
 
@@ -18,14 +18,16 @@ export default defineConfig({
   appType: 'spa',
   base: './',
   plugins: [
-    await Ji18n(),
     ...JBundle,
     JMonorepo(import.meta.dirname, {
       splashscreen: {
         'fetch-priority': 'high'
       }
     }),
-    Virtual(virtualModules),
+    Virtual({
+      ...(await genVirtualModules()),
+      ...virtualModules
+    }),
     VueRouter({
       dts: resolve(import.meta.dirname, 'types/global/routes.d.ts'),
       importMode: 'sync',

package-lock.json

@@ -1667,7 +1667,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz",
       "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -12834,15 +12834,9 @@
         "knitwork": "1.2.0"
       },
       "peerDependencies": {
-        "@rollup/plugin-virtual": "*",
         "date-fns": "*",
         "i18next": "*",
         "vuetify": "*"
-      },
-      "peerDependenciesMeta": {
-        "@rollup/plugin-virtual": {
-          "optional": true
-        }
       }
     },
     "packages/shared": {

packages/i18n/package.json

@@ -18,14 +18,8 @@
     "knitwork": "1.2.0"
   },
   "peerDependencies": {
-    "@rollup/plugin-virtual": "*",
     "date-fns": "*",
     "i18next": "*",
     "vuetify": "*"
-  }, 
-  "peerDependenciesMeta": {
-    "@rollup/plugin-virtual": {
-      "optional": true
-    }
   }
 }

packages/i18n/src/vite.ts

@@ -74,7 +74,7 @@ async function getVuetifyLocales(localeNames: string[]) {
 }
 
 /**
- * This plugin allows us to:
+ * Using virtual modules allows us to:
  * - Import JSON files from the strings folder
  * - Match our locales to the date-fns and Vuetify ones.
  * In order to reduce bundle size, we calculate here (at build time) only the locales that we
@@ -83,7 +83,7 @@ async function getVuetifyLocales(localeNames: string[]) {
  * We expose them later as `virtual:i18next/resources`, `virtual:date-fns/locales`
  * and `virtual:vuetify/locales` using `@rollup/plugin-virtual`
  */
-export async function Ji18n(): Promise<Plugin> {
+export async function genVirtualModules(): Promise<Record<string, string>> {
   const i18next_prefix = 'virtual:i18next/resources';
   const localeFiles = await readdir(localeFilesFolder);
   const localeNames = localeFiles.map(l => l.replace('.json', ''));
@@ -101,27 +101,13 @@ export async function Ji18n(): Promise<Plugin> {
   }
 
   return {
-    name: 'Jellyfin_Vue:i18n',
-    enforce: 'pre',
-    config: () => {
-      return {
-        build: {
-          rollupOptions: {
-            plugins: [
-              Virtual({
-                'virtual:locales/date-fns': `export { ${dfnsExports.join(
-                  ', '
-                )} } from 'date-fns/locale'`,
-                'virtual:locales/vuetify': `export { ${vuetifyExports.join(
-                  ', '
-                )} } from 'vuetify/locale'`,
-                ...modules,
-                'virtual:i18next/resources': `export const resources = ${genObjectFromRaw(resources)}`
-              })
-            ]
-          }
-        }
-      };
-    }
+    'virtual:locales/date-fns': `export { ${dfnsExports.join(
+      ', '
+    )} } from 'date-fns/locale'`,
+    'virtual:locales/vuetify': `export { ${vuetifyExports.join(
+      ', '
+    )} } from 'vuetify/locale'`,
+    ...modules,
+    'virtual:i18next/resources': `export const resources = ${genObjectFromRaw(resources)}`
   };
 }