setup i18next-hmr

packages/app/next.config.js

@@ -1,8 +1,9 @@
 import { listScopedPackages } from './src/utils/next.config.utils';
 
+import { I18NextHMRPlugin } from "i18next-hmr/plugin";
 import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 
-import { i18n } from './src/next-i18next.config';
+import { i18n, localePath } from './src/next-i18next.config';
 
 // define transpiled packages for '@growi/*'
 const scopedPackages = listScopedPackages(['@growi']);
@@ -45,13 +46,17 @@ const nextConfig = {
       });
     };
 
-    // configure plugins
     config.plugins.push(
       new WebpackManifestPlugin({
         fileName: 'custom-manifest.json',
       }),
     );
 
+    // setup i18next-hmr
+    if (!options.isServer && options.dev) {
+      config.plugins.push(new I18NextHMRPlugin({ localesDir: localePath }))
+    }
+
     return config;
   },
 

packages/app/package.json

@@ -196,6 +196,7 @@
     "file-loader": "^5.0.2",
     "handsontable": "=6.2.2",
     "hard-source-webpack-plugin": "^0.13.1",
+    "i18next-hmr": "^1.7.7",
     "imports-loader": "^0.8.0",
     "jquery-slimscroll": "^1.3.8",
     "jquery-ui": "^1.12.1",
@@ -231,7 +232,6 @@
     "react-dropzone": "^11.2.4",
     "react-frame-component": "^4.0.0",
     "react-hotkeys": "^2.0.0",
-    "react-i18next": "^11.1.0",
     "react-waypoint": "^10.1.0",
     "reactstrap": "^8.9.0",
     "replacestream": "^4.0.3",

packages/app/src/next-i18next.config.ts

@@ -5,24 +5,23 @@ import I18NextHttpBackend from 'i18next-http-backend';
 import I18NextLocalStorageBackend from 'i18next-localstorage-backend';
 
 const isServer = typeof window === 'undefined';
+const isDev = process.env.NODE_ENV === 'development';
 
-export const
-  i18n = {
-    defaultLocale: 'en_US',
-    locales: ['en_US', 'ja_JP', 'zh_CN'],
-  };
+export const i18n = {
+  defaultLocale: 'en_US',
+  locales: ['en_US', 'ja_JP', 'zh_CN'],
+};
 export const defaultNS = 'translation';
 export const localePath = path.resolve('./public/static/locales');
 
 export const serializeConfig = false;
 export const use = isServer ? [] : [I18nextChainedBackend];
-export const
-  backend = {
-    backends: isServer ? [] : [I18NextLocalStorageBackend, I18NextHttpBackend],
-    backendOptions: [
-      // options for i18next-localstorage-backend
-      { expirationTime: 60 * 60 * 1000 }, // 1 hour
-      // options for i18next-http-backend
-      { loadPath: '/static/locales/{{lng}}/{{ns}}.json', },
-    ],
-  };
+export const backend = {
+  backends: isServer ? [] : [I18NextLocalStorageBackend, I18NextHttpBackend],
+  backendOptions: [
+    // options for i18next-localstorage-backend
+    { expirationTime: isDev ? 0 : 24 * 60 * 60 * 1000 }, // 1 day in production
+    // options for i18next-http-backend
+    { loadPath: '/static/locales/{{lng}}/{{ns}}.json', },
+  ],
+};

packages/app/src/pages/_app.page.tsx

@@ -12,15 +12,20 @@ import '~/styles/theme/default.scss';
 // import InterceptorManager from '~/service/interceptor-manager';
 
 import { useGrowiVersion } from '../stores/context';
+import { useI18nextHMR } from '../services/i18next-hmr';
 
 import { CommonProps } from './commons';
 // import { useInterceptorManager } from '~/stores/interceptor';
 
+const isDev = process.env.NODE_ENV === 'development';
+
 type GrowiAppProps = AppProps & {
   pageProps: CommonProps;
 };
 
 function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
+  useI18nextHMR(isDev);
+
   const commonPageProps = pageProps as CommonProps;
   // useInterceptorManager(new InterceptorManager());
   useGrowiVersion(commonPageProps.growiVersion);

packages/app/src/services/i18next-hmr.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react"
+import { useTranslation } from "next-i18next"
+
+const isServer = typeof window === 'undefined';
+
+export const useI18nextHMR = (isDev: boolean) => {
+  const { i18n } = useTranslation()
+
+  if (!isDev) {
+    return;
+  }
+
+  if (isServer) {
+    import("i18next-hmr/server").then(({ applyServerHMR }) => {
+      applyServerHMR(i18n)
+    });
+  }
+
+  useEffect(() => {
+    import("i18next-hmr/client").then(({ applyClientHMR }) => {
+      applyClientHMR(i18n)
+    })
+  }, [i18n]);
+}

yarn.lock

@@ -1526,12 +1526,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.3.1":
-  version "7.4.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/runtime@^7.6.3":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
@@ -10688,12 +10682,6 @@ html-escaper@^2.0.2:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-parse-stringify2@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
-  dependencies:
-    void-elements "^2.0.1"
-
 html-parse-stringify@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
@@ -10843,13 +10831,6 @@ hyphenate-style-name@^1.0.2:
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
 
-i18next-browser-languagedetector@^6.1.4:
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.4.tgz#7b087c5edb6f6acd38ef54ede2160ab9cde0108f"
-  integrity sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg==
-  dependencies:
-    "@babel/runtime" "^7.14.6"
-
 i18next-chained-backend@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/i18next-chained-backend/-/i18next-chained-backend-3.0.2.tgz#8968c9e12412d24fd23eec109f0340386154384a"
@@ -10862,6 +10843,11 @@ i18next-fs-backend@^1.1.4:
   resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-1.1.4.tgz#d0e9b9ed2fa7a0f11002d82b9fa69c3c3d6482da"
   integrity sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA==
 
+i18next-hmr@^1.7.7:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/i18next-hmr/-/i18next-hmr-1.7.7.tgz#8288697ff5595d1201990d6d0de65c4a58e0ffd5"
+  integrity sha512-jZuRSyJ9IfZUGENlTnYlqsSk+Cv/rGo//udrz3lxu/yGCxPW9A8dHS1HSs6fJVXgdHtiV4CuNN5+uRqCFb+y3g==
+
 i18next-http-backend@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.4.1.tgz#d8d308e7d8c5b89988446d0b83f469361e051bc0"
@@ -16764,14 +16750,6 @@ react-hotkeys@^2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
-react-i18next@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.1.0.tgz#94e298e1a115100bebbaa0245921aab69529b956"
-  integrity sha512-FxHNBA6ptW7cygTpbIz5GAN9lrsB89xqgwpD3AzwSB4CDQsd+9i9/Je3Hc3VF6joAb1khFmCUO3ETJFLSrmuwg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    html-parse-stringify2 "2.0.1"
-
 react-i18next@^11.16.2:
   version "11.17.3"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.17.3.tgz#eff742f162f1a413056fb510e8b830d42c8c020d"
@@ -21004,10 +20982,6 @@ void-elements@3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
-void-elements@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"