fix(hmr): fix i18n hot module replace in browser mode

Author: dvcol

src/utils/i18n.utils.ts

@@ -10,7 +10,13 @@ export const useI18n = (...roots: string[]): ReturnType<typeof chromeUseI18n> =>
     const store = useI18nStore();
     const router = useRouterStore();
 
-    if (!store.locales?.[store.lang]) {
+    if (import.meta.hot) {
+      console.info('Listening to i18n HMR changes');
+      import.meta.hot.send('fetch:i18n');
+      import.meta.hot.on('update:i18n', (data: { lang: string; locale: Locale }[]) => {
+        data?.forEach(({ lang, locale }) => store.addLocale(locale, lang));
+      });
+    } else if (!store.locales?.[store.lang]) {
       fetch(new URL(`${router.baseUrl ?? './'}_locales/${store.lang}/messages.json`, new URL(import.meta.url).origin))
         .then(r => r.json())
         .then((locale: Locale) => store.addLocale(locale))

vite.config.ts

@@ -1,3 +1,4 @@
+import { readdir, readFile } from 'fs/promises';
 import { dirname, relative } from 'path';
 import { fileURLToPath, URL } from 'url';
 
@@ -33,6 +34,8 @@ const getInput = (hmr: boolean, _isWeb: boolean): InputOption => {
   return inputs;
 };
 
+const i18nRegex = /.*src\/i18n\/([a-zA-Z]+)\/.*\.json/;
+
 const getPlugins = (): PluginOption[] => [
   dtsPlugin({
     include: ['index.ts', 'web/**'],
@@ -43,6 +46,37 @@ const getPlugins = (): PluginOption[] => [
   }),
   viteVueCE(),
 
+  {
+    name: 'i18n-hmr',
+    configureServer: server => {
+      console.info('server start');
+      server.ws.on('fetch:i18n', async () => {
+        const dir = await readdir('dist/_locales');
+        const locales = dir.map(_lang =>
+          readFile(`dist/_locales/${_lang}/messages.json`, { encoding: 'utf-8' }).then(locale => ({ lang: _lang, locale: JSON.parse(locale) })),
+        );
+        server.ws.send({
+          type: 'custom',
+          event: 'update:i18n',
+          data: await Promise.all(locales),
+        });
+      });
+    },
+    handleHotUpdate: async ({ server, file, read }) => {
+      const lang = file.match(i18nRegex)?.[1];
+      if (lang) {
+        console.info('Emit new i18n', file);
+        const locale = JSON.parse(await read());
+        server.ws.send({
+          type: 'custom',
+          event: 'update:i18n',
+          data: [{ lang, locale }],
+        });
+      }
+      return [];
+    },
+  },
+
   // replace document query selector to inject naive-ui within shadow root instead of document head
   {
     name: 'chunk-transform',