feat: all i18n support hmr

packages/dashboard/.storybook/preview.js

@@ -2,11 +2,11 @@
 import React from 'react'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material'
 import { MaskLightTheme, applyMaskColorVars, CustomSnackbarProvider, MaskDarkTheme } from '@masknet/theme'
-import { addSharedI18N } from '@masknet/shared'
+import { addSharedI18N, I18NextProviderHMR } from '@masknet/shared'
 import { fallbackLng } from '../../shared-base/src/i18n/fallbackRule'
 // import { withMatrix } from 'storybook-addon-matrix'
-import { addDashboardI18N } from '../src/locales'
-import { I18nextProvider, initReactI18next } from 'react-i18next'
+import { addDashboardI18N } from '../src/locales/languages'
+import { initReactI18next } from 'react-i18next'
 import i18n from 'i18next'
 i18n.init({
     keySeparator: false,
@@ -26,11 +26,11 @@ export const decorators = [
         <React.Suspense fallback="">
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={MaskDarkTheme}>
-                    <I18nextProvider i18n={i18n}>
+                    <I18NextProviderHMR i18n={i18n}>
                         <CustomSnackbarProvider>
                             <Story />
                         </CustomSnackbarProvider>
-                    </I18nextProvider>
+                    </I18NextProviderHMR>
                 </ThemeProvider>
             </StyledEngineProvider>
         </React.Suspense>

packages/dashboard/src/initialization/Dashboard.tsx

@@ -7,7 +7,7 @@ import {
     MaskDarkTheme,
     useSystemPreferencePalette,
 } from '@masknet/theme'
-import { ErrorBoundary } from '@masknet/shared'
+import { ErrorBoundary, I18NextProviderHMR } from '@masknet/shared'
 import {
     createInjectHooksRenderer,
     NetworkPluginID,
@@ -18,7 +18,6 @@ import {
 import { Web3Provider } from '@masknet/web3-shared-evm'
 
 import i18n from 'i18next'
-import { I18nextProvider } from 'react-i18next'
 
 import '../utils/kv-storage'
 
@@ -55,7 +54,7 @@ export default function DashboardRoot() {
     return (
         <Web3Provider value={Web3Context}>
             <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State}>
-                <I18nextProvider i18n={i18n}>
+                <I18NextProviderHMR i18n={i18n}>
                     <StyledEngineProvider injectFirst>
                         <ThemeProvider theme={theme}>
                             <PersonaContext.Provider>
@@ -71,7 +70,7 @@ export default function DashboardRoot() {
                             </PersonaContext.Provider>
                         </ThemeProvider>
                     </StyledEngineProvider>
-                </I18nextProvider>
+                </I18NextProviderHMR>
             </PluginsWeb3ContextProvider>
         </Web3Provider>
     )

packages/dashboard/src/locales/languages.ts

@@ -18,3 +18,16 @@ export const languages = {
 }
 import { createI18NBundle } from '@masknet/shared-base'
 export const addDashboardI18N = createI18NBundle('dashboard', languages)
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: ['dashboard', { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW }],
+                }),
+            ),
+    )
+}

packages/mask/shared-ui/locales/languages.ts

@@ -18,3 +18,16 @@ export const languages = {
 }
 import { createI18NBundle } from '@masknet/shared-base'
 export const addMaskI18N = createI18NBundle('mask', languages)
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: ['mask', { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW }],
+                }),
+            ),
+    )
+}

packages/mask/src/UIRoot.tsx

@@ -1,10 +1,9 @@
 import { Suspense } from 'react'
-import { I18nextProvider } from 'react-i18next'
 import { CustomSnackbarProvider } from '@masknet/theme'
 import { Web3Provider } from '@masknet/web3-shared-evm'
 import { CssBaseline, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material'
 import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra'
-import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared'
+import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef, I18NextProviderHMR } from '@masknet/shared'
 import i18nNextInstance from '../shared-ui/locales_legacy'
 import { Web3Context } from './web3/context'
 import { buildInfoMarkdown } from './extension/background-script/Jobs/PrintBuildFlags'
@@ -69,7 +68,7 @@ export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) {
                 <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State} children={jsx} />
             </Web3Provider>
         ),
-        (jsx) => <I18nextProvider i18n={i18nNextInstance} children={jsx} />,
+        (jsx) => <I18NextProviderHMR i18n={i18nNextInstance} children={jsx} />,
         kind === 'page' ? (jsx) => <StyledEngineProvider injectFirst children={jsx} /> : identity,
         (jsx) => (
             <MaskThemeProvider useTheme={useTheme} baseline={kind === 'page'}>

packages/mask/src/plugin-infra/I18NFieldRender.tsx

@@ -7,7 +7,6 @@ export interface PluginI18NFieldRenderProps {
 }
 export function PluginI18NFieldRender({ pluginID, field }: PluginI18NFieldRenderProps) {
     const [t] = useTranslation()
-    console.log(pluginID, field)
     if (!field) return null
     if (typeof field === 'object' && 'fallback' in field) {
         if (field.i18nKey) {

packages/mask/src/social-network-adaptor/twitter.com/locales/languages.ts

@@ -18,3 +18,16 @@ export const languages = {
 }
 import { createI18NBundle } from '@masknet/shared-base'
 export const addDO_NOT_USEI18N = createI18NBundle('DO_NOT_USE', languages)
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: ['DO_NOT_USE', { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW }],
+                }),
+            ),
+    )
+}

packages/mask/src/utils/i18n-next-ui.ts

@@ -1,8 +1,6 @@
 import type { i18n } from 'i18next'
 import { initReactI18next, useTranslation as useTranslation_, UseTranslationOptions } from 'react-i18next'
 import type { TOptions } from 'i18next'
-import { useEffect } from 'react'
-import { useUpdate } from 'react-use'
 import type en from '../../shared-ui/locales/en-US.json'
 import i18nNextInstance from '../../shared-ui/locales_legacy'
 import { languageSettings } from '../settings/settings'
@@ -26,15 +24,6 @@ export function useI18N(opt?: UseTranslationOptions): {
     i18n: i18n
     ready: boolean
 } {
-    if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const update = useUpdate()
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-            document.addEventListener('i18n-hmr', update)
-            return () => document.removeEventListener('i18n-hmr', update)
-        }, [])
-    }
     return useTranslation_('mask', opt)
 }
 

packages/plugins/FileService/src/locales/languages.ts

@@ -14,3 +14,19 @@ export const languages = {
     'zh-CN': zh_CN,
     zh: zh_TW,
 }
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.fileservice',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}

packages/plugins/Flow/src/locales/languages.ts

@@ -16,3 +16,19 @@ export const languages = {
     'zh-CN': zh_CN,
     zh: zh_TW,
 }
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.mask.flow',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}

packages/plugins/Wallet/src/locales/languages.ts

@@ -16,3 +16,19 @@ export const languages = {
     'zh-CN': zh_CN,
     zh: zh_TW,
 }
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.wallet',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}

packages/plugins/example/src/locales/languages.ts

@@ -8,3 +8,14 @@ export const languages = {
     en: en_US,
     zh: zh_TW,
 }
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(['./en-US.json', './zh-TW.json'], () =>
+        globalThis.dispatchEvent?.(
+            new CustomEvent('MASK_I18N_HMR', {
+                detail: ['io.mask.example', { en: en_US, zh: zh_TW }],
+            }),
+        ),
+    )
+}

packages/scripts/src/locale-kit-next/index.ts

@@ -43,6 +43,26 @@ export async function syncLanguages() {
                 code += `import { createI18NBundle } from '${target}'\n`
                 code += `export const add${upperFirst(namespace)}I18N = createI18NBundle('${namespace}', languages)\n`
             }
+
+            {
+                const allImportPath: string[] = []
+                const binding: string[] = []
+                for (const [language, familyName] of languages) {
+                    allImportPath.push(`./${language}.json`)
+                    binding.push(`'${familyName}': ${language.replace('-', '_')}`)
+                }
+                code += `// @ts-ignore
+                        if (import.meta.webpack) {
+                            // @ts-ignore
+                            import.meta.webpackHot.accept(
+                                ${JSON.stringify(allImportPath)},
+                                () => globalThis.dispatchEvent?.(new CustomEvent('MASK_I18N_HMR', {
+                                    detail: ['${namespace}', { ${binding.join(', ')} }]
+                                }))
+                            )
+                        }
+                        `
+            }
             code = await prettier(code)
             await writeFile(join(inputDir, 'languages.ts'), code, { encoding: 'utf8' })
         }

packages/shared-base/src/i18n/register-ns.ts

@@ -2,6 +2,19 @@ import type { i18n } from 'i18next'
 
 export function addI18NBundle(instance: i18n, namespace: string, langs: Record<string, object>) {
     if (!instance.addResourceBundle) throw new TypeError('Please call instance.init() first')
+
+    try {
+        if (process.env.NODE_ENV === 'development') {
+            globalThis.addEventListener('MASK_I18N_HMR', (e) => {
+                const [ns, langs] = (e as CustomEvent).detail
+                if (namespace !== ns) return
+
+                for (const lang in langs) {
+                    instance.addResourceBundle(lang, namespace, removeEmptyString(langs[lang]))
+                }
+            })
+        }
+    } catch {}
     for (const lang in langs) {
         instance.addResourceBundle(lang, namespace, removeEmptyString(langs[lang]))
     }

packages/shared/src/UI/components/I18NextProviderHMR.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import { I18nextProvider, type I18nextProviderProps } from 'react-i18next'
+
+export const I18NextProviderHMR =
+    process.env.NODE_ENV === 'development'
+        ? function I18NextProviderHMR({ i18n, defaultNS, children }: React.PropsWithChildren<I18nextProviderProps>) {
+              const [ns, setNS] = useState(defaultNS)
+
+              useEffect(() => {
+                  const f = () => setNS('HMR')
+                  globalThis.addEventListener('MASK_I18N_HMR', f)
+                  return () => globalThis.removeEventListener('MASK_I18N_HMR', f)
+              }, [])
+              // Force trigger a re-render to apply HMR
+              if (ns === 'HMR') defaultNS = Math.random() + ''
+
+              useEffect(() => {
+                  if (ns === 'HMR') setNS('')
+              }, [ns])
+              // deliberately call it as a function in order to skip a React component nesting level.
+              return I18nextProvider({
+                  i18n,
+                  defaultNS,
+                  children,
+              })
+          }
+        : I18nextProvider

packages/shared/src/UI/components/index.ts

@@ -9,3 +9,4 @@ export * from './SelectTokenChip'
 export * from './TokenAmountPanel'
 export * from './LoadingAnimation'
 export * from './MiniNetworkSelector'
+export * from './I18NextProviderHMR'

packages/shared/src/locales/languages.ts

@@ -18,3 +18,16 @@ export const languages = {
 }
 import { createI18NBundle } from '@masknet/shared-base'
 export const addSharedI18N = createI18NBundle('shared', languages)
+// @ts-ignore
+if (import.meta.webpack) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: ['shared', { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW }],
+                }),
+            ),
+    )
+}